/* АДАПТИРОВАННЫЕ СТИЛИ ДЛЯ КАРТОЧКИ ТОВАРА WC-BLOCK-PRODUCT */
/* ========================================================================= */

/* 1. Основные стили для ВСЕЙ КАРТОЧКИ ТОВАРА */
.wc-block-product {
    background-color: #ffffff !important; /* Белый фон */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important; /* Мягкая тень */
    border-radius: 12px !important; /* Скругление углов */
    padding: 25px !important; /* Внутренние отступы вокруг всего содержимого */
    margin-bottom: 35px !important; /* Отступ между карточками */
    transition: all 0.3s ease-in-out !important; /* Плавный переход для hover-эффектов */
    border: 1px solid #e0e0e0 !important; /* Тонкая рамка */
    position: relative !important; /* Важно для позиционирования теней и других элементов */
    overflow: hidden !important; /* Чтобы скругления применялись корректно */

    /* Убедимся, что внутренние элементы выравниваются по верху */
    align-items: flex-start !important;
    padding-top: 0 !important; /* Сброс верхнего паддинга, если он конфликтовал */
    margin-top: 0 !important;   /* Сброс верхнего марджина, если он конфликтовал */
}

/* 2. Эффект при наведении на КАРТОЧКУ */
.wc-block-product:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; /* Более выраженная тень */
    transform: translateY(-8px) !important; /* Небольшой подъем карточки */
}

/* 3. Стили для КОНТЕЙНЕРА ИЗОБРАЖЕНИЯ */
.wc-block-components-product-image {
    position: relative !important;
    padding-top: 75% !important; /* Соотношение сторон 4:3 (высота 75% от ширины) */
    height: 0 !important; /* Высота обнуляется, чтобы padding-top задавал размер */
    overflow: hidden !important;
    display: block !important; /* Убеждаемся, что это блочный элемент */

    margin-top: 10px !important;
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    background-color: #f8f8f8 !important; /* Легкий фон */
}

/* 4. Стили для САМОГО ИЗОБРАЖЕНИЯ и его ССЫЛКИ внутри контейнера */
.wc-block-components-product-image a,
.wc-block-components-product-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important; /* Изображение полностью видно, без обрезки */
    object-position: center !important; /* Центрируем изображение */

    transition: transform 0.3s ease !important; /* Плавный зум */
}

/* 5. Эффект масштабирования ИЗОБРАЖЕНИЯ при наведении на карточку */
.wc-block-product:hover .wc-block-components-product-image img {
    transform: scale(1.05) !important;
}

/* 6. Стили для ЗАГОЛОВКА ТОВАРА */
li.wc-block-product .wp-block-post-title {
    font-size: 1.2em !important; /* Делаем название крупнее */
    color: #333333 !important; /* Темный цвет текста */
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    line-height: 1.3em !important;
    text-align: center !important; /* Центрируем заголовок */

    /* --- НОВЫЕ СВОЙСТВА ДЛЯ ОГРАНИЧЕНИЯ В 3 СТРОКИ --- */
    overflow: hidden !important; /* Обрезаем текст, который выходит за границы */
    display: -webkit-box !important; /* Включаем flexbox для WebKit-браузеров */
    -webkit-line-clamp: 3 !important; /* Ограничиваем количество строк до 3 */
    -webkit-box-orient: vertical !important; /* Устанавливаем вертикальную ориентацию для -webkit-line-clamp */
    /* text-overflow: ellipsis; /* Это свойство для более старых браузеров, но -webkit-line-clamp обычно делает это автоматически */
    min-height: auto !important; /* Убираем минимальную высоту, так как теперь ее контролирует line-clamp */
}


/* 7. Стили для БЛОКА ЦЕНЫ (обеспечиваем центрирование) */
.wp-block-woocommerce-product-price {
    text-align: center !important;
    margin-bottom: 15px !important; /* Отступ под ценой до кнопки */
}
.wc-block-components-product-price { /* Дополнительный селектор для цены */
    justify-content: center !important; /* Для центрирования в flex-контейнере, если это flex */
}

/* 8. Стили для КНОПКИ "Подробнее" */
.wc-block-components-product-button__button {
    background: linear-gradient(to right, #3d6d97, #2a5c8a) !important; /* Градиентный фон */
    color: white !important; /* Белый текст */
    padding: 10px 15px !important; /* Внутренние отступы */
    text-align: center !important; /* Текст по центру */
    border-radius: 5px !important; /* Скругленные углы */
    text-decoration: none !important; /* Убираем подчеркивание */
    display: block !important; /* Делаем блочным элементом для полной ширины */
    font-weight: bold !important; /* Жирный шрифт */
    text-transform: uppercase !important; /* Текст заглавными буквами */
    transition: background 0.3s ease !important, transform 0.3s ease !important; /* Плавный переход */
    width: 100% !important; /* Кнопка занимает всю доступную ширину */
    margin: 15px auto 0 auto !important; /* Отступ сверху и центрирование */
    border: none !important; /* Убираем стандартную границу кнопки */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Легкая тень кнопки */
}

/* 9. Эффект при наведении на КНОПКУ */
.wc-block-components-product-button__button:hover {
    background: linear-gradient(to right, #2a5c8a, #3d6d97) !important; /* Инвертированный градиент */
    transform: translateY(-1px); /* Небольшой подъем кнопки */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Более выраженная тень кнопки */
}

/* АДАПТИВНОСТЬ: Стили для мобильных устройств */
@media (max-width: 768px) {
    .wc-block-components-product-image {
        margin-bottom: 10px !important;
        /* padding-top: 85% !important; /* Можно попробовать для более высоких изображений на мобильных */
    }
    .wc-block-product {
        padding: 15px !important; /* Меньшие отступы на мобильных */
        margin-bottom: 25px !important;
    }
    li.wc-block-product .wp-block-post-title {
        font-size: 1.1em !important;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }
    .wp-block-woocommerce-product-price {
        margin-bottom: 10px !important;
    }
    .wc-block-components-product-button__button {
        padding: 8px 12px !important;
        font-size: 0.9em !important;
        margin-top: 10px !important;
    }
}