/* Добавьте эти стили в конец существующего файла styles.css */

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  @media (min-width: 768px) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  .gap-8 {
    gap: 2rem;
  }
  
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  }
  
  .divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  }
  
  .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
  }
  
  .overflow-x-auto {
    overflow-x: auto;
  }
  
  .whitespace-nowrap {
    white-space: nowrap;
  }
  
  .tracking-wider {
    letter-spacing: 0.05em;
  }
  
  .bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
  }
  
  .text-gray-500 {
    --tw-text-opacity: 1;
    color: rgba(107, 114, 128, var(--tw-text-opacity));
  }
  
  .text-green-600 {
    --tw-text-opacity: 1;
    color: rgba(5, 150, 105, var(--tw-text-opacity));
  }
  
  .text-red-600 {
    --tw-text-opacity: 1;
    color: rgba(220, 38, 38, var(--tw-text-opacity));
  }
  
  /* Заменяем определение класса bg-pattern на фон с лапками вместо крестиков */
  .bg-pattern {
    background-color: #f0f4ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%239C92AC' fill-opacity='0.1' d='M10 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4-3a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-6-3a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm12 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
  }
  
  .gradient-background {
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  }
  
  .hover-scale {
    transition: transform 0.3s ease-in-out;
  }
  
  .hover-scale:hover {
    transform: scale(1.05);
  }
  
  .card {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
  }
  
  .card:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
  }
  
  .btn-primary {
    background-color: #4f46e5;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
  }
  
  .btn-primary:hover {
    background-color: #4338ca;
    transform: translateY(-2px);
  }
  
  .btn-secondary {
    background-color: #10b981;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
  }
  
  .btn-secondary:hover {
    background-color: #059669;
    transform: translateY(-2px);
  }
  
  /* Add more custom styles as needed */
  
  /* Добавим новые стили для карточек товаров в конец файла */
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .product-card-new {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
  }
  
  .product-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  
  .pet-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #6366f1;
    color: white;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    z-index: 10;
  }
  
  .pet-badge svg {
    margin-right: 4px;
    width: 16px;
    height: 16px;
  }
  
  .product-image {
    width: 100%;
    height: 200px;
    object-fit: contain;
    padding: 1rem;
  }
  
  .product-title {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 0.5rem;
    height: 3rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .price-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
  }
  
  .price-tag.ozon {
    background-color: #e3f2fd;
  }
  
  .price-tag.ozon .marketplace {
    color: #1e88e5;
  }
  
  .price-tag.wildberries {
    background-color: #f3e5f5;
  }
  
  .price-tag.wildberries .marketplace {
    color: #8e24aa;
  }
  
  .price-tag.yandex {
    background-color: #fff3e0;
  }
  
  .price-tag.yandex .marketplace {
    color: #fb8c00;
  }
  
  .discount-badge {
    background-color: #ef4444;
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.5rem;
  }
  
  .best-price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .best-price-label {
    font-size: 0.875rem;
    color: #4b5563;
  }
  
  .best-price-value {
    background-color: #10b981;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 600;
  }
  
  .favorite-button {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .favorite-button.not-favorite {
    background-color: #6366f1;
    color: white;
  }
  
  .favorite-button.not-favorite:hover {
    background-color: #4f46e5;
  }
  
  .favorite-button.is-favorite {
    background-color: #10b981;
    color: white;
  }
  
  .favorite-button.is-favorite:hover {
    background-color: #059669;
  }