/* ============================================================
   DULCE HOGAR — MOSAICO DE PRODUCTOS (estilo IKEA)
   ============================================================
   Se aplica a toda grilla de WooCommerce: tienda, categorías,
   búsquedas, relacionados, widgets y grillas de Elementor.

   REGLA DE ORO: todas las reglas cuelgan de .dh-mosaico o de
   .dh-item, y esas clases las agrega el JavaScript. Si el JS no
   corre —error, bloqueador, navegador viejo— este archivo no hace
   absolutamente nada y la tienda se ve como siempre. Nunca deja la
   página a medias.

   Los !important son necesarios porque hay que ganarle a tres
   capas: el CSS de WooCommerce (floats y anchos en %), el de
   Elementor (.elementor-grid con display:grid) y el del tema.
   ============================================================ */

.dh-mosaico{
  /* ===== Paleta oficial Dulce Hogar: Negro y Blanco ===== */
  --dh-ink:#111111;
  --dh-black:#000000;
  --dh-gray:#6b6b6b;
  /* Gris para el texto secundario DENTRO de la ficha translúcida (categoría,
     "DESDE", precio tachado).
     Mucho más oscuro que --dh-gray, y no por gusto: la ficha es blanco al 62%,
     así que sobre una foto negra su fondo efectivo baja a #9e9e9e. Con el
     #6b6b6b del resto del sitio el contraste caería a 2,4:1 —ilegible—; con
     #333 queda en 4,72:1, que pasa el mínimo AA.
     La jerarquía con el nombre del producto NO se sostiene con el color, que ya
     no da margen, sino con el tamaño y el grosor de la letra. */
  --dh-gray-ficha:#333333;
  --dh-line:#e2e2e2;
  --dh-cream:#f7f7f7;
  --dh-white:#ffffff;
}

/* ============================================================
   1. EL MOSAICO: columnas CSS, no grid
   ============================================================
   column-count es lo que permite alturas distintas SIN huecos
   blancos. Con grid la fila entera crece hasta la baldosa más alta
   y debajo de las bajas queda espacio vacío.

   Contrapartida: el orden de lectura pasa a ser vertical (los
   primeros productos llenan la columna 1, luego la 2, luego la 3).
   Es el comportamiento normal de un mosaico.
   ============================================================ */
/* Separación apretada (10px) para que el mosaico se lea como un muro de fotos
   y no como fichas sueltas. El hueco vertical del <li> tiene que ser IGUAL al
   column-gap: si no, se nota que las columnas no están alineadas entre sí.

   TRES columnas, no cuatro. Con cuatro la baldosa quedaba tan angosta —y por
   lo tanto tan baja, porque el alto sale de la proporción— que la ficha del
   precio, que mide casi lo mismo siempre, terminaba tapando la foto. La foto
   del producto es lo que vende: manda ella y la ficha se le acomoda. */
ul.products.dh-mosaico{
  display:block !important;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  column-count:3;
  column-gap:10px;
  /* Anula grid-template-columns y el gap de Elementor por si ganan la cascada. */
  grid-template-columns:none !important;
  gap:0 !important;
  row-gap:0 !important;
  column-gap:10px !important;
}

ul.products.dh-mosaico > li.product.dh-item{
  position:relative;
  display:block !important;
  float:none !important;
  clear:none !important;
  width:auto !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 0 10px !important;
  /* Una baldosa no se puede partir entre dos columnas. */
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}

/* La tarjeta original del tema queda vacía de lo importante (el JS le
   sacó la foto, el nombre y el precio). Lo que queda —miniaturas de
   galería y los botones "Ver las variedades" / "Vista Rápida"— se
   oculta para no romper el mosaico.
   ¿Quieres recuperar "Vista Rápida"? Cambia esta regla por:
     .dh-item .custom-gallery,
     .dh-item .custom-button-group .custom-button{display:none !important;}
   y el botón de woosq sobrevive. */
.dh-item .custom-product-card{display:none !important;}

/* ============================================================
   2. LA FOTO Y LAS ALTURAS VARIADAS
   ============================================================
   El JS asigna una de cuatro alturas según la CATEGORÍA real del
   producto, porque dentro de una categoría las fotos se toman
   parecidas: las cortinas son verticales, las camas horizontales.
   Así la proporción de la baldosa acompaña a la foto en vez de
   recortarla a lo bruto.
   ============================================================ */
.dh-media{
  position:relative;
  width:100%;
  background:var(--dh-cream);
  /* Piso de seguridad. La ficha mide casi lo mismo pase lo que pase (nombre,
     categoría, precio y ahorro), así que en una baldosa baja se la comía. Esto
     garantiza que SIEMPRE quede foto visible por encima de la ficha, incluso
     en la proporción más aplanada (4/3) y en las ventanas más angostas.
     Cuando la proporción ya da más alto que esto, no hace nada — solo actúa
     sobre las baldosas bajas, que son justo las que tenían el problema. */
  min-height:345px;
  /* overflow visible a propósito: la ficha sale hacia arriba desde el
     punto y en baldosas bajas y angostas su borde superior queda por
     encima de la foto. Con overflow:hidden ahí se cortaría.
     No hace falta recortar: object-fit:cover ya encuadra la imagen
     dentro de su caja sin desbordarse. */
  overflow:visible;
}
.dh-item.dh-t-s  .dh-media{aspect-ratio:4/3;}  /* baja: camas, colchones     */
.dh-item.dh-t-m  .dh-media{aspect-ratio:1/1;}  /* cuadrada: almohadas, toallas */
.dh-item.dh-t-l  .dh-media{aspect-ratio:3/4;}  /* alta: cobijas, alfombras   */
.dh-item.dh-t-xl .dh-media{aspect-ratio:2/3;}  /* muy alta: cortinas, velos  */

/* La foto y el contenedor de cambio-al-pasar-el-cursor que ya traía el
   tema (.product-image-hover-wrap con su segunda imagen) se conservan:
   solo se los reencuadra dentro de .dh-media. */
.dh-media .product-image-hover-wrap,
.dh-media > a{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.dh-media img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:cover;
  display:block;
  transition:opacity .18s ease;
}
/* Estado intermedio del cruce al cambiar de foto con las miniaturas. */
.dh-media img.dh-swap-fade{opacity:0;}

/* Corazón / comparar del tema: se reubican arriba a la derecha, sobre
   la foto, para no perder esas funciones en el mosaico. */
.dh-media .custom-wishlist-compare{
  position:absolute !important;
  top:8px;right:8px;left:auto;bottom:auto;
  z-index:5;
  display:flex;flex-direction:column;gap:6px;
  margin:0 !important;
}
.dh-media .custom-wishlist-compare button{
  background:rgba(255,255,255,.94);
  border:none;border-radius:50%;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* ============================================================
   3. BADGES (oferta / agotado)
   ============================================================
   Esquinas rectas, igual que la ficha: es la firma visual de IKEA.
   ============================================================ */
/* Redondeados y con sombra, igual que la ficha: si el badge tuviera esquinas
   rectas desentonaría con ella. */
.dh-badge{
  position:absolute;top:12px;left:12px;z-index:5;
  display:inline-block;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:6px 12px;
  border-radius:999px;
  font-family:'Poppins',sans-serif;
  line-height:1.4;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.dh-badge-sale{background:var(--dh-black);color:#fff;}
.dh-badge-stock{background:var(--dh-white);color:var(--dh-black);}
/* La baldosa agotada se atenúa, pero sigue siendo navegable. */
.dh-item.dh-agotado .dh-media img{opacity:.72;}

/* ============================================================
   3 bis. MINIATURAS SELECCIONABLES
   ============================================================
   Van DENTRO de la ficha del precio (.dh-card), como su primera fila:
   mismo vidrio esmerilado, mismo bloque, para que se lean como parte
   de la tarjeta y no como un agregado flotando aparte. Por eso no
   llevan fondo propio —lo heredan de .dh-card— ni posición absoluta:
   son una fila más dentro de ese mismo contenedor.
   ============================================================ */
.dh-swatches{
  /* position+z-index por encima de 1: .custom-header a::after (el enlace
     del nombre, más abajo en esta misma ficha) se estira con position:
     absolute + z-index:1 sobre TODA la tarjeta —así toda la ficha lleva
     al producto—, y al no tener las miniaturas su propio z-index quedaban
     por debajo de ese enlace invisible: se veían, pero el clic lo recibía
     el enlace, no el botón. */
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 9px;
  max-width:100%;
  overflow-x:auto;
  /* Si un producto trae muchas fotos, se recorren arrastrando: no hace
     falta ver la barra de scroll, ya se nota que hay más porque el borde
     derecho corta la última miniatura a la mitad. */
  scrollbar-width:none;
}
.dh-swatches::-webkit-scrollbar{display:none;}
.dh-swatch{
  /* appearance:none es la parte que importa: sin esto, Safari (y algunos
     Chrome con el tema del sistema operativo) pintan el <button> con su
     control nativo, que trae las esquinas apenas curvas de fábrica y
     esas SÍ le ganan al border-radius de este archivo. Sin esta línea la
     miniatura queda como ícono de app —esquina redondeada, no círculo—
     por más que el border-radius diga 50%. */
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  box-sizing:border-box !important;
  flex:0 0 auto;
  width:34px !important;height:34px !important;
  aspect-ratio:1/1;
  padding:0 !important;
  margin:0 !important;
  border:2px solid rgba(255,255,255,.8) !important;
  border-radius:50% !important;
  background:none !important;
  cursor:pointer;
  overflow:hidden !important;
  line-height:0;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:border-color .18s, transform .18s;
}
.dh-swatch img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:cover;
  display:block;
  border-radius:50% !important;
}
.dh-swatch:hover{transform:scale(1.08);}
/* La miniatura de la foto que se está viendo ahora mismo, con un anillo
   negro —el mismo negro de la marca— para que se note cuál está activa. */
.dh-swatch.dh-swatch-activa{border-color:var(--dh-black);}

/* ============================================================
   4. LA FICHA, SIEMPRE VISIBLE SOBRE LA FOTO
   ============================================================
   Ya no hay punto que tocar: en un catálogo el precio tiene que
   leerse de un vistazo. La ficha va anclada abajo a la izquierda de
   la foto, con ESQUINAS REDONDEADAS y SOMBRA para que se despegue de
   la imagen sin importar si la foto es clara u oscura.

   Se ajusta a su contenido (no lleva "right"), con un máximo para
   que un nombre largo no tape la foto entera.
   ============================================================ */
.dh-card{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:6;
  min-width:150px;
  /* Tope en px además del porcentaje: en una baldosa ancha la ficha se estiraba
     de lado a lado y el conjunto pesaba más que la foto. */
  max-width:min(calc(100% - 24px), 300px);
  /* ---- Blanco translúcido (vidrio esmerilado) ----
     62% de opacidad: se ve claramente la foto pasar por debajo y la ficha
     sigue leyéndose como blanca, no como un gris.

     ¿POR QUÉ 62% Y NO MENOS? Es el piso que permite la legibilidad. El límite
     lo pone el texto pequeño, que necesita 4,5:1 (mínimo AA), medido sobre el
     PEOR fondo posible: una foto negra. Sobre negro, este blanco al 62% deja
     un fondo efectivo de #9e9e9e; ahí el texto secundario en #333 da 4,72:1 —
     con muy poco margen. Al 55% ya no pasa ni poniendo el texto en negro puro.
     Y en el catálogo hay fotos casi negras de verdad (cortinas azul noche,
     tapetes vinotinto), así que ese peor caso no es teórico.

     El difuminado es lo que hace viable tanta transparencia: promedia lo que
     hay detrás, así el texto nunca se apoya sobre un detalle contrastado de la
     foto (un estampado, un borde) que lo partiría en dos. */
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  padding:11px 48px 12px 14px;   /* hueco a la derecha para el chevron */
  text-align:left;
  border-radius:14px;
  /* El filo blanco interior le da borde al cristal: sin él, a esta
     transparencia la ficha pierde silueta sobre fotos claras. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),
             0 4px 18px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.12);
  transition:box-shadow .22s, transform .22s;
}
/* Sin backdrop-filter (Firefox con la opción apagada, navegadores viejos) no
   hay difuminado que proteja al texto: ahí la ficha tiene que volverse casi
   opaca o el texto se pierde sobre los estampados. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dh-card{background:rgba(255,255,255,.94);}
}
/* El inset se repite: box-shadow no se hereda por capas, la regla nueva
   reemplaza la lista completa y sin repetirlo el filo desaparecería al pasar
   el cursor. */
.dh-item:hover .dh-card{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),
             0 8px 26px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.16);
  transform:translateY(-2px);
}
@media(prefers-reduced-motion:reduce){
  .dh-card{transition:none;}
  .dh-item:hover .dh-card{transform:none;}
}

/* El nombre: es el <h3 class="custom-header"> que ya imprimía el tema,
   movido acá dentro. Su <a> se estira sobre toda la ficha para que
   cualquier parte de ella lleve al producto — un solo enlace, sin
   anclas anidadas y sin texto duplicado. */
.dh-card .custom-header{
  font-family:'Poppins',sans-serif !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  line-height:1.28 !important;
  color:var(--dh-ink) !important;
  margin:0 0 1px !important;
  padding:0 !important;
  text-align:left !important;
  text-transform:none !important;
  letter-spacing:-.01em;
  /* Máximo 2 líneas: los nombres largos no deben estirar la ficha.
     Los del catálogo vienen en MAYÚSCULAS, así que se pasan a
     minúsculas con capital inicial para que quepan y se lean mejor. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dh-card .custom-header a{
  color:inherit !important;
  font:inherit !important;
  text-decoration:none !important;
  text-transform:none !important;
}
.dh-card .custom-header a::after{
  /* Enlace estirado: toda la ficha es clicable. */
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.dh-card:hover .custom-header a{
  text-decoration:underline !important;
  text-underline-offset:3px;
}

.dh-cat{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:.75rem;
  color:var(--dh-gray-ficha);
  line-height:1.35;
  margin-bottom:6px;
}

/* "Desde" para los productos variables: WooCommerce muestra el precio
   mínimo, no el único. Va dentro de .custom-price (lo coloca ahí el JS), o sea
   que es el primer elemento de esa fila, no un renglón aparte. */
.dh-from{
  font-family:'Poppins',sans-serif;
  font-size:.6rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--dh-gray-ficha);
  line-height:1;
  white-space:nowrap;
}

/* El bloque de precio también viene movido del tema (.custom-price),
   con su <del>/<ins> y su texto para lectores de pantalla intactos. */
/* Una sola fila: tachado, precio y ahorro conviven en el mismo renglón,
   alineados por la línea base. Apilados eran tres renglones —casi la mitad del
   alto de la ficha— y esa altura salía directamente de la foto. */
.dh-card .custom-price{
  display:flex !important;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:8px;
  row-gap:0;
  margin:0 !important;padding:0 !important;
  text-align:left !important;
  color:var(--dh-black) !important;
  font-family:'Poppins',sans-serif !important;
}
.dh-card .custom-price .woocommerce-Price-amount{
  font-weight:800;
  font-size:1.22rem;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--dh-black);
}
/* El símbolo $ volado y más pequeño que la cifra: detalle
   característico del precio de IKEA. */
.dh-card .custom-price .woocommerce-Price-currencySymbol{
  font-size:.56em;
  font-weight:700;
  vertical-align:baseline;
  position:relative;
  top:-.72em;
  margin-right:.5px;
}
.dh-card .custom-price del{
  display:inline;
  text-decoration:line-through;
  opacity:1;
}
.dh-card .custom-price del .woocommerce-Price-amount{
  font-size:.78rem;
  font-weight:400;
  color:var(--dh-gray-ficha);
}
.dh-card .custom-price del .woocommerce-Price-currencySymbol{
  font-size:.72em;top:-.34em;
}
.dh-card .custom-price ins{
  display:inline;
  text-decoration:none;
}
/* WooCommerce imprime el precio en texto también para lectores de
   pantalla ("Original price was: …"). Debe seguir en el HTML pero no
   verse: esta es la técnica estándar, no display:none. */
.dh-card .custom-price .screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Va dentro de .custom-price (lo mete el JS ahí a propósito), así que es un
   elemento más de esa fila y no un renglón aparte. */
.dh-ahorro{
  font-family:'Poppins',sans-serif;
  font-size:.68rem;font-weight:700;
  color:var(--dh-black);
  line-height:1.3;
  white-space:nowrap;
}

/* Chevron dentro de un círculo negro a la derecha. El divisor vertical que
   usa IKEA choca con las esquinas redondeadas: la línea llegaría hasta el
   borde curvo y se vería cortada. El círculo acompaña mejor la forma. */
.dh-go{
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  border-radius:50%;
  background:var(--dh-black);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s;
}
.dh-go svg{
  width:13px;height:13px;
  stroke:var(--dh-white);
  stroke-width:2.4;
  fill:none;
  transition:transform .22s,stroke .22s;
}
.dh-item:hover .dh-go svg{transform:translateX(2px);}

/* ============================================================
   5 bis. FICHAS DE SUBCATEGORÍA
   ============================================================
   En un archivo de categoría, WooCommerce lista primero las
   subcategorías (en Cortinas: Black out, Cenefa, Toldillo, Velo).
   No son productos: no tienen precio. Llevan la misma tarjeta blanca
   redondeada con sombra para que el mosaico se lea como una sola familia.
   ============================================================ */
.dh-cat-item .woocommerce-loop-category__title{
  position:absolute;
  left:12px;bottom:12px;
  z-index:6;
  max-width:calc(100% - 24px);
  margin:0 !important;
  padding:12px 16px !important;
  /* Mismo vidrio esmerilado que .dh-card: las dos fichas tienen que leerse
     como la misma pieza. */
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border-radius:14px;
  font-family:'Poppins',sans-serif !important;
  font-size:.86rem !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  color:var(--dh-ink) !important;
  text-align:left !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),
             0 4px 18px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.12);
  transition:box-shadow .22s, transform .22s;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dh-cat-item .woocommerce-loop-category__title{background:rgba(255,255,255,.94);}
}
.dh-cat-item:hover .woocommerce-loop-category__title{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),
             0 8px 26px rgba(0,0,0,.3), 0 2px 5px rgba(0,0,0,.16);
  transform:translateY(-2px);
  text-decoration:underline;
  text-underline-offset:3px;
}
/* El contador "(13)" que agrega WooCommerce, en gris y más pequeño. */
.dh-cat-item .woocommerce-loop-category__title .count{
  background:none !important;
  color:var(--dh-gray-ficha) !important;
  font-weight:500;
  font-size:.78em;
}

/* Ya no existe la línea "Toca el punto…": con la ficha siempre visible no
   hay nada que explicar. */

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
/* ATENCIÓN al encoger la ficha: hay que apuntar a las clases que imprime EL
   TEMA (.custom-header, .custom-price) y que el JS mueve dentro de .dh-card.
   Una versión anterior de este archivo usaba .woocommerce-loop-product__title
   y .price ins —las clases de la maqueta HTML, que aquí no existen—, así que
   ninguna de esas reglas hacía nada: en el celular la ficha seguía con el
   tamaño de escritorio y por eso tapaba la foto. */

/* Dos columnas desde tablet hacia abajo, incluido el celular: nunca baja a
   una sola. Con baldosas más angostas la ficha tiene que encogerse a la par,
   o no cabría dentro de la foto. */
/* A 2 columnas ya en 1180px (antes 900): entre 900 y 1180 las tres columnas
   dejaban la foto en ~340px y volvía a perderse. Con dos queda en ~530px.
   1180px es además el punto donde la cabecera pasa a menú hamburguesa, así que
   el sitio cambia de formato en el mismo ancho. */
@media(max-width:1180px){
  ul.products.dh-mosaico{column-count:2;}
  /* Con 2 columnas la baldosa vuelve a ser ancha, así que el piso puede bajar
     sin que la ficha se coma la foto. */
  .dh-media{min-height:300px;}
}
@media(max-width:700px){
  ul.products.dh-mosaico{column-count:2;column-gap:8px !important;}
  ul.products.dh-mosaico > li.product.dh-item{margin-bottom:8px !important;}
  /* +3cm (113px) de piso en móvil: la foto se ve más grande sin tocar el
     ancho de la baldosa, que lo sigue dando la columna. */
  .dh-media{min-height:343px;}
  .dh-swatches{gap:5px;margin-bottom:7px;}
  .dh-swatch{width:26px !important;height:26px !important;}
  .dh-card{
    left:8px;bottom:8px;
    min-width:0;
    max-width:calc(100% - 16px);
    padding:9px 36px 10px 11px;
    border-radius:12px;
  }
  .dh-card .custom-header{font-size:.78rem !important;}
  .dh-cat{font-size:.68rem;margin-bottom:5px;}
  .dh-from{font-size:.55rem;}
  .dh-ahorro{font-size:.6rem;}
  .dh-card .custom-price .woocommerce-Price-amount{font-size:1.05rem;}
  .dh-card .custom-price del .woocommerce-Price-amount{font-size:.68rem;}
  .dh-ahorro{font-size:.62rem;}
  .dh-go{right:7px;width:24px;height:24px;}
  .dh-go svg{width:11px;height:11px;}
  .dh-badge{top:8px;left:8px;font-size:.62rem;padding:4px 9px;}
}
/* En celular la baldosa mide ~170px de ancho: la ficha se aprieta al máximo y
   se quita la línea de categoría, que es lo menos importante de las tres. */
@media(max-width:480px){
  /* Se aplana la proporción más alta para que un producto no se coma
     la pantalla entera. */
  .dh-item.dh-t-xl .dh-media{aspect-ratio:3/4;}
  /* Mismo +3cm (113px) que el breakpoint de arriba. */
  .dh-media{min-height:323px;}
  .dh-swatches{gap:4px;margin-bottom:6px;}
  /* +0.5cm (19px) SOLO acá, en el breakpoint más angosto (celular): en el de
     700px las miniaturas se quedan en su tamaño de siempre. */
  .dh-swatch{width:41px !important;height:41px !important;border-width:1.5px !important;}
  .dh-card{
    left:6px;bottom:6px;
    max-width:calc(100% - 12px);
    padding:8px 30px 9px 9px;
    border-radius:10px;
  }
  .dh-card .custom-header{font-size:.72rem !important;}
  .dh-cat{display:none;}
  .dh-card .custom-price .woocommerce-Price-amount{font-size:.95rem;}
  .dh-ahorro{font-size:.58rem;}
  .dh-go{right:5px;width:21px;height:21px;}
  .dh-go svg{width:10px;height:10px;}
  .dh-badge{top:6px;left:6px;font-size:.58rem;padding:3px 8px;}
}