body {
	font-family: Arial, sans-serif;
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px;
	background: #f4f7f6;
	padding-top: 80px;
}
.alert { background: #e2f0d9; color: #385723; padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #c5e1a5;}
.nav {
    background: white;
    padding: 15px 30px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
    border-radius: 0 0 8px 8px;
}

.nav-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: #007bff; font-weight: bold; cursor: pointer; }
.container { display: flex; gap: 20px; align-items: flex-start; }
.section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); box-sizing: border-box; }
.width-full { flex: 1; width: 100%; }
.width-75 { flex: 3; max-width: 75%; }
.width-25 { flex: 1; max-width: 25%; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 15px; margin-top: 15px; }
.product-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow 0.2s; }
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #ccc; }
.product-img-placeholder { height: 110px; background: #e9ecef; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 13px; margin-bottom: 10px; font-weight: bold; }
.product-title { font-size: 14px; font-weight: bold; color: #333; margin: 0 0 4px 0; }
.product-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.product-price { font-size: 15px; font-weight: bold; color: #28a745; }
.btn { background: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-blue { background: #007bff; width: 100%; padding: 10px; }
.btn-cart { width: 100%; margin-top: 10px; background: #ffc107; color: #000; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2000; justify-content: center; align-items: center; }
.modal-content { background: white; padding: 30px; border-radius: 8px; width: 100%; max-width: 400px; position: relative; }
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 24px; color: #aaa; cursor: pointer; }
.notification-badge { background: #fff3cd; color: #856404; padding: 10px; border-radius: 5px; margin-bottom: 10px; font-size: 13px;}
.status-Оплачен { background: #cfe2ff; color: #084298; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.status-В\ сборке { background: #fff3cd; color: #664d03; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.status-Отправлен { background: #e0cffc; color: #6f42c1; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.status-Доставлен { background: #d1e7dd; color: #0f5132; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; }
.order-box { background: #fafafa; padding: 15px; margin-bottom: 15px; border: 1px solid #eee; border-radius: 6px; font-size: 13px; }
.order-items-list { margin: 8px 0 0 0; padding-left: 0; list-style: none; border-top: 1px dashed #ddd; padding-top: 8px; }
.order-item-row { display: flex; justify-content: space-between; color: #555; padding: 3px 0; }
.search-box { display: flex; gap: 8px; margin-bottom: 15px; } .search-box input { margin: 0; }
.view-modes { display: flex; gap: 5px; margin-left: auto; align-items: center; }
.btn-mode { background: #e9ecef; border: 1px solid #ced4da; color: #495057; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
.btn-mode.active { background: #007bff; color: white; border-color: #007bff; }
.products-grid.list-mode { grid-template-columns: 1fr; gap: 10px; }
.products-grid.list-mode .product-card { flex-direction: row; align-items: center; gap: 15px; padding: 10px 15px; }
.products-grid.list-mode .product-img-placeholder { height: 60px; width: 60px; min-width: 60px; margin-bottom: 0; font-size: 11px; }
.products-grid.list-mode .product-card > div:first-child { display: flex; align-items: center; gap: 15px; flex: 2; }
.products-grid.list-mode .product-card > div:last-child { display: flex; align-items: center; gap: 20px; flex: 1; justify-content: flex-end; }
.products-grid.list-mode .product-meta { margin-top: 0; padding-top: 0; gap: 15px; }
.products-grid.list-mode .btn-cart { margin-top: 0; width: auto; white-space: nowrap; }

@media screen and (max-width: 768px) {
    body { padding: 15px; padding-top: 130px; }
    .nav { flex-direction: column; gap: 10px; padding: 10px 15px; text-align: center; }
    .nav-links { gap: 15px; } .container { flex-direction: column; gap: 15px; }
    .width-75, .width-25, .width-full { max-width: 100%; width: 100%; flex: none; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .products-grid.list-mode .product-card { flex-direction: column; align-items: stretch; gap: 10px; }
    .products-grid.list-mode .product-card > div:first-child { flex-direction: column; align-items: flex-start; gap: 5px; }
    .products-grid.list-mode .product-card > div:last-child { justify-content: space-between; width: 100%; }
    .products-grid.list-mode .btn-cart { width: 100%; margin-top: 5px; }
    .modal-content { width: 90%; padding: 20px; margin: 0 5%; }
}
@media screen and (max-width: 400px) { .products-grid { grid-template-columns: 1fr; } }


/* КРАСИВОЕ И ОДИНАКОВОЕ ВЫРАВНИВАНИЕ ФОТО В РЕЖИМЕ СПИСКА */
.products-grid.list-mode .product-card .product-img-box {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important; /* Защищает блок от сжатия, если название товара слишком длинное */
    max-width: 80px !important;
    margin-bottom: 0 !important; /* Убираем нижний отступ, который был в режиме плитки */
    border-radius: 6px;
    overflow: hidden;
}

.products-grid.list-mode .product-card .product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка идеально заполняет квадрат 80х80 без искажения пропорций */
}

/* Оптимизация отступов в режиме списка, чтобы текст не прилипал к картинке */
.products-grid.list-mode .product-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 15px; 
}