/**
 * Card Demo — Diseño de tarjeta para ymk-woo-extra
 *
 * Archivo independiente: no compromete otros estilos.
 * Encolado desde includes/shop-card.php.
 *
 * Índice:
 *   1. Tarjeta (li.product)
 *   2. Zona imagen
 *   3. Zona de contenido (padding lateral)
 *   4. Título
 *   5. Excerpt
 *   6. Atributos
 *   7. Footer (precio + botón)
 *   8. Botón standalone (layout standard/modern)
 */

/* ── 1. Tarjeta ──────────────────────────────────────────────────────────── */

.products li.product {
    background: var(--global--color-white, #fff);
    border-radius: var(--button--border-radius, 16px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── 2. Zona imagen ──────────────────────────────────────────────────────── */

.products li.product .ymk-card-img-wrap {
    border-radius: 0;
    aspect-ratio: 1 / 1;
    background: var(--global--color-light-gray, #f0f0f0);
}

.products li.product .ymk-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── 3. Zona de contenido: padding lateral ───────────────────────────────── */

.products li.product .woocommerce-loop-product__link > *:not(.ymk-card-img-wrap),
.products li.product > .button,
.products li.product > a.button {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.products li.product .woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── 4. Título ───────────────────────────────────────────────────────────── */

ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--global--font-size-sm, 1.1rem);
    font-weight: var(--heading--font-weight-strong, 700);
    font-family: var(--global--font-primary, inherit);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 1rem 0 0.25rem !important;
    padding: 0 1.25rem;
}

/* ── 5. Excerpt ──────────────────────────────────────────────────────────── */

.products li.product .ymk-card-excerpt {
    font-size: var(--global--font-size-xs, 0.8rem);
    font-family: var(--global--font-secondary, inherit);
    color: var(--global--color-gray, #555);
    margin: 0 0 0.5rem;
    padding: 0 1.25rem;
}

/* ── 6. Atributos ────────────────────────────────────────────────────────── */

.products li.product ul.ymk-attributes {
    padding: 0 1.25rem;
    margin-bottom: 0.5rem;
}

/* ── 7. Footer: precio + botón en fila ───────────────────────────────────── */

.products li.product .ymk-card-footer {
    width: 100%;
    padding: 0.75rem 1.25rem 1.25rem;
    margin-top: auto;
}

/* Precio */
.products li.product .ymk-card-footer .price {
    font-size: var(--global--font-size-xs, 1rem);
    font-weight: var(--heading--font-weight-strong, 600);
    color: var(--global--color-secondary, inherit);
    margin: 0;
}

/* Botón dentro del footer y botón standalone: mismos valores base */
.products li.product .ymk-card-footer .button,
.products li.product .ymk-card-footer .add_to_cart_button,
.products li.product > a.button,
.products li.product > .button {
    background: var(--ymk-btn-bg, var(--button--color-background, #111));
    color: var(--ymk-btn-text, var(--button--color-text, #fff));
    border: none;
    border-radius: var(--button--border-radius, 100px);
    font-family: var(--button--font-family, inherit);
    font-size: var(--global--font-size-xs, 0.85rem);
    font-weight: var(--button--font-weight, 600);
    letter-spacing: 0.03em;
    transition: background 0.2s;
}

.products li.product .ymk-card-footer .button,
.products li.product .ymk-card-footer .add_to_cart_button {
    padding: var(--button--padding-vertical, 0.55rem) var(--button--padding-horizontal, 1.2rem);
}

.products li.product .ymk-card-footer .button:hover,
.products li.product .ymk-card-footer .add_to_cart_button:hover {
    background: var(--ymk-btn-hover-bg, var(--button--color-background-active, #333));
    color: var(--ymk-btn-text, var(--button--color-text, #fff));
}

/* ── 8. Botón standalone (layout standard/modern — fuera del footer) ──────── */

.products li.product > a.button,
.products li.product > .button {
    margin: auto 1.25rem 1.25rem;
    display: block;
    text-align: center;
    padding: var(--button--padding-vertical, 0.65rem) var(--button--padding-horizontal, 1.25rem);
}

.products li.product > a.button:hover,
.products li.product > .button:hover {
    background: var(--ymk-btn-hover-bg, var(--button--color-background-active, #333));
    color: var(--ymk-btn-text, var(--button--color-text, #fff));
}

/* ── 9. rectifica la especificidad de wc>2021 () ──────── */
.woocommerce-tabs ul li a {
  /*  padding: 0*/
}