/* ============================= */
/* Importar Fredoka One */
/* ============================= */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* =============================
   Variables globales
   ============================= */
:root{
  --accent: #DE0A2F;
  --black: #000;
  --muted: #e6e6e6;
  --bg: #fff;
  --maxw: 1200px;
  --fredoka: 'Fredoka One', sans-serif;
}

/* =============================
   GRID (por defecto)
   ============================= */
#productos-grid{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  background:transparent;
}

#productos-grid li.product{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:var(--bg);
  padding:15px;
  box-sizing:border-box;
  margin:0;
  border-top:1px solid var(--black);
  border-left:1px solid var(--black);
  border-bottom:1px solid var(--black);
  border-right:1px solid var(--black);
  flex:1 1 calc(33.333% - 0px); /* 3 columnas */
}

#productos-grid li.product:nth-child(3n){ border-right:none; }

#productos-grid li.product img{
  width:100%;
  height:200px;
  object-fit:contain;
  margin-bottom:10px;
  display:block;
}

/* Common meta / title / button for grid & list */
#productos-grid li.product .product-meta{ display:flex; flex-direction:column; margin-top:auto; gap:8px; }
#productos-grid li.product .product-info{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; }
#productos-grid li.product .woocommerce-loop-product__title{
  font-family:var(--fredoka);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--black);
  margin:0;
  line-height:1;
}
#productos-grid li.product .price,
#productos-grid li.product .sku{ font-size:14px; color:#444; margin-top:8px; text-align:left; }

#productos-grid li.product .button{
  background:var(--accent);
  color:#fff;
  font-size:14px;
  padding:8px 14px;
  border-radius:6px;
  transition:all .25s ease;
  white-space:nowrap;
  border:none;
  cursor:pointer;
}
#productos-grid li.product .button:hover{ filter:brightness(.95); }

/* Ocultar descripción en GRID */
#productos-grid:not(.lista) .short-desc,
#productos-grid:not(.lista) .product-description,
#productos-grid:not(.lista) .description {
  display: none !important;
}

/* Responsive grid tweaks */
@media (max-width:1024px){
  #productos-grid li.product{ flex:1 1 calc(50% - 0px); }
  #productos-grid li.product:nth-child(2n){ border-right:none; }
}
@media (max-width:600px){
  #productos-grid li.product{ flex:1 1 100%; border-right:none; }
}

/* =============================
   VISTA LISTA (MODIFICADA)
   - Imagen más grande a la izquierda (SIN contorno)
   - Columna derecha: ARRIBA nombre + botón, luego estrellas, luego descripción, luego specs
   ============================= */
#productos-grid.lista{
  display:block;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0;
}

/* Contenedor por producto en lista: fila con 2 columnas */
#productos-grid.lista li.product{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:28px;
  width:100%;
  padding:26px 22px;
  box-sizing:border-box;
  background:var(--bg);
  border-top:1px solid var(--black);
  border-left:1px solid var(--black);
  border-bottom:1px solid var(--black);
  border-right:1px solid var(--black);
}

/* IMAGEN (columna izquierda) - eliminé el borde azul y la hice más grande */
#productos-grid.lista li.product img{
  display:block;                     /* mostrar imagen */
  width:56%;                         /* aumentada para ser más prominente */
  max-width:760px;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  padding:6px;
  box-sizing:border-box;
  border: none;                      /* QUITADO el contorno azul */
  background:transparent;
  flex:0 0 56%;
  margin:0;
}

/* CONTENIDO (columna derecha) */
#productos-grid.lista li.product .product-meta{
  flex:1 1 44%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* texto alineado a la izquierda */
  text-align:left;
  gap:12px;
  padding:2px 0;
  box-sizing:border-box;
}

/* Subcontenedor que ocupa toda la columna derecha */
#productos-grid.lista li.product .meta-main{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ORDEN: 0 = título arriba, 1 = meta-actions (botón) justo después del título,
   2 = estrellas, 3 = descripción, 4 = specs */
#productos-grid.lista li.product .product-meta > *{ width:100%; box-sizing:border-box; }
#productos-grid.lista li.product .product-meta > .woocommerce-loop-product__title{ order:0; }
#productos-grid.lista li.product .product-meta .meta-actions{ order:1; }
#productos-grid.lista li.product .product-meta .star-rating{ order:2; }
#productos-grid.lista li.product .product-meta .short-desc,
#productos-grid.lista li.product .product-meta .product-description,
#productos-grid.lista li.product .product-meta .description{ order:3; }
#productos-grid.lista li.product .product-meta .specs,
#productos-grid.lista li.product .product-meta .product-specs{ order:4; }

/* NOMBRE: arriba, con Fredoka */
#productos-grid.lista li.product .woocommerce-loop-product__title{
  font-family:var(--fredoka);
  font-size:20px;
  font-weight:800;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--black);
  line-height:1.05;
}

/* META-ACTIONS: botón y precio junto al título (aparecen justo debajo del título por orden) */
#productos-grid.lista li.product .meta-actions{
  margin-top:4px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between; /* botón a la derecha, precio a la izquierda */
  width:100%;
  box-sizing:border-box;
}

/* Si quieres que el botón quede pegado a la derecha en la misma fila del título,
   deberás tener HTML con el título en su propio bloque y .meta-actions separado. */
#productos-grid.lista li.product .meta-actions .price{
  font-size:18px;
  font-weight:800;
  color:var(--black);
  margin:0;
}

/* BOTÓN más visible (ahora aparece junto al título arriba) */
#productos-grid.lista li.product .meta-actions .button,
#productos-grid.lista li.product .button{
  padding:12px 22px;
  border-radius:24px;
  font-size:15px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(222,10,47,0.12);
  display:inline-block;
  margin:0;
  border:none;
  cursor:pointer;
}
#productos-grid.lista li.product .button:hover{ filter:brightness(.92); }

/* Estrellas debajo del botón (order:2) */
#productos-grid.lista li.product .star-rating,
#productos-grid.lista li.product .stars{
  display:block;
  font-size:18px;
  margin-top:6px;
  color:#FFD24D;
}
#productos-grid.lista li.product .star-rating span,
#productos-grid.lista li.product .stars span,
#productos-grid.lista li.product .stars i{
  color:#FFD24D;
  margin-right:4px;
}

/* 1. Contenedor principal: lo forzamos a ser una columna alineada a la izquierda */
#productos-grid.lista li.product .product-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Alinea todo a la izquierda */
    text-align: left !important;
    padding-right: 20px; /* Espacio para que no choque con el corazón */
}

/* 2. El bloque que contiene Título y Botón originalmente */
#productos-grid.lista li.product .product-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    order: 1 !important;
}

/* 3. Título primero */
#productos-grid.lista li.product .woocommerce-loop-product__title {
    order: 1 !important;
    margin-left: 0 !important;
}

/* 4. Descripción segunda */
#productos-grid.lista li.product .short-desc {
    order: 2 !important;
    margin: 15px 0 !important;
    width: 100% !important;
}

/* 5. Rating (estrellas) tercero */
#productos-grid.lista li.product .product-rating {
    order: 3 !important;
    margin: 0 0 10px 0 !important;
}

/* 6. El botón al final de todo y a la izquierda */
#productos-grid.lista li.product .add_to_cart_button {
    order: 4 !important;
    margin-left: 0 !important;
    margin-right: auto !important; /* Empuja cualquier espacio sobrante a la derecha */
    display: inline-block !important;
}

/* 7. Ajuste extra para el corazón (si es necesario que no flote encima) */
#productos-grid.lista li.product .nv-fav-btn {
    top: 10px !important;
    right: 10px !important;
}

/* Forzar dimensiones específicas en la imagen del producto */
#productos-grid.lista li.product img.attachment-woocommerce_thumbnail {
    width: 636px !important; /* Redondeado para estabilidad */
    height: 424px !important;
    object-fit: cover !important; /* Corta los bordes sobrantes para no estirar la imagen */
    object-position: center !important; /* Centra la imagen dentro del recuadro */
    display: block !important;
    max-width: 100% !important; /* Evita que se salga del contenedor en móviles */
}

/* Ajuste para el contenedor de la imagen en Salient */
#productos-grid.lista li.product .woocommerce-LoopProduct-link {
    display: block !important;
    width: 636px !important;
    max-width: 100% !important;
}

/* 2. Medidas para Móviles */
@media only screen and (max-width: 999px) {
    #productos-grid.lista li.product img.attachment-woocommerce_thumbnail {
        width: 189px !important;
        height: 126px !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important; /* Centra la imagen si el contenedor es más ancho */
    }

    /* Ajuste opcional: si en móvil quieres que el texto no se amontone */
    #productos-grid.lista li.product .product-meta {
        padding-right: 10px !important;
    }

    /* Espacio extra debajo del botón en Móvil */
    #productos-grid.lista li.product .add_to_cart_button {
      margin-top: 25px !important;    /* Espacio hacia la descripción/estrellas */
        margin-bottom: 20px !important;
    }
}
/* DESCRIPCIÓN: después de título+botón+estrellas */
#productos-grid.lista li.product .short-desc,
#productos-grid.lista li.product .product-description,
#productos-grid.lista li.product .description{
  display:block;
  color:#444;
  font-size:15px;
  line-height:1.6;
  text-align:left;
  width:100%;
  margin:0;
  max-width:100%;
}

/* Label "Descripción:" */
#productos-grid.lista li.product .short-desc::before,
#productos-grid.lista li.product .product-description::before,
#productos-grid.lista li.product .description::before{
  content:"Descripción:";
  display:block;
  font-weight:700;
  color:var(--black);
  margin-bottom:8px;
  font-size:15px;
}

/* ESPECIFICACIONES: fila horizontal compacta (opcional) */
#productos-grid.lista li.product .specs,
#productos-grid.lista li.product .product-specs{
  display:flex;
  gap:8px;
  list-style:none;
  padding:0;
  margin:6px 0 0;
  align-items:center;
  flex-wrap:wrap;
}
#productos-grid.lista li.product .specs li,
#productos-grid.lista li.product .product-specs li{
  font-size:13px;
  color:#444;
  background:#fff;
  border:1px solid #eee;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}

/* Favorito / corazón (si lo usas): esquina superior derecha del item */
#productos-grid.lista li.product .favorite-heart{
  position:absolute;
  top:18px;
  right:20px;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:var(--accent);
  cursor:pointer;
  background:transparent;
  border:1px solid rgba(0,0,0,0.04);
}

/* =============================
   RESPONSIVE: lista en móvil -> apilado: imagen arriba, contenido abajo
   ============================= */
@media (max-width:768px){
  #productos-grid.lista li.product{
    flex-direction:column;
    align-items:center;
    padding:18px 14px;
  }
  #productos-grid.lista li.product img{
    width:100%;
    max-width:760px;
    height:auto;
    object-fit:contain;
    border-radius:8px;
    margin-bottom:12px;
  }
  #productos-grid.lista li.product .product-meta{
    width:92%;
    align-items:flex-start;
    text-align:left;
  }
  /* En móvil, meta-actions se apila con el título, pero mantiene el orden (titulo arriba, meta-actions justo después) */
  #productos-grid.lista li.product .meta-actions{
    justify-content:space-between;
    width:100%;
  }
  #productos-grid.lista li.product .woocommerce-loop-product__title{ font-size:18px; }
  #productos-grid.lista li.product .button{ width:auto; padding:12px 20px; }
  #productos-grid.lista li.product .specs{ justify-content:flex-start; }
}

/* =============================
   BOTÓN CARGAR MÁS & SWITCH
   ============================= */
.load-more-wrap{ text-align:center; margin-top:20px; }
.load-more-wrap .button{
  display:inline-block;
  background:#fff;
  color:var(--accent);
  border:2px solid var(--accent);
  font-size:14px;
  padding:10px 18px;
  border-radius:25px;
  transition:all .25s ease;
  cursor:pointer;
}
.load-more-wrap .button:hover{ background:var(--accent); color:#fff; }

.vista-switch{ display:flex; gap:8px; justify-content:flex-end; max-width:var(--maxw); margin:10px auto 14px; }
.vista-btn{
  border:1px solid var(--accent);
  background:#fff;
  border-radius:6px;
  cursor:pointer;
  font-size:18px;
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .18s ease; color:var(--accent); padding:0;
}
.vista-btn.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-1px); box-shadow:0 4px 8px rgba(222,10,47,0.08); }
.vista-btn:hover{ transform:translateY(-2px); }
.vista-btn svg{ width:20px; height:20px; fill:currentColor; }
@media (max-width:480px){ .vista-btn{ width:44px; height:44px; } .vista-btn svg{ width:22px; height:22px; } }

/* TITULO CATEGORÍA */
.titulo-productos, .category-title{
  font-family:var(--fredoka);
  color:var(--accent);
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  font-size:42px;
  margin:18px 0 12px;
  letter-spacing:0.6px;
  line-height:1;
}
@media (max-width:768px){ .titulo-productos, .category-title{ font-size:28px; margin:14px 0 10px; } }
.titulo-productos-wrapper{ background:#f3f3f5; padding:8px 12px; display:block; margin:0 auto 8px; max-width:var(--maxw); }

/* ACCESIBILIDAD */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* TEST: poner el botón por encima (temporal) */
ul.products li.product .add_to_cart_button {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Estrellas en GRID */
#productos-grid li.product .star-rating,
#productos-grid li.product .stars {
  display: block;
  font-size: 16px;
  margin: 6px 0;
  color: #FFD24D;
}
#productos-grid li.product .star-rating span,
#productos-grid li.product .stars span,
#productos-grid li.product .stars i {
  color: #FFD24D;
  margin-right: 4px;
}


/* =============================
   OVERRIDE: Forzar rojo en botones (sin azul)
   Pegar al final del CSS
   ============================= */

/* Selector amplio: cubre , , , y clases .button / .vista-btn */
#productos-grid li.product .button,
#productos-grid li.product a.button,
#productos-grid li.product button,
#productos-grid li.product input[type="button"],
#productos-grid li.product input[type="submit"],
.load-more-wrap .button,
.vista-btn,
a.vista-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* móvil */
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all .18s ease !important;
}

/* Hover: forzar siempre el mismo rojo */
#productos-grid li.product .button:hover,
#productos-grid li.product a.button:hover,
#productos-grid li.product button:hover,
#productos-grid li.product input[type="submit"]:hover,
.load-more-wrap .button:hover,
.vista-btn:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  filter: none !important;
  box-shadow: 0 6px 18px rgba(222,10,47,0.12) !important; /* opcional */
}

/* Active / Pressed: evitar que el navegador ponga azul (ej. iOS/Android) */
#productos-grid li.product .button:active,
#productos-grid li.product a.button:active,
#productos-grid li.product button:active,
.load-more-wrap .button:active,
.vista-btn:active {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Focus visible: mantén accesibilidad pero en rojo */
#productos-grid li.product .button:focus,
#productos-grid li.product a.button:focus,
#productos-grid li.product button:focus,
#productos-grid li.product input[type="submit"]:focus,
.load-more-wrap .button:focus,
.vista-btn:focus,
#productos-grid li.product .button:focus-visible,
.vista-btn:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 6px rgba(222,10,47,0.28) !important;
}

/* Asegurar que iconos SVG dentro del botón usen el color del texto */
#productos-grid li.product .button svg,
.load-more-wrap .button svg,
.vista-btn svg {
  fill: currentColor !important;
  color: inherit !important;
}

/* Si sigues viendo azul: fuerza totalmente sin estilos (sólo para depuración) */
/* Descomenta sólo si quieres quitar TODO feedback visual (no recomendado por accesibilidad) */
/*
#productos-grid li.product .button,
.load-more-wrap .button,
.vista-btn {
  outline: none !important;
  box-shadow: none !important;
}
*/


/* =============================
   EXTRA: Botones de filtros (aplicar, limpiar, toggle)
   ============================= */
#toggle-filtros,
#filtros-panel .button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--accent) !important;
  color: #fff !important;
  border: 2px solid var(--accent) !important;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: all .18s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hover igual al resto */
#toggle-filtros:hover,
#filtros-panel .button:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
  filter: none !important;
  box-shadow: 0 6px 18px rgba(222,10,47,0.12) !important;
}

/* Active */
#toggle-filtros:active,
#filtros-panel .button:active {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Focus visible */
#toggle-filtros:focus,
#filtros-panel .button:focus,
#toggle-filtros:focus-visible,
#filtros-panel .button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 6px rgba(222,10,47,0.28) !important;
}


/* ============================
   MOBILE OPTIMIZADO (≤600px)
   ============================ */
@media (max-width:600px){

  /* 2 columnas + espacio entre tarjetas */
  #productos-grid{
    gap:10px;
    padding:8px;
  }

  /* tarjetas más pequeñas */
  #productos-grid li.product{
    flex:1 1 calc(50% - 10px);
    margin:0;
    padding:8px;
    border-right:none !important;
    border:1px solid #eee;
    border-radius:10px;
    position:relative;
    box-sizing:border-box;
  }

  /* imagen más chica y proporcionada */
  #productos-grid li.product img{
    height:120px;            /* << antes eran enormes */
    object-fit:contain;
    margin-bottom:6px;
  }

  /* nombre más compacto */
  #productos-grid li.product .title{
    font-size:12px;
    line-height:1.2em;
    height:2.4em;           /* 2 líneas máximo */
    margin-bottom:6px;
  }

  /* precio compacto */
  #productos-grid li.product .nv_price{
    font-size:13px;
    font-weight:600;
    margin-bottom:32px;     /* deja espacio para el botón abajo */
  }

  #productos-grid li.product .nv_add_to_cart{
    position:absolute;
    bottom:6px;
    left:6px;
    right:6px;
    background:#000;
    color:#fff;
    padding:4px 2px;
    font-size:10px;
    line-height:1.1em;
    text-align:center;
    border-radius:4px;
    display:block;
  }
}

@media (max-width:600px){
  #productos-grid li.product a.button,
  #productos-grid li.product a.add_to_cart_button,
  #productos-grid li.product .nv_add_to_cart,
  #productos-grid li.product button {
    position:absolute !important;
    bottom:-2px !important;
    left:6px !important;
    right:6px !important;
    padding:4px 2px !important;
    font-size:10px !important;
    line-height:1.1em !important;
    border-radius:4px !important;
    background:#DE0A2F !important;
    color:#fff !important;
    text-align:center !important;
  }
}

.badge-descuento {
    position: absolute;
    top: 0;           /* Pegado al borde superior */
    left: 15px;      /* Un poco separado del borde derecho */
    background-color: #DE0A2F; /* El rojo de tu marca */
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    padding: 10px 5px 25px 5px; /* Más padding abajo para la punta */
    width: 60px;      /* Ancho fijo para que parezca una etiqueta */
    text-align: center;
    z-index: 20;
    pointer-events: none;
    
    /* ESTO CREA LA FORMA DE FLECHA */
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    
    /* Fuente y sombra */
    font-family: sans-serif;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Ajuste para que el número se vea centrado */
.badge-descuento {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.badge-descuento {
    position: absolute;
    top: 0;
    left: 15px; /* Por defecto ya está a la izquierda */
    background-color: #DE0A2F;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    padding: 10px 5px 25px 5px;
    width: 60px;
    text-align: center;
    z-index: 20;
    pointer-events: none;
    
    /* Forma de flecha */
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    
    font-family: sans-serif;
    display: flex;
    align-items: flex-start; /* Cambiado a flex-start para que el texto no flote en el centro del pico */
    justify-content: center;
    line-height: 1;
}
/* --- AJUSTE PARA TELÉFONOS --- */
@media (max-width: 768px) {
    .badge-descuento {
        left: auto;       /* Quitamos la posición de la izquierda */
        right: 15px;      /* Lo mandamos a la derecha */
        width: 50px;      /* Un poquito más chico para móvil */
        font-size: 14px;
    }
}


/* --- DISEÑO HORIZONTAL EN MÓVILES (ESTILO LISTA) --- */

@media only screen and (max-width: 999px) {
    /* 1. Forzamos al elemento de la lista a ser un contenedor horizontal */
    #productos-grid.lista li.product {
        display: flex !important;
        flex-direction: row !important; /* Imagen izquierda, Contenido derecha */
        align-items: flex-start !important;
        gap: 15px !important; /* Espacio entre imagen y texto */
        padding: 15px !important;
    }

    /* 2. Ajustamos la imagen para que mantenga su tamaño sin romperse */
    #productos-grid.lista li.product .woocommerce-LoopProduct-link {
        flex: 0 0 189px !important; /* No crece, no se encoge, se queda en 189px */
        width: 189px !important;
    }

    #productos-grid.lista li.product img.attachment-woocommerce_thumbnail {
        width: 189px !important;
        height: 126px !important;
        object-fit: cover !important;
        border-radius: 8px; /* Opcional: bordes redondeados suaves */
    }

    /* 3. El contenedor de información (Meta) */
    #productos-grid.lista li.product .product-meta {
        flex: 1 !important; /* Ocupa el resto del espacio derecho */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-right: 0 !important;
        gap: 5px !important; /* Espaciado interno más compacto */
    }

    /* 4. Orden de los elementos internos */
    #productos-grid.lista li.product .woocommerce-loop-product__title {
        order: 1 !important;
        font-size: 16px !important; /* Ajuste de tamaño para móvil */
        margin: 0 !important;
    }

    #productos-grid.lista li.product .product-rating {
        order: 2 !important;
        margin: 2px 0 !important;
    }

    #productos-grid.lista li.product .short-desc {
        order: 3 !important;
        font-size: 13px !important; /* Texto un poco más pequeño */
        line-height: 1.3 !important;
        margin: 8px 0 !important;
    }

    #productos-grid.lista li.product .add_to_cart_button {
        order: 4 !important;
        margin-top: 10px !important;
        padding: 10px 15px !important; /* Botón un poco más compacto */
        font-size: 14px !important;
        width: fit-content !important; /* Que solo ocupe lo que necesita el texto */
    }

    /* 5. Posición del corazón (Favoritos) */
    #productos-grid.lista li.product .nv-fav-btn {
        top: 10px !important;
        right: 10px !important;
        position: absolute !important;
    }
}

/* Reducir tamaño y ocultar SKU manteniendo su espacio (solo móvil y lista) */
@media only screen and (max-width: 999px) {
    #productos-grid.lista li.product .sku {
        visibility: hidden !important;
        font-size: 16px !important;    /* Letra muy pequeña para que el hueco sea mínimo */
        line-height: 1 !important;    /* Reduce la altura de línea para comprimir el espacio */
        margin: 0 !important;         /* Elimina márgenes para que no empuje otros elementos */
        padding: 0 !important;
    }
}

/* --- BOTÓN FULL WIDTH EN MÓVIL LISTA --- */
@media only screen and (max-width: 999px) {
    /* Seleccionamos el botón dentro de la vista lista */
    #productos-grid.lista li.product .add_to_cart_button {
        display: block !important;    /* Cambia de inline a bloque para permitir el ancho total */
        width: 60% !important;       /* Ocupa todo el ancho de la columna derecha */
        text-align: center !important; /* Centra el texto "Añadir al carrito" dentro del botón */
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ajuste para el contenedor de la info para que el botón no se desborde */
    #productos-grid.lista li.product .product-meta {
        align-items: stretch !important; /* Estira los elementos hijos (botón) al ancho total */
    }
}
/* --- FIX DEFINITIVO PARA GRID MÓVIL (ESTILO FREYA) --- */

@media only screen and (max-width: 999px) {
    /* 1. Contenedor del producto: le damos espacio abajo para el botón */
    #productos-grid:not(.lista) li.product {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 60px !important; /* Espacio reservado para el botón al final */
        min-height: 350px !important; /* Asegura que todas las tarjetas midan lo mismo */
    }

    /* 2. Título y Estrellas: Alineados a la izquierda */
    #productos-grid:not(.lista) li.product .woocommerce-loop-product__title {
        font-size: 14px !important;
        text-align: left !important;
        margin-top: 10px !important;
        padding-right: 10px !important;
    }

    #productos-grid:not(.lista) li.product .product-rating {
        text-align: left !important;
        margin-top: 5px !important;
    }

    /* 3. BOTÓN: Posicionado abajo a la derecha de forma fija dentro de la tarjeta */
    #productos-grid:not(.lista) li.product .add_to_cart_button {
        position: absolute !important;
        bottom: 15px !important; /* Distancia del borde inferior */
        right: 15px !important;  /* Distancia del borde derecho */
        padding: 10px 18px !important;
        font-size: 12px !important;
        width: auto !important;
        margin: 0 !important; /* Eliminamos el margen de 100px que causaba el error */
    }

    /* 4. Ocultamos descripción en GRID para que no choque con el botón */
    #productos-grid:not(.lista) li.product .short-desc {
        display: none !important;
    }
}

/* --- OCULTAR SKU SOLO EN MÓVIL GRID --- */

@media only screen and (max-width: 999px) {
    /* El selector :not(.lista) asegura que solo afecte al Grid */
    #productos-grid:not(.lista) li.product .sku,
    #productos-grid:not(.lista) li.product .product-meta .sku {
        display: none !important;
    }
}



@media only screen and (max-width: 999px) {
    
    /* 1. Títulos de los productos */
    body #productos-grid.lista li.product .product-meta .product-info h2.woocommerce-loop-product__title,
    body #productos-grid:not(.lista) li.product .product-meta h2.woocommerce-loop-product__title {
        font-size: 13px !important; /* Ajuste manual al 90% aprox */
        line-height: 1.2 !important;
    }

    /* 2. Descripción (Largo, Ancho, Alto...) */
    body #productos-grid li.product .product-meta .short-desc,
    body #productos-grid li.product .product-meta .short-desc-clean {
        font-size: 11px !important; /* Letra más pequeña para la info técnica */
        line-height: 1.3 !important;
    }

    /* 3. Estrellas*/
    body #productos-grid li.product .star-rating,
    body #productos-grid li.product .star-rating span:before {
        font-size: 8px !important;
    }

    /* 4. Texto del botón */
    body #productos-grid li.product .add_to_cart_button {
        font-size: 12px !important;
    }
}


@media only screen and (max-width: 999px) {
    body #productos-grid li.product {
        border: 1px solid var(--black) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* --- ELIMINAR ESPACIO ENTRE FOTO Y TÍTULO (MÓVIL GRID) --- */
@media only screen and (max-width: 999px) {

    /* 1. Quitamos margen al contenedor de la imagen */
    body #productos-grid:not(.lista) li.product .woocommerce-LoopProduct-link,
    body #productos-grid:not(.lista) li.product .product-image {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        line-height: 0 !important; /* A veces el inline-block deja un espacio de fuente */
    }

    /* 2. Quitamos margen superior al contenedor de meta e info */
    body #productos-grid:not(.lista) li.product .product-meta,
    body #productos-grid:not(.lista) li.product .product-info {
        margin-top: 5px !important; /* Ajusta este valor (0 a 5px) según qué tan pegado lo quieras */
        padding-top: 0 !important;
    }

    /* 3. Quitamos margen superior directo al título */
    body #productos-grid:not(.lista) li.product h2.woocommerce-loop-product__title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 4. Reset general de la imagen para evitar espacios fantasmas */
    body #productos-grid:not(.lista) li.product img {
        margin-bottom: 0 !important;
        display: block !important; /* Evita el espacio de línea base de las imágenes */
    }
}

/* --- PEGAR BOTÓN AL TEXTO (MÓVIL GRID) --- */
@media only screen and (max-width: 999px) {

    /* 1. Reducimos la altura mínima de la tarjeta para que no sea tan larga */
    body #productos-grid:not(.lista) li.product {
        min-height: 20px !important; /* Ajusta este valor si tus fotos son más altas */
        padding-bottom: 40px !important; /* Reducimos el espacio reservado para el botón */
    }

    /* 2. Subimos el botón un poco más hacia el texto */
    body #productos-grid:not(.lista) li.product .add_to_cart_button {
        bottom: 8px !important; /* Lo acercamos un poco más al borde inferior */
        margin-top: 0 !important;
    }

    /* 3. Eliminamos espacios muertos en el contenedor de información */
    body #productos-grid:not(.lista) li.product .product-meta {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        flex-grow: 1 !important; /* Empuja el contenido hacia arriba */
    }

    /* 4. Si el rating (estrellas) tiene margen abajo, lo eliminamos */
    body #productos-grid:not(.lista) li.product .product-rating {
        margin-bottom: 2px !important;
    }
}