/**
 * Shop Card — Tarjeta de producto (ymk-woo-extra)
 *
 * Índice:
 *   1.  Lápiz customizer
 *   2.  Wrap de imagen + enlace imagen (ymk-card-img-link)
 *   3.  Enlace título + excerpt (ymk-card-title-link)
 *   4.  Hover imagen
 *   4.  Badges
 *   5.  Badge wrap (posicionamiento sobre imagen)
 *   6.  Etiquetas / tags
 *   7.  Atributos: estructura
 *   8.  Atributos: label
 *   9.  Swatches: base compartida
 *   10. Swatches: pastilla texto
 *   11. Swatches: icono con mask
 *   12. Swatches: color (círculo)
 *   13. Filtros layered nav — colores
 *   14. Tooltips (CSS-only)
 *   15. Layout inline: precio + botón en fila
 */

/* ── 1. Lápiz customizer ─────────────────────────────────────────────────── */

.products li.product {
    position: relative;
}

/* ── 2. Wrap de imagen ───────────────────────────────────────────────────── */

.ymk-card-img-wrap {
    position: relative;
    overflow: hidden;
    display: block;
}

/* Enlace que cubre toda la imagen via ::after */
.ymk-card-img-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

/* ── 3. Enlaces de la tarjeta — reset compartido ─────────────────────────── */
/* Aplica a: enlace título, enlaces de swatches */

.ymk-card-title-link,
ul.ymk-attributes a,
ul.ymk-attr-swatches a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ymk-card-title-link {
    display: block;
}

/* ── 4. Hover imagen ─────────────────────────────────────────────────────── */

.ymk-card-img-wrap img.ymk-card-hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ymk-card-img-wrap:hover img.ymk-card-hover-img {
    opacity: 1;
}

/* ── 4. Badges ───────────────────────────────────────────────────────────── */

.ymk-badge {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.02em;
    cursor: default;
}

.ymk-badge--discount {
    background: #e00;
    color: #fff;
    border: none;
    opacity: 1;
}

.ymk-badge--shipping {
    background: #1a7f37;
    color: #fff;
    border: none;
    opacity: 1;
}

/* ── 5. Badge wrap: posicionamiento sobre imagen ─────────────────────────── */
/*
 * Ancla de posición: .ymk-card-img-wrap (position: relative, sección 2).
 * Mismo patrón para badges, tags standalone, atributos y contenido extra
 * cuando su posición es 'standalone'.
 */

.ymk-badge-wrap {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem;
    pointer-events: none;
}

.ymk-badge-wrap > * {
    pointer-events: auto;
}

.ymk-badge-wrap--top-left     { top: 0;    left: 0;  }
.ymk-badge-wrap--top-right    { top: 0;    right: 0; }
.ymk-badge-wrap--bottom-left  { bottom: 0; left: 0;  }
.ymk-badge-wrap--bottom-right { bottom: 0; right: 0; }

/* ── 6. Etiquetas / tags — wrapper integrado ─────────────────────────────── */
/*
 * .ymk-card-tags: wrapper siempre presente cuando hay etiquetas o badges
 * integrados (tags_pos === 'integrated').
 * Cuando tags_pos === 'standalone', el wrap es .ymk-card-tags.ymk-badge-wrap
 * y hereda el posicionamiento de la sección 5.
 */

.ymk-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin: 0 0 0.5rem;
    flex-direction: row;
}

/* ── 7. Atributos: estructura agrupada ───────────────────────────────────── */

/* Contenedor principal — flex column, un grupo por atributo */
ul.ymk-attributes {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Grupo de atributo — label + swatches en fila */
li.ymk-attr-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
}

/* Lista de swatches — flex wrap */
ul.ymk-attr-swatches {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

/* ── 8. Atributos: label ─────────────────────────────────────────────────── */

/* Oculto por defecto, visible con body.ymk-attr-labels */
.ymk-attr-label {
    display: none;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.6;
}

body.ymk-attr-labels .ymk-attr-label {
    display: inline;
}

/* ── 9. Swatches: base compartida ────────────────────────────────────────── */
/*
 * Aplica a li.ymk-swatch (atributos en tarjeta) y span.ymk-swatch (etiquetas).
 * position: relative + z-index para no interferir con tooltips (sección 14).
 */

.ymk-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    cursor: default;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

/* ── 10. Swatches: pastilla texto ────────────────────────────────────────── */

/* Cualquier swatch que no sea círculo de color, icono ni con imagen */
.ymk-swatch:not(.ymk-swatch--color):not(.ymk-card-tag--icon):not(.has-image) {
    padding: 0.15rem 0.45rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.75;
}

/* ── 11. Swatches: icono con mask ────────────────────────────────────────── */
/*
 * Etiqueta con imagen (.ymk-card-tag--icon) O atributo no-color con imagen
 * (.has-image). Usan ::before para el icono — los tooltips omiten ::before
 * en .ymk-swatch (ver sección 14).
 */

.ymk-swatch.ymk-card-tag--icon,
.ymk-swatch:not(.ymk-swatch--color).has-image {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    font-size: 0;
    opacity: 1;
}

.ymk-swatch.ymk-card-tag--icon::before,
.ymk-swatch:not(.ymk-swatch--color).has-image::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    mask: var(--ymk-swatch, none) no-repeat center / contain;
    -webkit-mask: var(--ymk-swatch, none) no-repeat center / contain;
    background-color: currentColor;
}

/* ── 12. Swatches: color (círculo) ───────────────────────────────────────── */

body.ymk-colored-filters .ymk-swatch.ymk-swatch--color {
    font-size: 0;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
}

body.ymk-colored-filters .ymk-swatch.ymk-swatch--color::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Con imagen: background-image via --ymk-swatch */
body.ymk-colored-filters .ymk-swatch.ymk-swatch--color.has-image::before {
    background-image: var(--ymk-swatch, none);
    background-size: cover;
    background-position: center;
    background-color: transparent;
}

/* ── 13. Filtros layered nav — colores ───────────────────────────────────── */

body.ymk-colored-filters a.color::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.ymk-colored-filters a.color.has-image::before {
    background-image: var(--ymk-swatch, none);
    background-size: cover;
    background-position: center;
    background-color: transparent;
}

body.ymk-colored-filters .widget.woocommerce li:has(a.color) {
    flex: 1;
    padding: 0 !important;
}

body.ymk-colored-filters .widget.woocommerce li a.color {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45px;
    gap: 0.4rem;
    font-size: 11px;
    text-align: center;
}

body.ymk-colored-filters ul:has(a.color) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 1rem;
}

/* ── 14. Tooltips (CSS-only) ─────────────────────────────────────────────── */
/*
 * Regla general: ::before (flecha) + ::after (burbuja).
 * Excepción: .ymk-swatch usa ::before para icono/círculo
 * → en swatches solo se renderiza ::after (burbuja sin flecha).
 */

[data-tooltip] {
    position: relative;
}

/* Burbuja — todos los elementos con data-tooltip */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 1000;
    padding: 0.3rem 0.6rem;
    width: max-content;
    max-width: 200px;
    background: #222;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -10px);
}

/* Flecha — solo en elementos que no usan ::before para otra cosa */
[data-tooltip]:not(.ymk-swatch)::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 1001;
    border: 5px solid transparent;
    border-top-color: #222;
    background: transparent;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition:
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

[data-tooltip]:not(.ymk-swatch):hover::before {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 3px);
}

/* ── 15. Layout inline: precio + botón en fila ───────────────────────────── */
/*
 * Cuando add_to_cart_style = 'inline', el footer abre antes del precio (p.4),
 * de modo que precio y botón quedan juntos en .ymk-card-footer.
 *
 * grid-template-columns: 1fr auto — precio ocupa el espacio disponible,
 * botón su tamaño natural. Si el precio no cabe, el navegador lo resuelve solo.
 * Sin media queries, sin flex-wrap, sin min-width hacks.
 */

body.ymk-card-atc-inline .ymk-card-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

body.ymk-card-atc-inline .ymk-card-footer .price {
    margin: 0;
}

body.ymk-card-atc-inline .ymk-card-footer .add_to_cart_button,
body.ymk-card-atc-inline .ymk-card-footer .button {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ocultar el botón ATC nativo de WC que queda fuera del link */
body.ymk-card-atc-inline .products li.product > .button,
body.ymk-card-atc-inline .products li.product > a.button {
    display: none;
}