/* ═══════════════════════════════════════════════════════════════════
   rwe-woo-shop — CSS de la rejilla de tienda
   R1: sacado del render() inline (antes ~35 líneas por instancia via
   echo '<style>', con #grid_id en cada selector).

   Los valores condicionales que ANTES se calculaban en PHP (hover del card,
   zoom de imagen, alineación de precio/tallas) ahora son VARIABLES que el
   render rellena. Así el CSS es fijo y cacheable.

   Variables (inyectadas en el wrapper .rwe-woo-grid):
     --rwe-cols / --rwe-cols-t / --rwe-cols-m   columnas
     --rwe-gap            separación px
     --rwe-radius         radio de tarjeta px
     --rwe-img-h          alto de imagen px
     --rwe-card-base      estilos base de tarjeta (fondo/borde según estilo)
     --rwe-card-hover     transform/shadow al hover
     --rwe-img-hover      transform de la imagen al hover (zoom o nada)
     --rwe-justify        alineación flex (precio, rating, tallas)
     --rwe-title-size / --rwe-title-weight
     --rwe-price-size / --rwe-price-weight
   ═══════════════════════════════════════════════════════════════════ */

.rwe-woo-grid{
    display:grid;
    grid-template-columns:repeat(var(--rwe-cols,3),1fr);
    gap:var(--rwe-gap,24px);
}
@media(max-width:1024px){ .rwe-woo-grid{ grid-template-columns:repeat(var(--rwe-cols-t,2),1fr); } }
@media(max-width:767px){  .rwe-woo-grid{ grid-template-columns:repeat(var(--rwe-cols-m,1),1fr); } }

.rwe-woo-grid .rwe-woo-card{
    border-radius:var(--rwe-radius,12px); overflow:hidden;
    transition:transform .25s, box-shadow .25s;
    /* estilos base según el "card_style" elegido */
    background:var(--rwe-card-bg,transparent);
    box-shadow:var(--rwe-card-shadow,none);
    border:var(--rwe-card-border,none);
}
.rwe-woo-grid .rwe-woo-card:hover{
    transform:var(--rwe-card-hover-transform,none);
    box-shadow:var(--rwe-card-hover-shadow,none);
}
.rwe-woo-grid .rwe-woo-img-wrap{ position:relative; overflow:hidden; display:block; }
.rwe-woo-grid .rwe-woo-img-wrap img{ width:100%; height:var(--rwe-img-h,300px); object-fit:cover; display:block; transition:transform .4s ease, opacity .4s ease; }
.rwe-woo-grid .rwe-woo-card:hover .rwe-woo-img-main{ transform:var(--rwe-img-hover,none); }

/* Segunda imagen al hover */
.rwe-woo-grid .rwe-woo-img-2{ position:absolute; inset:0; opacity:0; }
.rwe-woo-grid .rwe-woo-card:hover .rwe-woo-img-2{ opacity:1; transform:var(--rwe-img-hover,none); }
.rwe-woo-grid .rwe-woo-card:hover .rwe-woo-has2 .rwe-woo-img-main{ opacity:0; }

/* Acciones al hover */
.rwe-woo-grid .rwe-woo-actions{ position:absolute; left:0; right:0; bottom:0; padding:14px; display:flex; justify-content:center; transform:translateY(100%); opacity:0; transition:transform .3s ease, opacity .3s ease; z-index:3; }
.rwe-woo-grid .rwe-woo-card:hover .rwe-woo-actions{ transform:translateY(0); opacity:1; }
.rwe-woo-grid .rwe-woo-action-btn{ display:inline-block; width:100%; text-align:center; padding:12px 18px; background:rgba(255,255,255,.96); color:#1a1a1a; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:background .2s; }
.rwe-woo-grid .rwe-woo-action-btn:hover{ background:#1a1a1a; color:#fff; }
.rwe-woo-grid .rwe-woo-badge{ position:absolute; top:12px; left:12px; padding:4px 12px; color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; z-index:2; }
.rwe-woo-grid .rwe-woo-body{ padding:20px; text-align:var(--rwe-text-align,left); }
.rwe-woo-grid .rwe-woo-cat{ font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#aaa; margin:0 0 8px; }
.rwe-woo-grid .rwe-woo-title{ font-size:var(--rwe-title-size,16px); font-weight:var(--rwe-title-weight,700); line-height:1.35; margin:0 0 10px; }
.rwe-woo-grid .rwe-woo-title a{ text-decoration:none; transition:color .2s; }
.rwe-woo-grid .rwe-woo-rating{ display:flex; gap:2px; margin-bottom:10px; justify-content:var(--rwe-justify,flex-start); }
.rwe-woo-grid .rwe-woo-price{ font-size:var(--rwe-price-size,19px); font-weight:var(--rwe-price-weight,700); margin:0 0 16px; }
.rwe-woo-grid .rwe-woo-price del{ font-size:13px; font-weight:400; color:#aaa; margin-right:6px; }
.rwe-woo-grid .rwe-woo-sizes{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px; justify-content:var(--rwe-justify,flex-start); }
.rwe-woo-grid .rwe-woo-size{ font-size:11px; font-weight:600; letter-spacing:.04em; color:#333; border:1px solid #cfcfcf; border-radius:3px; padding:3px 9px; line-height:1.4; background:#fff; }
.rwe-woo-grid .rwe-woo-size.oos{ color:#bbb; border-color:#e8e8e8; text-decoration:line-through; }
.rwe-woo-grid .rwe-woo-btn{ display:inline-block; padding:10px 20px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-radius:50px; transition:opacity .2s; }
.rwe-woo-grid .rwe-woo-btn:hover{ opacity:.85; }
.rwe-woo-grid .rwe-woo-outofstock{ display:inline-block; padding:10px 20px; font-size:12px; font-weight:600; color:#aaa; border:1.5px solid #ddd; border-radius:50px; }
@media(prefers-reduced-motion:reduce){
    .rwe-woo-grid .rwe-woo-card,
    .rwe-woo-grid .rwe-woo-img-wrap img,
    .rwe-woo-grid .rwe-woo-actions{ transition:none; }
}

/* ── Paginación (v3.7.13) ── */
.rwe-woo-pagination{ margin-top:44px; display:flex; justify-content:center; }
.rwe-woo-pagination ul{ list-style:none; display:flex; gap:8px; padding:0; margin:0; flex-wrap:wrap; }
.rwe-woo-pagination li{ margin:0; }
.rwe-woo-pagination a,
.rwe-woo-pagination span{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:42px; height:42px; padding:0 12px;
    font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
    border-radius:6px; text-decoration:none; line-height:1;
    border:1px solid #e8e4dc; color:#2e2e2c; background:#fff;
    transition:all .2s ease;
}
.rwe-woo-pagination a:hover{ border-color:#5b8c6e; color:#5b8c6e; }
.rwe-woo-pagination .current{
    background:#5b8c6e; border-color:#5b8c6e; color:#fff;
}
.rwe-woo-pagination .dots{
    border:none; background:transparent; min-width:auto; padding:0 4px;
}