/**
 * product-card.css — Mallorkinas Child Theme
 * Cards de producto en grid y carrusel. Usa clases estables en lugar de IDs de Elementor.
 *
 * IMPORTANTE:
 * El snippet "FIJAR FOTOS CARDS" usaba .elementor-element-0d2a9b7 — ID frágil.
 * Aquí se usa .mallorkinas-product-card-carousel como clase estable.
 * Para aplicar en Elementor: añadir la clase CSS personalizada "mallorkinas-product-card-carousel"
 * al widget contenedor del carrusel en la plantilla de Loop.
 */

/* =========================================================
   GRID DE PRODUCTOS
   ========================================================= */

.mallorkinas-product-grid,
ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =========================================================
   CARD DE PRODUCTO
   ========================================================= */

.mallorkinas-product-card,
ul.products li.product {
    position: relative;
    border: var(--mk-card-border);
    border-radius: var(--mk-card-radius);
    background: var(--mk-bg-card);
    overflow: hidden;
    transition: box-shadow var(--mk-transition), transform var(--mk-transition);
    display: flex;
    flex-direction: column;
}

.mallorkinas-product-card:hover,
ul.products li.product:hover {
    box-shadow: var(--mk-card-shadow-hover);
    transform: translateY(-2px);
}

/* =========================================================
   IMAGEN DE CARD
   ========================================================= */

.mk-product-card__image,
.mallorkinas-product-card .woocommerce-loop-product__link img,
ul.products li.product .woocommerce-loop-product__link img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--mk-card-radius) var(--mk-card-radius) 0 0;
    transition: transform var(--mk-transition-slow);
}

.mallorkinas-product-card:hover .mk-product-card__image,
ul.products li.product:hover .woocommerce-loop-product__link img {
    transform: scale(1.03);
}

/* =========================================================
   CONTENIDO DE LA CARD
   ========================================================= */

.mk-product-card__content,
ul.products li.product .woocommerce-loop-product__content {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* =========================================================
   TÍTULO
   ========================================================= */

.mk-product-card__title,
ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--mk-font-size-sm);
    font-weight: 600;
    color: var(--mk-text-main);
    margin-bottom: 6px;
    line-height: var(--mk-line-height-tight);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mallorkinas-product-card a.woocommerce-loop-product__link,
ul.products li.product a.woocommerce-loop-product__link {
    text-decoration: none;
    color: inherit;
}

/* =========================================================
   PRECIO EN CARD
   ========================================================= */

.mk-product-card__price,
ul.products li.product .price {
    font-size: var(--mk-font-size-sm);
    font-weight: 700;
    color: var(--mk-text-main);
    margin-bottom: 10px;
}

ul.products li.product .price del {
    color: var(--mk-text-muted);
    font-weight: 400;
    font-size: var(--mk-font-size-xs);
    margin-right: 4px;
}

ul.products li.product .price ins {
    text-decoration: none;
    color: var(--mk-color-primary);
}

/* =========================================================
   BOTÓN EN CARD
   ========================================================= */

.mk-product-card__btn,
ul.products li.product .add_to_cart_button,
ul.products li.product a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--mk-radius-pill);
    background-color: var(--mk-color-primary);
    color: #fff;
    border: none;
    font-size: var(--mk-font-size-xs);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--mk-transition), transform var(--mk-transition);
    margin-top: auto;
}

ul.products li.product .add_to_cart_button:hover,
ul.products li.product a.button:hover {
    background-color: var(--mk-color-primary-hover);
    color: #fff;
    transform: none;
    text-decoration: none;
}

/* =========================================================
   WISHLIST EN CARD
   ========================================================= */

.mk-product-card__wishlist,
ul.products li.product .yith-wcwl-add-to-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

/* =========================================================
   CARRUSEL DE PRODUCTOS (Elementor Loop Carousel)
   Clase estable: "mallorkinas-product-card-carousel"
   Añadir esta clase en Elementor > Settings > Advanced > CSS Classes
   del widget de Loop Carousel.

   SUSTITUYE el selector:
   .elementor-element-0d2a9b7 (frágil, se rompe al editar la plantilla)
   ========================================================= */

.elementor-widget-loop-carousel .mallorkinas-product-card-carousel,
.elementor-widget-loop-carousel .swiper-slide .mallorkinas-product-card-carousel {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 500px !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Inner del carrusel */
.mallorkinas-product-card-carousel .elementor-element {
    width: 100%;
    z-index: 1;
}

/* Overlay para legibilidad del texto sobre imagen */
.mallorkinas-product-card-carousel::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    z-index: 0;
    border-radius: 0 0 var(--mk-card-radius) var(--mk-card-radius);
    pointer-events: none;
}

/* =========================================================
   SKELETON LOADER (loading state)
   ========================================================= */

.mk-product-card--skeleton .mk-product-card__image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: mk-skeleton 1.4s ease infinite;
}

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
    .mallorkinas-product-grid,
    ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .mallorkinas-product-grid,
    ul.products {
        grid-template-columns: 1fr;
    }
}