/* ---------- 4b. Protección general contra desbordes horizontales ---------- */
/* Sin esto, cualquier imagen, tabla o bloque más ancho que la pantalla
   (frecuente en contenido pegado desde Word/Google Docs, o en una
   imagen sin comprimir) generaba scroll lateral en el sitio completo,
   dejando contenido "montado" fuera del área visible en celular. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, iframe, table {
  max-width: 100%;
  height: auto;
}

/* ---------- 5. Sin franja de título gris ni caja blanca, en todo el sitio ---------- */
/* Esa franja gris grande arriba de cada página (Tienda, Carrito,
   categorías...) solo repite el título y no aporta nada; ocupa
   espacio que el cliente podría usar viendo productos de una vez.
   Kadence usa varias clases distintas según el tipo de página
   (portada, entrada normal, archivo de tienda/categoría), así que
   cubrimos todas las variantes conocidas para que no quede ninguna. */
.entry-hero,
.page-hero-section,
section[class*="hero-section"],
section[class*="-archive-hero-section"] { display: none !important; }
.home .content-bg,
.home .entry.content-bg {
  background: transparent;
  box-shadow: none;
}
.home .entry-content-wrap { padding: 0; }
.home .content-area { margin-top: 24px; }

/* ---------- 6. Hero ---------- */
.dx-hero {
  background: var(--dx-ink);
  width: 100%;
  min-height: 420px;
  padding: 72px 56px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dx-hero > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.dx-hero h1 {
  color: #fff;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.1;
  max-width: 20ch;
  margin-top: 0;
  margin-bottom: 16px;
}
.dx-hero p {
  color: #c3ccd4;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  max-width: 52ch;
  margin-top: 0;
  margin-bottom: 0;
}

.dx-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.dx-btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.dx-btn-main { background: var(--dx-cyan); color: #000; }
.dx-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #ffffff66;
}
.dx-btn-ghost:hover { border-color: var(--dx-cyan); color: var(--dx-cyan); }

/* ---------- 7. Barra de confianza ---------- */
.dx-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--dx-line);
  border: 1px solid var(--dx-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
}
.dx-trust div {
  background: #fff;
  padding: 18px 20px;
  font-size: 14px;
  color: var(--dx-mute);
}
.dx-trust b {
  display: block;
  color: var(--dx-ink);
  font-size: 15px;
}

/* ---------- 8. WooCommerce ---------- */
ul.products li.product {
  transition: transform .25s ease, box-shadow .25s ease;
  background: #fff;
  border: 1px solid var(--dx-line);
  border-radius: 12px;
  padding: 12px 12px 16px !important;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
  border-color: var(--dx-cyan);
}

/* Marco cuadrado y consistente para todas las imágenes de producto: la
   foto se ve COMPLETA, sin recortar nada (ni cabezas de productos, ni
   esquinas de cajas, ni logos en las etiquetas). Antes se usaba
   object-fit: cover, que llena el marco recortando lo que no cabe —
   se veía "parejo" pero a costa de cortar partes reales del producto,
   justo lo que suele bajar la confianza y las ventas en un catálogo.
   Ahora: object-fit: contain (nunca recorta) + un fondo hecho con la
   MISMA imagen, ampliada y muy difuminada, para que no queden bordes
   blancos vacíos alrededor de fotos que no son cuadradas. El difuminado
   se aplica con JS (assets/js/product-blur-bg.js) porque requiere leer
   el "src" de cada <img> ya renderizado por WooCommerce/Kadence, sin
   tener que reconstruir ese markup a mano (más frágil ante futuras
   actualizaciones del tema). Sin JS, o mientras carga, simplemente se
   ve la imagen completa sobre fondo blanco — nunca se rompe el diseño. */
ul.products li.product a img,
ul.products li.product img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  transition: transform .3s ease;
}
ul.products li.product a:hover img {
  transform: scale(1.06);
}
/* El zoom del hover (scale 1.06) se salia del marco y tapaba el titulo y
   el precio de la tarjeta. Se recorta en el contenedor inmediato de la
   imagen, sea cual sea el markup que genere Kadence/WooCommerce, y se
   deja el titulo/precio/boton por encima de la foto. */
ul.products li.product :is(a, div, span):has(> img) {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .button {
  position: relative;
  z-index: 2;
}
/* Contenedor recorta el zoom para que no se salga del marco */
ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  background: #fff;
}
/* El difuminado real ocurre en un pseudo-elemento aparte (no directo en
   el contenedor), para poder aplicarle blur() sin que ese blur también
   se note en el borde recto del propio contenedor. El JS
   (product-blur-bg.js) escribe la URL en la variable --dx-blur-img. */
ul.products li.product a.woocommerce-LoopProduct-link::before {
  content: "";
  position: absolute;
  inset: -10%; /* más grande que el marco: el blur no deja ver el borde recortado del fondo */
  background-image: var(--dx-blur-img, none);
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(1.05);
  opacity: 0; /* se activa solo cuando el JS confirma que hace falta, ver más abajo */
  z-index: 0;
}
ul.products li.product a.woocommerce-LoopProduct-link.dx-has-blur-bg::before {
  opacity: 1;
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: "Marcellus", Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  margin-top: 12px;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--dx-ink);
  font-weight: 700;
}

/* Página de producto individual: layout de dos columnas
   (galería a la izquierda, nombre/precio/resumen a la derecha).
   IMPORTANTE: al reemplazar el markup nativo de WooCommerce en
   inc/product-gallery.php, el <div class="images"> que Kadence usaba
   como columna izquierda del grid desapareció (ahora es
   <div class="dx-product-gallery">). Kadence seguía esperando
   ".images" + ".summary" como las dos columnas; sin ".images" el
   grid se quedaba con una sola columna y la imagen caía arriba del
   texto en vez de al lado. Esta regla vuelve a armar esas dos
   columnas usando la clase real que sí existe ahora. */
.woocommerce div.product.type-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.woocommerce div.product.type-product > .dx-product-gallery {
  grid-column: 1;
  grid-row: 1;
}
.woocommerce div.product.type-product > .summary {
  grid-column: 2;
  grid-row: 1;
  min-width: 0; /* evita que el texto largo del título empuje la columna
    más allá del ancho del grid y descuadre todo el layout */
}
/* Separación clara entre título, precio, estado de stock y botón de
   compra dentro del resumen, para que nunca se vean pegados o
   amontonados entre sí, en ningún ancho de pantalla. */
.woocommerce div.product .summary .product_title {
  margin-top: 0;
  margin-bottom: 10px;
}
.woocommerce div.product .summary p.price {
  margin-bottom: 12px;
}
.woocommerce div.product .summary .stock {
  display: block;
  margin: 0 0 16px;
}
.woocommerce div.product .summary form.cart {
  margin-bottom: 16px;
}

/* ---------- Descripción / pestañas del producto ---------- */
/* .woocommerce-tabs es hijo directo del grid de 2 columnas y no tenía
   ubicación: caía en la fila 3, columna 1 (media pantalla, debajo de los
   relacionados). Se le da la fila 2 a todo el ancho. */
.woocommerce div.product.type-product > .woocommerce-tabs {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  float: none;
  margin: 8px 0 0;
  min-width: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--dx-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px;
  font-weight: 600;
  color: var(--dx-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--dx-ink);
  border-bottom-color: var(--dx-cyan);
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  line-height: 1.7;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child {
  font-size: 22px;
  margin: 0 0 16px;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel img {
  max-width: 100%;
  height: auto;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--dx-line);
  text-align: left;
}

/* ---------- Variaciones (productos variables) ---------- */
.woocommerce div.product .summary form.variations_form table.variations {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  border: 0;
}
.woocommerce div.product .summary form.variations_form table.variations tbody,
.woocommerce div.product .summary form.variations_form table.variations tr {
  display: block;
}
.woocommerce div.product .summary form.variations_form table.variations tr {
  margin-bottom: 14px;
}
.woocommerce div.product .summary form.variations_form table.variations th,
.woocommerce div.product .summary form.variations_form table.variations td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.woocommerce div.product .summary form.variations_form table.variations th.label,
.woocommerce div.product .summary form.variations_form table.variations .label label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--dx-ink);
  text-transform: capitalize;
}
.woocommerce div.product .summary form.variations_form table.variations select {
  display: block !important; /* nunca ocultar el selector nativo */
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--dx-line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--dx-ink);
  font-size: 16px;
}
.woocommerce div.product .summary form.variations_form table.variations select:focus {
  outline: none;
  border-color: var(--dx-cyan);
  box-shadow: 0 0 0 3px rgba(0, 198, 214, .18);
}
.woocommerce div.product .summary .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--dx-mute);
  text-decoration: underline;
}
.woocommerce div.product .summary .single_variation_wrap {
  margin-top: 4px;
}
.woocommerce div.product .summary .woocommerce-variation-price .price {
  font-size: 22px;
  font-weight: 700;
  color: var(--dx-ink);
}
.woocommerce div.product .summary .woocommerce-variation-description,
.woocommerce div.product .summary .woocommerce-variation-availability {
  margin-bottom: 12px;
}
.woocommerce div.product .summary .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}
.woocommerce div.product .summary .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 180px;
}
.woocommerce div.product .summary .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled,
.woocommerce div.product .summary .woocommerce-variation-add-to-cart .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Productos relacionados / "Quizás también te guste" ---------- */
/* WooCommerce imprime .related.products y .upsells.products como hijos
   directos del mismo div.product.type-product que arriba se convirtió en
   grid de 2 columnas (galería + resumen). Al no tener grid-column propio,
   heredaban ese grid de 2 columnas anchas y sus tarjetas quedaban
   comprimidas y amontonadas ahí dentro, en vez de fluir en su propio
   grid de varias columnas a lo ancho de la página. Se les da fila y
   ancho propios, fuera del grid de 2 columnas de arriba. */
.woocommerce div.product.type-product > .related.products,
.woocommerce div.product.type-product > .upsells.products {
  grid-column: 1 / -1; /* ocupa todo el ancho, no solo una de las 2 columnas */
  grid-row: 3; /* la fila 2 es de las pestañas de descripción */
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--dx-line);
}
.woocommerce div.product.type-product > .related.products > h2,
.woocommerce div.product.type-product > .upsells.products > h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.woocommerce div.product.type-product > .related.products ul.products,
.woocommerce div.product.type-product > .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0 !important;
  padding: 0;
}
.woocommerce div.product.type-product > .related.products ul.products li.product,
.woocommerce div.product.type-product > .upsells.products ul.products li.product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}
@media (max-width: 1024px) {
  .woocommerce div.product.type-product > .related.products ul.products,
  .woocommerce div.product.type-product > .upsells.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .woocommerce div.product.type-product > .related.products,
  .woocommerce div.product.type-product > .upsells.products {
    margin-top: 32px;
    padding-top: 28px;
  }
  .woocommerce div.product.type-product > .related.products ul.products,
  .woocommerce div.product.type-product > .upsells.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 782px) {
  .woocommerce div.product.type-product {
    display: block; /* se abandona el grid por completo en móvil: la
      regla de escritorio fija .dx-product-gallery y .summary en
      grid-row: 1 (para que queden lado a lado); si en móvil solo se
      cambiaba grid-template-columns a 1fr, las dos seguían "ancladas"
      a la misma fila y terminaban superpuestas una sobre la otra.
      display:block vuelve al flujo normal: primero la galería,
      después el resumen, cada uno ocupando su espacio real. */
  }
  .woocommerce div.product.type-product > .dx-product-gallery {
    margin-bottom: 20px;
  }
}

/* Fallback: si en algún punto el hook de inc/product-gallery.php no
   llega a ejecutarse y WooCommerce pinta su markup nativo (div.images),
   que también se comporte como columna izquierda en vez de romper el
   layout por completo. */
.woocommerce div.product.type-product > div.images {
  grid-column: 1;
  grid-row: 1;
}
.woocommerce div.product div.images img {
  aspect-ratio: 1 / 1;
  object-fit: contain; /* consistente con la galería propia: nunca se recorta */
  object-position: center;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--dx-line);
}
/* Estilos de miniaturas de la galería: ver bloque 19 más abajo,
   ahí está la versión completa y actualizada (tamaño, separación,
   estado activo). */

/* Etiqueta "Agotado" más clara sobre el marco cuadrado */
.woocommerce ul.products li.product .onsale {
  border-radius: 6px;
  font-weight: 700;
}

/* ---------- 9. Tablet ---------- */
@media (max-width: 1024px) {
  .dx-hero { padding: 56px 36px; min-height: 360px; }
  .dx-trust { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 10. Móvil ---------- */
@media (max-width: 700px) {
  .dx-hero { padding: 40px 20px; min-height: 0; }
  .dx-btns { flex-direction: column; }
  .dx-btn { width: 100%; min-height: 48px; }
  .dx-trust { grid-template-columns: 1fr; }

  /* Evita el zoom automático de iPhone al escribir */
  input, select, textarea { font-size: 16px; }

  /* Botón de compra a todo el ancho y fácil de tocar */
  .single_add_to_cart_button { width: 100%; min-height: 48px; }
  .woocommerce a.button, .woocommerce button.button { min-height: 44px; }
}

/* ---------- 11. Accesibilidad: reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  ul.products li.product,
  .button, .wp-block-button__link { transition: none; }
  ul.products li.product:hover { transform: none; }
}

/* ---------- 12. Tarjetas de categoría ---------- */
.dx-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 8px 0 24px;
}
.dx-cats a.dx-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 190px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--dx-line);
  border-radius: 12px;
  color: var(--dx-ink);
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dx-cats a.dx-cat:hover {
  transform: translateY(-4px);
  border-color: var(--dx-cyan);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
}
.dx-cat i {
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  color: var(--dx-teal);
}
.dx-cat h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.dx-cat span { color: var(--dx-mute); font-size: 14px; }
.dx-cat b {
  margin-top: auto;
  padding-top: 16px;
  font-weight: 600;
  font-size: 15px;
}
.dx-cat b::after { content: " \2192"; }

@media (max-width: 1024px) {
  .dx-cats { grid-template-columns: repeat(2, 1fr); }
}
/* En celular, 2 columnas apretaba el texto de la tarjeta (título,
   descripción y "Ver más") contra el borde y hacía que se viera
   amontonado. Con 1 columna cada tarjeta tiene el ancho completo. */
@media (max-width: 700px) {
  .dx-cats { grid-template-columns: 1fr; }
  .dx-cats a.dx-cat { min-height: 0; padding: 18px; }
  .dx-cat h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-cats a.dx-cat { transition: none; }
  .dx-cats a.dx-cat:hover { transform: none; }
}