/* ============================================================
   DULCE HOGAR — PÁGINA DE TIENDA  [dulce_hogar_tienda]
   ============================================================
   Solo el "marco" de la página: portada, píldoras de categoría,
   ordenamiento, conteo, paginación y banda de envío.

   Las tarjetas de producto NO se estilan acá: de eso se encarga
   mosaico.css, para que la tienda, las categorías y las búsquedas
   se vean exactamente igual.

   Todo cuelga de .dh-tienda para no tocar nada del tema.
   ============================================================ */

.dh-tienda{
  /* ---- CAMBIAR LA TIPOGRAFÍA DE TODA LA PÁGINA: solo esta línea ----
     Se usa Poppins porque es la del Home, la cabecera y el pie. Para
     probar otra, reemplaza el valor (y carga esa fuente en el tema). */
  --dh-font:'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --dh-ink:#111111;
  --dh-black:#000000;
  --dh-gray:#6b6b6b;
  --dh-gray-light:#bdbdbd;
  --dh-line:#e2e2e2;
  --dh-cream:#f7f7f7;
  --dh-white:#ffffff;
  font-family:var(--dh-font);
  color:var(--dh-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.dh-tienda *,
.dh-tienda *::before,
.dh-tienda *::after{box-sizing:border-box;}
.dh-tienda a{text-decoration:none;}

/* ============================================================
   TIPOGRAFÍA: DECLARADA, NO HEREDADA
   ============================================================
   El tema carga una fuente propia llamada "Dulce Hogar" y se la aplica
   a los <a>. La HERENCIA siempre pierde contra una regla directa sobre
   el elemento, así que con solo poner la fuente en .dh-tienda las
   píldoras y el botón salían en esa script en vez de en Poppins.

   Por eso cada elemento de texto la declara explícitamente y con
   !important. Se listan uno por uno a propósito: una regla general
   tipo ".dh-tienda *" también le caería encima a los iconos de
   wishlist y comparar —que son fuentes de iconos— y los convertiría
   en letras sueltas.
   ============================================================ */
.dh-tienda-hero h1,
.dh-tienda-hero p,
.dh-eyebrow,
.dh-miga,
.dh-miga a,
.dh-cat-label,
.dh-cat-n,
.dh-orden label,
.dh-orden select,
.dh-orden noscript button,
.dh-conteo,
.dh-conteo strong,
.dh-vacio,
.dh-vacio a,
.dh-paginacion .page-numbers,
.dh-banda h2,
.dh-banda p,
.dh-btn{
  font-family:var(--dh-font) !important;
  font-style:normal !important;
  text-transform:none !important;
  letter-spacing:normal;
}

/* El contenedor interno. El shortcode puede quedar dentro de una sección de
   Elementor que ya tenga su propio ancho, así que esto solo pone un máximo y
   un respiro lateral: nunca fuerza el ancho de la página.

   1680px y no 1320px: medido en la página real, Elementor deja 1900px libres y
   este max-width era LO ÚNICO que recortaba la grilla. Con 1320 las fotos
   quedaban en 417px de ancho en una pantalla de 1920 y se perdían; con 1680
   pasan a ~537px sin tener que quitar una columna. */
.dh-tienda-wrap{
  max-width:1680px;
  margin:0 auto;
  padding:0 24px;
}

/* ===== PORTADA ===== */
.dh-tienda-hero{
  background:var(--dh-cream);
  padding:52px 0 46px;
  margin-bottom:0;
}
.dh-miga{font-size:.78rem;color:var(--dh-gray) !important;margin-bottom:18px;}
.dh-miga a{color:var(--dh-gray) !important;}
.dh-miga a:hover{color:var(--dh-black) !important;text-decoration:underline;text-underline-offset:3px;}
/* #8d8d8d sobre el crema #f7f7f7 da 3,4:1: alcanza para un separador
   decorativo, no para texto que haya que leer. */
.dh-miga span{margin:0 7px;color:#8d8d8d;}
.dh-eyebrow{
  display:block;
  color:var(--dh-gray);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;
}
.dh-tienda-hero h1{
  font-family:'Poppins',sans-serif !important;
  font-size:2.4rem;font-weight:700;
  letter-spacing:-.01em;
  color:var(--dh-black);
  margin:10px 0 12px !important;
  line-height:1.15;
}
.dh-tienda-hero p{
  color:var(--dh-gray);
  max-width:620px;
  font-size:1rem;
  margin:0;
}

/* ============================================================
   BARRA DE FILTROS: precio, tamaño, marca, ofertas y orden
   ============================================================
   Un solo formulario para que los filtros se combinen. Se acomoda con
   flex-wrap: en pantallas angostas los grupos bajan de renglón solos,
   sin puntos de quiebre por cada uno.
   ============================================================ */
/* Sin cajas ni píldoras: los grupos se separan con una línea vertical de 1px
   y cada uno se anuncia con un icono y un rótulo en versalitas. Menos tinta
   en pantalla, y todos los controles con el mismo peso visual. */
.dh-filtros{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:0;
  padding:0;
  margin:0;
  border-top:1px solid var(--dh-line);
  border-bottom:1px solid var(--dh-line);
}
.dh-f-grupo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  min-width:0;
  padding:15px 26px;
  border-left:1px solid var(--dh-line);
}
.dh-f-grupo:first-of-type{border-left:none;padding-left:0;}

.dh-f-tit{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.63rem;
  font-weight:700 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dh-gray) !important;   /* 5,7:1 sobre blanco */
  line-height:1;
  white-space:nowrap;
}
.dh-f-tit svg{
  width:13px;height:13px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Los <select> del tema traen su propio alto, borde, fondo y tipografía.
   Acá se dejan planos —sin borde ni fondo— y la flecha se dibuja como
   imagen de fondo, porque appearance:none quita también la nativa. */
.dh-f-select{
  font-family:var(--dh-font) !important;
  font-size:.86rem !important;
  font-weight:600 !important;
  color:var(--dh-ink) !important;
  background-color:transparent !important;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right center !important;
  background-size:13px 13px !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 20px 0 0 !important;
  height:auto !important;
  line-height:1.3 !important;
  max-width:200px;
  cursor:pointer;
  outline:none;
  -webkit-appearance:none !important;
  appearance:none !important;
  text-overflow:ellipsis;
}
.dh-f-select:hover{color:var(--dh-black) !important;}
.dh-f-select:focus-visible{outline:2px solid var(--dh-black);outline-offset:3px;}

/* ---- Barra de precio de dos topes ----
   Son dos <input type=range> superpuestos. La pista no debe capturar el
   ratón (si no, el de arriba taparía al de abajo): pointer-events va en
   none sobre el control y se devuelve solo a los dos tiradores. */
.dh-f-precio{min-width:190px;}
.dh-rango{
  position:relative;
  height:18px;
  width:180px;
  max-width:100%;
}
.dh-rango-pista{
  position:absolute;
  top:8px;left:0;right:0;height:3px;
  border-radius:999px;
  background:var(--dh-line);
}
.dh-rango-activa{
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  background:var(--dh-black);
  border-radius:999px;
}
.dh-rango input[type="range"]{
  position:absolute;
  top:0;left:0;
  width:100% !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  pointer-events:none;
  outline:none;
}
.dh-rango input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  pointer-events:auto;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--dh-white);
  border:2px solid var(--dh-black);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  cursor:pointer;
}
.dh-rango input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--dh-white);
  border:2px solid var(--dh-black);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  cursor:pointer;
}
.dh-rango input[type="range"]::-moz-range-track{background:none;border:none;}
.dh-rango input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--dh-black);outline-offset:2px;}
.dh-rango-val{
  font-family:var(--dh-font) !important;
  font-size:.8rem;
  font-weight:700 !important;
  color:var(--dh-ink) !important;
  line-height:1;
  white-space:nowrap;
}

/* ---- Con descuento ----
   Mismo peso visual que un <select>: texto plano, sin caja. La casilla es
   la única marca, y al activarse el texto pasa a negro pleno. */
.dh-f-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--dh-font) !important;
  font-size:.86rem;
  font-weight:600 !important;
  color:var(--dh-ink) !important;
  line-height:1.3;
  cursor:pointer;
  white-space:nowrap;
}
.dh-f-check input{
  width:15px !important;height:15px !important;
  margin:0 !important;
  flex-shrink:0;
  accent-color:var(--dh-black);
  cursor:pointer;
}
.dh-f-n{
  font-size:.7rem;
  font-weight:600 !important;
  color:var(--dh-gray) !important;
}

/* ---- Aplicar: solo existe sin JavaScript ----
   El botón vive dentro de un <noscript>, así que con JS activo el navegador
   ni siquiera lo construye: el <noscript> queda como una caja de 0×0 que no
   ocupa nada en la fila.

   Dos cuidados:
   · NO ponerle display a <noscript>. Sin JS el navegador lo muestra por su
     cuenta; escribirle un display aquí sería pisar ese comportamiento.
   · Los márgenes van en el BOTÓN, no en el <noscript>. Puestos en el
     <noscript> se sumarían igual con JS activo (el margen de una caja de 0×0
     sí ocupa) y dejarían un hueco muerto que nadie ve de dónde sale. */
.dh-filtros noscript{align-self:center;}
.dh-f-aplicar{
  margin-left:22px;
  font-family:var(--dh-font) !important;
  font-size:.8rem;font-weight:600 !important;
  border:1.5px solid var(--dh-black) !important;
  background:var(--dh-black) !important;
  color:var(--dh-white) !important;
  border-radius:999px !important;
  padding:9px 20px !important;
  cursor:pointer;
}

/* ---- Limpiar: solo el icono ----
   Un círculo de 34px con la ✕ y nada de texto. Aparece únicamente cuando hay
   algo que limpiar; el nombre va en title/aria-label. Al pasar el cursor se
   invierte a negro y la ✕ gira 90°. */
.dh-f-limpiar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  margin-left:auto;
  flex-shrink:0;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--dh-line);
  border-radius:50%;
  background:var(--dh-white);
  color:var(--dh-gray) !important;
  transition:color .2s, background .2s, border-color .2s;
}
.dh-f-limpiar svg{
  width:13px;height:13px;
  stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;
  transition:transform .25s;
}
.dh-f-limpiar:hover{
  background:var(--dh-black);
  border-color:var(--dh-black);
  color:var(--dh-white) !important;
}
.dh-f-limpiar:hover svg{transform:rotate(90deg);}
.dh-f-limpiar:focus-visible{outline:2px solid var(--dh-black);outline-offset:3px;}

/* ===== BARRA: conteo a la izquierda, ordenamiento a la derecha ===== */
.dh-barra{
  border-top:1px solid var(--dh-line);
  padding:18px 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
/* ============================================================
   BOTONES DE CATEGORÍA CON FOTO
   ============================================================
   Mismo patrón que la tira de categorías del Home: tarjeta blanca
   redondeada, foto circular arriba, nombre debajo.

   Sustituyen a las píldoras de texto, que en tablet y móvil había que
   volver un carrusel horizontal y se veían cortadas por el borde.
   Una rejilla con salto de línea siempre entra completa en pantalla.

   El COLOR y la FUENTE van con !important por lo mismo que en el resto
   del archivo: el tema pinta los <a> con su fuente y su color, y le
   ganaba a estas reglas. En la píldora activa el texto llegó a quedar
   en #111 sobre fondo negro — contraste 1,11:1, invisible.
   ============================================================ */
/* Píldora horizontal: miniatura circular de 34px + nombre + cantidad.
   La foto es pequeña a propósito — acompaña al nombre en vez de competir
   con las fotos de los productos, que son las que deben mandar en la
   página. Al ser píldoras que se acomodan solas, la fila se reparte en
   los renglones que hagan falta sin recortarse ni scrollear. */
.dh-cats{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding:24px 0 20px;
}
.dh-cat-tile{
  display:inline-flex;
  /* row explícito: la versión anterior de este archivo ponía column, y si
     una copia vieja queda en caché o algún CSS del tema lo impone, la
     píldora se rompería y volvería a apilarse. */
  flex-direction:row;
  align-items:center;
  gap:9px;
  padding:4px 16px 4px 4px;
  background:var(--dh-white);
  border:1.5px solid var(--dh-line);
  border-radius:999px;
  color:var(--dh-ink) !important;
  transition:border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.dh-cat-tile:hover{
  border-color:var(--dh-black);
  color:var(--dh-ink) !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
/* La activa se invierte a negro. La miniatura NO se toca: la foto se
   sigue viendo, y un aro claro la separa del fondo oscuro. */
.dh-cat-activa,
.dh-cat-activa:hover{
  background:var(--dh-black);
  border-color:var(--dh-black);
  color:var(--dh-white) !important;
}
.dh-cat-activa .dh-cat-img{box-shadow:0 0 0 1.5px rgba(255,255,255,.35);}

.dh-cat-img{
  display:block;
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:50%;
  overflow:hidden;
  background:var(--dh-cream);
}
.dh-cat-img img{
  width:34px !important;
  height:34px !important;
  max-width:none !important;
  object-fit:cover;
  display:block;
  margin:0 !important;
  border-radius:50%;
}
/* "Todos" no tiene foto: círculo negro con icono de cuadrícula. */
.dh-cat-img-todos{
  background:var(--dh-black);
  display:flex;
  align-items:center;
  justify-content:center;
}
.dh-cat-activa .dh-cat-img-todos{
  background:var(--dh-white);
  box-shadow:none;
}
.dh-cat-img-todos svg{
  width:15px;height:15px;
  stroke:var(--dh-white);
  fill:none;
}
.dh-cat-activa .dh-cat-img-todos svg{stroke:var(--dh-black);}

.dh-cat-label{
  font-size:.83rem;
  font-weight:600 !important;
  line-height:1.2;
  color:inherit !important;
  white-space:nowrap;
}
.dh-cat-n{
  font-size:.7rem;
  font-weight:600 !important;
  color:var(--dh-gray) !important;   /* 5,7:1 sobre blanco */
  line-height:1;
}
.dh-cat-activa .dh-cat-n{color:#cfcfcf !important;}  /* 11,4:1 sobre negro */

.dh-orden{display:flex;align-items:center;gap:10px;flex-shrink:0;margin:0;}
.dh-orden label{font-size:.8rem;color:var(--dh-gray);white-space:nowrap;}
/* !important: el reset del tema pisa los <select> igual que hace con los
   <button> (ver la nota en mosaico.css sobre .dh-dot). */
.dh-orden select{
  font-family:'Poppins',sans-serif !important;
  font-size:.84rem !important;
  color:var(--dh-ink) !important;
  border:1.5px solid var(--dh-line) !important;
  border-radius:999px !important;
  padding:9px 34px 9px 16px !important;
  background:var(--dh-white) !important;
  cursor:pointer;
  outline:none;
  height:auto !important;
  max-width:none !important;
}
.dh-orden select:hover{border-color:var(--dh-black) !important;}
.dh-orden noscript button{
  font-family:'Poppins',sans-serif;font-size:.8rem;font-weight:600;
  border:1.5px solid var(--dh-black);background:var(--dh-black);color:#fff;
  border-radius:999px;padding:9px 16px;cursor:pointer;
}

.dh-conteo{
  margin:0;
  font-size:.83rem;
  color:var(--dh-gray) !important;
}

/* ===== LA GRILLA =====
   padding-top holgado porque la ficha del primer renglón sobresale un poco
   hacia arriba de su foto. */
.dh-tienda-grid{padding:34px 0 80px;}

.dh-vacio{
  padding:60px 0 80px;
  text-align:center;
  color:var(--dh-gray) !important;
}
.dh-vacio a{
  color:var(--dh-black) !important;
  font-weight:600 !important;
  border-bottom:1.5px solid var(--dh-black);
}

/* ===== PAGINACIÓN ===== */
.dh-paginacion{
  display:flex;justify-content:center;gap:8px;
  margin-top:44px;flex-wrap:wrap;
}
.dh-paginacion .page-numbers{
  min-width:40px;height:40px;padding:0 13px;
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;
  font-weight:600 !important;
  border:1.5px solid var(--dh-line);
  color:var(--dh-ink) !important;
  background:var(--dh-white);
  transition:.2s;
}
.dh-paginacion a.page-numbers:hover{border-color:var(--dh-black);color:var(--dh-ink) !important;}
.dh-paginacion .page-numbers.current{
  background:var(--dh-black);
  border-color:var(--dh-black);
  color:var(--dh-white) !important;
}
.dh-paginacion .page-numbers.dots{border-color:transparent;}

/* ===== BANDA DE ENVÍO ===== */
.dh-banda{
  background:var(--dh-cream);
  padding:56px 0;
  text-align:center;
}
.dh-banda h2{
  font-family:'Poppins',sans-serif !important;
  font-size:1.6rem;font-weight:700;
  color:var(--dh-black);
  margin:0 0 10px !important;
}
.dh-banda p{color:var(--dh-gray);margin:0 0 24px;}
.dh-btn{
  display:inline-block;
  padding:14px 32px;
  border-radius:999px;
  font-weight:600 !important;
  font-size:.88rem;
  border:1.5px solid var(--dh-black);
  background:var(--dh-cream);
  color:var(--dh-black) !important;
  transition:.25s;
}
.dh-btn:hover{background:var(--dh-black);color:var(--dh-white) !important;}

/* ===== RESPONSIVE ===== */
/* Las píldoras se acomodan solas al ancho disponible (flex-wrap): no hay
   que cambiar columnas por punto de quiebre y en ningún tamaño se recortan
   ni aparece scroll lateral. */
@media(max-width:900px){
  .dh-tienda-hero h1{font-size:2rem;}
}
@media(max-width:560px){
  .dh-tienda-wrap{padding:0 16px;}
  .dh-tienda-hero{padding:36px 0 32px;}
  .dh-tienda-hero h1{font-size:1.75rem;}
  .dh-tienda-grid{padding:26px 0 56px;}
  /* En móvil se aprieta la píldora y se oculta la cantidad: así entran tres
     por renglón en vez de dos, y la tira ocupa la mitad de alto. */
  .dh-cats{gap:7px;padding:18px 0 14px;}
  .dh-cat-tile{padding:3px 11px 3px 3px;gap:7px;}
  .dh-cat-img,
  .dh-cat-img img{width:27px !important;height:27px !important;}
  .dh-cat-img-todos svg{width:13px;height:13px;}
  .dh-cat-label{font-size:.75rem;}
  .dh-cat-n{display:none;}
  /* Los filtros pasan a una sola columna: en 360px no caben lado a lado. */
  /* Los divisores pasan de verticales a horizontales: cada filtro ocupa
     su propio renglón a ancho completo. */
  .dh-filtros{
    flex-direction:column;
    align-items:stretch;
  }
  .dh-f-grupo{
    width:100%;
    padding:13px 0;
    border-left:none;
    border-top:1px solid var(--dh-line);
    /* Rótulo a la izquierda y control a la derecha: ocupa la mitad de alto
       que apilándolos. */
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .dh-f-grupo:first-of-type{border-top:none;}
  .dh-f-select{max-width:60%;text-align:right;}
  .dh-f-precio{
    min-width:0;
    flex-direction:column;
    align-items:stretch;
    gap:9px;
  }
  .dh-rango{width:100%;}
  /* La ✕ no se estira a todo el ancho: queda como un botón suelto al final,
     alineado a la derecha, sin divisor propio (sería un renglón casi vacío). */
  .dh-f-limpiar{
    margin:12px 0 2px auto;
    align-self:flex-end;
  }
  .dh-filtros noscript{align-self:stretch;}
  .dh-f-aplicar{margin:12px 0 0;width:100%;}
  .dh-barra{gap:12px;}
}