/* ═══════════════════════════════════════════════
   WB GRID v2.0 — Estilos base
   Las variables :root se sobreescriben desde PHP
   con los valores del panel de administración.
   ═══════════════════════════════════════════════ */

/* ─── Variables base (fallback si PHP falla) ─── */
:root {
    --wb-orange:       #f07e00;
    --wb-orange-dark:  #c96800;
    --wb-bg-card:      #111111;
    --wb-text:         #ffffff;
    --wb-text-muted:   #999999;
    --wb-border:       #2a2a2a;
    --wb-radius:       12px;
    --wb-gap:          20px;
    --wb-padding:      16px;
    --wb-font-name:    1.1rem;
    --wb-font-excerpt: 0.8rem;
    --wb-font-price:   1.2rem;
    --wb-font-btn:     0.9rem;
    --wb-font-pack:    0.8rem;
    --wb-sello-size:   52px;
    --wb-transition:   0.25s ease;
}

/* ─── Grid: 4 columnas desktop (fijo) ─── */
.wb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wb-gap);
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

/* Tablet y móvil los pone el CSS dinámico del PHP */

/* ─── Tarjeta ─── */
.wb-grid-card {
    background:     var(--wb-bg-card);
    border:         2px solid var(--wb-border);
    border-radius:  var(--wb-radius);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    transition:     border-color var(--wb-transition), box-shadow var(--wb-transition);
    position:       relative;
}

.wb-grid-card:hover {
    border-color: var(--wb-orange);
    box-shadow:   0 0 24px rgba(240, 126, 0, 0.22);
}

/* ─── Imagen 3:4 ─── */
.wb-grid-img-wrap {
    display:       block;
    position:      relative;
    width:         100%;
    aspect-ratio:  3 / 4;
    overflow:      hidden;
    background:    #0d0d0d;
    flex-shrink:   0;
}

.wb-grid-img-link {
    display:         block;
    width:           100%;
    height:          100%;
    text-decoration: none;
}

.wb-grid-img {
    width:           100% !important;
    height:          100% !important;
    max-width:       none !important;
    object-fit:      cover !important;
    object-position: center top !important;
    display:         block !important;
    transition:      transform 0.4s ease;
}

/* Soporte para picture/source WebP */
.wb-grid-img-wrap picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.wb-grid-img-wrap picture img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.wb-grid-card:hover .wb-grid-img {
    transform: scale(1.04);
}

/* ─── Sellos sobre la imagen ─── */
.wb-grid-sellos {
    position:       absolute;
    top:            10px;
    left:           10px;
    right:          10px;
    display:        flex;
    justify-content: space-between;
    align-items:    flex-start;
    z-index:        5;
    pointer-events: none;
}

.wb-grid-sellos-left {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.wb-grid-sellos-right {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.wb-grid-sello-link {
    pointer-events: auto;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.wb-grid-sello-link:hover {
    transform: scale(1.1);
}

.wb-grid-sello {
    width:       var(--wb-sello-size);
    height:      var(--wb-sello-size);
    object-fit:  contain;
    filter:      drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}

/* Sello NEW: 40% más grande */
.wb-grid-sello-new {
    width:  calc(var(--wb-sello-size) * 1.4);
    height: calc(var(--wb-sello-size) * 1.4);
}

/* ─── Cuerpo ─── */
.wb-grid-body {
    padding:        var(--wb-padding);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            10px;
    flex:           1;
}

/* ─── Nombre ─── */
.wb-grid-name {
    font-size:   var(--wb-font-name);
    font-weight: 700;
    color:       var(--wb-text);
    margin:      0;
    line-height: 1.3;
}

.wb-grid-name a {
    color:           inherit;
    text-decoration: none;
}

.wb-grid-name a:hover {
    color: var(--wb-orange);
}
.wb-grid-name a {
    color:           var(--wb-orange) !important;
    text-decoration: none;
}

.wb-grid-name a:hover {
    color: #ffffff !important;
}

/* ─── Genética ─── */
.wb-grid-excerpt {
    font-size:   var(--wb-font-excerpt);
    color:       var(--wb-text-muted);
    margin:      0;
    line-height: 1.4;
}

/* ─── Botones de pack ─── */
.wb-grid-packs {
    display:   flex;
    gap:       6px;
    flex-wrap: nowrap;
    width:     100%;
}

.wb-grid-pack-btn {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        7px 4px 5px;
    background:     transparent;
    border:         1.5px solid var(--wb-border);
    border-radius:  6px;
    color:          var(--wb-text-muted);
    font-size:      var(--wb-font-pack);
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--wb-transition);
    white-space:    nowrap;
    text-align:     center;
    letter-spacing: 0.02em;
}

.wb-pack-price {
    display:        block;
    font-size:      0.78em;
    font-weight:    400;
    margin-top:     2px;
    opacity:        0.85;
}

.wb-grid-pack-btn:hover {
    border-color: var(--wb-orange);
    color:        var(--wb-orange);
}

.wb-grid-pack-btn.active {
    background:   var(--wb-orange);
    border-color: var(--wb-orange);
    color:        #ffffff;
}

/* ─── Precio ─── */
.wb-grid-price {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    flex-wrap:   wrap;
    min-height:  1.5em;
}

.wb-price-regular,
.wb-price-regular .woocommerce-Price-amount,
.wb-price-regular .woocommerce-Price-currencySymbol {
    font-size:       var(--wb-font-excerpt);
    color:           var(--wb-text-muted);
    text-decoration: line-through;
}

.wb-price-sale,
.wb-price-sale .woocommerce-Price-amount {
    font-size:   var(--wb-font-price);
    font-weight: 700;
    color:       var(--wb-text);
}

/* ─── Botón añadir al carrito ─── */
.wb-grid-add-cart {
    width:          100%;
    padding:        13px 0;
    margin-top:     auto;
    background:     var(--wb-orange);
    border:         none;
    border-radius:  calc(var(--wb-radius) - 4px);
    color:          #ffffff;
    font-size:      var(--wb-font-btn);
    font-weight:    700;
    letter-spacing: 0.09em;
    cursor:         pointer;
    transition:     background var(--wb-transition), transform 0.15s ease;
    display:        block;
}

.wb-grid-add-cart:hover:not(:disabled) {
    background: var(--wb-orange-dark);
}

.wb-grid-add-cart:active:not(:disabled) {
    transform: scale(0.98);
}

.wb-grid-add-cart.is-adding {
    background: #555555;
    cursor:     not-allowed;
}

.wb-grid-add-cart.is-added {
    background: #2e7d32;
}

.wb-grid-add-cart.is-error {
    background: #b71c1c;
}

/* ─── Coming Soon (out of stock) ─── */
.wb-grid-coming-soon {
    display:         flex;
    justify-content: center;
    align-items:     center;
    margin-top:      auto;
    padding:         8px 0;
}

.wb-grid-coming-soon-img {
    width:      120px;
    height:     auto;
    object-fit: contain;
}

@media (max-width: 600px) {
    .wb-grid-coming-soon-img {
        width: 90px;
    }
}

/* ─── Vacío ─── */
.wb-grid-empty {
    color:      var(--wb-text-muted);
    text-align: center;
    padding:    48px 0;
    font-size:  1rem;
    grid-column: 1 / -1;
}

/* ─── Responsive: móvil ─── */
@media (max-width: 600px) {
    .wb-grid-pack-btn {
        font-size: 0.9rem;
    }
    .wb-pack-price {
        font-size: 0.82em;
    }
}