/* === ОСНОВНЫЕ СТИЛИ === */
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; margin: 0; padding: 0; color: #333; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
a { text-decoration: none; }

/* ШАПКА */
header { background: white; padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 30px; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: bold; color: #2563eb; }
.lang-switch a { margin-left: 10px; color: #64748b; font-weight: 500; }
.lang-switch a.active { color: #2563eb; font-weight: bold; border-bottom: 2px solid #2563eb; }

/* ФИЛЬТРЫ */
.filters { text-align: center; margin-bottom: 30px; overflow-x: auto; white-space: nowrap; padding-bottom: 10px; }
.filter-btn { padding: 8px 20px; margin: 5px; border: 1px solid #ddd; background: white; border-radius: 20px; cursor: pointer; transition: 0.2s; }
.filter-btn:hover, .filter-btn.active { background: #2563eb; color: white; border-color: #2563eb; }

/* СЕТКА ТОВАРОВ */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; padding-bottom: 30px; }
.card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: 0.3s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.card-img { width: 100%; height: 220px; object-fit: cover; background: #eee; }
.card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.card-cat { font-size: 12px; text-transform: uppercase; color: #94a3b8; letter-spacing: 1px; margin-bottom: 5px; }
.card-title { font-size: 18px; margin: 0 0 5px 0; line-height: 1.3; font-weight: 600; }
.card-price { font-size: 20px; font-weight: 800; color: #0f172a; margin: 10px 0; }
/* ОПИСАНИЕ ТОВАРА (ОБРЕЗАННОЕ) */
.card-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
    line-height: 1.5;
    flex-grow: 1;

    /* МАГИЯ ДЛЯ ОБРЕЗКИ ТЕКСТА */
    display: -webkit-box;
    -webkit-line-clamp: 5;      /* <-- Показываем только 5 строк */
    -webkit-box-orient: vertical;
    overflow: hidden;           /* Всё, что ниже 5 строк - прячем */
    text-overflow: ellipsis;    /* Добавляем троеточие "..." в конце */
    height: 105px;              /* Фиксированная высота (примерно 5 строк) */
}
.btn-buy { display: block; text-align: center; background: #2563eb; color: white; padding: 12px; border-radius: 8px; font-weight: bold; transition: 0.2s; }
.btn-buy:hover { background: #1d4ed8; }

/* ПАГИНАЦИЯ (1 2 3) */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 20px 0 50px 0; }
.page-btn { background: white; border: 1px solid #e2e8f0; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; color: #64748b; font-weight: bold; }
.page-btn.active, .page-btn:hover { background: #2563eb; color: white; border-color: #2563eb; }

/* ФУТЕР */
footer { background: #1e293b; color: white; text-align: center; padding: 40px 0 20px; margin-top: auto; }
.social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.social-btn { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.social-btn:hover { background: #3b82f6; }
.social-btn svg { width: 20px; height: 20px; fill: white; }
.disclaimer { font-size: 12px; color: #94a3b8; max-width: 600px; margin: 0 auto 20px; line-height: 1.5; padding: 0 15px; }
.copyright { border-top: 1px solid #334155; padding-top: 20px; font-size: 14px; color: #cbd5e1; }

/* АДМИНКА (СПЕЦИАЛЬНЫЕ СТИЛИ) */
.hidden { display: none !important; }
.login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0f172a; display: flex; justify-content: center; align-items: center; z-index: 999; }
.login-box { background: white; padding: 40px; border-radius: 16px; text-align: center; width: 300px; }
.admin-wrapper { max-width: 800px; margin: 40px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; color: #475569; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; box-sizing: border-box; }
.btn-action { width: 100%; padding: 12px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; color: white; margin-top: 10px; font-size: 16px; }
.btn-green { background: #10b981; } .btn-blue { background: #3b82f6; } .btn-red { background: #ef4444; width: auto; padding: 5px 10px; font-size: 12px; }
#list { max-height: 400px; overflow-y: auto; border: 2px solid #e2e8f0; border-radius: 8px; padding: 10px; margin-bottom: 20px; }
.item-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #f1f5f9; }