/* Yujju design system — tarjeta de producto.
   Tarjeta plana: imagen 1:1 arriba, info debajo (sin pie superpuesto),
   carrito discreto en cuadro y acciones rápidas sin sombra.
   Aplica en tienda, categorías, relacionados y carruseles del Home. */

/* ── Contenedor ──────────────────────────────────────────────────────────── */
.yj-ds .product-block.grid {
    height: 100%;
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
    box-shadow: none !important;
    overflow: hidden;
    transition: border-color var(--yj-transition);
}
.yj-ds .product-block.grid:hover {
    border-color: var(--yj-line-strong);
    transform: none;
}
.yj-ds .product-block.grid .grid-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* ── Imagen 1:1, sin superposición ───────────────────────────────────────── */
.yj-ds .product-block.grid .block-inner {
    position: relative;
    overflow: hidden;
    background: var(--yj-white);
}
.yj-ds .product-block.grid figure.image {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--yj-white);
}
.yj-ds .product-block.grid figure.image > a,
.yj-ds .product-block.grid figure.image .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.yj-ds .product-block.grid figure.image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 400ms ease, opacity var(--yj-transition);
}
.yj-ds .product-block.grid:hover figure.image img {
    transform: scale(1.03);
}

/* Badge de oferta en la esquina superior izquierda. */
.yj-ds .product-block.grid figure.image .onsale,
.yj-ds .product-block.grid figure.image .sale-perc,
.yj-ds .product-block.grid .block-inner .onsale {
    position: absolute;
    top: var(--yj-space-3);
    left: var(--yj-space-3);
    right: auto;
    margin: 0;
    z-index: 3;
}

/* ── Info debajo de la imagen ────────────────────────────────────────────── */
.yj-ds .product-block.grid .metas {
    position: static !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--yj-space-4);
    background: transparent;
    border-top: var(--yj-border);
    transform: none;
}
.yj-ds .product-block.grid .title-wrapper {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--yj-space-3);
}
.yj-ds .product-block.grid .title-wrapper .ali-left {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.yj-ds .product-block.grid .name {
    margin: 0 0 var(--yj-space-2);
    font-family: var(--yj-font-body) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}
.yj-ds .product-block.grid .name a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.8em; /* dos líneas: precios alineados entre tarjetas */
    font-family: var(--yj-font-body) !important;
    font-size: inherit;
    font-weight: inherit;
    color: var(--yj-ink);
    text-transform: none;
}
.yj-ds .product-block.grid .name a:hover {
    color: var(--yj-primary);
}

/* Precio: ink 600; tachado en muted; oferta en primary.
   WC fija `.woocommerce div.product span.price` y el tema la fuente con !important. */
.yj-ds .product-block .price,
.yj-ds .product .product-block .price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--yj-space-2);
    margin: 0;
    font-family: var(--yj-font-body) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--yj-ink);
    transform: none;
}
.yj-ds .product-block .price .amount,
.yj-ds .product-block .price bdi {
    font-family: inherit !important;
    color: inherit;
}
.yj-ds .product-block .price del,
.yj-ds .product .product-block .price del {
    order: 2;
    font-size: 13px;
    font-weight: 400;
    color: var(--yj-muted);
    opacity: 1;
}
.yj-ds .product-block .price ins,
.yj-ds .product .product-block .price ins {
    order: 1;
    text-decoration: none;
    color: var(--yj-primary);
}

/* ── Botón de carrito: icono en cuadro, outline ──────────────────────────── */
.yj-ds .product-block.grid .ali-right {
    flex: 0 0 auto;
}
.yj-ds .product-block.grid .add-cart {
    position: static;
    padding: 0;
    line-height: 1;
}
.yj-ds .product-block.grid .add-cart > .button,
.yj-ds .product-block.grid .add-cart > .added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    font-size: 0 !important;
    line-height: 38px !important;
    color: var(--yj-ink) !important;
    background: var(--yj-white) !important;
    border: 1px solid var(--yj-line-strong) !important;
    border-radius: var(--yj-radius) !important;
    box-shadow: none !important;
    transition: background-color var(--yj-transition), border-color var(--yj-transition);
}
.yj-ds .product-block.grid .add-cart > .button:not(.loading)::before,
.yj-ds .product-block.grid .add-cart > .added_to_cart:not(.loading)::before {
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    color: var(--yj-ink);
    transition: color var(--yj-transition);
}
.yj-ds .product-block.grid .add-cart > .button:hover,
.yj-ds .product-block.grid .add-cart > .button:focus-visible,
.yj-ds .product-block.grid .add-cart > .added_to_cart:hover {
    background: var(--yj-primary-strong) !important;
    border-color: var(--yj-primary-strong) !important;
}
.yj-ds .product-block.grid .add-cart > .button:hover::before,
.yj-ds .product-block.grid .add-cart > .button:focus-visible::before,
.yj-ds .product-block.grid .add-cart > .added_to_cart:hover::before {
    color: var(--yj-white);
}
.yj-ds .product-block.grid .add-cart > .added_to_cart::before {
    color: var(--yj-primary);
}

/* ── Acciones rápidas (favoritos, comparar, vista rápida) ────────────────── */
.yj-ds .product-block.grid .groups-button {
    top: var(--yj-space-3);
    right: var(--yj-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--yj-space-2);
}
.yj-ds .product-block.grid .groups-button > * {
    margin: 0;
}
.yj-ds .product-block.grid .woosw-btn,
.yj-ds .product-block.grid .woosc-btn,
.yj-ds .product-block.grid .view .quickview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--yj-ink);
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
    box-shadow: none;
    transition: color var(--yj-transition), border-color var(--yj-transition);
}
.yj-ds .product-block.grid .woosw-btn:hover,
.yj-ds .product-block.grid .woosc-btn:hover,
.yj-ds .product-block.grid .view .quickview:hover {
    color: var(--yj-primary);
    border-color: var(--yj-primary);
}
.yj-ds .product-block.grid .woosw-btn::before {
    line-height: 1;
    color: inherit;
}
.yj-ds .product-block.grid .woosw-btn:hover::before,
.yj-ds .product-block.grid .woosw-btn.woosw-added::before {
    color: var(--yj-primary);
}

/* Nombre a todo el ancho (2 líneas) y precio + carrito en una fila debajo:
   en 4 columnas el carrito al lado del nombre lo cortaba demasiado. */
.yj-ds .product-block.grid .title-wrapper {
    position: relative;
    display: block;
}
.yj-ds .product-block.grid .title-wrapper .ali-left .price {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-top: var(--yj-space-2);
    padding-right: 48px;
}
.yj-ds .product-block.grid .title-wrapper .ali-right {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* Escritorio con puntero: las acciones aparecen al pasar o enfocar la tarjeta;
   favoritos ya marcado queda siempre visible. */
@media (hover: hover) and (min-width: 768px) {
    .yj-ds .product-block.grid .groups-button > * {
        opacity: 0;
        transform: translateX(6px);
        transition: opacity var(--yj-transition), transform var(--yj-transition);
    }
    .yj-ds .product-block.grid:hover .groups-button > *,
    .yj-ds .product-block.grid:focus-within .groups-button > *,
    .yj-ds .product-block.grid .groups-button > :has(.woosw-added) {
        opacity: 1;
        transform: none;
    }
}

/* Móvil: tarjeta más compacta; acciones visibles pero pequeñas. */
@media (max-width: 767px) {
    .yj-ds .product-block.grid .metas {
        padding: var(--yj-space-3);
    }
    .yj-ds .product-block.grid .name {
        font-size: 14px;
    }
    .yj-ds .product-block .price,
    .yj-ds .product .product-block .price {
        font-size: 14px;
    }
    .yj-ds .product-block.grid .add-cart > .button,
    .yj-ds .product-block.grid .add-cart > .added_to_cart {
        width: 36px;
        height: 36px;
    }
    .yj-ds .product-block.grid .add-cart > .button:not(.loading)::before,
    .yj-ds .product-block.grid .add-cart > .added_to_cart:not(.loading)::before {
        width: 34px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
    }
    .yj-ds .product-block.grid .groups-button {
        top: var(--yj-space-2);
        right: var(--yj-space-2);
    }
    .yj-ds .product-block.grid .woosw-btn,
    .yj-ds .product-block.grid .woosc-btn,
    .yj-ds .product-block.grid .view .quickview {
        width: 30px;
        height: 30px;
    }
    .yj-ds .product-block.grid .title-wrapper .ali-left .price {
        min-height: 36px;
        padding-right: 44px;
    }
    /* Menos ruido sobre la foto: en móvil solo queda favoritos. */
    .yj-ds .product-block.grid .woosc-btn,
    .yj-ds .product-block.grid .view {
        display: none !important;
    }
}

/* ── Vista lista ─────────────────────────────────────────────────────────── */
.yj-ds .product-block-list {
    padding: var(--yj-space-4);
    margin-bottom: var(--yj-space-5);
    background: var(--yj-white);
    border: var(--yj-border);
    border-radius: var(--yj-radius);
    box-shadow: none !important;
    transition: border-color var(--yj-transition);
}
.yj-ds .product-block-list:hover {
    border-color: var(--yj-line-strong);
}
.yj-ds .product-block-list figure.image {
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.yj-ds .product-block-list figure.image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.yj-ds .product-block-list .name {
    margin: 0 0 var(--yj-space-2);
    font-family: var(--yj-font-display) !important;
    font-size: var(--yj-h4);
    font-weight: 500;
    line-height: var(--yj-leading-tight);
}
.yj-ds .product-block-list .name a {
    font-family: inherit !important;
    color: var(--yj-ink);
}
/* El tema recorta .name a una línea; en lista caben dos. */
.yj-ds .product-block-list .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    height: auto;
    text-transform: none;
}
/* Sin reseñas el tema pinta cinco estrellas vacías: ruido. */
.yj-ds .product-block-list .rating:has(.star-rating:empty) {
    display: none;
}
@media (max-width: 767px) {
    .yj-ds .product-block-list {
        padding: var(--yj-space-3);
    }
    .yj-ds .product-block-list .name {
        font-size: var(--yj-text-lg);
    }
}
.yj-ds .product-block-list .product-excerpt {
    font-size: var(--yj-text-sm);
    color: var(--yj-muted);
}
.yj-ds .product-block-list .woosw-btn,
.yj-ds .product-block-list .woosc-btn,
.yj-ds .product-block-list .quickview {
    box-shadow: none;
}