/**
 * TactiShop Algolia Recommend — CSS mínimo
 *
 * El layout y estilo de las cards lo maneja Woodmart 100% vía sus clases
 * (.wd-product, .wd-products, .grid-columns-6, .product-element-bottom, etc.)
 *
 * Aquí solo hay:
 *  1. Skeleton animado mientras carga
 *  2. Margen/spacing del wrapper para integrarse bien con el flow del single product
 */

/* ---------- Section wrapper -------------------------------------------- */

.tactishop-recommend-section {
    margin-top: 40px;
    margin-bottom: 30px;
    clear: both;
}

.tactishop-recommend-section h2 {
    /* Hereda el estilo de h2 del tema. Si quieres centrarlo: text-align:center */
}

/* ---------- Skeleton state -------------------------------------------- */

.tactishop-recommend-skeleton .wd-product-thumb,
.tactishop-recommend-skeleton .product-element-bottom {
    pointer-events: none;
}

.tactishop-recommend-skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(90deg, #f3f3f3 0%, #ebebeb 50%, #f3f3f3 100%);
    background-size: 200% 100%;
    animation: tactishopRecommendShimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}

.tactishop-recommend-skeleton-line {
    height: 12px;
    background: linear-gradient(90deg, #f3f3f3 0%, #ebebeb 50%, #f3f3f3 100%);
    background-size: 200% 100%;
    animation: tactishopRecommendShimmer 1.4s ease-in-out infinite;
    border-radius: 3px;
    margin-top: 10px;
}

.tactishop-recommend-skeleton-line-title {
    width: 90%;
    height: 14px;
}

.tactishop-recommend-skeleton-line-stock {
    width: 50%;
    height: 10px;
}

.tactishop-recommend-skeleton-line-price {
    width: 35%;
    height: 14px;
}

@keyframes tactishopRecommendShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Responsive del título de la sección ------------------------ */

@media (max-width: 600px) {
    .tactishop-recommend-section {
        margin-top: 30px;
    }
}