/* ============================================================================
БАЗОВЫЕ СТИЛИ
============================================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
/* ============================================================================
ШАПКА САЙТА
============================================================================ */
.top-header {
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 1200px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.desktop-header {
display: flex;
align-items: flex-start;
padding: 10px 20px;
}
.desktop-header .logo-container {
flex-shrink: 0;
margin-right: 20px;
}
.desktop-header .logo-container img {
display: block;
width: auto;
max-width: 100%;
height: auto;
}
.desktop-header .menu-search-container {
display: flex;
flex-direction: column;
flex: 1;
}
.desktop-header .menu-search-container h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 1.5em;
color: #333;
text-align: center;
}
.desktop-header .top-menu {
margin-bottom: 10px;
text-align: center;
}
.desktop-header .top-menu nav {
display: inline-block;
}
.desktop-header .top-menu ul {
list-style: none;
display: flex;
gap: 20px;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.desktop-header .top-menu a {
text-decoration: none;
color: #999999;
font-weight: bold;
}
.desktop-header .top-menu a:hover {
color: #555555;
}
.desktop-header .search-and-cart {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 90%;
max-width: 900px;
margin: 0 auto;
}
.desktop-header .search-bar {
display: flex;
flex: 1;
max-width: 500px;
}
.desktop-header .search-bar input[type="text"] {
width: 80%;
max-width: 500px;
padding: 8px 6px;
border: 1px solid #ccc;
border-right: none;
border-radius: 4px 0 0 4px;
outline: none;
margin: 20px 0;
font-size: 18px;
box-sizing: border-box;
}
.desktop-header .search-bar button {
padding: 8px 6px;
border: 1px solid #555555;
background-color: #555555;
color: white;
border-radius: 0 4px 4px 0;
cursor: pointer;
margin: 20px 0;
border-left: none;
}
.desktop-header .search-bar button:hover {
background-color: #DDDDDD;
color: black;
}
.desktop-header .cart-icon-container {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.desktop-header .cart-icon-container img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.cart-icon-container a,
.mobile-cart-icon a {
text-decoration: none;
color: inherit;
}
/* ============================================================================
КОНТЕЙНЕР И БОКОВАЯ ПАНЕЛЬ
============================================================================ */
.container {
display: flex;
flex: 1;
max-width: 1200px;
margin: 0 auto;
padding: 2px 0;
width: 100%;
}
.sidebar {
width: 250px;
background-color: #ffffff;
padding: 15px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
height: fit-content;
align-self: start;
margin-right: 20px;
}
.sidebar h3 {
margin-bottom: 15px;
font-size: 1.2em;
color: #495057;
}
#category-tree ul {
list-style: none;
padding-left: 15px;
}
#category-tree li {
margin-bottom: 5px;
}
#category-tree a {
text-decoration: none;
color: #6c757d;
display: block;
padding: 5px 0;
}
#category-tree a:hover {
color: #007bff;
background-color: #f8f9fa;
padding: 5px;
border-radius: 3px;
}
/* ============================================================================
ОСНОВНОЙ КОНТЕНТ
============================================================================ */
.content {
flex: 1;
background-color: #ffffff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
.content img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.responsive-image {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.intro-image-container {
text-align: center;
padding: 10px;
}
/* ============================================================================
ПОДВАЛ
============================================================================ */
footer {
background-color: #e9ecef;
padding: 20px;
text-align: center;
color: #6c757d;
margin-top: auto;
}
/* ============================================================================
МОБИЛЬНАЯ ВЕРСИЯ
============================================================================ */
.mobile-header {
display: none;
flex-direction: column;
padding: 10px;
gap: 10px;
}
.mobile-header-line-1 {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-header .logo-container {
flex-shrink: 0;
margin: 0;
}
.mobile-header .logo-container img {
display: block;
width: auto;
max-width: 100%;
height: auto;
}
.site-title-mobile {
margin: 0;
font-size: 1.1em;
color: #333;
flex: 1;
}
.mobile-header-line-2 {
display: flex;
align-items: center;
gap: 10px;
}
.mobile-menu-toggle {
display: flex;
flex-direction: column;
cursor: pointer;
padding: 5px;
background: none;
border: none;
}
.mobile-menu-toggle span {
width: 40px;
height: 2px;
background-color: #333;
margin: 2px 0;
transition: 0.3s;
}
.mobile-search-bar {
display: flex;
flex: 1;
max-width: 100%;
}
.mobile-search-bar input[type="text"] {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-right: none;
border-radius: 4px 0 0 4px;
outline: none;
font-size: 14px;
box-sizing: border-box;
}
.mobile-search-bar button {
padding: 8px 10px;
border: 1px solid #555555;
background-color: #555555;
color: white;
border-radius: 0 4px 4px 0;
cursor: pointer;
border-left: none;
font-size: 14px;
}
.mobile-header-line-3 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mobile-categories-dropdown select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
font-size: 14px;
box-sizing: border-box;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
padding-right: 30px;
}
.mobile-cart-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.mobile-cart-icon img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.mobile-nav-menu {
display: none;
width: 100%;
background-color: #fff;
padding: 10px 0;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-top: 10px;
}
.mobile-nav-menu.active {
display: block;
}
.mobile-nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-nav-menu li {
width: 100%;
}
.mobile-nav-menu a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
border-bottom: 1px solid #eee;
}
.mobile-nav-menu a:hover {
background-color: #f5f5f5;
}
.mobile-sidebar {
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100vh;
background-color: #ffffff;
box-shadow: 2px 0 8px rgba(0,0,0,0.2);
z-index: 2000;
transition: left 0.3s ease;
overflow-y: auto;
padding: 20px;
}
.mobile-sidebar.active {
left: 0;
}
.mobile-sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.mobile-sidebar-header h3 {
margin: 0;
font-size: 1.2em;
color: #333;
}
.mobile-sidebar-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
padding: 5px;
}
.mobile-sidebar nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-sidebar nav ul li {
margin-bottom: 5px;
}
.mobile-sidebar nav ul li a {
display: block;
padding: 12px 10px;
text-decoration: none;
color: #333;
border-radius: 4px;
}
.mobile-sidebar nav ul li a:hover {
background-color: #f5f5f5;
color: #007bff;
}
.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.5);
z-index: 1500;
}
.mobile-overlay.active {
display: block;
}
/* ============================================================================
СЧЁТЧИК КОРЗИНЫ
============================================================================ */
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background-color: #dc3545;
color: white;
border-radius: 50%;
min-width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: bold;
padding: 0 5px;
transition: transform 0.2s;
}
/* ============================================================================
КАТАЛОГ ТОВАРОВ
============================================================================ */
.products-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px 0;
align-items: stretch;
}
.product-card {
display: flex;
flex-direction: column;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 15px;
background-color: #fff;
text-align: left;
flex: 0 0 calc(25% - 20px);
min-width: 250px;
box-sizing: border-box;
height: 100%;
}
.product-image {
text-align: center;
margin-bottom: 15px;
flex-shrink: 0;
}
.product-image img {
max-width: 100%;
height: auto;
}
.product-info {
display: flex;
flex-direction: column;
flex: 1;
}
.product-info h3 {
font-size: 1em;
margin: 0;
color: #333;
min-height: 60px;
}
.product-code {
font-size: 0.85em;
color: #666;
margin: 5px 0;
}
.product-price {
font-size: 1.2em;
font-weight: bold;
color: #333;
margin: 10px 0;
}
.product-unit {
font-size: 0.85em;
color: #666;
margin: 0;
}
.product-action {
display: flex;
gap: 2px;
margin-top: auto;
padding-top: 0;
align-items: stretch;
}
.product-quantity-wrapper {
display: flex;
align-items: stretch;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.qty-button {
width: 22px;
padding: 4px 4px;
border: none;
background-color: #f5f5f5;
color: #333;
cursor: pointer;
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
transition: background-color 0.2s;
}
.qty-button:hover {
background-color: #e0e0e0;
}
.qty-button:active {
background-color: #d0d0d0;
}
.product-quantity {
width: 50px;
padding: 8px 6px;
border: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #333;
outline: none;
-moz-appearance: textfield;
}
.product-quantity::-webkit-outer-spin-button,
.product-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.add-to-cart {
flex: 1;
padding: 8px 6px;
background-color: #555555;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.2s;
}
.add-to-cart:hover {
background-color: #777777;
}
/* Анимация корзины */
@keyframes cartBump {
0% { transform: scale(1); }
30% { transform: scale(1.3); }
50% { transform: scale(0.9); }
70% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.cart-bump {
animation: cartBump 0.3s ease-in-out;
}
.add-to-cart-success {
background-color: #28a745 !important;
color: white !important;
}
.add-to-cart-success:hover {
background-color: #218838 !important;
}
.add-to-cart:disabled {
background-color: #cccccc;
cursor: not-allowed;
opacity: 0.7;
}

/* Корзина в карточке каталога */
.catalog-cart-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eef5ff;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}
.catalog-cart-info span { font-weight: 500; }
.btn-remove-catalog {
    background: #fff;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}
.btn-remove-catalog:hover { background: #dc3545; color: #fff; }
/* ============================================================================
ПАГИНАЦИЯ
============================================================================ */
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
margin: 20px 0;
padding: 10px;
}
.pagination-link {
display: inline-block;
padding: 2px 8px;
border: 1px solid #555555;
background-color: #ffffff;
color: #555555;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
transition: all 0.2s;
}
.pagination-link:hover {
background-color: #555555;
color: #ffffff;
}
.pagination-link.active {
background-color: #555555;
color: #ffffff;
border-color: #555555;
}
.pagination-link.disabled {
background-color: #f0f0f0;
color: #999999;
border-color: #dddddd;
cursor: not-allowed;
}
.pagination-info {
text-align: center;
color: #666666;
font-size: 14px;
margin: 10px 0 20px 0;
}
/* ============================================================================
СОРТИРОВКА
============================================================================ */
.sort-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 15px 0;
padding: 10px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sort-controls span {
font-weight: bold;
color: #333333;
}
.sort-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: 1px solid #dddddd;
background-color: #ffffff;
color: #555555;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
transition: all 0.2s;
}
.sort-link:hover {
background-color: #555555;
color: #ffffff;
border-color: #555555;
}
.sort-link.active {
background-color: #555555;
color: #ffffff;
border-color: #555555;
}
.sort-order {
font-size: 12px;
}
/* ============================================================================
ПОИСК
============================================================================ */
.search-highlight {
background-color: #ffff00;
color: #000;
padding: 1px 3px;
border-radius: 2px;
}
.search-form-container {
margin: 20px 0;
}
.search-form {
width: 100%;
}
.search-input-group {
display: flex;
gap: 10px;
max-width: 600px;
margin: 0 auto;
}
.search-input-group input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
outline: none;
}
.search-input-group input[type="text"]:focus {
border-color: #555555;
}
.search-header {
margin: 20px 0;
text-align: left;
}
.search-header h2 {
font-size: 1.2em;
margin-bottom: 10px;
color: #333;
}
.search-info {
color: #666;
font-size: 14px;
}
.search-help {
text-align: center;
padding: 40px 20px;
color: #666;
}
.search-examples {
margin-top: 20px;
}
.search-examples h3 {
font-size: 1.1em;
margin-bottom: 10px;
color: #333;
}
.search-examples ul {
list-style: none;
padding: 0;
}
.search-examples li {
margin: 5px 0;
}
.no-products {
text-align: center;
padding: 40px 20px;
color: #666;
}
.no-products a {
color: #555555;
text-decoration: underline;
}
.no-products a:hover {
color: #333;
}
.product-category {
font-size: 0.85em;
color: #666;
margin: 5px 0;
}
/* ============================================================================
ФОРМЫ АВТОРИЗАЦИИ И РЕГИСТРАЦИИ
============================================================================ */
.auth-form-container {
max-width: 500px;
margin: 0 auto;
padding: 30px;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.auth-form-container h1 {
text-align: center;
margin-bottom: 30px;
font-size: 1.5em;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-group label {
font-weight: bold;
color: #333;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
width: 100%;
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #555555;
}
.form-group.checkbox {
flex-direction: row;
align-items: center;
}
.form-group.checkbox input[type="checkbox"] {
width: auto;
margin-right: 10px;
}
.form-group small {
color: #666;
font-size: 0.85em;
}
.form-row {
display: flex;
gap: 20px;
}
.form-row .form-group {
flex: 1;
}
.btn-submit {
padding: 12px 20px;
background-color: #555555;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-submit:hover {
background-color: #777777;
}
.btn-cancel {
padding: 12px 20px;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
text-decoration: none;
display: inline-block;
text-align: center;
margin-left: 10px;
}
.btn-cancel:hover {
background-color: #e0e0e0;
}
.btn-small {
padding: 6px 12px;
font-size: 0.85em;
text-decoration: none;
display: inline-block;
border-radius: 4px;
background-color: #555555;
color: white;
}
.btn-small:hover {
background-color: #777777;
}
.btn-danger {
background-color: #dc3545;
}
.btn-danger:hover {
background-color: #c82333;
}
.auth-links {
margin-top: 20px;
text-align: center;
color: #666;
}
.auth-links a {
color: #555555;
text-decoration: none;
}
.auth-links a:hover {
text-decoration: underline;
}
.success-message {
background-color: #d4edda;
color: #155724;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
border: 1px solid #c3e6cb;
}
.error-message {
background-color: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
border: 1px solid #f5c6cb;
}
.error-message ul {
margin: 0;
padding-left: 20px;
}
.warning-message {
background-color: #fff3cd;
color: #856404;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
border: 1px solid #ffeaa7;
}
/* ============================================================================
ЛИЧНЫЙ КАБИНЕТ
============================================================================ */
.profile-container {
max-width: 1000px;
margin: 0 auto;
}
.profile-menu {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.profile-menu a {
padding: 10px 15px;
text-decoration: none;
color: #333;
border-radius: 4px;
background-color: #f5f5f5;
}
.profile-menu a:hover,
.profile-menu a.active {
background-color: #555555;
color: white;
}
.profile-menu a.logout {
margin-left: auto;
background-color: #dc3545;
color: white;
}
.profile-menu a.logout:hover {
background-color: #c82333;
}
.profile-content {
background: #fff;
padding: 30px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.profile-content h2 {
margin-bottom: 20px;
color: #333;
}
.profile-form {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 600px;
}
/* Адреса и Доставка (Обновленные стили) */
.addresses-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
/* Общие стили для карточек выбора */
.address-select,
.delivery-select {
display: grid;
gap: 10px;
max-width: 500px;
margin: 0 auto;
}
.address-option,
.delivery-option {
cursor: pointer;
}
.address-option input[type="radio"],
.delivery-option input[type="radio"] {
display: none;
}
.address-card,
.delivery-card {
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 12px 15px;
transition: all 0.2s;
background: #fff;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.card-title {
font-size: 1em;
}
.card-cost,
.card-badge {
font-size: 0.9em;
color: #555555;
background: #f0f0f0;
padding: 2px 8px;
border-radius: 4px;
}
.card-body {
font-size: 0.9em;
color: #666;
line-height: 1.4;
}
/* Состояние выбора */
.address-option input[type="radio"]:checked + .address-card,
.delivery-option input[type="radio"]:checked + .delivery-card {
border-color: #555555;
background-color: #f9f9f9;
box-shadow: 0 0 0 1px #555555;
}
.address-option input[type="radio"]:checked + .address-card .card-badge,
.delivery-option input[type="radio"]:checked + .delivery-card .card-cost {
background: #555555;
color: #fff;
}
/* Заказы */
.orders-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-card {
border: 1px solid #e0e0e0;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #f5f5f5;
border-bottom: 1px solid #e0e0e0;
flex-wrap: wrap;
gap: 10px;
}
.order-number {
font-weight: bold;
color: #333;
}
.order-status {
padding: 5px 10px;
border-radius: 3px;
font-size: 0.85em;
font-weight: bold;
}
.status-new { background: #e3f2fd; color: #1976d2; }
.status-processing { background: #fff3e0; color: #f57c00; }
.status-paid { background: #e8f5e9; color: #388e3c; }
.status-delivered { background: #e3f2fd; color: #1976d2; }
.status-completed { background: #e8f5e9; color: #388e3c; }
.status-cancelled { background: #ffebee; color: #d32f2f; }
.order-date {
color: #666;
font-size: 0.9em;
}
.order-items {
padding: 20px;
}
.order-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
flex-wrap: wrap;
gap: 10px;
}
.order-item:last-child {
border-bottom: none;
}
.item-name {
flex: 2;
min-width: 200px;
}
.item-quantity,
.item-price,
.item-total {
flex: 1;
min-width: 80px;
text-align: right;
}
.order-footer {
padding: 15px 20px;
background: #f9f9f9;
border-top: 1px solid #e0e0e0;
text-align: right;
}
.order-total {
font-weight: bold;
font-size: 1.1em;
color: #333;
}
/* ============================================================================
КОРЗИНА
============================================================================ */
.cart-container,
.checkout-container {
max-width: 1000px;
margin: 0 auto;
}
.cart-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.cart-table th,
.cart-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
.cart-table th {
background: #f5f5f5;
font-weight: bold;
color: #333;
}
.cart-table input[type="number"] {
width: 80px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.cart-item-info {
display: flex;
align-items: center;
gap: 15px;
}
.cart-item-info img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
.cart-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-top: 2px solid #e0e0e0;
margin-top: 20px;
flex-wrap: wrap;
gap: 15px;
}
.cart-total {
font-size: 1.3em;
font-weight: bold;
color: #333;
}
/* Оформление заказа */
.checkout-section {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
}
.checkout-section:last-child {
border-bottom: none;
}
.checkout-section h2 {
margin-bottom: 20px;
color: #333;
}
.checkout-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
resize: vertical;
box-sizing: border-box;
}
/* ============================================================================
КОД ПОДТВЕРЖДЕНИЯ
============================================================================ */
input[name="confirm_code"] {
text-align: center;
font-size: 1.5em;
letter-spacing: 5px;
font-family: monospace;
font-weight: bold;
}
.code-box {
background: #fff;
padding: 20px;
border: 2px dashed #555555;
border-radius: 4px;
margin: 20px 0;
text-align: center;
}
.code {
font-size: 32px;
font-weight: bold;
color: #555555;
letter-spacing: 10px;
font-family: monospace;
}
/* ============================================================================
АДАПТИВНОСТЬ
============================================================================ */
@media screen and (max-width: 1024px) {
.product-card {
flex: 0 0 calc(33.333% - 20px);
}
}
@media screen and (max-width: 768px) {
.mobile-header {
display: flex !important;
}
.desktop-header {
    display: none !important;
}

.sidebar {
    display: none !important;
}

.container {
    flex-direction: column;
    padding: 2px 10px;
}

.content {
    padding: 15px 10px;
}

.content h1 {
    font-size: 1.5em;
    padding: 0 10px;
}

.product-card {
    flex: 0 0 calc(50% - 20px);
}

.pagination {
    gap: 3px;
}

.pagination-link {
    padding: 6px 8px;
    font-size: 12px;
}

.sort-controls {
    flex-direction: column;
    align-items: flex-start;
}

.sort-link {
    width: 100%;
    justify-content: center;
}

.qty-button {
    width: 44px;
    padding: 12px;
    font-size: 20px;
}

.product-quantity {
    width: 60px;
    padding: 12px 5px;
    font-size: 16px;
}

.product-action {
    gap: 8px;
}

.product-action .add-to-cart {
    padding: 12px 15px;
    font-size: 16px;
}

.search-input-group {
    flex-direction: column;
}

.search-input-group input[type="text"] {
    width: 100%;
}

.search-input-group button {
    width: 100%;
}

.search-header h2 {
    font-size: 1em;
}

.form-row {
    flex-direction: column;
    gap: 15px;
}

.profile-menu {
    flex-direction: column;
}

.profile-menu a.logout {
    margin-left: 0;
}

.address-card {
    flex-direction: column;
    gap: 15px;
}

.order-header {
    flex-direction: column;
    align-items: flex-start;
}

.order-item {
    flex-direction: column;
}

.item-quantity,
.item-price,
.item-total {
    text-align: left;
}

.cart-footer {
    flex-direction: column;
    align-items: flex-start;
}

.cart-table {
    font-size: 0.9em;
}

.cart-table th,
.cart-table td {
    padding: 10px;
}

.address-select,
.delivery-select {
    max-width: 100%;
}
}
@media screen and (max-width: 480px) {
.product-card {
flex: 0 0 100%;
}
.pagination-link {
    padding: 5px 6px;
    font-size: 11px;
}

.pagination {
    gap: 2px;
}

.product-action {
    flex-direction: column;
    gap: 10px;
}

.product-quantity-wrapper {
    width: 100%;
}

.product-quantity-wrapper .qty-button {
    width: 50px;
}

.product-quantity {
    width: 70px;
    flex: 1;
}

.product-action .add-to-cart {
    width: 100%;
}
}
/* ============================================================================
КОНТАКТЫ
============================================================================ */
.contacts-container {
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.contacts-info {
background: #f9f9f9;
padding: 25px;
border-radius: 4px;
margin-bottom: 30px;
}
.contacts-info h2 {
margin-bottom: 20px;
color: #333;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.contact-item strong {
color: #555555;
font-size: 1.1em;
}
.contact-item p {
margin: 0;
color: #666;
}
.contact-item a {
color: #555555;
text-decoration: none;
}
.contact-item a:hover {
text-decoration: underline;
}
.requisites-container {
background: #ffffff;
padding: 25px;
border-radius: 4px;
border: 1px solid #e0e0e0;
}
.requisites-container h2 {
margin-bottom: 20px;
color: #333;
}
.requisites-table {
width: 100%;
border-collapse: collapse;
}
.requisites-table td {
padding: 12px 15px;
border-bottom: 1px solid #e0e0e0;
vertical-align: top;
}
.requisites-table tr:last-child td {
border-bottom: none;
}
.requisites-label {
width: 40%;
font-weight: bold;
color: #555555;
background: #f5f5f5;
}
.requisites-value {
width: 60%;
color: #333;
}
@media screen and (max-width: 768px) {
.contacts-container {
padding: 0 10px;
}
.requisites-table td {
display: block;
width: 100%;
padding: 8px 10px;
}
.requisites-label {
background: #e0e0e0;
font-size: 0.9em;
}
.requisites-value {
border-bottom: 1px solid #eee;
}
}
/* ============================================================================
СТРАНИЦЫ ИНФОРМАЦИИ (ОПЛАТА, ДОСТАВКА, О НАС)
============================================================================ */
.info-block {
background: #ffffff;
padding: 25px;
border-radius: 4px;
border: 1px solid #e0e0e0;
margin-bottom: 30px;
text-align: left;
}
.info-block h2 {
margin-top: 0;
margin-bottom: 20px;
color: #333;
font-size: 1.4em;
border-bottom: 2px solid #555555;
padding-bottom: 10px;
display: inline-block;
}
.info-block h3 {
margin-top: 25px;
margin-bottom: 15px;
color: #444;
font-size: 1.2em;
}
.info-list {
list-style: disc;
padding-left: 20px;
margin-bottom: 15px;
}
.info-list li {
margin-bottom: 8px;
color: #555;
line-height: 1.5;
}
.highlight {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
margin: 15px 0;
color: #856404;
}
@media screen and (max-width: 768px) {
.info-block {
padding: 15px;
}
.info-block h2 {
font-size: 1.2em;
}
}