body { font-family: 'Segoe UI', sans-serif; background-color: #f8f9fa; } .navbar-brand { font-weight: bold; font-size: 24px; } .intro-section { background: white; padding: 80px 20px; text-align: center; } .intro-section h1 { font-size: 2rem; font-weight: bold; margin-bottom: 10px; } .intro-section p { color: #666; margin-bottom: 30px; } .search-input { max-width: 500px; margin: auto; } .search-input input { border-radius: 0.375rem 0 0 0.375rem; } .search-input button { border-radius: 0 0.375rem 0.375rem 0; } .product-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .product-card:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .product-image { width: 100%; height: 180px; object-fit: cover; } .product-body { padding: 15px; } .product-title { font-size: 16px; font-weight: 600; margin-bottom: 5px; } .product-author { font-size: 13px; color: #777; margin-bottom: 10px; } .product-footer { border-top: 1px solid #eee; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; } .btn-preview { font-size: 12px; padding: 3px 8px; } .cart-btn { background: none; border: none; font-size: 20px; color: #007bff; cursor: pointer; } .view-more-btn { margin-top: 30px; display: block; } /* Стили для контейнера карточек */ .flex-images { display: grid !important; /* Приоритет над JS */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 20px !important; width: 100% !important; overflow: visible; } /* Стили для карточки */ .item { display: flex !important; /* Приоритет над JS */ flex-direction: column !important; background: #fff !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; cursor: pointer; color: inherit !important; height: 100% !important; /* Карточка растягивается по высоте */ width: 100% !important; /* Убираем фиксированную ширину от JS */ } /* Изображение */ .item .image-wrapper { position: relative; width: 100% !important; height: 200px !important; /* Фиксированная высота изображения */ border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; overflow: hidden !important; } .item .image-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* Контент */ .item .content { padding: 10px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; /* Контент растягивается */ justify-content: space-between; } /* Заголовок */ .item .title { display: block !important; font-size: 16px !important; font-weight: bold !important; margin-bottom: 5px !important; overflow: hidden !important; /*text-overflow: ellipsis !important;*/ /*white-space: nowrap !important;*/ } .product-author { font-size: 13px; color: #777; margin-bottom: 10px; } .product-footer { border-top: 1px solid #eee; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; } a { text-decoration: none !important;} footer { background-color: #343a40; color: #fff; padding: 20px 0; text-align: center; margin-top: 40px; } @media (max-width: 768px) { .navbar-nav { text-align: center; } .search-input { flex-direction: column; } .search-input input, .search-input button { width: 100%; border-radius: 0.375rem !important; margin-bottom: 10px; } .search-input button { margin-bottom: 0; } } .footer { color: #ecf0f1; padding: 30px 0; margin-top: 40px; }