/**
 * YMK Related — estilos propios del plugin
 *
 * Índice:
 *   1. Sección contenedora
 *   2. Grid responsive (ymk-grid + columns-N)
 *   3. Tarjeta de ítem relacionado
 */

/* ── 1. Sección contenedora ──────────────────────────────────────────────── */

.ymk-related {
    margin-top: calc( var(--global--spacing-vertical) * 2 );
}

.ymk-related__title {
    margin-bottom: var(--global--spacing-vertical);
}

.woocommerce section.ymk-related.ymk-related--faq {
    padding: 0;
}

/* ── 2. Grid responsive ──────────────────────────────────────────────────── */
/*
 * La lista puede llevar clases WC (products) o no.
 * columns-N sobreescribe el fallback de 2 cols.
 * El reset de ::before/::after y los width/margin corrigen interferencias de WC.
 */

ul.products.ymk-grid,
ul.ymk-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--global--spacing-vertical) var(--global--spacing-horizontal);
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

ul.products.ymk-grid::before,
ul.products.ymk-grid::after,
ul.ymk-grid::before,
ul.ymk-grid::after {
    display: none;
}

.woocommerce ul.products.ymk-grid[class*="columns-"] li.product,
.woocommerce ul.ymk-grid[class*="columns-"] li {
    width: auto !important;
    margin: 0 !important;
}

ul.products.ymk-grid.columns-1,
ul.ymk-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }

ul.products.ymk-grid.columns-2,
ul.ymk-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 769px) {
    ul.products.ymk-grid.columns-3,
    ul.ymk-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }

    ul.products.ymk-grid.columns-4,
    ul.ymk-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

    ul.products.ymk-grid.columns-5,
    ul.ymk-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ── 3. Tarjeta de ítem relacionado ─────────────────────────────────────── */

.ymk-related__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
    padding: 0 0 1.25rem 0 !important;
}

.ymk-related__thumb {
    margin: 0;
    overflow: hidden;
    border-radius: var(--global--border-radius, 0);
    aspect-ratio: 1;
}

.ymk-related__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.ymk-related__link:hover .ymk-related__thumb img {
    transform: scale( 1.04 );
}

.ymk-related__name {
    margin: 0;
    font-size: var(--global--font-size-sm, 0.875rem);
}