/* /style.css */
/* Центрирование блока 'Избранное пусто' */
.no-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    width: 100%;
    text-align: center;
}

/* ========================= */
/* Breadcrumbs styles */
/* ========================= */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
    line-height: 1.2;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.breadcrumb-item {
    min-width: 0;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7c8497;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s ease;
    position: relative;
    transform: none;
}

.breadcrumb-item:hover {
    color: #ff6600;
    text-decoration: none;
    transform: none;
}

.breadcrumb-item.active {
    color: #475569;
    font-weight: 700;
}

.breadcrumb-separator {
    flex: 0 0 auto;
    margin: 0 9px;
    color: #c8ced8;
    font-weight: 500;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .breadcrumbs {
        background: transparent;
        border: 0;
    }

    .breadcrumb-item.active {
        color: #cbd5e1;
    }

    .breadcrumb-separator {
        color: #64748b;
    }
}

/* Mobile: single line with horizontal scroll */
@media (max-width: 768px) {
    .breadcrumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0;
        font-size: 13px;
        margin-bottom: 12px;
    }
    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }
    .breadcrumb-item,
    .breadcrumb-separator {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .breadcrumb-item.active {
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }
}

/* Critical catalog breadcrumbs: prevents old orange breadcrumb flash before catalog-page.css finishes loading. */
.catalog-breadcrumb-wrap{width:100%;max-width:100%;margin:0 0 8px;padding:0 6px;box-sizing:border-box}
.products-section .catalog-breadcrumbs{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;border-radius:0;background:transparent;font-size:14px;line-height:1.2}
.catalog-breadcrumb-back{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#111827;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.catalog-breadcrumb-back svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:2.05;stroke-linecap:round;stroke-linejoin:round}
.catalog-breadcrumb-trail{min-width:0;display:flex;align-items:center;gap:9px;overflow:hidden;white-space:nowrap}
.products-section .catalog-breadcrumbs .breadcrumb-item{flex:0 1 auto;min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;color:#7c8497;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:0;transform:none}
.products-section .catalog-breadcrumbs a.breadcrumb-item:hover{color:#ff6600;text-decoration:none;transform:none}
.products-section .catalog-breadcrumbs .breadcrumb-item.active{color:#475569;font-weight:700}
.products-section .catalog-breadcrumbs .breadcrumb-separator{flex:0 0 auto;margin:0;color:#c8ced8;font-weight:500}
@media (max-width:768px){
  .catalog-breadcrumb-wrap{overflow:hidden;padding:0 4px}
  .products-section .catalog-breadcrumbs{gap:8px;overflow:hidden}
  .catalog-breadcrumb-back{position:sticky;left:0;z-index:2;background:#f6f8fb}
  .catalog-breadcrumb-trail{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:12px}
  .catalog-breadcrumb-trail::-webkit-scrollbar{display:none}
.products-section .catalog-breadcrumbs .breadcrumb-item,
  .products-section .catalog-breadcrumbs .breadcrumb-item.active{flex:0 0 auto;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
}

/* Critical product breadcrumbs: keep single product pages styled before single-product.css finishes loading. */
body.single-product-page .sp-breadcrumbs{display:flex!important;align-items:center;gap:10px;width:100%;max-width:100%;min-height:36px;margin:0 0 16px!important;padding:0 4px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;line-height:1.2;box-sizing:border-box}
body.single-product-page .sp-breadcrumb-back{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#111827;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
body.single-product-page .sp-breadcrumb-back:hover,body.single-product-page .sp-breadcrumb-back:focus-visible{background:#eef2f7;color:#0f172a;outline:none}
body.single-product-page .sp-breadcrumb-back:active{transform:translateX(-1px)}
body.single-product-page .sp-breadcrumb-back svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:2.05;stroke-linecap:round;stroke-linejoin:round}
body.single-product-page .sp-breadcrumb-trail{min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding-top:0;overflow:hidden;white-space:nowrap;line-height:36px}
body.single-product-page .sp-breadcrumbs .breadcrumb-item{flex:0 1 auto;min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7c8497;text-decoration:none;font-size:14px;line-height:36px;font-weight:650;letter-spacing:0;transform:none}
body.single-product-page .sp-breadcrumbs a.breadcrumb-item:hover{color:#ff6600;text-decoration:none;transform:none}
body.single-product-page .sp-breadcrumbs .breadcrumb-item.active{flex:1 1 auto;max-width:360px;color:#64748b;font-weight:700}
body.single-product-page .sp-breadcrumbs .breadcrumb-separator{flex:0 0 auto;margin:0;color:#c8ced8;font-weight:500}
@media (max-width:768px){
  body.single-product-page .sp-breadcrumbs{gap:8px;overflow:hidden}
  body.single-product-page .sp-breadcrumb-back{position:sticky;left:0;z-index:2;background:#f6f8fb}
  body.single-product-page .sp-breadcrumb-trail{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:12px}
  body.single-product-page .sp-breadcrumb-trail::-webkit-scrollbar{display:none}
  body.single-product-page .sp-breadcrumbs .breadcrumb-item,
  body.single-product-page .sp-breadcrumbs .breadcrumb-item.active{flex:0 0 auto;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap}
}

/* ========================= */
/* Стили для вкладок профиля */
/* ========================= */
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}
/* =================================== */
/* ИСПРАВЛЕННЫЙ CSS БЕЗ КОНФЛИКТОВ */
/* =================================== */

/* Основные стили и переменные */
:root {
    --header-height: 70px;
    --primary-color: #dc2626;
    --primary-dark: #b91c1c;
    --background-dark: #18181b;
    --text-light: #ffffff;
    --text-gray: #9ca3af;
    --primary-red: #dc2626;
    --money-green: #16a34a;
    --gold: #fbbf24;
    --dark: #000000;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
    padding-top: var(--header-height);
    min-height: 100vh;
}
.categories-search-form { display: none !important; }

/* Homepage product search suggestions dropdown */
.homepage-product-search { margin: 18px 0 20px; }
.homepage-search-form { display: flex; gap: 10px; align-items: center; }
.homepage-search-form .filter-search-wrapper { flex: 1; max-width: 820px; }
.homepage-search-form .filter-search-field { width: 100%; box-sizing: border-box; }
.filter-search-wrapper { position: relative; }

/* Homepage-specific search input styling (distinct from products page) */
.homepage-search-form .filter-search-field,
.homepage-search-input {
    width: 100%;
    padding: 14px 16px 14px 52px; /* room for left icon */
    border-radius: 28px; /* pill shape */
    border: 1px solid rgba(14,20,29,0.06);
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    font-size: 15px;
    color: #0b1220;
    transition: box-shadow 180ms ease, border-color 180ms ease, transform 140ms ease;
    height: 48px;
}
.homepage-search-form .filter-search-field:focus,
.homepage-search-input:focus {
    outline: none;
    border-color: rgba(220,38,38,0.95);
    box-shadow: 0 12px 36px rgba(220,38,38,0.12);
    transform: translateY(-1px);
}
.homepage-search-form .filter-search-field::placeholder,
.homepage-search-input::placeholder { color: #9aa1ab; }

/* left icon inside input - distinct circular background */
.homepage-search-form .filter-search-icon,
.homepage-search-form .filter-search-wrapper .filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.homepage-search-form .filter-search-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(250,250,250,1);
    color: var(--primary-color);
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(2,6,23,0.04);
}

/* Submit button: gradient matching site primary */
.homepage-search-btn {
    margin-left: 0;
    padding: 12px 16px;
    border-radius: 28px;
    background: linear-gradient(90deg, #ff5a52 0%, #d81b2a 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 18px 40px rgba(216,27,42,0.12);
    cursor: pointer;
}
.homepage-search-btn i { color: #fff; font-size: 16px; }

/* Suggestions dropdown tuned to site look */
.homepage-search-suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eef2f6;
    box-shadow: 0 18px 40px rgba(2,6,23,0.08);
    z-index: 1500;
}
.homepage-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
}
.homepage-suggestion-item:hover { background: #fbfbfd; }

.homepage-suggestion-list { display:flex; flex-direction:column; }
.homepage-suggestion-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; }
.homepage-suggestion-item.active { background: #f3f6f8; }
.homepage-suggestion-item .hs-left {
    display:flex;
    align-items:center;
    gap:8px;
    flex: 1 1 auto; /* allow left side to take available space */
    min-width: 0; /* allow shortening for text-overflow to work inside flex */
}
.homepage-suggestion-item .hs-text { max-width: 100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.homepage-suggestion-item .hs-right { flex: 0 0 auto; }
.hs-remove-btn { background:transparent; border:none; color:#9ca3af; font-size:16px; padding:4px 8px; cursor:pointer; }
.hs-remove-btn:hover { color:#e11d48; }
.homepage-suggestions-footer { padding:8px; border-top:1px solid #f3f6f8; text-align:right; }
.hs-clear-all { background:transparent; border:none; color:#6b7280; cursor:pointer; font-size:13px; }
.hs-clear-all:hover { color:#111827; }

@media (max-width: 480px) {
    .homepage-search-form { gap: 8px; }
    .homepage-search-btn { padding: 8px 10px; }
    .filter-search-field { padding: 10px 12px 10px 40px; }
}

/* inline circular button inside the search wrapper */
.homepage-search-inline-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: linear-gradient(90deg, #ff5a52 0%, #d81b2a 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 28px rgba(216,27,42,0.12);
    cursor: pointer;
}
.homepage-search-inline-btn i { font-size: 14px; }

/* ensure input has right padding for the inline button */
.homepage-search-form .filter-search-field { padding-right: 56px; }
.homepage-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.homepage-suggestion-item:hover { background: #f8fafc; }

button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
}

/* =================================== */
/* ЕДИНЫЙ HEADER (убираем дубли) */
/* =================================== */

/* Убираем все дублирующие классы navbar */
.navbar {
    display: none !important; /* Полностью отключаем старую navbar */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    overflow: visible;
}

.header-container {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    overflow: visible;
}

/* Логотип */
.header-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--text-light);
}

.header-logo i {
    font-size: 1.75rem;
    color: var(--primary-color);
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.4));
    transition: transform 0.3s ease;
}

.header-logo:hover i {
    transform: scale(1.1) rotate(-5deg);
}

.header-logo span {
    font-size: 1.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--text-light), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Навигация */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--text-light);
}

.nav-link:hover::after {
    width: 100%;
}





/* Мобильное меню */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* =================================== */
/* МОБИЛЬНАЯ АДАПТИВНОСТЬ */
/* =================================== */

/* Скрываем простой мобильный nav по умолчанию (чтобы не показывался на десктопе) */
#mobileNavSimple { display: none; }

@media (max-width: 768px) {
    /* Убираем конфликтующие стили */

    .menu-toggle {
        display: block !important;
    }

    /* Простое мобильное меню (использует jQuery slideToggle) */
    #mobileNavSimple {
        display: none;
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid #e6e6e6;
        box-shadow: 0 6px 24px rgba(0,0,0,0.08);
        z-index: 999;
    }

    #mobileNavSimple .mobile-nav-links {
        display: flex;
        flex-direction: column;
    }

    #mobileNavSimple .mobile-nav-link {
        padding: 14px 16px;
        color: #1f2937;
        text-decoration: none;
        display: flex;
        gap: 10px;
        align-items: center;
        border-top: 1px solid #f3f4f6;
    }
    /* Emphasized CTA inside mobile menu */
    #mobileNavSimple .mobile-post-cta{
        font-weight: 800;
        color:#047857;
        background: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(16,185,129,0.12));
        border-radius: 12px;
        margin: 8px 12px;
        border:1px solid rgba(16,185,129,0.25);
    }
    #mobileNavSimple .mobile-post-cta i{ color:#047857; }
    #mobileNavSimple .mobile-post-cta:hover{ background: linear-gradient(180deg, rgba(16,185,129,0.14), rgba(16,185,129,0.18)); }

    body.no-scroll {
        overflow: hidden;
    }
    .header {
        position: fixed !important; /* Принудительно фиксированный */
        height: var(--header-height) !important; /* Принудительная высота */
        overflow: visible !important;
    }
    
    .header-container {
        padding: 0 1rem !important;
        height: var(--header-height) !important;
    }
    
    /* Убираем все старые стили мобильного меню */
    .desktop-only {
        display: none !important;
    }
    
    /* ensure hamburger stays visible on mobile (remove any accidental hiding) */
    .menu-toggle {
        display: block !important;
    }
    
    /* Убираем лишние отступы body на мобильных */
    body {
        padding-top: var(--header-height) !important;
        margin-top: 0 !important;
    }
    
    /* Скрываем имя пользователя на маленьких экранах */
    .user-name {
        display: none !important;
    }
    
    .user-btn {
        padding: 0.5rem !important;
        min-width: auto !important;
    }
}

@media (max-width: 480px) {
    .header-logo span {
        display: none;
    }
    
    .user-btn {
        padding: 0.5rem;
    }
}

/* Force-hide the simple mobile nav on desktop to avoid accidental visibility */
@media (min-width: 769px) {
    #mobileNavSimple {
        display: none !important;
    }
}

/* =================================== */
/* ОСТАЛЬНЫЕ СТИЛИ (без изменений) */
/* =================================== */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Главная секция */
.hero {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    text-align: center;
    padding: 120px 0 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="10" y="20" fill="rgba(22,163,74,0.1)" font-size="16">$</text><text x="70" y="50" fill="rgba(22,163,74,0.1)" font-size="12">₴</text><text x="30" y="80" fill="rgba(251,191,36,0.1)" font-size="14">💰</text></svg>');
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: fadeInUp 1s ease;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    color: #f0f8ff; /* Светло-голубой цвет */
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.4s both;
}

/* Кнопки */
.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(45deg, var(--primary-red), #b91c1c);
    color: white;
}

/* Views counter chip used on product page */
.sp-views .sp-chip {
    background: linear-gradient(90deg, #fff, #f8fafc);
    border-color: #e6e6e6;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid var(--money-green);
}

.btn-danger {
    background: linear-gradient(45deg, var(--primary-red), #b91c1c);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.4);
}

.btn-secondary:hover {
    background: var(--money-green);
    color: #000;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.4);
}

/* Новые стили для кнопок на главной странице */
.btn-hero-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    font-size: 1.1rem;
    padding: 15px 35px;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.btn-hero-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.btn-hero-primary:hover::before {
    left: 100%;
}

.btn-hero-primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #5b52f7, #8b5cf6);
}

.btn-hero-secondary {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    font-size: 1.1rem;
    padding: 15px 35px;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.btn-hero-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.btn-hero-secondary:hover::before {
    left: 100%;
}

.btn-hero-secondary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.4);
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

.btn-view-all {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 1.2rem;
    padding: 18px 40px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-view-all::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.btn-view-all:hover::before {
    left: 100%;
}

.btn-view-all:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #059669, #047857);
}

.view-all-wrapper {
    text-align: center;
    margin-top: 40px;
    padding: 20px 0;
}

/* Адаптивность для новых кнопок */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        font-size: 1rem;
        padding: 12px 28px;
        width: 250px;
        max-width: 90%;
    }
    
    .btn-view-all {
        font-size: 1.1rem;
        padding: 15px 35px;
        width: 200px;
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        font-size: 0.95rem;
        padding: 10px 25px;
        width: 220px;
    }
    
    .btn-view-all {
        font-size: 1rem;
        padding: 12px 30px;
        width: 180px;
        letter-spacing: 0.5px;
    }
}



.filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.search-input, .category-select, .condition-select {
    padding: 12px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.search-input {
    flex: 1;
    min-width: 250px;
}

.category-select, .condition-select {
    min-width: 150px;
}

.search-input:focus, 
.category-select:focus, 
.condition-select:focus {
    outline: none;
    border-color: var(--primary-red);
}


.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.2rem;
    }
}
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.8rem;
    }
}
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.6rem;
    }
}

/* Остальные стили остаются без изменений... */

/* Модальные окна */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    position: relative;
    animation: modalSlideIn 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
}

.close:hover {
    color: #333;
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Уведомления */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateX(0);
}

.notification-success {
    border-left: 4px solid var(--money-green);
}

.notification-info {
    border-left: 4px solid #3498db;
}

.notification i {
    color: var(--money-green);
    font-size: 1.2rem;
}
* {
  -webkit-tap-highlight-color: transparent;
}
/* ВАЖНО: Убираем ВСЕ дублирующие стили для мобильного меню */
/* Все что начинается с .mobile-menu, .hamburger и т.д. - УДАЛЕНО */

/* Pagination summary (shows "Показано с X по Y...") */
.pagination-summary {
    margin: 16px auto 24px; /* vertical spacing, centered horizontally */
    color: #1f2937; /* dark-gray matching site's text */
    font-size: 16px;
    text-align: center; /* center text under the pagination */
    width: 100%;
    max-width: 1200px; /* keep summary within main content width */
    box-sizing: border-box;
}

/* Ensure pagination wrapper keeps its centered box */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 8px; /* reduce gap between pagination and summary */
}

/* Load-more UI removed: server-side pagination is used instead */

.promo-section {
    padding: 40px 0;
}

.promo-card {
    background: rgba(255, 255, 255, 0.95);
    /* PERF: backdrop-filter убран — фон почти непрозрачен, эффекта нет */
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 10px; /* Уменьшили отступ для кнопки */
}

.promo-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.promo-viewport {
    position: relative;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 350px;
    width: 100%;
}

.promo-viewport.expanded {
    max-height: 2500px; /* Большое значение для плавной анимации */
    transition: max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-full {
    padding: 40px 40px 80px 40px; /* Добавили отступ снизу для кнопки */
    line-height: 1.7;
    color: #333;
    width: 100%;
}

.promo-full h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    padding-left: 20px;
}

.promo-full h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 30px;
    background: linear-gradient(180deg, #10b981, #059669);
    border-radius: 2px;
}

.promo-full h2:first-child {
    font-size: 32px;
    color: #1a1a1a;
    margin-bottom: 25px;
}

.promo-full h2:first-child::before {
    height: 40px;
    width: 5px;
}

.promo-full p {
    margin-bottom: 20px;
    font-size: 16px;
    text-align: justify;
    color: #555;
}

.promo-full p strong {
    color: #047857;
    font-weight: 600;
}

.promo-full ul {
    margin: 20px 0;
    padding-left: 30px;
}

.promo-full ul li {
    margin-bottom: 8px;
    color: #666;
    position: relative;
}

.promo-full ul li::marker {
    color: #10b981;
}

.promo-full ol {
    margin: 20px 0;
    padding-left: 30px;
    counter-reset: item;
}

.promo-full ol li {
    margin-bottom: 12px;
    color: #666;
    position: relative;
    padding-left: 10px;
}

.promo-full ol li::marker {
    color: #10b981;
    font-weight: 600;
}

.promo-full details {
    margin: 15px 0;
    padding: 15px;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 10px;
    border-left: 3px solid #10b981;
}

.promo-full details summary {
    cursor: pointer;
    font-weight: 600;
    color: #047857;
    padding: 5px 0;
    list-style: none;
    position: relative;
    padding-left: 25px;
}

.promo-full details summary::before {
    content: '▶';
    position: absolute;
    left: 0;
    transition: transform 0.3s ease;
}

.promo-full details[open] summary::before {
    transform: rotate(90deg);
}

.promo-full details summary::-webkit-details-marker {
    display: none;
}

.promo-full details p {
    margin-top: 10px;
    padding-left: 25px;
}

.promo-full hr {
    margin: 30px 0;
    border: none;
    border-top: 2px solid rgba(16, 185, 129, 0.2);
}

.promo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.95));
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.promo-overlay.hidden {
    opacity: 0;
}

.expand-btn {
    position: absolute;
    bottom: 15px; /* Уменьшили отступ снизу */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
    z-index: 10;
}

.expand-btn:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
}

.expand-btn:active {
    transform: translateX(-50%) translateY(0);
}

.expand-btn .icon {
    margin-left: 10px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.expand-btn.expanded .icon {
    transform: rotate(180deg);
}

.expand-btn .text {
    transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
    .promo-card {
        padding-bottom: 15px; /* Уменьшили отступ для кнопки на мобильных */
    }
    
    .promo-full {
        padding: 30px 25px 70px 25px; /* Добавили отступ снизу для кнопки на мобильных */
    }

    .promo-full h2 {
        font-size: 24px;
        padding-left: 15px;
    }

    .promo-full h2:first-child {
        font-size: 28px;
    }

    .promo-viewport {
        max-height: 300px; /* Уменьшили для мобильных */
    }
    
    .promo-viewport.expanded {
        max-height: 3500px; /* Увеличили для мобильных */
        transition: max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .expand-btn {
        padding: 12px 25px;
        font-size: 14px;
        bottom: 15px; /* Единый отступ снизу для всех экранов */
    }
}

/* Анимация появления контента */
.promo-full > * {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.promo-full > *:nth-child(1) { animation-delay: 0.1s; }
.promo-full > *:nth-child(2) { animation-delay: 0.2s; }
.promo-full > *:nth-child(3) { animation-delay: 0.3s; }
.promo-full > *:nth-child(4) { animation-delay: 0.4s; }
.promo-full > *:nth-child(5) { animation-delay: 0.5s; }
.promo-full > *:nth-child(6) { animation-delay: 0.6s; }
.promo-full > *:nth-child(7) { animation-delay: 0.7s; }
.promo-full > *:nth-child(8) { animation-delay: 0.8s; }
.promo-full > *:nth-child(9) { animation-delay: 0.9s; }
.promo-full > *:nth-child(10) { animation-delay: 1.0s; }
.promo-full > *:nth-child(11) { animation-delay: 1.1s; }
.promo-full > *:nth-child(12) { animation-delay: 1.2s; }
.promo-full > *:nth-child(13) { animation-delay: 1.3s; }
.promo-full > *:nth-child(14) { animation-delay: 1.4s; }
.promo-full > *:nth-child(15) { animation-delay: 1.5s; }
.promo-full > *:nth-child(16) { animation-delay: 1.6s; }
.promo-full > *:nth-child(17) { animation-delay: 1.7s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Categories tile grid: 10 columns on desktop, responsive fewer on smaller screens */
.categories-grid-wrapper { margin: 18px 0 6px; }
.categories-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
    /* default: let tiles fill their grid cell so layout spans full width */
    align-items: stretch;
    justify-items: stretch;
}

/* When user filters results, avoid stretching remaining tiles to fill wide grid cells */
.categories-grid.is-filtered {
    align-items: start;
    justify-items: start;
}

/* When filtered, keep tiles visually uniform despite varying label lengths */
.categories-grid.is-filtered .cat-tile {
    /* fixed tile box so remaining items form a tidy row */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px; /* tweak this value if you want taller/shorter tiles */
    min-width: 100px;
    box-sizing: border-box;
}
.categories-grid.is-filtered .cat-tile-btn {
    /* let the button content flow naturally inside the fixed tile */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
}
.categories-grid.is-filtered .cat-tile-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 13px;
}
.cat-tile {
    position: relative;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    overflow: hidden;
    text-align: center;
}
.cat-tile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    gap: 8px;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    position: relative; /* ensure z-index works for underline */
    z-index: 2;
}
.cat-tile-icon { font-size: 28px; line-height:1; }
.cat-tile img, .cat-tile-icon img { border-radius: 0 !important; }
.cat-tile-name { display: block; font-size: 12px; color: #111827; }
.cat-tile-link { position: absolute; inset: 0; text-indent: -9999px; overflow: hidden; z-index: 1; }

/* Modal */
.cat-modal { display: none; position: fixed; inset: 0; z-index: 1200; }
.cat-modal[aria-hidden="false"] { display: block; }
.cat-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.cat-modal-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 520px; max-width: calc(100% - 32px); background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(2,6,23,0.2); overflow: hidden; }
.cat-modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #f3f4f6; }
.cat-modal-title { margin:0; font-size:16px; font-weight:700; }
.cat-modal-close { background:none; border:none; font-size:22px; padding:6px 8px; cursor:pointer; }
.cat-modal-body { padding:12px 16px; max-height:60vh; overflow:auto; }
.cat-modal-list { display:flex; flex-direction:column; gap:8px; }
.cat-modal-link { padding:8px 10px; border-radius:6px; text-decoration:none; color:#111827; background:#f8fafc; display:block; }
.cat-modal-link:hover,
.cat-modal-link:focus {
    text-decoration: underline;
    text-decoration-color: #000;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    outline: none;
}
.cat-modal-footer { padding:12px 16px; border-top:1px solid #f3f4f6; text-align:right; }

/* responsive breakpoints */
@media (max-width: 1200px) { .categories-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 992px)  { .categories-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 768px)  { .categories-grid { grid-template-columns: repeat(4, 1fr); } .cat-tile-name{ font-size:13px; } }
@media (max-width: 480px)  {
    /* Horizontal paged grid: each column is 2 tiles (rows), column width = 50% so viewport shows 2x2 block */
    .categories-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc(50% - 8px); /* each column takes half viewport minus gap */
        grid-template-rows: repeat(2, auto); /* two rows per column */
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* native momentum scrolling */
    padding: 6px;
    scroll-snap-type: none; /* disable snap so small drags don't snap back */
    scroll-behavior: smooth;
    touch-action: auto; /* allow vertical page scrolling when user drags on categories */
        align-items: start;
    }
    .cat-tile {
        width: 100%;
        min-width: auto;
        scroll-snap-align: start;
    }
    .cat-modal-panel{ width:95%; }
}

/* Small tablets / large phones: show categories as horizontal paged 2x2 blocks (two rows per column) */
@media (min-width: 481px) and (max-width: 600px) {
    .categories-grid {
        display: grid;
        grid-auto-flow: column;
        /* each column shows two tiles (rows); column width ~50% of viewport minus gap */
        grid-auto-columns: calc(50% - 10px);
        grid-template-rows: repeat(2, auto);
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 6px;
        scroll-snap-type: none;
        scroll-behavior: smooth;
        touch-action: auto; /* allow vertical page scroll while swiping */
        align-items: start;
    }
    .categories-grid .cat-tile {
        width: 100%;
        min-width: auto;
        scroll-snap-align: start;
    }
    .categories-grid::-webkit-scrollbar { height: 8px; }
    .categories-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
    .categories-grid { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.12) transparent; }
}

/* Force visible horizontal scrollbar for categories on mobile to improve UX */
@media (max-width: 480px) {
    .categories-grid {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
    /* Chrome/Safari */
    .categories-grid::-webkit-scrollbar { height: 8px; }
    .categories-grid::-webkit-scrollbar-track { background: transparent; }
    .categories-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
    /* Firefox */
    .categories-grid { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }
}

/* small accessibility niceties */
.cat-tile-btn:focus { outline: 3px solid rgba(99,102,241,0.12); }
.cat-modal-link:focus { outline: 3px solid rgba(99,102,241,0.12); }
/* Hidden child links for SEO — present in DOM but invisible to users */
.cat-children-hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Homepage video stories */
.video-stories-section {
    padding: 8px 0 18px;
    background: #f8f9fa;
}

.video-stories-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.video-stories-title {
    margin-bottom: 10px;
}

.video-stories-shell {
    position: relative;
}

.video-stories-scroll-btn {
    position: absolute;
    z-index: 2;
    top: 38px;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 50%;
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: #fff;
    color: #111827;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.video-stories-scroll-prev {
    left: 0;
    transform: translate(-50%, 0);
}

.video-stories-scroll-next {
    right: 0;
    transform: translate(50%, 0);
}

.video-stories-scroll-btn:hover,
.video-stories-scroll-btn:focus-visible {
    color: #dc2626;
    box-shadow: 0 14px 30px rgba(220, 38, 38, 0.14);
}

.video-stories-scroll-prev:hover,
.video-stories-scroll-prev:focus-visible {
    transform: translate(-50%, -1px);
}

.video-stories-scroll-next:hover,
.video-stories-scroll-next:focus-visible {
    transform: translate(50%, -1px);
}

.video-stories-scroll-btn.is-hidden {
    display: none;
}

.video-stories-root.is-loading .video-stories-scroll-next {
    opacity: 0.62;
    pointer-events: none;
}

.video-stories-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(96px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(17, 24, 39, 0.18) transparent;
}

.seller-video-stories .video-stories-strip,
.imported-seller-stories .video-stories-strip {
    grid-auto-columns: minmax(104px, 140px);
    justify-content: start;
}

.video-stories-strip::-webkit-scrollbar {
    height: 8px;
}

.video-stories-strip::-webkit-scrollbar-track {
    background: transparent;
}

.video-stories-strip::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.16);
    border-radius: 999px;
}

.video-story-chip {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #111827;
    cursor: pointer;
    text-align: center;
    padding: 0;
    scroll-snap-align: start;
}

.video-story-ring {
    position: relative;
    width: min(108px, 100%);
    aspect-ratio: 1;
    height: auto;
    margin: 0 auto 7px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 220deg, #dc2626, #f97316, #facc15, #dc2626);
    padding: 3px;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.16);
}

.video-story-ring img,
.video-story-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #111827;
    object-fit: cover;
    display: grid;
    place-items: center;
    color: #fff;
}

.video-story-play {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #dc2626;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    padding-left: 1px;
}

.video-story-chip-age-locked .video-story-ring img,
.video-story-chip-age-locked .video-story-fallback {
    filter: blur(7px) saturate(0.45) brightness(0.58);
    transform: scale(1.08);
}

.video-story-age-badge {
    position: absolute;
    left: 6px;
    top: 6px;
    min-width: 34px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    border: 2px solid #fff;
    background: #111827;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.video-story-label {
    display: block;
    height: 36px;
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;
    color: #374151;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-story-chip:hover .video-story-label,
.video-story-chip:focus-visible .video-story-label {
    color: #111827;
}

.video-story-chip:focus-visible {
    outline: 3px solid rgba(220, 38, 38, 0.22);
    outline-offset: 4px;
    border-radius: 12px;
}

.video-stories-viewer {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.video-stories-viewer[aria-hidden="false"] {
    display: flex;
}

body.video-stories-open #backToTopBtn,
body.video-stories-open #mobileAddBtn {
    display: none !important;
}

.video-stories-viewer-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.10), transparent 34%),
        rgba(3, 7, 18, 0.88);
    backdrop-filter: blur(10px);
}

.video-stories-panel {
    position: relative;
    width: min(420px, calc(100vw - 28px));
    height: min(760px, calc(100vh - 36px));
    overflow: hidden;
    border-radius: 18px;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
}

.video-stories-panel::before,
.video-stories-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.video-stories-panel::before {
    z-index: 2;
    top: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0));
}

.video-stories-panel::after {
    z-index: 2;
    bottom: 0;
    height: 46%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66) 48%, rgba(0, 0, 0, 0.94));
}

.video-stories-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent; /* blurred .video-stories-bg shows through the letterbox */
    opacity: 1;
    transform: translateZ(0);
    will-change: opacity;
}

.video-stories-swipe-preview {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: none;
    will-change: opacity;
}

.video-stories-swipe-preview.is-visible {
    visibility: visible;
}

.video-stories-swipe-preview:not(.is-ready) {
    opacity: 0 !important;
}

.video-stories-viewer.is-swipe-previewing .video-stories-video:not(.is-preparing) {
    transition: none;
    transform: none !important;
}

.video-stories-video.is-preparing {
    opacity: 0;
    visibility: hidden;
    animation: none !important;
    transform: translateZ(0);
}

.video-stories-viewer.is-story-loading .video-stories-panel::before {
    height: 100%;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.92));
}

.video-stories-viewer.is-story-loading .video-stories-video {
    opacity: 0;
    visibility: hidden;
}

.video-stories-viewer.is-story-loading.has-swipe-preview .video-stories-panel::before {
    height: 150px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0));
}

.video-stories-video.is-entering-next {
    animation: videoStoryEnterNext 140ms ease both;
}

.video-stories-video.is-entering-prev {
    animation: videoStoryEnterPrev 140ms ease both;
}

.video-stories-video.is-entering-soft {
    animation: videoStoryEnterSoft 300ms ease both;
}

.video-stories-topbar {
    position: absolute;
    z-index: 8;
    top: 14px;
    left: 14px;
    right: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.video-stories-progress {
    position: static;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(8, 8, 10, 0.28);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.16);
}

.video-stories-progress span {
    height: 3px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.26);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

.video-stories-progress span.is-viewed,
.video-stories-progress span.is-active {
    background: #fff;
}

.video-stories-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.video-stories-close,
.video-stories-nav {
    position: absolute;
    z-index: 12;
    display: grid;
    place-items: center;
    border: 0;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.video-stories-close {
    position: static;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(12, 12, 14, 0.50);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 26px rgba(0, 0, 0, 0.22);
    flex: 0 0 42px;
}

.video-stories-volume {
    position: static;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 11px 0 0;
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.46);
    color: #fff;
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 26px rgba(0, 0, 0, 0.20);
    flex: 0 0 auto;
}

.video-stories-volume-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
}

.video-stories-volume-slider {
    width: 86px;
    height: 18px;
    accent-color: #fff;
    cursor: pointer;
}

.video-stories-nav {
    top: 50%;
    width: 44px;
    height: 80px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.30);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: background 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.video-stories-nav:hover,
.video-stories-nav:focus-visible {
    background: rgba(12, 12, 14, 0.54);
    transform: translateY(-50%) scale(1.02);
}

.video-stories-prev {
    left: 14px;
}

.video-stories-next {
    right: 14px;
}

.video-stories-timeline {
    --story-progress: 0%;
    position: absolute;
    z-index: 7;
    left: 22px;
    right: 22px;
    bottom: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.video-stories-timeline-track {
    position: relative;
    height: 22px;
    display: flex;
    align-items: center;
}

.video-stories-timeline-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.26);
}

.video-stories-timeline-fill {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--story-progress);
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, #ff6a00, #facc15);
    transform: translateY(-50%);
    box-shadow: 0 0 18px rgba(255, 106, 0, 0.34);
}

.video-stories-timeline-handle {
    position: absolute;
    left: var(--story-progress);
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0.86);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.36);
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.video-stories-timeline.is-ready:hover .video-stories-timeline-handle,
.video-stories-timeline.is-seeking .video-stories-timeline-handle,
.video-stories-timeline:focus-visible .video-stories-timeline-handle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.video-stories-timeline-time {
    min-width: 72px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.46);
}

.video-stories-info {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 118px 24px 42px;
    background: transparent;
    color: #fff;
}

.video-stories-meta {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.84);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.video-stories-product-title {
    margin: 10px 0 6px;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 800;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-stories-price {
    min-height: 28px;
    margin-bottom: 18px;
    font-size: 20px;
    font-weight: 800;
    color: #facc15;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
}

.video-stories-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

.video-stories-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    max-width: 100%;
    padding: 13px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #eef2ff);
    color: #111827;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.video-stories-volume-inline {
    display: none;
    flex: 0 0 auto;
}

.video-stories-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-stories-link:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.video-stories-meta.is-entering,
.video-stories-product-title.is-entering,
.video-stories-price.is-entering,
.video-stories-link.is-entering {
    animation: videoStoryTextEnter 420ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
    animation-delay: var(--story-enter-delay, 0ms);
}

@keyframes videoStoryEnterNext {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes videoStoryEnterPrev {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes videoStoryEnterSoft {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes videoStoryTextEnter {
    from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(4px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

.homepage-categories-title {
    display: none !important;
}

@media (max-width: 768px) {
    .video-stories-scroll-btn {
        display: none !important;
    }

    .video-stories-strip {
        grid-auto-columns: 78px;
        gap: 11px;
    }

    .seller-video-stories .video-stories-strip,
    .imported-seller-stories .video-stories-strip {
        grid-auto-columns: 76px;
        gap: 10px;
        justify-content: flex-start;
    }

    .video-story-chip {
        width: 78px;
        min-width: 78px;
    }

    .seller-video-stories .video-story-chip,
    .imported-seller-stories .video-story-chip {
        width: 76px;
        min-width: 76px;
    }

    .video-story-ring {
        width: 68px;
        height: 68px;
    }

    .seller-video-stories .video-story-ring,
    .imported-seller-stories .video-story-ring {
        width: 66px;
        height: 66px;
        margin-bottom: 6px;
    }

    .video-story-label {
        font-size: 11px;
        line-height: 16px;
        height: 32px;
    }

    .seller-video-stories .video-story-label,
    .imported-seller-stories .video-story-label {
        line-height: 15px;
        height: 30px;
    }

    .video-stories-viewer {
        padding: env(safe-area-inset-top, 0px) 0 0;
    }

    .video-stories-panel {
        width: 100vw;
        height: calc(100vh - env(safe-area-inset-top, 0px));
        height: calc(100dvh - env(safe-area-inset-top, 0px));
        border-radius: 0;
        border: 0;
    }

    .video-stories-topbar {
        top: calc(12px + env(safe-area-inset-top, 0px));
        left: 16px;
        right: 14px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .video-stories-progress {
        padding: 7px 9px;
        gap: 5px;
    }

    .video-stories-close {
        width: 42px;
        height: 42px;
        z-index: 8;
    }

    .video-stories-volume {
        height: 40px;
        padding-right: 10px;
    }

    .video-stories-topbar .video-stories-volume {
        display: none;
    }

    .video-stories-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        width: min(100%, 440px);
    }

    .video-stories-volume-inline {
        display: flex;
        height: 54px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #111827;
        backdrop-filter: none;
        box-shadow: none;
    }

    .video-stories-volume-btn {
        width: 40px;
        height: 40px;
    }

    .video-stories-volume-inline .video-stories-volume-btn {
        width: 46px;
        height: 46px;
        color: #111827;
        font-size: 16px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    }

    .video-stories-volume-slider {
        width: 70px;
    }

    .video-stories-volume-inline .video-stories-volume-slider {
        width: 54px;
        accent-color: #ff6a00;
        opacity: 0.76;
    }

    @media (max-width: 420px) {
        .video-stories-topbar {
            grid-template-columns: 1fr;
            align-items: stretch;
        }

        .video-stories-tools {
            justify-self: end;
        }

        .video-stories-progress {
            order: 1;
        }

        .video-stories-tools {
            order: 2;
            margin-top: 2px;
        }
    }

    .video-stories-nav {
        width: 48px;
        height: 72px;
        opacity: 0.82;
    }

    .video-stories-prev {
        left: 12px;
    }

    .video-stories-next {
        right: 12px;
    }

    .video-stories-info {
        padding: 112px 24px calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .video-stories-timeline {
        left: 16px;
        right: 16px;
        bottom: calc(38px + env(safe-area-inset-bottom, 0px));
        gap: 9px;
    }

    .video-stories-timeline-track::before,
    .video-stories-timeline-fill {
        height: 5px;
    }

    .video-stories-timeline-handle {
        width: 15px;
        height: 15px;
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.9);
    }

    .video-stories-timeline-time {
        min-width: 66px;
        font-size: 10px;
    }

    .video-stories-product-title {
        font-size: 24px;
    }

    .video-stories-link {
        min-height: 56px;
        border-radius: 14px;
        width: 100%;
        max-width: none;
        padding: 13px 14px;
        font-size: 14px;
    }
}

/* Hero section styles for main page H1 */
.hero-section {
    padding: 40px 0 20px;
    background: #fff;
    text-align: center;
}

.hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .hero-section {
        padding: 30px 0 15px;
    }
    
    .hero-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 25px 0 10px;
    }
    
    .hero-title {
        font-size: 1.4rem;
        line-height: 1.3;
    }
}


/* Blurred backdrop behind story videos so non-portrait (e.g. 720x480 landscape) videos
   fill the 9:16 panel instead of sitting in black bars (2026-06-16). */
.video-stories-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(34px) brightness(.5);transform:scale(1.2);pointer-events:none;}

/* /css/header.css */
/* ===== HEADER STYLES ===== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.header.scrolled {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    position: relative; /* needed for absolute-positioning mobile controls */
}

/* ===== LOGO ===== */
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #2d3748;
    font-size: 24px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.header-logo:hover {
    transform: translateY(-2px);
}

.header-logo img {
    height: 50px;
    width: auto;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .header-logo img {
        height: 60px;
    }
}

.header-logo:hover img {
    transform: scale(1.05);
}

.header-logo i {
    font-size: 32px;
    background: linear-gradient(135deg, #ff6600, #e65c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== NAVIGATION ===== */
.header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* ===== LANGUAGE SWITCHER (DESKTOP) ===== */
.header-lang {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 18px;
    margin-right: 8px;
}

.header-lang .lang-link {
    color: #2d3748;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(99,102,241,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(248,250,252,0.85));
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.header-lang .lang-link:hover {
    transform: translateY(-2px);
    color: #4c51bf;
    box-shadow: 0 12px 30px rgba(76,81,191,0.08);
    background: rgba(102,126,234,0.06);
}

.header-lang .lang-flag {
    width: 18px;
    height: 12px;
    display: inline-block;
    background-size: cover;
    border-radius: 2px;
}

.nav-link {
    text-decoration: none;
    color: #4a5568;
    font-weight: 500;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: #ff6600;
    background: rgba(255, 102, 0, 0.1);
    transform: translateY(-2px);
}


.header-nav .vm-fav-navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-nav .vm-fav-navlink .fa-heart {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 0.92em;
    line-height: 1;
    color: currentColor;
    transform: translateY(1px);
}

.header-nav .vm-fav-navlink:hover .fa-heart {
    font-weight: 400;
}

/* Standalone CTA button (no inheritance from .nav-link) */
.post-cta{
    text-decoration:none;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(135deg, #10b981, #059669);
    color:#fff;
    font-weight:800;
    font-size:16px;
    padding:10px 16px;
    border-radius:14px;
    border:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow: 0 10px 24px rgba(16,185,129,0.25);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.post-cta i{ color:#fff; font-size:18px; }
.post-cta:hover{ color:#fff; background: linear-gradient(135deg, #059669, #047857); transform: translateY(-3px); box-shadow:0 16px 36px rgba(16,185,129,0.35); }
.post-cta:focus{ outline:2px solid rgba(16,185,129,0.6); outline-offset:2px; }
@media (max-width:768px){ .post-cta{ padding:9px 12px; font-weight:700; font-size:15px; } }

/* ===== AUTH SECTION ===== */
/* ===== AUTH SECTION ===== */
.header-auth {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px; /* Предотвращение моргания */
}

.auth-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-width: 110px;
    justify-content: center;
}

.auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.auth-btn:hover::before {
    left: 100%;
}

.auth-btn-outline {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    color: #6366f1;
    border: 2px solid #6366f1;
    /* PERF: backdrop-filter убран — кнопка лежит на сплошном белом хедере, блюрить нечего */
}

.auth-btn-outline:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
    border-color: transparent;
}

.auth-btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.auth-btn-primary:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
}

/* Анимация появления кнопок */
.auth-section {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Иконки в кнопках */
.auth-btn i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.auth-btn:hover i {
    transform: scale(1.1);
}

/* ===== USER MENU ===== */
.user-menu {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 102, 0, 0.1);
    border: 2px solid #ff6600;
    border-radius: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #2d3748;
}

.user-btn:hover {
    background: #ff6600;
    color: white;
    transform: translateY(-2px);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6600, #e65c00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    overflow: hidden;
}

.user-name {
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== DROPDOWN MENU ===== */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    z-index: 1001;
}

.dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: white;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
}

.dropdown-menu-items {
    padding: 12px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #4a5568;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.dropdown-item:hover::before {
    left: 100%;
}

.dropdown-item:hover {
    background: rgba(255, 102, 0, 0.1);
    color: #ff6600;
    transform: translateX(4px);
}

.dropdown-item.admin:hover {
    background: rgba(255, 102, 0, 0.1);
    color: #ff6600;
}

.dropdown-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 102, 0, 0.1);
    margin: 8px 0;
}

/* ===== MOBILE MENU TOGGLE ===== */
.menu-toggle {
    display: none;
    background: transparent;
    border: 2px solid #ff6600;
    border-radius: 12px;
    padding: 12px;
    color: #ff6600;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background: #ff6600;
    color: white;
}



/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .header-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .auth-btn span {
        display: none;
    }
    
    .auth-btn {
        padding: 8px 12px;
        min-width: 44px;
        border-radius: 20px;
    }
    
    .auth-section {
        gap: 8px;
    }

    .user-name {
        display: none;
    }

    .header-container {
        padding: 0 16px;
    }

    /* Keep header language switcher visible but compact on mobile
       so it doesn't push the header wider than the viewport. */
    /* Make the language switcher independent from the flow so it won't
       push or widen the header on small screens. Use absolute placement
       near the menu toggle and increase touch target size. */
    /* Place the language switcher near the profile/menu on the right so it
       does not collide with the logo on the left. */
    .header-lang {
        position: absolute;
        top: 50%;
        right: 145px;
        left: auto;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        z-index: 1002;
        pointer-events: auto;
    }

    /* Larger, touch-friendly pill for mobile */
    .header-lang .lang-link {
        color: #111827;
        font-weight: 700;
        padding: 10px 14px;
        border-radius: 14px;
        text-decoration: none;
        border: 1px solid rgba(102,126,234,0.12);
        background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.95));
        box-shadow: 0 8px 22px rgba(16,24,40,0.06);
        font-size: 15px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 56px;
        max-width: 140px; /* allow longer labels but keep within header */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .header-lang .lang-link:hover {
        transform: translateY(-2px);
        color: #4c51bf;
        background: rgba(102,126,234,0.06);
        box-shadow: 0 12px 30px rgba(76,81,191,0.06);
    }

    .header-lang .lang-link:hover {
        background: rgba(102,126,234,0.07);
        color: #4c51bf;
        transform: translateY(-1px);
    }

    /* Very small screens - keep the language switcher near the right/profile area */
    @media (max-width: 420px) {
        .header-lang { right: 145px; left: auto; }
        .header-lang .lang-link { max-width: 88px; font-size: 13px; padding: 8px 10px; }
    }

    /* Hide desktop language dropdown on small screens - we'll use mobileNavSimple instead */
    .desktop-lang { display: none; }
    /* Ensure the desktop language button is fully hidden on mobile */
    .lang-btn { display: none !important; }

    /* Mobile language chooser inside mobileNavSimple: show static links */
    .mobile-lang { display: block; width: 100%; }
    .mobile-lang .mobile-nav-link, .mobile-lang .mobile-lang-static { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; padding: 8px 12px; }
    .mobile-lang .mobile-lang-links { margin-left: 8px; display: flex; gap: 8px; align-items: center; }
    .mobile-lang .mobile-lang-option { display: inline-block; padding: 6px 8px; color: #374151; text-decoration: none; border-radius: 6px; line-height: 1; font-size: 14px; }
    .mobile-lang .mobile-lang-option:hover { background: rgba(102,126,234,0.06); color: #4c51bf; }
    .mobile-lang .lang-sep {
        margin: 0 8px;
        color: #9ca3af;
        display: inline-flex;
        align-items: center;
        line-height: 1;
        font-size: 14px;
    }
    .mobile-lang .fa-globe { color: #374151; }

    /* Ensure header auth/profile area is anchored to the right so it doesn't overlap
       and leaves consistent space for the language switcher */
    .header-auth {
        position: absolute;
        right: 12px;
        top: 0;
        bottom: 0;
        transform: none;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 1003;
    }

    .dropdown-menu {
        right: -8px;
    }
}

@media (max-width: 480px) {
    .header-logo span {
        display: none;
    }

    .auth-btn {
        padding: 12px;
    }

    .user-btn {
        padding: 8px 12px;
    }

    .header-container {
        height: 70px;
    }

    .dropdown-menu {
        min-width: 200px;
        right: -16px;
    }

    .mobile-nav {
        top: 70px;
    }
}

@media (max-width: 360px) {
    .header-auth {
        gap: 8px;
    }

    .auth-btn {
        padding: 10px;
        font-size: 12px;
    }

    .user-btn {
        padding: 6px 10px;
        gap: 8px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .mobile-user-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .mobile-user-name {
        font-size: 16px;
    }
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ===== */
.notification-container {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

.notification-container .notification {
    position: relative;
    top: auto;
    right: auto;
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #ff6600;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    margin-bottom: 12px;
    animation: slideInRight 0.3s ease;
    pointer-events: auto;
    transform: none;
    max-width: calc(100vw - 32px);
    overflow-wrap: anywhere;
}

.notification-container .notification-success {
    border-left-color: #10b981;
    color: #065f46;
}

.notification-container .notification-error {
    border-left-color: #ef4444;
    color: #991b1b;
}

.notification-container .notification-warning {
    border-left-color: #f59e0b;
    color: #92400e;
}

.notification-container .notification span {
    min-width: 0;
    line-height: 1.35;
}

.notification-container .notification-close {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 4px;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ===== УЛУЧШЕНИЯ ДЛЯ ACCESSIBILITY ===== */
.header-nav .nav-link:focus,
.auth-btn:focus,
.user-btn:focus,
.dropdown-item:focus {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

.user-btn[aria-expanded="true"] .fas.fa-chevron-down {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Non-semantic heading styles (used instead of H1/H2/H3) ===== */
.modal-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.footer-heading {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.section-title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 2rem 0;
    text-align: center;
}

.view-all-wrapper {
    text-align: center;
    margin-top: 14px;
    margin-bottom: -18px;
}

/* Categories grid (moved from inline in vapemarket.php) */
.categories-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:16px;
    margin:18px 0;
    align-items:start;
}

/* removed dead .cat-card design block (markup uses .cat-tile) */

.cat-children{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.cat-child-link{text-decoration:none;color:#374151;font-size:13px;padding:6px 10px;border-radius:999px;background:#f3f4f6;border:1px solid #eef2f7}
.cat-child-link:hover{background:#eef2ff;color:#374151}

@media(max-width:900px){
    .categories-grid{grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));}
    .categories-grid .cat-card:first-child{grid-column:1 / -1}
}

@media(max-width:600px){
    .categories-grid{overflow:auto;padding-bottom:6px;grid-auto-flow:column;grid-auto-columns: minmax(140px, 1fr)}
    .cat-card{min-width:140px}
}

.cat-children{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.cat-child-link{text-decoration:none;color:#4a5568;font-size:13px;padding:4px 8px;border-radius:8px;background:#f8fafc;border:1px solid #eef2f7}
.cat-child-link:hover{background:#eef2ff;color:#3b49c3}

.section-subtitle {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
}

.no-products-heading {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-top: 8px;
}

/* ===== DESKTOP LANGUAGE DROPDOWN ===== */
.desktop-lang .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(99,102,241,0.06);
    padding: 6px 10px;
    border-radius: 12px;
    cursor: pointer;
    color: #374151;
    font-weight: 700;
}

.desktop-lang .lang-btn i.fas.fa-globe {
    font-size: 16px;
}

.desktop-lang .lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 8px;
    min-width: 120px;
    display: none;
    z-index: 2000;
}

.desktop-lang .lang-dropdown .lang-option {
    display: block;
    padding: 8px 12px;
    color: #374151;
    text-decoration: none;
    border-radius: 8px;
}

.desktop-lang .lang-dropdown .lang-option:hover {
    background: rgba(102,126,234,0.06);
    color: #4c51bf;
}

.desktop-lang.open .lang-dropdown {
    display: block;
}

/* Category icon variants (used on homepage sidebar and panels) */
.cat-icon, .cat-emoji { display:inline-flex; align-items:center; justify-content:center; }
.cat-icon-img { width:20px; height:20px; object-fit:cover; border-radius:8px; display:inline-block; }
.cat-icon-img.large { width:40px; height:40px; border-radius:12px; }
.cat-icon-fa { font-size:20px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }
.cat-icon-fa.large { font-size:36px; width:64px; height:64px; }
.cat-icon-text { font-size:20px; min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; }
.cat-icon-text.large { font-size:36px; min-width:64px; min-height:64px; }
.cat-icon-svg { width:20px !important; height:20px !important; max-width:20px; max-height:20px; display:inline-block; vertical-align:middle; }
.cat-icon-svg.large { width:40px !important; height:40px !important; max-width:40px; max-height:40px; }

@media (max-width: 600px) {
    .cat-icon-img { width:28px; height:28px; }
    .cat-icon-img.large { width:48px; height:48px; }
    .cat-icon-fa { font-size:16px; }
    .cat-icon-text { font-size:18px; }
    .cat-icon-svg { width:18px !important; height:18px !important; max-width:18px; max-height:18px; }
    .cat-icon-svg.large { width:32px !important; height:32px !important; max-width:32px; max-height:32px; }
}

/* ===== CATEGORIES LAYOUT FIXES ===== */
.categories-layout{
    /* center and match products grid max width */
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
    max-width: 1400px; /* match .products-grid container */
    margin: 0 auto; /* center inside page */
    padding: 0 20px; /* align with product grid gutters */
}
.cat-sidebar{
    width: 260px; /* fixed-ish sidebar width */
    box-sizing: border-box;
    padding-right: 8px;
}
.cat-main{
    min-width: 0; /* allow shrinking and prevent child overflow */
    box-sizing: border-box;
}
.cat-list{ margin:0; padding:0; list-style:none; }
.cat-item{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; }
.cat-main-panel{ width:100%; box-sizing:border-box; overflow:hidden; }

@media (max-width: 900px) {
    .categories-layout{ grid-template-columns: 1fr; gap:12px; padding: 0 12px; }
    .cat-sidebar{ width:100%; padding-right:0; }
    .cat-main{ width:100%; }
}
/* ===== NOTIFICATION BELL ===== */
.notification-bell-wrapper {
    position: relative;
}

.notification-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 102, 0, 0.1);
    border: 2px solid #ff6600;
    color: #2d3748;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-size: 18px;
}

.notification-bell-btn:hover {
    background: #ff6600;
    color: white;
    transform: translateY(-2px);
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    border: 2px solid #fff;
    animation: bellPulse 2s infinite;
}

@keyframes bellPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 320px;
    max-width: 360px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    z-index: 1001;
    overflow: hidden;
}

.notification-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 18px;
    width: 16px;
    height: 16px;
    background: white;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
}

.notification-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 102, 0, 0.1);
    font-weight: 600;
    color: #1f2937;
}

.notification-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-mark-all {
    background: none;
    border: none;
    color: #10b981;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-mark-all:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.notification-view-all {
    font-size: 13px;
    color: #ff6600;
    text-decoration: none;
    font-weight: 500;
}

.notification-view-all:hover {
    text-decoration: underline;
}

.notification-dropdown-body {
    max-height: 360px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(102, 126, 234, 0.05);
}

.notification-item:hover {
    background: rgba(255, 102, 0, 0.06);
}

.notification-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ff6600, #e65c00);
}

.notification-item-product-thumb {
    border-radius: 10px;
    background: #f3f4f6;
}

.notification-item-avatar-wrap {
    width: 80px;
    min-width: 80px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.notification-item-avatar-wrap .notification-item-product-thumb {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 10px;
}

.notification-item-avatar-wrap .notification-item-sender-badge {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.16);
    background: #e5e7eb;
    pointer-events: none;
}

.notification-item-avatar-wrap .notification-item-sender-badge-placeholder {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,0.16);
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 9px;
    pointer-events: none;
}

.notification-item-price {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

.notification-item-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6600, #e65c00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 2px;
}

.notification-item-text {
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item-time {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.notification-empty {
    padding: 24px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff6600;
    flex-shrink: 0;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .notification-dropdown {
        position: fixed;
        top: 82px;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        width: auto;
        min-width: 0;
        max-width: none;
        border-radius: 14px;
    }

    .notification-dropdown::before {
        display: none;
    }

    .notification-dropdown-body {
        max-height: min(360px, calc(100vh - 150px));
    }

    .notification-bell-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .notification-dropdown {
        top: 72px;
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
    }
}

/* /css/theme.css */
/* Minimalist theme overrides for VexaMarket
   Purpose: reduce visual clutter, unify spacing and colors,
   and provide small component tweaks (buttons, cards, headers).
   Keep this file small and safe to override other CSS files. */
:root{
  --vm-bg:#f7f8fa; /* light neutral background */
  --vm-surface:#ffffff; /* card surface */
  --vm-text:#111827; /* primary text */
  --vm-muted:#6b7280; /* secondary text */
  --vm-accent:#0f4c81; /* accent color (buttons/links) */
  --vm-accent-2:#0b6fb2; /* hover */
  --vm-border: #e6e9ef;
  --vm-radius:10px;
}

/* Base */
html,body{background:var(--vm-bg);color:var(--vm-text);font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}

/* Simplify header */
.header{background:#ffffff;border-bottom:1px solid var(--vm-border);}
.header-container{max-width:1400px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px}
.logo-image{height:40px}
.header-nav .nav-link{color:var(--vm-text);font-weight:600;padding:8px 10px;border-radius:8px}
.header-nav .nav-link:hover{background:transparent;color:var(--vm-accent)}

/* Language and auth buttons: toned down */
.lang-btn{background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:8px;color:var(--vm-muted);font-weight:600}
.lang-btn:hover{color:var(--vm-accent)}

/* Cards */
.card, .cat-card{background:var(--vm-surface);border:1px solid var(--vm-border);border-radius:var(--vm-radius);box-shadow:0 6px 18px rgba(15,20,30,0.04);padding:10px}

/* Category grid tweaks */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.cat-emoji{font-size:26px;display:inline-block;width:44px;height:44px;line-height:44px;text-align:center;border-radius:10px;background:linear-gradient(180deg, #fff, #fafafa);border:1px solid var(--vm-border)}
.cat-card .cat-title{font-weight:700;color:var(--vm-text);margin-top:8px}
.cat-children{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.cat-child-link{font-size:13px;color:var(--vm-muted);padding:6px 8px;border-radius:8px;background:transparent;border:1px solid transparent}
.cat-child-link:hover{color:var(--vm-accent);background:rgba(11,111,178,0.06)}

/* Section title */
.section-title{font-size:18px;font-weight:700;color:var(--vm-text);display:flex;align-items:center;gap:10px;margin:18px 0}

/* Buttons and links */
a, .btn{color:var(--vm-accent);text-decoration:none}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;border:1px solid transparent}
.btn:hover{background:rgba(11,111,178,0.06)}

/* Utilities */
.text-muted{color:var(--vm-muted)}
.container{max-width:1400px;margin:0 auto;padding:0 18px}

/* Make inputs less visually noisy */
input, select, textarea{border:1px solid var(--vm-border);border-radius:8px;padding:8px}

/* Mobile adjustments */
@media (max-width:720px){
  .header-container{padding:10px 14px}
  .logo-image{height:36px}
  .cat-emoji{width:40px;height:40px;line-height:40px}
}

/* Categories sidebar + main layout */
.categories-layout{display:flex;gap:18px;align-items:flex-start}
.cat-sidebar{flex:0 0 220px;background:var(--vm-surface);border:1px solid var(--vm-border);border-radius:12px;padding:10px}
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:6px;border-radius:10px}
.cat-item .cat-select{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:6px 8px;width:100%;text-align:left;cursor:pointer;border-radius:8px}
.cat-item .cat-select:focus{outline:2px solid rgba(11,111,178,0.12)}
.cat-item .cat-icon{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;background:#f6f8fb;font-size:18px}
.cat-item.active{background:linear-gradient(90deg, rgba(11,111,178,0.06), rgba(11,111,178,0.02));border-left:3px solid var(--vm-accent)}
.cat-item.active .cat-select{font-weight:700;color:var(--vm-accent)}
.cat-item .cat-open{color:var(--vm-muted);padding-left:8px}

.cat-main{flex:1}
.cat-main-panel{display:none}
.cat-main-panel.visible{display:block}
.cat-main-header{display:flex;gap:14px;align-items:center}
.cat-emoji.large{font-size:36px;min-width:72px;min-height:72px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,#fff,#fafcff);border:1px solid var(--vm-border)}
.cat-title{font-size:20px;margin:0}
.cat-actions{margin-top:8px}

/* Hover underline effect for category tiles */
.categories-grid .cat-tile .cat-tile-name {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* space for underline */
}
.categories-grid .cat-tile .cat-tile-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.categories-grid .cat-tile .cat-tile-btn:focus { outline: none; }
.categories-grid .cat-tile .cat-tile-name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--vm-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
  border-radius: 2px;
}
/* Remove pseudo-element animation and use instant text-decoration underline on hover/focus */
.categories-grid .cat-tile .cat-tile-name::after { display: none !important; }
.categories-grid .cat-tile:hover .cat-tile-name,
.categories-grid .cat-tile:focus-within .cat-tile-name,
.categories-grid .cat-tile .cat-tile-btn:hover .cat-tile-name,
.categories-grid .cat-tile .cat-tile-btn:focus .cat-tile-name {
  text-decoration: underline;
  text-decoration-color: var(--vm-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width:900px){
  .categories-layout{flex-direction:column}
  .cat-sidebar{order:1;width:100%}
  .cat-main{order:2}
}

/* New 'View all' button specific to homepage to avoid global .btn-view-all conflicts */
.vm-btn-view-all{
  display:inline-block;
  background:transparent;
  color:var(--vm-accent);
  border:1px solid var(--vm-border);
  padding:10px 16px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
  transition:background .14s ease,box-shadow .14s ease,transform .12s ease;
}
.vm-btn-view-all:hover{background:rgba(15,76,129,0.06);box-shadow:0 8px 20px rgba(11,111,178,0.06);transform:translateY(-2px)}
.vm-btn-view-all:active{transform:translateY(0)}

@media(max-width:480px){
  .vm-btn-view-all{width:100%;display:block;text-align:center}
}

/* /css/product-card.css */
/* Единые стили для карточек товаров */

/* Базовые стили карточки */
.product-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.catalog-ad-card {
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    cursor: pointer;
}

.catalog-ad-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.catalog-ad-card__link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
}

.catalog-ad-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    margin: 10px 10px 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
}

.catalog-ad-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.catalog-ad-card:hover .catalog-ad-card__media img {
    transform: scale(1.03);
}

.catalog-ad-card__badge {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.86);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

.catalog-ad-card__body {
    display: grid;
    gap: 7px;
    padding: 13px 14px 15px;
}

.catalog-ad-card__eyebrow {
    color: #059669;
    font-size: 12px;
    font-weight: 900;
}

.catalog-ad-card__title {
    color: #111827;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.24;
}

.catalog-ad-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 9px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.product-card-age-locked {
    cursor: pointer;
}

.product-card-age-locked .product-image,
.product-card-age-locked .product-content,
.product-card-age-locked .product-list-main,
.product-card-age-locked .product-list-side {
    filter: blur(6px);
    transform: scale(1.02) translateZ(0);
    backface-visibility: hidden;
    user-select: none;
    pointer-events: none;
}

.product-card-age-locked:hover .product-image {
    transform: scale(1.02);
}

.age-gate-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 18px;
    border: 0;
    background: rgba(15, 23, 42, 0.66);
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.product-card:not(.product-card-age-locked) .age-gate-card-overlay {
    display: none;
}

.age-gate-card-overlay__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #dc2626;
    font-weight: 900;
    font-size: 15px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.age-gate-card-overlay__title {
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
}

.age-gate-card-overlay__text {
    max-width: 180px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    line-height: 1.35;
}

.adult-age-modal[hidden] {
    display: none;
}

.adult-age-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.adult-age-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(4px);
}

.adult-age-modal__dialog {
    position: relative;
    width: min(420px, 100%);
    padding: 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    text-align: center;
}

.adult-age-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #fee2e2;
    color: #b91c1c;
    font-weight: 900;
}

.adult-age-modal__title {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1.2;
}

.adult-age-modal__dialog p {
    margin: 0;
    color: #475569;
    line-height: 1.5;
}

.adult-age-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.adult-age-modal__actions button {
    flex: 1;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}

.adult-age-modal__confirm {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #fff;
}

.adult-age-modal__cancel {
    border: 1px solid #dbe4ef;
    background: #fff;
    color: #334155;
}

.adult-age-modal-open {
    overflow: hidden;
}

@media (max-width: 420px) {
    .adult-age-modal__actions {
        flex-direction: column;
    }
}

/* Контейнер изображения */
.product-image-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #fff;
    contain: layout paint;
}

.product-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #fff;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

/* Статус товара */
.product-status {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-new {
    background: #10b981;
    color: white;
}

.status-used {
    background: #f59e0b;
    color: white;
}

/* Favorite button: нежные бело-серые тона */
.favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e6eef3;
    box-shadow: 0 1px 6px rgba(15,23,42,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    z-index: 20;
}

.favorite-btn i {
    color: #94a3b8; /* soft slate */
    font-size: 1.05rem;
    transition: color 0.18s ease, transform 0.18s ease;
}

.favorite-btn:hover {
    transform: translateY(-1px);
    border-color: #dfe7ec;
}

.favorite-btn:hover i {
    color: #6b7280;
    transform: scale(1.05);
}

.favorite-btn.is-active i,
.favorite-btn.active i,
.favorite-btn i.active {
    color: #475569; /* darker gray-blue for active */
    transform: scale(1.06);
}

/* Accessibility */
.favorite-btn:focus {
    outline: 3px solid rgba(99,102,241,0.12);
    outline-offset: 2px;
}

/* Action buttons (edit/delete) moved from inline styles to classes */
.product-actions { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; gap: 8px; }
.action-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: inherit; transition: all 0.2s ease; }
.action-btn.edit-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(102,126,234,0.25); }
.action-btn.bump-btn { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(16,185,129,0.25); }
.action-btn.bump-btn:disabled { background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important; cursor: not-allowed; opacity: 0.6; }
.action-btn.bump-btn.bumping { animation: pulse 1s ease-in-out; }
.action-btn.auto-bump-btn { background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%) !important; color: #334155 !important; box-shadow: 0 2px 8px rgba(15,23,42,0.12); }
.action-btn.auto-bump-btn.is-active { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(37,99,235,0.28); }
.action-btn.auto-bump-btn:disabled { opacity: .65; cursor: not-allowed; }
.action-btn.vip-request-btn { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%) !important; color: #c2410c !important; box-shadow: 0 2px 8px rgba(249,115,22,0.18); text-decoration: none; }
.action-btn.vip-request-btn.is-active { background: linear-gradient(135deg, #ff6600 0%, #f97316 100%) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(249,115,22,0.3); }
.action-btn.delete-btn { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(255,107,107,0.25); }
.action-btn.edit-btn i, .action-btn.bump-btn i, .action-btn.delete-btn i, .action-btn.auto-bump-btn.is-active i, .action-btn.vip-request-btn.is-active i { color: #fff; }

.product-vip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: 2px;
    white-space: nowrap;
}

.product-vip-badge i {
    font-size: 0.68rem;
}

.product-vip-badge--media {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 12;
    background: rgba(255, 247, 237, 0.96);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.product-vip-modal[hidden] {
    display: none;
}

.product-vip-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.product-vip-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
}

.product-vip-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.product-vip-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.product-vip-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 20px;
}

.product-vip-modal__title {
    margin: 14px 0 6px;
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
}

.product-vip-modal__product,
.product-vip-modal__status {
    margin: 0;
    color: #64748b;
    line-height: 1.4;
}

.product-vip-modal__product {
    color: #1f2937;
    font-weight: 800;
}

.product-vip-modal__status {
    margin-top: 5px;
}

.product-vip-modal__tariffs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.product-vip-modal__tariff {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 86px;
    padding: 14px;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    background: #fffaf5;
    color: #111827;
    text-decoration: none;
    justify-content: center;
}

.product-vip-modal__tariff:hover {
    background: #fff7ed;
    border-color: #fb923c;
    text-decoration: none;
}

.product-vip-modal__tariff span {
    font-size: 14px;
    font-weight: 800;
}

.product-vip-modal__tariff strong {
    color: #dc2626;
    font-size: 20px;
    line-height: 1;
}

body.product-vip-modal-open {
    overflow: hidden;
}

@media (max-width: 460px) {
    .product-vip-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .product-vip-modal__dialog {
        padding: 20px;
        border-radius: 12px;
    }

    .product-vip-modal__tariffs {
        grid-template-columns: 1fr;
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}


/* Контент карточки */
.product-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-title-link {
    text-decoration: none;
    color: inherit;
}

.product-title-link:hover .product-title {
    color: #dc2626;
}

.product-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 0.75rem;
}

/* Suspicious product warning near price */
.suspicious-price-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    color: #7c2d12; /* slightly darker amber */
    background: rgba(255,250,205,0.95); /* pale amber */
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.85rem;
    line-height: 1;
    vertical-align: middle;
    cursor: default;
    border: 1px solid rgba(148, 105, 30, 0.12);
}

.suspicious-text{font-weight:600;font-size:0.85rem;color:#7c2d12}

.suspicious-warning {
    margin-top: 6px;
    background: #fff7ed; /* pale warning background */
    border-left: 4px solid #f59e0b; /* orange accent */
    color: #92400e;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.product-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Мета-информация */
.product-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.product-category,
.product-condition {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.product-category i,
.product-condition i {
    font-size: 0.625rem;
}

/* Информация о продавце */
.seller-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    width: 100%;
    min-width: 0;
}

.seller-name {
    font-size: 0.875rem;
    color: #4b5563;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Ensure seller name is left-aligned and does not get centered by flex stretch */
.seller-info .seller-name {
    flex: 1 1 auto; /* take remaining space on the left */
    text-align: left;
    margin-left: 0; /* ensure no extra offset */
    min-width: 0; /* allow truncation if needed */
}

/* Keep reputation badge pinned to the right */
.seller-info .reputation-badge {
    margin-left: auto; /* push badge to the far right */
    white-space: nowrap;
}

.seller-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    flex: 0 0 auto;
}

.seller-name-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.seller-name:hover {
    color: #dc2626;
}

.seller-name i {
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.seller-reputation {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.reputation-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.reputation-positive, .reputation-badge.good, .reputation-badge.excellent, .reputation-badge.normal {
    background: #dcfce7;
    color: #16a34a;
}

.reputation-negative, .reputation-badge.bad {
    background: #fee2e2;
    color: #dc2626;
}

.reputation-neutral, .reputation-badge.neutral, .reputation-badge.new, .reputation-badge.low {
    background: #f3f4f6;
    color: #6b7280;
}

/* Compact badge used for 'Новичок' and other reputation labels */
/* reputation-badge removed: rely on .seller-reputation and .reputation-neutral/positive/negative */

/* Дата */
.product-date {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
}

/* Блок с датами размещения и бампа (для профиля) */
.product-dates {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.date-item i {
    font-size: 0.7rem;
    color: #9ca3af;
    width: 12px;
    flex-shrink: 0;
}

.date-item.bump-date i {
    color: #10b981;
}

.date-label {
    font-weight: 500;
    color: #4b5563;
}

.date-value {
    color: #6b7280;
    margin-left: auto;
}

/* Сетка товаров */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

/* Smoother scroll: browser skips rendering offscreen cards. Images stay eager (load immediately); only OFFSCREEN paint is deferred. 'auto' remembers real size after first render. */
.products-grid .product-card{content-visibility:auto;contain-intrinsic-size:auto 520px;}

.catalog-view-toolbar {
    display: flex;
    justify-content: flex-end;
    max-width: 1400px;
    margin: 0 auto 14px;
    padding: 0 12px;
}

.catalog-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.catalog-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 11px;
    border-radius: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.catalog-view-toggle__btn:hover {
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
}

.catalog-view-toggle__btn.is-active {
    background: #111827;
    color: #fff;
    box-shadow: 0 6px 14px rgba(17, 24, 39, 0.16);
}

.products-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 1400px;
    margin: 0 auto 2rem;
    padding: 0 12px;
}

.product-card-list {
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr) minmax(130px, auto);
    gap: 14px;
    align-items: stretch;
    height: 138px;
    min-height: 138px;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    cursor: default;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product-card-list:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.product-card-list:hover .product-image {
    transform: scale(1.02);
}

.product-list-media {
    position: relative;
    display: block;
    min-width: 0;
    height: 100%;
    min-height: 138px;
    background: #fff;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    contain: layout paint;
}

.product-list-media-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.product-list-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 13px 4px 12px 0;
    color: inherit;
    text-decoration: none;
}

.product-list-main:hover {
    color: inherit;
    text-decoration: none;
}

.product-list-title {
    margin: 0 0 8px;
    color: #111827;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-list-description {
    margin: 0 0 8px;
    color: #475569;
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: auto;
    color: #64748b;
    font-size: 14px;
    line-height: 1.25;
    max-height: 18px;
    overflow: hidden;
}

.product-list-meta span,
.product-list-seller {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.product-list-meta i,
.product-list-seller i {
    color: #64748b;
    font-size: 13px;
    flex: 0 0 auto;
}

.product-list-seller-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.product-list-seller {
    margin-top: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 650;
    max-height: 22px;
    overflow: hidden;
}

.product-list-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px 12px 0;
    min-width: 0;
}

.product-list-price {
    color: #111827;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.2;
    text-align: right;
}

.product-list-mobile-price {
    display: none;
}

.product-list-favorite.favorite-btn {
    position: static;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e6eef3;
    box-shadow: 0 1px 6px rgba(15,23,42,0.04);
    color: #94a3b8;
}

.product-list-favorite.favorite-btn i {
    color: #94a3b8;
    font-size: 1.05rem;
}

.product-list-favorite.favorite-btn:hover {
    background: rgba(255,255,255,0.98);
    border-color: #dfe7ec;
    box-shadow: 0 4px 12px rgba(15,23,42,0.08);
}

.product-list-favorite.favorite-btn:hover i {
    color: #6b7280;
}

.product-list-favorite.favorite-btn.is-active,
.product-list-favorite.favorite-btn:has(i.active) {
    background: rgba(255,255,255,0.98);
    border-color: #dfe7ec;
    box-shadow: 0 4px 12px rgba(15,23,42,0.08);
}

.product-list-favorite.favorite-btn.is-active i,
.product-list-favorite.favorite-btn i.active {
    color: #475569;
}

.product-list-video-badge {
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
}

.products-list .catalog-ad-card {
    min-height: 138px;
    border-radius: 6px;
}

.products-list .catalog-ad-card__link {
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr);
    min-height: 138px;
}

.products-list .catalog-ad-card__media {
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.products-list .catalog-ad-card__body {
    align-content: center;
    padding: 14px 16px;
}

.products-list .catalog-ad-card__badge {
    top: 10px;
    left: 10px;
}

/* Компактный вариант карточки */
.product-card-compact {
    max-width: 250px;
}

.product-card-compact .product-image-container {
    height: 150px;
}

.product-card-compact .product-content {
    padding: 0.75rem;
}

.product-card-compact .product-title {
    font-size: 0.875rem;
}

.product-card-compact .product-price {
    font-size: 1rem;
}

/* Специальные стили для профиля */
.product-card-profile {
    position: relative;
}

.product-actions-profile {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.profile-actions-row {
    display: flex;
    gap: 8px;
}

.action-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    text-decoration: none;
    color: #3b82f6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.action-btn:hover {
    transform: scale(1.05);
    /* leave background handling to specific button classes */
}

.action-btn.delete-btn { /* keep color for icon if not using white icon */ color: inherit; }
.action-btn.delete-btn:hover { filter: brightness(0.92); }
.action-btn.edit-btn:hover { filter: brightness(0.92); }

/* Состояние "нет товаров" */
.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.no-products i {
    font-size: 3rem;
    color: #e5e7eb;
    margin-bottom: 1rem;
    display: block;
}

.no-products-title,
.no-products h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.no-products p {
    color: #9ca3af;
}
.no-products-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.no-products-btn{padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.no-products-btn--secondary{background:#f3f4f6;color:#374151}
.no-products-btn--secondary:hover{background:#e5e7eb}
.no-products-btn--primary{background:#2563eb;color:#fff}
.no-products-btn--primary:hover{background:#1d4ed8}

/* Адаптивность */
/* Для больших экранов (десктопы) - принудительно 5 товаров в ряду */
@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
    }
}

/* Для средних экранов (планшеты и небольшие десктопы) */
@media (max-width: 1199px) and (min-width: 769px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    .products-grid {
        /* Force two items per row on mobile/tablet to ensure consistent 2-column layout */
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem;
    }
    
    .product-card {
        margin-bottom: 0;
    }
    
    /* Slightly shorter images on mobile to reduce card height */
    .product-image-container {
        height: 140px;
    }
    
    .product-content {
        padding: 0.75rem;
    }
    
    .seller-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .seller-info .seller-name {
        width: 100%;
        max-width: 100%;
        align-items: flex-start;
        line-height: 1.25;
    }

    .seller-info .seller-name i,
    .seller-info .seller-name img {
        flex: 0 0 auto;
        margin-top: 1px;
        margin-right: 0 !important;
    }

    .seller-info .seller-name-text {
        white-space: normal;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .seller-info .reputation-badge {
        margin-left: 0;
        max-width: 100%;
    }

    .catalog-view-toolbar {
        justify-content: stretch;
        margin-bottom: 10px;
        padding: 0 8px;
    }

    .catalog-view-toggle {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .catalog-view-toggle__btn {
        width: 100%;
    }

    .products-list {
        gap: 6px;
        padding: 0 6px;
    }

    .product-card-list {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 8px;
        height: 124px;
        min-height: 124px;
        border-radius: 8px;
    }

    .product-list-media {
        min-height: 124px;
    }

    .product-list-main {
        padding: 9px 46px 6px 0;
    }

    .product-list-title {
        margin-bottom: 6px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.18;
    }

    .product-list-mobile-price {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 6px;
        margin: 0 0 4px;
        color: #dc2626;
        font-size: 15px;
        font-weight: 850;
        line-height: 1.12;
    }

    .product-list-meta {
        gap: 5px 8px;
        font-size: 11px;
        line-height: 1.15;
        max-height: none;
        overflow: visible;
    }

    .product-list-meta span {
        max-width: 100%;
        line-height: 1.15;
    }

    .product-list-seller {
        display: none;
    }

    .product-list-side {
        grid-column: 2;
        display: contents;
    }

    .product-list-price {
        display: none;
    }

    .product-list-favorite.favorite-btn {
        position: absolute;
        top: 9px;
        right: 9px;
        width: 34px;
        height: 34px;
    }

    .products-list .catalog-ad-card__link {
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 112px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        /* Small phones: wider cards using minmax to reduce side gutters */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
        max-width: 100% !important;
        padding: 0 6px !important;
        margin: 0 auto !important;
    }
    
    /* уменьшили высоту на 20px (было 140 -> теперь 120 previously, now -20 => 100) */
    .product-image-container {
        height: 100px;
    }
    
    .product-content {
        padding: 0.45rem;
    }
    
    .product-title {
        font-size: 0.9rem;
        line-height: 1.3;
    }
    
    .product-price {
        font-size: 1rem;
    }

    .seller-name {
        font-size: 0.8rem;
    }
}

/* Admin actions: centered at the bottom of the image */
.product-actions-profile.admin-actions {
    top: auto;
    right: 50%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    background: transparent;
}

.product-actions-profile.admin-actions .profile-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.product-actions-profile.admin-actions .action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.product-actions-profile.admin-actions .action-btn i {
    font-size: 16px;
}

/* Reduce prominence on mobile */
@media (max-width: 480px) {
    .product-actions-profile.admin-actions .action-btn { width: 36px; height: 36px; }
}

@media (max-width: 360px) {
    .products-grid {
        /* Very small devices: still two columns (user preference) */
        grid-template-columns: repeat(2, 1fr);
    gap: 0.18rem;
    }
    
    .container {
        padding: 0 10px;
    }
}

/* High-priority overrides to prevent layout from being stretched by other stylesheets */
.products-grid {
    max-width: 1400px !important;
    margin: 0 auto 2rem !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 1.2rem !important;
    }
}

@media (max-width: 768px) {
    .products-grid {
        /* High-priority override: enforce two columns on mobile */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem !important;
    }
}

/* Enforce consistent image container height so very wide images can't expand the card */
.product-image-container {
    height: 300px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.product-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media (max-width: 768px) {
    .product-image-container {
        height: 210px !important;
    }
}

@media (max-width: 420px) {
    .product-image-container {
        height: 195px !important;
    }
}

@media (max-width: 768px) {
    .products-grid {
        align-items: stretch !important;
    }

    .products-grid .product-card:not(.product-card-list) .product-content {
        flex-grow: 1;
        padding: 10px 10px 8px;
    }

    .products-grid .product-card:not(.product-card-list) .product-title {
        margin-bottom: 6px;
        line-height: 1.25;
    }

    .products-grid .product-card:not(.product-card-list) .product-price {
        margin-bottom: 6px;
        line-height: 1.1;
    }

    .products-grid .product-card:not(.product-card-list) .product-meta {
        gap: 3px;
        margin-bottom: 4px;
    }

    .products-grid .product-card:not(.product-card-list) .product-category,
    .products-grid .product-card:not(.product-card-list) .product-condition {
        font-size: 12px;
        line-height: 1.15;
    }

    .products-grid .product-card:not(.product-card-list) .seller-info {
        margin-top: 4px;
        padding-top: 5px;
        gap: 4px;
    }

    .products-grid .product-card:not(.product-card-list) .seller-avatar {
        width: 22px;
        height: 22px;
    }

    .products-grid .product-card:not(.product-card-list) .product-date {
        margin-top: 3px;
        line-height: 1.15;
    }
}

@media (max-width: 480px) {
    .products-grid .product-card:not(.product-card-list) .product-content {
        padding: 8px 9px 6px;
    }

    .products-grid .product-card:not(.product-card-list) .product-meta {
        gap: 3px;
        margin-bottom: 3px;
    }

    .products-grid .product-card:not(.product-card-list) .seller-info {
        margin-top: 3px;
        padding-top: 5px;
    }
}

.product-quick-view-btn {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    max-width: calc(100% - 18px);
    padding: 0 11px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(8px);
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.product-card:hover .product-quick-view-btn,
.product-card:focus-within .product-quick-view-btn {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.product-quick-view-btn:hover {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.product-quick-view-btn i {
    font-size: 12px;
    color: #475569;
}

.product-quick-view-btn--list {
    bottom: 10px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

@media (hover: none) {
    .product-quick-view-btn {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }
}

@media (max-width: 520px) {
    .product-quick-view-btn {
        min-height: 28px;
        padding: 0 7px;
        gap: 0;
    }
    .product-quick-view-btn span {
        display: none;
    }
    .product-quick-view-btn i {
        font-size: 13px;
    }
}

/* Анимации загрузки */
.loading-indicator {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

.loading-indicator i {
    font-size: 2rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Сообщения об ошибках */
.error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: #dc2626;
    background: #fee2e2;
    border-radius: 8px;
}

.error-message i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Пустое состояние */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-state i {
    font-size: 4rem;
    color: #e5e7eb;
    margin-bottom: 1rem;
    display: block;
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #4a5568;
}

/* Статус товара - левый верхний угол */
.product-status {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
}

/* Предупреждение о дубликатах - справа под избранным или вместо него */
.duplicate-warning {
    position: absolute;
    right: 8px;
    top: 48px; /* под кнопкой избранного */
    z-index: 15;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.9);
    color: #856404;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 14px;
}

/* Если нет избранного, предупреждение занимает его место */
.product-image-container:not(:has(.favorite-btn)) .duplicate-warning {
    top: 8px;
}

/* Home/catalog card wishlist: quieter, lighter heart control */
.product-image-container .product-actions {
    top: 10px;
    right: 10px;
}
/* Heart pinned to same top as the condition sticker on every breakpoint */
.products-grid .product-image-container .product-actions,
.product-card .product-image-container .product-actions{top:10px!important;right:10px!important;}
/* Heart sat 10px LOWER than the sticker: .favorite-btn was absolute inside an already-absolute .product-actions (double offset). Make it flow in the flex container. */
.product-image-container .product-actions .favorite-btn,
.product-image-container .product-actions .favorite-btn.action-btn{position:static!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;}
/* Seller-profile management cards: condition sticker was hidden behind the top control row — push it below. */
/* Owner edit-mode cards: the 5-button .product-actions row sits at top and hides the condition sticker — drop it below. */
/* Стикер состояния — на уровне кнопки-шестерёнки (ряд из 5 кнопок заменён одной справа, коллизии слева нет) */
.product-card-profile .vm-cond-badge{top:10px!important;}

.product-image-container .product-actions .favorite-btn.action-btn,
.product-image-container .product-actions .favorite-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(226,232,240,0.82) !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: none;
}

.product-image-container .product-actions .favorite-btn i {
    color: currentColor !important;
    font-size: 14px;
    transform: none;
}

.product-image-container .product-actions .favorite-btn:hover {
    background: rgba(255,255,255,0.94) !important;
    border-color: rgba(203,213,225,0.95) !important;
    color: #ef4444 !important;
    transform: none;
}

.product-image-container .product-actions .favorite-btn.is-active,
.product-image-container .product-actions .favorite-btn.active,
.product-image-container .product-actions .favorite-btn:has(i.active) {
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(248,113,113,0.38) !important;
    color: #ef4444 !important;
}

.product-image-container .product-actions .favorite-btn:focus-visible {
    outline: 2px solid rgba(239,68,68,0.22);
    outline-offset: 2px;
}

.duplicate-warning .hint {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
}

.duplicate-warning:hover .hint {
    display: block;
}

/* Ensure the products grid stays centered and doesn't stretch full page width */
.products-grid {
    width: 100%;
    max-width: 1400px; /* match main container */
    margin: 0 auto 2rem; /* center grid */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.2rem;
}

@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.8rem;
    }
}

/* Ensure images don't push layout in wide horizontal cards */
.product-image {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image.landscape-center {
    max-width: 60%;
    margin: 0 auto;
    display: block;
}

/* Video badge */
.video-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: auto;
    right: auto;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    font-family: inherit;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.product-image-container:has(.product-vip-badge--media) .video-badge {
    top: 42px;
}

.product-list-video-badge {
    right: 8px;
    top: 8px;
    bottom: auto;
    left: auto;
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
}

.product-list-video-badge i {
    font-size: 0.82rem;
}

.video-badge:hover,
.video-badge:focus-visible {
    background: rgba(185, 28, 28, 0.96);
    box-shadow: 0 5px 14px rgba(127, 29, 29, 0.28);
    outline: none;
    transform: translateY(-1px);
}

.video-badge i {
    font-size: 0.55rem;
}

.product-quick-view-modal[hidden] {
    display: none !important;
}

.product-quick-view-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

body.product-quick-view-modal-open {
    overflow: hidden;
}

.product-quick-view-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(7px);
}

.product-quick-view-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, 50%) minmax(300px, 1fr);
    width: min(1040px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 42px));
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.32);
}

.product-quick-view-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-quick-view-modal__media {
    position: relative;
    display: flex;
    flex-direction: column;
    height: min(620px, calc(100vh - 74px));
    min-height: 0;
    background: #fff;
    overflow: hidden;
}

.product-quick-view-modal__stage {
    position: relative;
    flex: 1 1 auto;
    height: calc(100% - 95px);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.product-quick-view-modal__stage img,
.product-quick-view-modal__stage video {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

.product-quick-view-modal__stage img[hidden],
.product-quick-view-modal__stage video[hidden] {
    display: none !important;
}

.product-quick-view-modal__media:not(:has(.product-quick-view-modal__thumbs:not([hidden]))) .product-quick-view-modal__stage {
    height: 100%;
}

.product-quick-view-modal__stage video:not([hidden]) {
    background: #111;
}

.product-quick-view-modal__media-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    backdrop-filter: blur(8px);
}

.product-quick-view-modal__thumbs {
    flex: 0 0 95px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
    border-top: 1px solid #e5edf6;
    background: #fff;
}

.product-quick-view-modal__thumbs[hidden] {
    display: none !important;
}

.product-quick-view-modal__thumb {
    position: relative;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
    cursor: pointer;
}

.product-quick-view-modal__thumb.is-active {
    border-color: #ff6600;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.14);
}

.product-quick-view-modal__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-quick-view-modal__thumb-video {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.36);
    color: #fff;
    font-size: 17px;
}

.product-quick-view-modal__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: auto;
    padding: 42px 34px 30px;
}

.product-quick-view-modal__eyebrow {
    width: max-content;
    max-width: 100%;
    margin-bottom: 12px;
    padding: 5px 10px;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
}

.product-quick-view-modal__body h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: clamp(23px, 2.3vw, 34px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0;
}

.product-quick-view-modal__price {
    margin-bottom: 16px;
    color: #dc2626;
    font-size: 30px;
    font-weight: 950;
    line-height: 1;
}

.product-quick-view-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.product-quick-view-modal__meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid #e5edf6;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
}

.product-quick-view-modal__description {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-line;
}

.product-quick-view-modal__actions {
    margin-top: auto;
    padding-top: 26px;
}

.product-quick-view-modal__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(234, 88, 12, 0.26);
}

.product-quick-view-modal__open:hover {
    background: #ea580c;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 760px) {
    .product-quick-view-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .product-quick-view-modal__dialog {
        grid-template-columns: 1fr;
        width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 18px;
    }

    .product-quick-view-modal__media {
        height: auto;
        min-height: 280px;
    }

    .product-quick-view-modal__stage,
    .product-quick-view-modal__stage img,
    .product-quick-view-modal__stage video {
        min-height: 280px;
        height: 42vh;
        max-height: 42vh;
    }

    .product-quick-view-modal__thumbs {
        flex-basis: 76px;
        padding: 9px;
    }

    .product-quick-view-modal__thumb {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
    }

    .product-quick-view-modal__body {
        padding: 22px 18px 18px;
    }

    .product-quick-view-modal__body h3 {
        font-size: 23px;
    }

    .product-quick-view-modal__price {
        font-size: 26px;
    }
}

.product-video-modal[hidden] {
    display: none;
}

.product-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

body.product-video-modal-open {
    overflow: hidden;
}

.product-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 12%, rgba(16, 185, 129, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(6, 12, 24, 0.74), rgba(3, 7, 18, 0.88));
    backdrop-filter: blur(14px) saturate(128%);
    -webkit-backdrop-filter: blur(14px) saturate(128%);
}

.product-video-modal__dialog {
    position: relative;
    width: min(860px, 100%);
    max-height: calc(100vh - 48px);
    display: grid;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.72));
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.product-video-modal__dialog::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.75), rgba(255, 102, 0, 0.34), rgba(255, 255, 255, 0.12));
    opacity: 0.72;
}

.product-video-modal__video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 142px);
    border-radius: 18px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.product-video-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.product-video-modal__close:hover,
.product-video-modal__close:focus-visible {
    transform: scale(1.04);
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    border-color: rgba(255, 255, 255, 0.82);
    outline: none;
}

.product-video-modal__close svg,
.product-video-modal__product-link svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-video-modal__product-link {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 14px 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.product-video-modal__product-link:hover {
    transform: translateY(-1px);
    background: #0f172a;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.product-video-modal__product-link[hidden] {
    display: none;
}

.product-video-modal__title {
    justify-self: center;
    max-width: min(680px, 100%);
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    line-height: 1.25;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 640px) {
    .product-video-modal {
        padding: 10px;
    }

    .product-video-modal__dialog {
        max-height: calc(100vh - 20px);
        padding: 7px;
        border-radius: 18px;
    }

    .product-video-modal__video {
        max-height: calc(100vh - 104px);
        border-radius: 13px;
    }

    .product-video-modal__close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }

    .product-video-modal__product-link {
        top: 12px;
        left: 12px;
        max-width: calc(100% - 64px);
        min-height: 38px;
        padding: 0 11px 0 13px;
        font-size: 12px;
    }

    .product-video-modal__product-link span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* VexaMarket styled video modal shell */
.product-video-modal__backdrop {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 102, 0, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.82), rgba(226, 232, 240, 0.86));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.product-video-modal__dialog {
    width: min(850px, 100%);
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 22px 70px rgba(15, 23, 42, 0.20),
        0 2px 8px rgba(15, 23, 42, 0.06);
}

.product-video-modal__dialog::before {
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.42), rgba(16, 185, 129, 0.16), rgba(226, 232, 240, 0.4));
    opacity: 0.28;
    pointer-events: none;
}

.product-video-modal__video {
    max-height: calc(100vh - 148px);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #050505;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.product-video-modal__close {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
}

.product-video-modal__close:hover,
.product-video-modal__close:focus-visible {
    transform: translateY(-1px);
    background: #fff7ed;
    color: #ff6600;
    border-color: #fed7aa;
    box-shadow: 0 14px 30px rgba(255, 102, 0, 0.16);
}

.product-video-modal__product-link {
    top: 14px;
    left: 14px;
    min-height: 40px;
    padding: 0 14px 0 15px;
    border: 1px solid rgba(254, 215, 170, 0.95);
    background: rgba(255, 247, 237, 0.96);
    color: #9a3412;
    box-shadow: 0 12px 28px rgba(234, 88, 12, 0.13);
}

.product-video-modal__product-link:hover {
    background: #ff6600;
    color: #fff;
    box-shadow: 0 16px 34px rgba(255, 102, 0, 0.24);
}

.product-video-modal__title {
    max-width: min(700px, calc(100% - 32px));
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

@media (max-width: 640px) {
    .product-video-modal__dialog {
        padding: 8px;
        border-radius: 18px;
    }

    .product-video-modal__video {
        max-height: calc(100vh - 112px);
        border-radius: 13px;
    }

    .product-video-modal__close {
        top: 11px;
        right: 11px;
        width: 38px;
        height: 38px;
    }

    .product-video-modal__product-link {
        top: 11px;
        left: 11px;
        max-width: calc(100% - 62px);
        min-height: 38px;
    }
}

/* Suspicious badge styling kept in CSS to avoid inline layout influence */
.suspicious-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(231,76,60,0.9);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0.95;
    z-index: 6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Стикер предупреждения рядом с ценой для подозрительных объявлений */
.suspicious-price-warning {
    display: inline-block;
    margin-left: 8px;
    color: #b45309; /* amber-700 */
    background: rgba(255,250,205,0.9); /* pale amber */
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85rem;
    line-height: 1;
    vertical-align: middle;
    cursor: default;
    border: 1px solid rgba(148, 105, 30, 0.12);
}

.suspicious-price-warning[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    transform: translateY(-6px);
    z-index: 30;
}


/* ===== Image preloader: skeleton that MATCHES the load-more skeleton, image fades in (2026-06-15 v10) =====
   The .vm-imgframe placeholder is styled IDENTICALLY to .skeleton-image (prod-grid.css) so that
   "Показать еще" shows ONE continuous skeleton instead of skeleton-grey1 -> imgframe-grey2 -> image. */
.vm-imgframe { display:block; position:relative; width:100%; height:100%; overflow:hidden; background:#f3f4f6; line-height:0; }
.vm-imgframe:not(.is-loaded)::after {
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.vm-imgframe .product-image { opacity:0; transition: opacity .4s ease; position:relative; z-index:2; }
.vm-imgframe.is-loaded .product-image { opacity:1; }
/* Gallery main image (.sp-main-img): LCP / hero — show it instantly, NO shimmer/dim/fade
   (the dim+fade caused the "2nd load has a delay" complaint). It keeps its own is-loaded toggle
   harmlessly; no opacity rule means it paints as soon as it decodes. */
@media (prefers-reduced-motion: reduce) {
    /* keep the placeholder static (no looping motion) but still allow the brief opacity cross-fade,
       overriding the global "* { transition-duration:0.01ms !important }" a11y killer with a more
       specific !important. A transition can never get stuck invisible: if it can't run it snaps to opacity 1. */
    .vm-imgframe:not(.is-loaded)::after { animation: none !important; }
    .vm-imgframe .product-image { transition: opacity .4s ease !important; }
}


/* === Card layout refinements (mockup composition, 2026-06-17) === */
.product-image-container{position:relative;}
.vm-cond-badge{position:absolute;top:10px;left:10px;z-index:5;background:rgba(17,24,39,.82);color:#fff;font-size:12px;font-weight:600;line-height:1;padding:6px 11px;border-radius:8px;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
.vm-cond-badge.is-new{background:rgba(16,185,129,.92);}
.product-content .product-meta .product-condition{display:none;}
.product-content .seller-info{border-top:1px solid #eef0f3;margin-top:14px;padding-top:13px;padding-right:26px;position:relative;display:flex;align-items:center;gap:10px;min-width:0;}
.product-content .seller-info .seller-name{display:inline-flex;align-items:center;gap:11px;min-width:0;flex:1 1 auto;font-weight:600;color:#1f2937;text-decoration:none;}
.product-content .seller-info .reputation-badge{margin-left:0;flex:0 0 auto;white-space:nowrap;font-size:11px;font-weight:600;line-height:1;padding:4px 9px;border-radius:7px;}
.product-content .seller-info .seller-name img,.product-content .seller-info .seller-avatar{width:38px!important;height:38px!important;border-radius:50%!important;object-fit:cover!important;margin:0!important;flex:0 0 auto;vertical-align:middle;}
.product-content .seller-info .seller-name > i{width:38px;height:38px;border-radius:50%;background:#eef2ff;color:#6366f1!important;display:inline-flex;align-items:center;justify-content:center;font-size:15px;margin:0!important;flex:0 0 auto;}
.product-content .seller-info .seller-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.product-content .seller-info::after{content:'›';position:absolute;right:4px;top:50%;transform:translateY(-52%);color:#cbd5e1;font-size:15px;line-height:1;pointer-events:none;}
.product-content .product-date{margin-left:49px;margin-top:2px;color:#6b7280;font-size:12px;}


/* === Card tweaks 2026-06-17b: align titles, neutral price, condition/video badge stacking === */
.product-content .product-title{min-height:2.8em;}              /* reserve 2 lines so price/seller align across cards */
.product-content .product-price{color:#111827;}                 /* not red (red reads as discount) */
.vm-cond-badge{box-shadow:0 2px 8px rgba(0,0,0,.30);background:rgba(17,24,39,.9);}  /* denser so it does not blend on dark photos */
.vm-cond-badge.is-new{background:#16a34a;}                       /* "Нове" = green accent; used conditions stay dark */
/* don't let the video badge sit on top of the condition badge — stack them */
.product-image-container:has(.vm-cond-badge) .video-badge{top:46px;}
.product-image-container:has(.vm-cond-badge) .product-vip-badge--media{top:46px;}
.product-image-container:has(.vm-cond-badge):has(.product-vip-badge--media) .video-badge{top:82px;}


/* === Fix 2026-06-17c: date indent only when seller row present (seller page has no seller row) === */
.product-content .product-date{margin-left:0;}
.product-content .seller-info + .product-date{margin-left:49px;}

/* Tighter vertical rhythm in the grid card text block on desktop (mobile already compact) — 2026-06-17 */
@media (min-width: 769px){
  .products-grid .product-card:not(.product-card-list) .product-content{padding:12px 13px 10px;}
  .products-grid .product-card:not(.product-card-list) .product-title{margin-bottom:5px;line-height:1.3;}
  .products-grid .product-card:not(.product-card-list) .product-price{margin-bottom:6px;line-height:1.15;}
  .products-grid .product-card:not(.product-card-list) .product-meta{margin-bottom:5px;gap:4px;}
  .products-grid .product-card:not(.product-card-list) .product-content .seller-info{margin-top:9px;padding-top:9px;}
  .products-grid .product-card:not(.product-card-list) .product-content .seller-info + .product-date{margin-top:3px;}
}


/* === Variant 8: price|category & seller|date strips — 1:1 with mockup (2026-06-17) === */

/* grid card title — match mockup size (scoped to grid so list view is untouched) */
.products-grid .product-card:not(.product-card-list) .product-content .product-title{font-size:13.5px;font-weight:600;line-height:1.32;margin-bottom:9px;min-height:2.64em;}

/* row 1: price | category */
.product-content .product-priceline{display:flex;align-items:center;gap:0;margin:0;min-width:0;}
.product-content .product-priceline .product-price{flex:0 0 auto;margin:0;padding-right:12px;font-size:17px;font-weight:700;color:#111111;line-height:1;white-space:nowrap;}
.product-content .product-priceline .product-category{flex:1 1 auto;justify-content:flex-end;padding-left:12px;min-width:0;overflow:hidden;color:#5b6068;font-size:11px;font-weight:500;line-height:1;display:flex;align-items:center;gap:4px;}
.product-content .product-priceline .product-category i,
.product-content .product-priceline .product-category .cat-icon-fa{font-size:11px;color:#8a8f98;flex:0 0 auto;}
.product-content .product-priceline .product-category .product-category-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* row 2: seller | date */
.product-content .product-sellerline{display:flex;align-items:center;gap:0;border-top:1px solid #f1f1f1;margin-top:8px;padding-top:8px;padding-right:0;min-width:0;}
.product-content .product-sellerline:not(:has(.seller-info)){border-top:none;margin-top:6px;padding-top:0;}
.product-content .product-sellerline .seller-info{flex:1 1 auto;border-top:none;margin:0;padding:0 12px 0 0;min-width:0;display:flex;align-items:center;gap:6px;}
.product-content .product-sellerline .seller-info::after{content:none;}
.product-content .product-sellerline .seller-info .seller-name{gap:6px;font-size:12px;font-weight:500;color:#33373d;min-width:0;}
.product-content .product-sellerline .seller-info .seller-name img,
.product-content .product-sellerline .seller-info .seller-avatar{width:18px !important;height:18px !important;border-radius:50% !important;object-fit:cover !important;margin:0 !important;flex:0 0 auto;}
.product-content .product-sellerline .seller-info .seller-name > i{width:18px;height:18px;border-radius:50%;background:#eef0f3;color:#5b626e !important;display:inline-flex;align-items:center;justify-content:center;font-size:10px;margin:0 !important;flex:0 0 auto;}
.product-content .product-sellerline .seller-info .seller-name-text{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.product-content .product-sellerline .seller-info .reputation-badge{flex:0 0 auto;white-space:nowrap;font-size:10px;font-weight:500;line-height:1;padding:2px 6px;border-radius:6px;}
.product-content .product-sellerline .seller-info .reputation-badge.new{background:#e9f6ee;color:#2f6a45;}
.product-content .product-sellerline .product-date{flex:0 0 auto;margin:0 !important;padding-left:12px;white-space:nowrap;color:#6b7280;font-size:11px;}

/* full-height divider between segments (like the mockup) */
.vm-strip-sep{flex:0 0 auto;align-self:stretch;width:1px;background:#ededed;margin:1px 0;}

/* beat the older grid-desktop seller-info tightening rule (specificity) */
@media (min-width:769px){
  .products-grid .product-card:not(.product-card-list) .product-content .product-priceline{margin:0;}
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline{margin-top:8px;padding-top:8px;}
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline .seller-info{margin-top:0;padding-top:0;padding-bottom:0;}
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline .product-date{margin-top:0;}
}

/* list view: thin vertical dividers between meta segments (category | state | date) */
@media (min-width:769px){
  .product-list-meta > span + span::before{content:'';flex:0 0 auto;width:1px;height:11px;background:#d0d7e2;margin-right:7px;align-self:center;}
}

/* clamp category fa-icon inside priceline so it does not inflate the strip (2026-06-17) */
.product-content .product-priceline .product-category .cat-icon-fa,
.product-content .product-priceline .product-category > i{width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;display:inline !important;background:none !important;border-radius:0 !important;padding:0 !important;font-size:11px !important;line-height:1 !important;color:#8a8f98 !important;}

/* kill leftover desktop price margin so the price strip is as tight as the mockup (2026-06-17) */
@media (min-width:769px){
  .products-grid .product-card:not(.product-card-list) .product-content .product-priceline .product-price{margin:0 !important;line-height:1;}
}

/* === Seller row v2: date under the name, reputation badge pinned right (2026-06-17) === */
/* gives the badge ("Новачок (0)") full room — name no longer competes with date on one line */
.product-content .product-sellerline{flex-wrap:wrap;column-gap:0;row-gap:2px;align-items:center;}
.product-content .product-sellerline .vm-strip-sep--seller{display:none;}
.product-content .product-sellerline .seller-info{flex:1 1 100%;display:flex;align-items:center;gap:6px;min-width:0;padding:0;}
.product-content .product-sellerline .seller-info .seller-name{flex:1 1 auto;min-width:0;}
.product-content .product-sellerline .seller-info .reputation-badge{margin-left:auto;flex:0 0 auto;}
.product-content .product-sellerline .product-date{flex:1 1 100%;margin:0 !important;padding-left:0;color:#6b7280;font-size:11px;line-height:1.1;}
.product-content .product-sellerline:has(.seller-info) .product-date{margin-left:26px !important;}
@media (min-width:769px){
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline:has(.seller-info) .product-date{margin-left:26px !important;margin-top:0 !important;}
}

/* === Seller row v3: bigger avatars + keep ONE tidy row on mobile (2026-06-17) === */
/* desktop + base: avatar 18 -> 24px */
.product-content .product-sellerline .seller-info{flex-direction:row;align-items:center;}
.product-content .product-sellerline .seller-info .seller-name{width:auto;align-items:center;}
.product-content .product-sellerline .seller-info .seller-name img,
.product-content .product-sellerline .seller-info .seller-avatar{width:24px !important;height:24px !important;}
.product-content .product-sellerline .seller-info .seller-name > i{width:24px;height:24px;font-size:12px;}
.product-content .product-sellerline:has(.seller-info) .product-date{margin-left:30px !important;}
/* mobile: undo the old column-stack so name+badge stay on one row, date under name */
@media (max-width:768px){
  .product-content .product-sellerline .seller-info{flex-direction:row !important;align-items:center !important;gap:6px !important;}
  .product-content .product-sellerline .seller-info .seller-name{width:auto !important;align-items:center !important;flex:1 1 auto !important;min-width:0 !important;}
  .product-content .product-sellerline .seller-info .seller-name-text{-webkit-line-clamp:1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .product-content .product-sellerline .seller-info .reputation-badge{margin-left:auto !important;max-width:none !important;}
  .product-content .product-sellerline:has(.seller-info) .product-date{margin-left:30px !important;}
}

/* === Mobile: put category UNDER the price (avoid heavy truncation on narrow cards) 2026-06-17 === */
@media (max-width:768px){
  .product-content .product-priceline{flex-wrap:wrap;align-items:baseline;}
  .product-content .product-priceline .vm-strip-sep{display:none;}
  .product-content .product-priceline .product-price{flex:0 0 100%;}
  .product-content .product-priceline .product-category{flex:1 1 100%;justify-content:flex-start;margin-top:3px;overflow:hidden;}
  .product-content .product-priceline .product-category .product-category-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

/* === Softer (less saturated) category color so it doesn't compete with the price 2026-06-17 === */
.product-content .product-priceline .product-category{color:#6b7280;}
.product-content .product-priceline .product-category i,
.product-content .product-priceline .product-category .cat-icon-fa{color:#6b7280 !important;}

/* slightly larger product title on grid cards (owner request) 2026-06-17 */
.products-grid .product-card:not(.product-card-list) .product-content .product-title{font-size:15px;line-height:1.3;}

/* Verified-seller checkmark on cards (override the gray seller-icon rules) */
.product-content .seller-info .seller-name > i.vm-seller-verified,
.seller-info .seller-name .vm-seller-verified,
i.vm-seller-verified{color:#1d9bf0 !important;background:none !important;width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;border-radius:0 !important;font-size:13px !important;line-height:1 !important;margin:0 0 0 5px !important;padding:0 !important;flex:0 0 auto !important;display:inline-flex !important;align-items:center;vertical-align:middle;}

/* =====================================================================
   FIX: ряд кнопок-действий владельца (edit/bump/auto-bump/vip/delete) — 5 шт.
   при 36px+gap 8px = 212px и не помещался в карточку на узких экранах
   (2-колоночная сетка профиля/каталога). Ужимаем кнопки и фиксируем ряд
   по ширине карточки (left+right), чтобы иконки не вылезали за край.
   ===================================================================== */
@media (max-width: 768px) {
    .products-grid .product-image-container .product-actions,
    .product-card .product-image-container .product-actions,
    .product-image-container .product-actions {
        left: 6px !important;
        right: 6px !important;
        gap: 5px;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    .product-image-container .product-actions .action-btn {
        width: 28px;
        height: 28px;
    }
    .product-image-container .product-actions .action-btn i {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .product-image-container .product-actions {
        gap: 4px;
    }
    .product-image-container .product-actions .action-btn {
        width: 26px;
        height: 26px;
    }
    .product-image-container .product-actions .action-btn i {
        font-size: 12px;
    }
}

/* =====================================================================
   PERF FIX (mobile, <=768px): лаги/"глюки" прокрутки на странице профиля.
   Причина: десятки live-blur слоёв в области скролла. На странице со
   многими объявлениями каждая карточка несёт backdrop-filter:blur на
   .action-btn (до 5 шт.) и .product-quick-view-btn, плюс карточки
   .stat-item в шапке. Мобильный GPU переблюривает каждый слой на кадр.
   Фон у этих чипов и так почти непрозрачный → отключаем live-blur на
   мобильных без заметной визуальной разницы.
   ===================================================================== */
@media (max-width: 768px) {
    .action-btn,
    .product-image-container .product-actions .action-btn,
    .product-image-container .product-actions .favorite-btn,
    .product-image-container .product-actions .favorite-btn.action-btn,
    .product-quick-view-btn,
    .stat-item {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* компенсируем потерю "матовости" у карточек статистики — чуть плотнее фон */
    .stat-item {
        background: rgba(255, 255, 255, 0.22) !important;
    }
}

/* =====================================================================
   Шестерёнка управления карточкой + выпадающее меню (портал).
   Заменяет ряд мелких иконок: одна нормальная кнопка-шестерёнка,
   по тапу — меню с подписанными пунктами в body (не обрезается карточкой).
   ===================================================================== */
.action-btn.card-manage-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #334155 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.action-btn.card-manage-btn i { color: #334155; }
.product-image-container .product-actions .action-btn.card-manage-btn {
    width: 36px;
    height: 36px;
}
@media (max-width: 768px) {
    .product-image-container .product-actions .action-btn.card-manage-btn {
        width: 38px;
        height: 38px;
    }
}

.card-manage-menu {
    position: fixed;
    z-index: 12000;
    min-width: 212px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    padding: 6px;
    display: none;
}
.card-manage-menu.open { display: block; }
.card-manage-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.2;
    color: #1f2937;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.card-manage-item i { width: 18px; text-align: center; font-size: 15px; color: #64748b; flex-shrink: 0; }
.card-manage-item:hover { background: #f5f7fa; }
.card-manage-item.is-active,
.card-manage-item.is-active i { color: #ff6600; }
.card-manage-item.danger,
.card-manage-item.danger i { color: #dc2626; }


/* === Seller footer v4: readable nick + buyer status badges (2026-06-25) === */
.product-content .product-sellerline .seller-info{
  flex-wrap:wrap;
  align-items:flex-start;
  row-gap:4px;
}
.product-content .product-sellerline .seller-info .seller-name{
  flex:1 1 100%;
  width:100%;
  max-width:100%;
  gap:6px;
}
.product-content .product-sellerline .seller-info .seller-name-text{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
}
.product-content .product-sellerline .seller-info .seller-badges{
  flex:1 1 100%;
  min-width:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 5px;
  margin-left:30px;
  line-height:1;
}
.product-content .product-sellerline .seller-info .seller-badges .reputation-badge{
  margin-left:0 !important;
  max-width:100%;
  min-height:18px;
}
.seller-verified-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:18px;
  max-width:100%;
  padding:2px 6px;
  border-radius:6px;
  background:#e8f4ff;
  color:#1d72d2;
  font-size:10px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.seller-verified-badge i{
  flex:0 0 auto;
  font-size:9px;
  color:#1d9bf0;
}
.seller-verified-badge span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:768px){
  .product-content .product-sellerline .seller-info{
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    row-gap:4px !important;
  }
  .product-content .product-sellerline .seller-info .seller-name{
    flex:1 1 100% !important;
    width:100% !important;
    max-width:100% !important;
  }
  .product-content .product-sellerline .seller-info .seller-name-text{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .product-content .product-sellerline .seller-info .seller-badges{
    flex:1 1 100% !important;
    width:calc(100% - 30px);
    margin-left:30px;
    gap:4px;
  }
  .seller-verified-badge,
  .product-content .product-sellerline .seller-info .seller-badges .reputation-badge{
    font-size:9.5px;
    padding:2px 5px;
  }
}
@media (max-width:380px){
  .product-content .product-sellerline .seller-info .seller-badges{
    margin-left:0;
    width:100%;
  }
  .seller-verified-badge{
    max-width:100%;
  }
}

/* === Seller footer v5: compact verified seller icon + reputation chip (2026-06-25) === */
.product-content .product-sellerline .seller-info{
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  row-gap:0;
}
.product-content .product-sellerline .seller-info .seller-name{
  flex:1 1 auto;
  width:auto;
  max-width:none;
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.product-content .product-sellerline .seller-info .seller-name-text{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.product-content .product-sellerline .seller-info .seller-badges{
  display:none!important;
}
.product-content .product-sellerline .seller-info .reputation-badge{
  margin-left:auto!important;
  flex:0 0 auto;
  min-height:18px;
  padding:2px 6px;
  font-size:10px;
  line-height:1;
  border-radius:6px;
  white-space:nowrap;
}
.product-content .seller-info .seller-name > i.vm-seller-verified,
.seller-info .seller-name .vm-seller-verified,
i.vm-seller-verified{
  color:#1d9bf0!important;
  background:none!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  border-radius:0!important;
  font-size:13px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center;
  vertical-align:middle;
}
@media (max-width:768px){
  .product-content .product-sellerline .seller-info{
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:5px!important;
    row-gap:0!important;
  }
  .product-content .product-sellerline .seller-info .seller-name{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  .product-content .product-sellerline .seller-info .seller-name-text{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .product-content .product-sellerline .seller-info .reputation-badge{
    max-width:none!important;
    margin-left:auto!important;
    font-size:9.5px;
    padding:2px 5px;
  }
  .product-content .product-sellerline:has(.seller-info) .product-date{
    margin-left:30px!important;
    margin-top:2px!important;
  }
}

/* === Mobile seller footer v6: nickname gets the main line (2026-06-25) === */
@media (max-width:768px){
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline,
  .product-content .product-sellerline{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "seller seller"
      "date rep";
    column-gap:8px;
    row-gap:3px;
    align-items:center;
    padding-top:8px;
    margin-top:8px;
  }
  .product-content .product-sellerline .seller-info{
    grid-area:seller;
    min-width:0;
    width:100%;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    flex-wrap:nowrap!important;
  }
  .product-content .product-sellerline .seller-info .seller-name{
    min-width:0!important;
    width:100%!important;
    flex:1 1 auto!important;
    gap:7px!important;
    display:inline-flex!important;
    align-items:center!important;
  }
  .product-content .product-sellerline .seller-info .seller-name img,
  .product-content .product-sellerline .seller-info .seller-avatar,
  .product-content .product-sellerline .seller-info .seller-name > i:not(.vm-seller-verified){
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
  }
  .product-content .product-sellerline .seller-info .seller-name-text{
    min-width:0!important;
    max-width:none!important;
    flex:1 1 auto!important;
    font-size:13px!important;
    font-weight:600!important;
    color:#374151!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .product-content .product-sellerline .seller-info .reputation-badge{
    grid-area:rep;
    justify-self:end;
    align-self:center;
    margin:0!important;
    max-width:100%!important;
    min-height:18px;
    padding:2px 6px;
    font-size:10px;
    line-height:1;
    border-radius:6px;
    white-space:nowrap;
  }
  .product-content .product-sellerline .product-date,
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline:has(.seller-info) .product-date,
  .product-content .product-sellerline:has(.seller-info) .product-date{
    grid-area:date;
    justify-self:start;
    min-width:0;
    margin:0 0 0 35px!important;
    padding:0!important;
    color:#6b7280;
    font-size:12px;
    line-height:1.1;
    white-space:nowrap;
  }
  .product-content .product-sellerline .vm-strip-sep--seller{
    display:none!important;
  }
  .product-content .seller-info .seller-name > i.vm-seller-verified,
  .seller-info .seller-name .vm-seller-verified,
  i.vm-seller-verified{
    flex:0 0 auto!important;
    margin-left:1px!important;
  }
}
@media (max-width:380px){
  .product-content .product-sellerline .seller-info .seller-name-text{
    font-size:12.5px!important;
  }
  .product-content .product-sellerline .seller-info .reputation-badge{
    font-size:9.5px;
    padding-inline:5px;
  }
}

/* === Mobile seller footer v7: real grid children via display-contents (2026-06-25) === */
@media (max-width:768px){
  .product-content .product-sellerline{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "seller seller"
      "date rep";
    column-gap:8px;
    row-gap:3px;
    align-items:center;
  }
  .product-content .product-sellerline .seller-info{
    display:contents!important;
  }
  .product-content .product-sellerline .seller-info .seller-name{
    grid-area:seller;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
  }
  .product-content .product-sellerline .seller-info .reputation-badge{
    grid-area:rep;
    justify-self:end;
    align-self:center;
    margin:0!important;
    max-width:none!important;
  }
  .product-content .product-sellerline .product-date,
  .product-content .product-sellerline:has(.seller-info) .product-date,
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline:has(.seller-info) .product-date{
    grid-area:date;
    justify-self:start;
    margin:0 0 0 35px!important;
    padding:0!important;
  }
}

/* === Mobile seller footer v8: fit date + reputation without overlap (2026-06-25) === */
@media (max-width:768px){
  .product-content .product-sellerline .product-date,
  .product-content .product-sellerline:has(.seller-info) .product-date,
  .products-grid .product-card:not(.product-card-list) .product-content .product-sellerline:has(.seller-info) .product-date{
    margin:0!important;
    font-size:11px!important;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .product-content .product-sellerline .seller-info .reputation-badge{
    font-size:9.5px!important;
    padding:2px 5px!important;
  }
}


/* quick-view mobile fix 20260630 — 2-кол грид не влезал на узких экранах: складываем в одну колонку */
@media (max-width: 640px){
  .product-quick-view-modal{align-items:center;padding:12px}
  .product-quick-view-modal__dialog{grid-template-columns:1fr;width:100%;max-width:100%;box-sizing:border-box;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
  .product-quick-view-modal__media{height:auto;max-height:none;min-width:0;overflow:hidden}
  .product-quick-view-modal__stage{height:200px;flex:0 0 auto}
  .product-quick-view-modal__thumbs{min-width:0;max-width:100%;overflow-x:auto}
  .product-quick-view-modal__body{min-width:0}
  .product-quick-view-modal__thumb{width:56px;height:56px}
  .product-quick-view-modal__close{position:fixed;top:14px;right:14px;z-index:12}
}

/* /css/site-search.css */
/* Shared public search layout. Keep this independent from catalog filters.css:
   product, seller and 404 pages render the same search component. */
.filter-search-wrapper {
    position: relative;
}

.vm-site-search {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.homepage-product-search {
    display: flex;
    justify-content: center;
    margin: 18px 0 22px;
}

.products-global-search-panel {
    margin-top: 14px;
    margin-bottom: 6px;
}

.product-page-search {
    margin-top: 18px;
    margin-bottom: 8px;
}

.error-search-form {
    margin-bottom: 40px;
}

.vm-site-search .filter-search-wrapper {
    position: relative;
    max-width: 720px;
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.vm-site-search .filter-search-field,
.homepage-search-form.vm-site-search .filter-search-field,
.homepage-search-input {
    width: 100%;
    height: 46px;
    padding: 0 60px 0 42px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
    transform: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.vm-site-search .filter-search-field:focus,
.homepage-search-form.vm-site-search .filter-search-field:focus,
.homepage-search-input:focus {
    border-color: #ff6600;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
    transform: none;
}

.vm-site-search .filter-search-icon,
.homepage-search-form.vm-site-search .filter-search-icon,
.homepage-search-form.vm-site-search .filter-search-wrapper .filter-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
    pointer-events: none;
}

.vm-site-search .filter-search-icon i,
.homepage-search-form.vm-site-search .filter-search-icon i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #94a3b8;
    font-size: 16px;
}

.vm-site-search .filter-search-submit-btn,
.homepage-search-form.vm-site-search .homepage-search-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #ff6600;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(255, 102, 0, 0.22);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.vm-site-search .filter-search-submit-btn:hover,
.homepage-search-form.vm-site-search .homepage-search-inline-btn:hover {
    background: #e65c00;
    box-shadow: 0 10px 22px rgba(255, 102, 0, 0.28);
}

@media (max-width: 600px) {
    .vm-site-search .filter-search-wrapper {
        padding: 10px;
    }

    .vm-site-search .filter-search-field,
    .homepage-search-form.vm-site-search .filter-search-field,
    .homepage-search-input {
        height: 46px;
        padding-left: 40px;
        padding-right: 58px;
    }

    .vm-site-search .filter-search-icon,
    .homepage-search-form.vm-site-search .filter-search-icon,
    .homepage-search-form.vm-site-search .filter-search-wrapper .filter-search-icon {
        left: 24px;
        display: block;
    }

    .vm-site-search .filter-search-submit-btn,
    .homepage-search-form.vm-site-search .homepage-search-inline-btn {
        right: 10px;
        width: 46px;
        height: 46px;
    }
}

/* /css/prod-grid.css */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f8fafc;
            color: #1a202c;
            line-height: 1.6;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        .products-section {
            padding: 2rem 0;
        }

        h1 {
            font-size: 1.75rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 2rem;
            text-align: center;
        }

        /* Filters */
        .filters {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        #filterForm {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
            gap: 1rem;
            align-items: end;
        }

        .search-input,
        .category-select,
        .condition-select,
        .sort-select,
        .price-input {
            padding: 0.75rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.2s;
            background: white;
        }

        .search-input:focus,
        .category-select:focus,
        .condition-select:focus,
        .sort-select:focus,
        .price-input:focus {
            outline: none;
            border-color: #4299e1;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
        }

        .price-filter {
            display: flex;
            gap: 0.5rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
        }

        /* Search results info */
        .search-results-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 0 0.5rem;
        }

        .results-count {
            font-size: 1.1rem;
            font-weight: 600;
            color: #4a5568;
        }

        .clear-filters-btn {
            color: #e53e3e;
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: color 0.2s;
        }

        .clear-filters-btn:hover {
            color: #c53030;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.2rem;
            margin-bottom: 2rem;
        }

        /* Product Card styles are now in product-card.css */

        /* Empty state */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #718096;
        }

        .empty-state i {
            font-size: 4rem;
            color: #e2e8f0;
            margin-bottom: 1rem;
        }

        .empty-state h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: #4a5568;
        }

        /* Responsive */
        /* Для больших экранов (десктопы) - принудительно 5 товаров в ряду */
        @media (min-width: 1200px) {
            .products-grid {
                grid-template-columns: repeat(5, 1fr);
                gap: 1.5rem;
            }
        }

        /* Для средних экранов (планшеты и небольшие десктопы) */
        @media (max-width: 1199px) and (min-width: 769px) {
            .products-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }

            h1 {
                font-size: 1.4rem;
            }

            #filterForm {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }

            .price-filter {
                grid-column: 1;
            }

            .search-results-info {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .products-grid {
                grid-template-columns: repeat(2, 1fr);
                /* much tighter gaps on mobile */
                gap: 0.35rem;
            }

            .product-content {
                padding: 0.5rem;
            }
        }

        @media (max-width: 480px) {
            .products-grid {
                /* Two columns but wider cards so side gutters shrink */
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.25rem;
                max-width: 100% !important;
                padding: 0 6px !important; /* smaller side gutters */
                margin: 0 auto !important;
            }

            /* Reduce outer container padding to give more horizontal room */
            .container {
                padding: 0 6px;
            }
        }

        @media (max-width: 360px) {
            .products-grid {
                /* very small devices: slightly smaller min width so two columns still fit */
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.16rem;
                max-width: 100% !important;
                padding: 0 6px !important;
                margin: 0 auto !important;
            }
            
            .container {
                padding: 0 10px;
            }
        }

        /* Анимации загрузки */
        .loading-skeleton {
            animation: skeleton 1.5s ease-in-out infinite alternate;
        }

        @keyframes skeleton {
            0% { opacity: 1; }
            100% { opacity: 0.4; }
        }

/* Skeleton loading cards */
.skeleton-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.skeleton-image {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.price { width: 40%; height: 18px; }
.skeleton-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.skeleton-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line.meta { width: 50%; height: 12px; }

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* List-view "Показать еще" skeleton: mimic .product-card-list rows so the placeholder
   reads as separate listings instead of one solid grey block (2026-06-15). */
.skeleton-card--list { cursor: default; }
.skeleton-card--list .skeleton-fill {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-card--list .skeleton-list-main { gap: 10px; justify-content: center; }
.skeleton-card--list .skeleton-list-side {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    padding: 13px 16px 12px 0;
}
@media (max-width: 768px) {
    .skeleton-card--list .skeleton-list-side { display: none; }
}


/* Make the grid load-more skeleton image as tall as the real .product-image-container
   (260 / 220 / 205) so the skeleton card height matches real cards. */
.skeleton-card .skeleton-image { aspect-ratio: auto; height: 300px; }
@media (max-width: 768px) { .skeleton-card .skeleton-image { height: 210px; } }
@media (max-width: 420px) { .skeleton-card .skeleton-image { height: 195px; } }

/* /css/auth-modals.css */
/* Модальные окна */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-content {
    background: #ffffff;
    margin: auto;
    padding: 2.5rem;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    max-height: 92vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        transform: translateY(-30px) scale(0.95);
        opacity: 0;
    }
    to { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Кнопка закрытия */
.close {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    font-size: 0;
    font-weight: 300;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    transform: none;
}

.close::before,
.close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    transform: none;
}

/* Заголовки (несемантические - .modal-heading вместо h2) */
.modal-heading {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Форма */
.auth-form {
    width: 100%;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.form-group input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #ffffff;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    transform: translateY(-1px);
}

.form-group input:hover {
    border-color: #d1d5db;
}

.form-group input::placeholder {
    color: #9ca3af;
}

/* Обертка для поля пароля с кнопкой глаза */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 3rem; /* место для кнопки */
    margin: 0;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 1rem;
    z-index: 1;
}

.password-toggle:hover {
    color: #6b7280;
}

.password-toggle:focus {
    outline: none;
    color: #8b5cf6;
}

/* Checkbox стили */
.checkbox-label {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px;
    margin-right: 0.75rem;
    accent-color: #8b5cf6;
    cursor: pointer;
}

.checkbox-label span {
    font-size: 0.9rem;
    color: #6b7280;
}

/* Кнопки */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-sizing: border-box;
}

.btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.2);
}

/* Ссылки переключения */
.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.auth-switch a {
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.auth-switch a:hover {
    color: #7c3aed;
    text-decoration: underline;
}

.auth-switch a:active {
    transform: scale(0.98);
}

/* Дополнительные стили для формы сброса пароля */
.auth-form p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* Адаптивность */
@media (max-width: 480px) {
    .modal-content {
        margin: 1rem;
        padding: 2rem;
        max-width: none;
        border-radius: 12px;
    }
    
    .modal-heading {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-group input {
        padding: 0.875rem 1rem;
    }
    
    .btn {
        padding: 0.875rem 1.5rem;
    }
}

/* Состояния загрузки */
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled:hover {
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled::before {
    display: none;
}

/* Сообщения об ошибках */
.error-message {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.form-group.error input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Успешные сообщения */
.success-message {
    color: #10b981;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.form-group.success input {
    border-color: #10b981;
}

/* Дополнительные эффекты */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #a855f7, #ec4899);
    border-radius: 16px 16px 0 0;
}

/* Анимация для скрытия модального окна */
.modal.hiding {
    animation: fadeOut 0.3s ease;
}

.modal.hiding .modal-content {
    animation: slideOut 0.3s ease;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideOut {
    from { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    to { 
        transform: translateY(-30px) scale(0.95);
        opacity: 0;
    }
}