/* =========================================================
   DEPORTES JIMMY — SHOP / CATEGORY ARCHIVE
   ========================================================= */

/* ---------------------------------------------------------
   HERO de categoría (fondo rotativo con fotos del catálogo)
   --------------------------------------------------------- */
.dj-shop-hero {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--dj-black-soft, #111);
}

.dj-shop-hero__bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.dj-shop-hero__bg-layer.is-active {
  opacity: 1;
}

.dj-shop-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.35) 100%);
  z-index: 1;
}

.dj-shop-hero__inner {
  position: relative;
  z-index: 2;
  padding: 64px 16px;
}

.dj-shop-hero__breadcrumb {
  font-family: var(--dj-font-body);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.dj-shop-hero__breadcrumb a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.dj-shop-hero__breadcrumb a:hover { color: #fff; }

.dj-shop-hero__title {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-black, 900);
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.5px;
  margin: 0 0 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.8);
}

.dj-shop-hero__desc {
  font-family: var(--dj-font-body);
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  max-width: 560px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* ---------------------------------------------------------
   LAYOUT: productos + sidebar
   --------------------------------------------------------- */
.dj-shop-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  padding: 40px 16px 80px;
  align-items: start;
}

.dj-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--dj-font-body);
  font-size: 0.85rem;
  color: var(--dj-gray-dark, #4a4a4a);
}
.dj-shop-toolbar select {
  font-family: var(--dj-font-body);
  padding: 8px 12px;
  border-radius: var(--dj-radius-sm, 4px);
  border: 1px solid #ddd;
}

/* ---------------------------------------------------------
   GRID de productos (sobrescribe el <ul class="products"> de WC)
   --------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* CRÍTICO: WooCommerce le agrega un clearfix (::before/::after) a ul.products
   para su sistema viejo de float. Bajo display:grid, esos pseudo-elementos
   se vuelven celdas FANTASMA del grid y "roban" el primer lugar del grid,
   causando los espacios en blanco. Los eliminamos por completo: */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--dj-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  transition: var(--dj-transition);
}
/* El bloque imagen+título+precio crece para llenar el espacio disponible... */
.woocommerce ul.products li.product > a:not(.button):not(.add_to_cart_button),
.woocommerce-page ul.products li.product > a:not(.button):not(.add_to_cart_button) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* ...y el botón siempre queda pegado abajo, a la misma altura en toda la fila */
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product > a.add_to_cart_button,
.woocommerce-page ul.products li.product > .button,
.woocommerce-page ul.products li.product > a.add_to_cart_button {
  margin-top: auto !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: var(--dj-shadow-md, 0 8px 24px rgba(0,0,0,0.14));
  transform: translateY(-3px);
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--dj-black-soft, #111);
  padding: 12px 14px 0;
  margin: 0;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2 + 2px); /* siempre reserva el espacio de 2 líneas */
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  padding: 4px 14px 14px;
  display: block;
  font-size: 1rem;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  color: var(--dj-gray, #AEAEAF);
  font-weight: var(--dj-weight-regular, 400);
  margin-right: 6px;
}

/* ---------------------------------------------------------
   BOTÓN "AÑADIR AL CARRITO" — más estético
   --------------------------------------------------------- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product a.add_to_cart_button {
  display: block !important;
  margin: 0 14px 14px !important;
  width: calc(100% - 28px) !important;
  background-color: var(--dj-red, #FF0000) !important;
  color: var(--dj-white, #fff) !important;
  font-family: var(--dj-font-body) !important;
  font-weight: var(--dj-weight-bold, 700) !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 11px 10px !important;
  border-radius: var(--dj-radius-sm, 4px) !important;
  transition: var(--dj-transition) !important;
  border: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-page ul.products li.product a.add_to_cart_button:hover {
  background-color: var(--dj-red-dark, #C40000) !important;
  transform: translateY(-1px);
}
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  margin: 0 14px 10px;
  color: var(--dj-red, #FF0000);
}

/* ---------------------------------------------------------
   MINIATURAS DE GALERÍA en la tarjeta (cambian la foto principal
   al pasar el mouse, sin tener que entrar al producto)
   --------------------------------------------------------- */
.dj-product-thumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 0;
}
.dj-product-thumbs__item {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  border: 1.5px solid #eee;
  cursor: pointer;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.dj-product-thumbs__item:hover {
  border-color: var(--dj-red, #FF0000);
}
.dj-product-thumbs__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------
   BADGES — Oferta / Nuevo, con efecto de zoom sutil
   --------------------------------------------------------- */
@keyframes dj-badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

span.onsale.dj-badge-sale,
.dj-badge-new,
.dj-badge-outofstock {
  position: absolute !important;
  top: 10px !important;
  bottom: auto !important;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-bold, 700);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 5px 10px !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  line-height: normal !important;
  border-radius: var(--dj-radius-pill, 999px) !important;
  margin: 0 !important;
  animation: dj-badge-pulse 1.8s ease-in-out infinite;
}

span.onsale.dj-badge-sale {
  left: 10px !important;
  right: auto !important;
  background: var(--dj-red, #FF0000) !important;
  color: #fff !important;
}

.dj-badge-new {
  right: 10px !important;
  left: auto !important;
  background: var(--dj-black-soft, #111) !important;
  color: #fff !important;
}

.dj-badge-outofstock {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  background: var(--dj-gray-dark, #4a4a4a) !important;
  color: #fff !important;
  animation: none !important; /* no necesita el efecto de zoom, es informativo no promocional */
}

/* Atenúa la foto de productos agotados */
.woocommerce ul.products li.product.outofstock img,
.woocommerce-page ul.products li.product.outofstock img {
  opacity: 0.5;
}

/* ---------------------------------------------------------
   SIDEBAR — carrito en vivo
   --------------------------------------------------------- */
.dj-shop-sidebar {
  position: sticky;
  top: 100px;
}

.dj-mini-cart {
  background: var(--dj-gray-light, #f4f4f5);
  border-radius: var(--dj-radius-md, 8px);
  padding: 24px;
}

.dj-mini-cart__title {
  font-family: var(--dj-font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.dj-mini-cart__items {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.dj-mini-cart__item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dj-mini-cart__thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--dj-radius-sm, 4px);
}
.dj-mini-cart__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dj-mini-cart__info a {
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  font-size: 0.82rem;
  color: var(--dj-black-soft, #111);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dj-mini-cart__info span {
  font-size: 0.78rem;
  color: var(--dj-gray-dark, #4a4a4a);
}

.dj-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--dj-font-body);
  padding: 12px 0;
  border-top: 2px solid rgba(0,0,0,0.1);
  margin-bottom: 16px;
}
.dj-mini-cart__total strong { color: var(--dj-red, #FF0000); font-size: 1.1rem; }

.dj-mini-cart .dj-btn { width: 100%; margin-bottom: 10px; }
.dj-mini-cart .dj-btn:last-child { margin-bottom: 0; }

/* Estado vacío + sugerencias */
.dj-mini-cart--empty .dj-mini-cart__hint {
  font-family: var(--dj-font-body);
  font-size: 0.85rem;
  color: var(--dj-gray-dark, #4a4a4a);
  margin-bottom: 14px;
}
.dj-mini-cart__suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dj-mini-cart__suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--dj-radius-sm, 4px);
  padding: 8px;
  text-decoration: none;
  transition: var(--dj-transition);
}
.dj-mini-cart__suggestion:hover {
  box-shadow: var(--dj-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  transform: translateY(-1px);
}
.dj-mini-cart__suggestion img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--dj-radius-sm, 4px);
  flex-shrink: 0;
}
.dj-mini-cart__suggestion span {
  flex: 1;
  font-family: var(--dj-font-body);
  font-size: 0.78rem;
  color: var(--dj-black-soft, #111);
  line-height: 1.3;
}
.dj-mini-cart__suggestion strong {
  font-size: 0.78rem;
  color: var(--dj-red, #FF0000);
  white-space: nowrap;
}


/* ---------------------------------------------------------
   SIDEBAR — filtros (Categorías / Marca / Precio)
   Widgets nativos de WooCommerce, estilizados a la marca
   --------------------------------------------------------- */
.dj-shop-filters {
  background: #fff;
  border-radius: var(--dj-radius-md, 8px);
  padding: 24px;
  margin-top: 24px;
  box-shadow: var(--dj-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}

.dj-shop-filters .widget {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.dj-shop-filters .widget:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.dj-shop-filters .widget-title {
  font-family: var(--dj-font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  margin: 0 0 16px;
  position: relative;
  padding-bottom: 8px;
}
.dj-shop-filters .widget-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px;
  height: 3px;
  background: var(--dj-red, #FF0000);
}

/* Categorías de producto */
.dj-shop-filters .product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dj-shop-filters .product-categories li {
  margin-bottom: 10px;
}
.dj-shop-filters .product-categories li a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--dj-font-body);
  font-size: 0.85rem;
  color: var(--dj-black-soft, #111);
  text-decoration: none;
  transition: color 0.2s ease;
}
.dj-shop-filters .product-categories li a:hover { color: var(--dj-red, #FF0000); }
.dj-shop-filters .product-categories .count {
  display: none !important;
}
.dj-shop-filters .product-categories li.current-cat > a {
  color: var(--dj-red, #FF0000);
  font-weight: var(--dj-weight-semibold, 600);
}

/* Filtro por atributo (marca) — checkbox visual */
.dj-shop-filters .widget_layered_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dj-shop-filters .widget_layered_nav ul li {
  margin-bottom: 12px;
}
.dj-shop-filters .widget_layered_nav ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dj-font-body);
  font-size: 0.85rem;
  color: var(--dj-black-soft, #111);
  text-decoration: none;
}
.dj-shop-filters .widget_layered_nav ul li a::before {
  content: "";
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 1.5px solid #ccc;
  border-radius: 4px;
  transition: var(--dj-transition);
}
.dj-shop-filters .widget_layered_nav ul li.chosen a::before {
  background: var(--dj-red, #FF0000);
  border-color: var(--dj-red, #FF0000);
  content: "✓";
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
}
.dj-shop-filters .widget_layered_nav .count {
  margin-left: auto;
  color: var(--dj-gray-dark, #4a4a4a);
  font-size: 0.78rem;
}

/* Filtro por precio */
.dj-shop-filters .price_slider {
  margin-bottom: 16px;
}
.dj-shop-filters .ui-slider {
  position: relative;
  height: 4px;
  background: var(--dj-gray-light, #f4f4f5);
  border-radius: 2px;
  margin: 24px 4px;
}
.dj-shop-filters .ui-slider .ui-slider-range {
  position: absolute;
  height: 100%;
  background: var(--dj-red, #FF0000);
  border-radius: 2px;
}
.dj-shop-filters .ui-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  background: #fff;
  border: 3px solid var(--dj-red, #FF0000);
  border-radius: 50%;
  cursor: pointer;
  outline: none;
}
.dj-shop-filters .price_slider_amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dj-shop-filters .price_slider_amount .price_label {
  font-family: var(--dj-font-body);
  font-size: 0.8rem;
  color: var(--dj-gray-dark, #4a4a4a);
}
.dj-shop-filters .price_slider_amount button {
  background: var(--dj-red, #FF0000) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--dj-font-body) !important;
  font-weight: var(--dj-weight-bold, 700) !important;
  text-transform: uppercase;
  font-size: 0.78rem !important;
  padding: 9px 18px !important;
  border-radius: var(--dj-radius-sm, 4px) !important;
  cursor: pointer;
  transition: var(--dj-transition);
}
.dj-shop-filters .price_slider_amount button:hover {
  background: var(--dj-red-dark, #C40000) !important;
}

/* ---------------------------------------------------------
   PAGINACIÓN
   --------------------------------------------------------- */
.woocommerce-pagination {
  margin-top: 40px;
  grid-column: 1 / -1;
}
.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.woocommerce-pagination .page-numbers li { margin: 0; }
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--dj-radius-sm, 4px);
  background: #fff;
  border: 1px solid #e5e5e5;
  font-family: var(--dj-font-body);
  font-weight: var(--dj-weight-semibold, 600);
  font-size: 0.85rem;
  color: var(--dj-black-soft, #111);
  text-decoration: none;
  transition: var(--dj-transition);
}
.woocommerce-pagination .page-numbers a:hover {
  background: var(--dj-gray-light, #f4f4f5);
  border-color: #ddd;
}
.woocommerce-pagination .page-numbers .current {
  background: var(--dj-red, #FF0000);
  border-color: var(--dj-red, #FF0000);
  color: #fff;
}
.woocommerce-pagination .page-numbers .next,
.woocommerce-pagination .page-numbers .prev {
  font-size: 1rem;
}


/* ---------------------------------------------------------
   CATEGORÍAS — plegadas por defecto, con toggle para expandir
   --------------------------------------------------------- */
.dj-shop-filters .product-categories .children {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  margin: 0 0 0 16px;
  padding: 0;
  transition: max-height 0.3s ease;
}
.dj-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dj-cat-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--dj-gray-dark, #4a4a4a);
  transition: transform 0.2s ease, color 0.2s ease;
  padding: 0 4px;
  flex-shrink: 0;
}
.dj-cat-toggle.is-open {
  transform: rotate(90deg);
  color: var(--dj-red, #FF0000);
}


/* ---------------------------------------------------------
   CARRITO FLOTANTE — SE MUDÓ a assets/css/cart-fab.css
   ---------------------------------------------------------
   Estaba aquí y solo se encendía dentro del media query de
   móvil, así que en escritorio no existía. Ahora es una hoja
   propia que se carga en todo el sitio.
   --------------------------------------------------------- */


/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1024px) {
  .dj-shop-layout {
    grid-template-columns: 1fr;
  }
  .dj-shop-sidebar {
    position: static;
  }

  /* En móvil/tablet: se acabó el carrito grande en la sidebar,
     ahora vive como botón flotante + drawer (ver más abajo) */
  .dj-shop-cart-widget {
    display: none !important;
  }

  /* Categorías y marca fuera en móvil — solo precio */
  .dj-shop-filters .widget_product_categories,
  .dj-shop-filters .widget_layered_nav {
    display: none !important;
  }

  /* El filtro de precio queda pegado arriba, siempre visible al hacer scroll */
  .dj-shop-filters {
    position: sticky;
    top: 72px; /* ajusta si tu header sticky tiene otra altura */
    z-index: 40;
    margin-top: 0;
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .dj-shop-filters .widget_price_filter {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
  }
  .dj-shop-filters .widget-title {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  /* El botón flotante del carrito vive ahora en cart-fab.css */

  /* v3.10: el reparto por pantalla manda desde el bloque
     "CELULAR Y TABLET" del final. Aquí ya no se decide nada. */
}

@media (max-width: 600px) {
  .dj-shop-hero { min-height: 280px; }
  .dj-shop-hero__inner { padding: 40px 16px; }
}




/* ===========================================================
   v2.3 — BANNER DE TIENDA / CATEGORÍA
   -----------------------------------------------------------
   Reglas de esta versión:
     · La FOTO manda. Nada de cristal, nada de cajas.
     · La foto es MÁS ALTA que el banner y se desplaza al revés
       que la página: al bajar, la imagen baja. Eso es lo que
       da la sensación de que hay algo detrás.
     · El texto FLOTA encima, sin fondo, sostenido solo por
       sombras suaves.
     · Fuera el contador de productos.
   =========================================================== */
.dj-shop-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* v2.3.1: banner más bajo — que se vea la foto sin comerse
     la pantalla y que los productos entren antes en cuadro. */
  min-height: clamp(320px, 40vh, 470px);
  overflow: hidden;
  isolation: isolate;
  background: #0e0e11;
}

/* --- 1. La foto: más grande que su marco, para poder viajar ---
   El JS le aplica el desplazamiento; el 30% extra de alto es el
   margen de maniobra para que nunca asome un borde vacío. */
.dj-shop-hero__bg-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -15%;
  bottom: -15%;
  height: auto;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.6s ease;
  /* Realce de vitrina: más color y más punch que la original */
  filter: saturate(1.16) contrast(1.06) brightness(1.04);
}
.dj-shop-hero__bg-layer.is-active { opacity: 1; }

/* Sin parallax (móvil o efectos apagados) la foto se queda quieta
   y bien encuadrada, sin el 30% extra que ya no hace falta. */
.dj-no-parallax .dj-shop-hero__bg-layer {
  top: 0;
  bottom: 0;
  animation: dj-shop-hero-zoom 26s ease-in-out infinite alternate;
}
@keyframes dj-shop-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* --- 2. Lo justo para que el texto se lea ---
   Un velo que solo existe donde va el texto (izquierda) y se
   desvanece del todo antes de la mitad. La foto queda limpia. */
.dj-shop-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.22) 26%, rgba(0,0,0,0) 54%),
    linear-gradient(0deg, rgba(0,0,0,0.22) 0%, transparent 28%);
}

/* Sin foto: degradado de marca, nunca un plano muerto */
.dj-shop-hero.no-photo .dj-shop-hero__overlay {
  background:
    radial-gradient(90% 80% at 12% 40%, rgba(255,0,0,0.30) 0%, transparent 62%),
    linear-gradient(120deg, #1a0505 0%, #0b0b0d 55%, #000 100%);
}

/* --- 3. El texto, flotando --- */
.dj-shop-hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: 34px;
  padding-bottom: 34px;
  will-change: transform;
}

.dj-shop-hero__content {
  max-width: 760px;
}

.dj-shop-hero__breadcrumb {
  /* inline-block y no inline-flex: en flex los separadores " / "
     se pegaban a las palabras */
  display: inline-block;
  margin-bottom: 18px;
}
.dj-shop-hero__breadcrumb,
.dj-shop-hero__breadcrumb a {
  color: rgba(255,255,255,0.72);
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.67rem;
  font-weight: 500;
  /* Mucho espaciado entre letras: es lo que hace que una miga de pan
     se lea como "detalle de marca" y no como texto de relleno. */
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}
.dj-shop-hero__breadcrumb a { transition: color 0.2s ease; }
.dj-shop-hero__breadcrumb a:hover { color: var(--dj-red, #FF0000); }

/* Título flotante: tres niveles de sombra. El primero lo despega
   del fondo, el segundo le da cuerpo, el tercero lo hace legible
   incluso sobre una foto clara. */
.dj-shop-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--dj-font-display), sans-serif;
  font-size: clamp(1.75rem, 3.7vw, 3.1rem);
  line-height: 0.94;
  /* Anton respira mejor apretada: cerrar el tracking la hace ver
     maciza, como un titular de revista deportiva. */
  letter-spacing: -0.4px;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.40),
    0 6px 22px rgba(0,0,0,0.50),
    0 22px 60px rgba(0,0,0,0.42);
}

.dj-shop-hero__rule {
  display: block;
  width: 58px;
  height: 3px;
  margin: 18px 0 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dj-red, #FF0000), rgba(255,0,0,0.10));
  box-shadow: 0 0 24px rgba(255,0,0,0.8);
}

.dj-shop-hero__desc {
  max-width: 470px;
  margin: 0;
  color: rgba(255,255,255,0.86);
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.72;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}

/* --- 4. Corte inferior limpio --- */
.dj-shop-hero__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--dj-red, #FF0000) 0%,
    rgba(255,0,0,0.22) 44%,
    rgba(255,0,0,0) 80%);
}

.dj-shop-hero__admin-hint {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 4px;
  background: #fff4c2;
  color: #4a3b00;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.76rem;
  max-width: 90%;
  text-align: center;
}


/* ===========================================================
   RESPONSIVE DEL BANNER
   =========================================================== */
@media (max-width: 900px) {
  .dj-shop-hero__content { max-width: 100%; }
}

@media (max-width: 768px) {
  .dj-shop-hero {
    min-height: 300px;
    align-items: flex-end;
  }
  .dj-shop-hero__inner { padding-bottom: 26px; }
  /* En vertical el velo tiene que venir de abajo, no del lado */
  .dj-shop-hero__overlay {
    background: linear-gradient(0deg,
      rgba(0,0,0,0.66) 0%,
      rgba(0,0,0,0.32) 34%,
      rgba(0,0,0,0) 64%);
  }
  .dj-shop-hero__breadcrumb,
  .dj-shop-hero__breadcrumb a { font-size: 0.66rem; letter-spacing: 0.8px; }
  .dj-shop-hero__title { font-size: clamp(1.5rem, 6.6vw, 2.1rem); }
  .dj-shop-hero__rule { width: 46px; height: 3px; margin: 12px 0 10px; }
  .dj-shop-hero__desc {
    font-size: 0.83rem;
    -webkit-line-clamp: 2;
    /* Máximo 3 líneas: el resto se lee en la ficha del producto */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 768px) and (max-height: 520px) {
  .dj-shop-hero { min-height: 240px; }
  .dj-shop-hero__desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-shop-hero__bg-layer { animation: none !important; }
}


/* ===========================================================
   v2.3.3 — TARJETA QUE CIERRA LA REJILLA
   -----------------------------------------------------------
   La celda número 18. Rellena el hueco que dejaba la última fila
   y, de paso, es el paso siguiente: "Siguiente página" o
   "Llegaste al final". Mide exactamente igual que una tarjeta de
   producto porque ES una celda más del mismo grid.
   =========================================================== */
.woocommerce ul.products li.product.dj-grid-card,
.woocommerce-page ul.products li.product.dj-grid-card {
  background: linear-gradient(150deg, #17171b 0%, #0b0b0d 58%, #240404 100%);
  border-radius: var(--dj-radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--dj-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  padding: 0;
  min-height: 260px;
}

.dj-grid-card__link {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  height: 100%;
  padding: 28px 22px;
  text-decoration: none;
  color: #fff;
}

/* Resplandor rojo de marca que vive en la esquina */
.dj-grid-card__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -30%;
  bottom: -40%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,0,0,0.42) 0%, transparent 68%);
  filter: blur(26px);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
  opacity: 0.85;
}

/* Flecha en cápsula */
.dj-grid-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--dj-red, #FF0000);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255,0,0,0.42);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.dj-grid-card__arrow--check {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: none;
}

.dj-grid-card__title {
  display: block;
  font-family: var(--dj-font-display), sans-serif;
  /* line-height 0.98 dejaba las dos líneas montadas una encima de otra
     cuando la tarjeta era estrecha. 1.08 les da el aire justo. */
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.08;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}

.dj-grid-card__meta {
  display: block;
  font-family: var(--dj-font-body), sans-serif;
  /* nowrap: en tarjetas estrechas "Página 3 de 8" se partía en tres
     líneas y descuadraba todo */
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.62);
  margin-bottom: 16px;
}
.dj-grid-card__meta strong { color: #fff; font-weight: 700; }

/* Barrita de progreso: cuánto del catálogo llevas visto */
.dj-grid-card__bar {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.16);
  overflow: hidden;
  margin-bottom: 18px;
}
.dj-grid-card__bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dj-red, #FF0000), #ff6a6a);
  /* Se dibuja sola al entrar en pantalla */
  transform-origin: left center;
  animation: dj-grid-bar 1s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
@keyframes dj-grid-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.dj-grid-card__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  border-bottom: 1px solid rgba(255,255,255,0.30);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

/* --- Reacción al mouse (solo escritorio) --- */
@media (hover: hover) {
  .woocommerce ul.products li.product.dj-grid-card:hover,
  .woocommerce-page ul.products li.product.dj-grid-card:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 24px 48px rgba(0,0,0,0.28);
  }
  .dj-grid-card:hover .dj-grid-card__arrow { transform: translateX(7px); }
  .dj-grid-card:hover .dj-grid-card__link::before { transform: scale(1.18); opacity: 1; }
  .dj-grid-card:hover .dj-grid-card__cta {
    color: #fff;
    border-color: var(--dj-red, #FF0000);
  }
}

/* La tarjeta no lleva filo rojo abajo como las de producto */
.dj-grid-card.dj-card-live::after { display: none; }

/* --- Celular: vertical y centrada (v8.10) ---------------------
   ANTES iba en horizontal (flex-direction: row + wrap), pensado
   para cuando esta tarjeta ocupaba TODO el ancho de la pantalla.
   Pero en la rejilla de dos columnas la tarjeta mide ~150px, y ahí
   el diseño horizontal se descuadraba: la flecha a un lado, el
   título partido, "Página 2 de 162" cayendo en tres renglones y el
   "Ver más productos" saliéndose por el costado.

   En una tarjeta angosta lo que funciona es la columna centrada:
   flecha arriba, título, la cuenta de páginas en un solo renglón y
   el enlace abajo. Todo alineado al mismo eje. */
@media (max-width: 600px) {
  .woocommerce ul.products li.product.dj-grid-card,
  .woocommerce-page ul.products li.product.dj-grid-card {
    min-height: 0;
  }
  .dj-grid-card__link {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
    gap: 0;
    padding: 26px 14px;
  }
  .dj-grid-card__arrow {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
  }
  .dj-grid-card__title {
    font-size: 1.05rem;
    line-height: 1.12;
    margin-bottom: 8px;
  }
  /* Un solo renglón: "Página 2 de 162". El tamaño baja lo justo
     para que quepa aunque el catálogo tenga tres cifras de
     páginas. */
  .dj-grid-card__meta {
    white-space: nowrap;
    font-size: 0.7rem;
    margin-bottom: 14px;
  }
  /* La barrita sí cabe en vertical y ayuda a entender cuánto falta:
     se queda, pero angostita y centrada. */
  .dj-grid-card__bar {
    display: block;
    max-width: 84px;
    margin: 0 auto 16px;
  }
  .dj-grid-card__cta {
    margin-top: 0;
    flex-basis: auto;
    font-size: 0.62rem;
    letter-spacing: 0.8px;
    /* En una tarjeta angosta "Ver más productos" no cabe de una
       sola línea: se permite que use dos, centradas, en vez de
       salirse por el costado. */
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}

/* Celular muy angosto (dos columnas en pantallas de 360px): se
   aprieta un punto más para que nada roce los bordes. */
@media (max-width: 380px) {
  .dj-grid-card__link  { padding: 22px 10px; }
  .dj-grid-card__arrow { width: 40px; height: 40px; margin-bottom: 12px; }
  .dj-grid-card__title { font-size: 0.95rem; }
  .dj-grid-card__meta  { font-size: 0.66rem; }
  .dj-grid-card__cta   { font-size: 0.58rem; letter-spacing: 0.5px; }
}


/* ===========================================================
   v2.3.4 — COLORES Y TALLAS EN LA TARJETA
   -----------------------------------------------------------
   ⚠️ LA SIMETRÍA ES LA REGLA. El bloque se imprime en TODAS las
   tarjetas, tengan variaciones o no, y siempre mide lo mismo
   (--dj-swatch-block). Si solo apareciera en los productos que
   tienen colores, las tarjetas de una misma fila medirían
   distinto y el botón de comprar quedaría a alturas diferentes.

   Alturas fijas, nada de "auto":
     · foto            → cuadrada 1:1
     · título          → 2 líneas reservadas
     · precio          → 1 línea
     · colores/tallas  → 62 px SIEMPRE
     · botón           → pegado abajo con margin-top:auto
   =========================================================== */
:root {
  /* Eran 22 px. Con la fila de 5 productos la tarjeta quedaba en ~200 px y
     las tallas salían tan juntas y tan pequeñas que no se podían tocar con
     el dedo. La fila pasó a 4 productos (tarjeta de 250 px) y el punto de
     toque sube a 28. Sigue por debajo de los 44 px que recomienda Apple,
     pero el bloque entero de opciones tiene 70 px de alto y eso ya da
     margen de error suficiente sin comerse la foto del producto. */
  --dj-swatch-size: 28px;
  --dj-swatch-block: 70px;
}

.woocommerce ul.products li.product .dj-swatches,
.woocommerce-page ul.products li.product .dj-swatches,
.dj-carousel .dj-swatches {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  /* Este min-height es el que iguala TODAS las tarjetas */
  min-height: var(--dj-swatch-block);
  padding: 0 14px 10px;
  margin: 0;
}

.dj-swatches__row {
  display: flex;
  align-items: center;
  gap: 6px;
  /* nowrap + hidden: jamás puede saltar a una segunda línea y
     descuadrar la tarjeta */
  flex-wrap: nowrap;
  overflow: hidden;
  height: var(--dj-swatch-size);
}

.dj-swatch {
  flex: 0 0 auto;
  box-sizing: border-box;
  font-family: var(--dj-font-body), sans-serif;
  line-height: 1;
  user-select: none;
}

/* --- Círculos de color --- */
.dj-swatch--color {
  width: var(--dj-swatch-size);
  height: var(--dj-swatch-size);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), 0 0 0 2px #fff inset;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.woocommerce ul.products li.product:hover .dj-swatch--color { transform: scale(1.08); }

/* Color que no está en el diccionario: círculo neutro con la inicial.
   Nunca se deja un hueco ni un círculo transparente raro. */
.dj-swatch--color.is-unknown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dj-gray-light, #f0f0f2);
  color: #6b6b73;
  font-size: 0.6rem;
  font-weight: 700;
  box-shadow: none;
}

/* --- Pastillas de talla ---
   BLINDADAS. Cuando el producto es seleccionable estas pastillas son
   <button>, y WooCommerce/Elementor tienen reglas propias para `button`
   que ya nos han repintado el pop-up del carrito y el botón de comprar.
   Aquí el daño sería peor: una pastilla aplastada a dos píxeles se ve
   como una rayita y el cliente no sabe ni que puede elegir la talla. */
.dj-swatch--size,
li.product button.dj-swatch--size,
.dj-swatches button.dj-swatch--size {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: calc(var(--dj-swatch-size) + 6px) !important;
  height: var(--dj-swatch-size) !important;
  min-height: var(--dj-swatch-size) !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  border: 1px solid #e0e0e4 !important;
  background: #fff !important;
  background-color: #fff !important;
  color: var(--dj-black-soft, #111) !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap;
}

/* Los círculos de color, blindados igual */
.dj-swatches button.dj-swatch--color,
li.product button.dj-swatch--color {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: var(--dj-swatch-size) !important;
  min-width: var(--dj-swatch-size) !important;
  height: var(--dj-swatch-size) !important;
  min-height: var(--dj-swatch-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* --- "+3 más" --- */
.dj-swatch--more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dj-swatch-size);
  padding: 0 6px;
  border-radius: 4px;
  background: transparent;
  color: var(--dj-gray-dark, #4a4a4a);
  font-size: 0.66rem;
  font-weight: 700;
}

/* --- El precio pega menos abajo ahora que tiene los swatches debajo --- */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  padding: 4px 14px 8px !important;
}

/* --- Celular: un pelín más compacto, pero igual de simétrico --- */
@media (max-width: 600px) {
  :root {
    /* En celular caben 2 tarjetas por fila, así que hay ancho de sobra:
       26 px es un punto de toque razonable con el pulgar. */
    --dj-swatch-size: 26px;
    --dj-swatch-block: 66px;
  }
  .woocommerce ul.products li.product .dj-swatches,
  .woocommerce-page ul.products li.product .dj-swatches { padding: 0 12px 8px; }
  /* !important: la regla base también lo lleva (ver el blindaje de arriba) */
  .dj-swatch--size { font-size: 0.68rem !important; padding: 0 7px !important; }
}

/* La tarjeta de "siguiente página" no lleva este bloque */
.dj-grid-card .dj-swatches { display: none; }


/* ===========================================================
   v2.4 — ELEGIR Y COMPRAR DESDE LA TARJETA
   =========================================================== */

/* --- Swatches que se pueden tocar --- */
.dj-swatches.is-selectable .dj-swatch {
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.dj-swatches.is-selectable .dj-swatch--color {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.dj-swatches.is-selectable .dj-swatch--color.is-active {
  outline-color: var(--dj-black-soft, #111);
  transform: scale(1.1);
}

/* ---------------------------------------------------------
   v6.0 — VISTA PREVIA AUTOMÁTICA (product-hover.js)
   -----------------------------------------------------------
   Mientras el mouse o el dedo están sobre la tarjeta, el color que le
   toca al fotograma actual se marca con un anillo ROJO fino — a
   propósito distinto del anillo negro sólido de ".is-active", que es
   la elección de verdad del cliente. Así nunca se confunde "esto es lo
   que estoy previsualizando" con "esto es lo que voy a comprar".
   ".dj-swatch--preview" NUNCA convive con ".is-active" en el mismo
   círculo por mucho tiempo: si el cliente ya eligió ese color, seguirá
   viéndose con su anillo negro y el rojo no aporta ni quita nada. */
.dj-swatch--color.dj-swatch--preview {
  outline: 2px solid var(--dj-red, #ff0000);
  outline-offset: 2px;
  animation: dj-swatch-preview-pulse 0.95s ease-in-out infinite;
}
@keyframes dj-swatch-preview-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.14), 0 0 0 2px #fff inset, 0 0 0 0 rgba(255,0,0,0.35); }
  50%      { box-shadow: 0 1px 3px rgba(0,0,0,0.14), 0 0 0 2px #fff inset, 0 0 0 4px rgba(255,0,0,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .dj-swatch--color.dj-swatch--preview { animation: none; }
}

.dj-swatches.is-selectable .dj-swatch--size {
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* ⚠️ Estas van con !important porque la regla base de la pastilla también
   lo lleva (está blindada contra WooCommerce/Elementor). Sin esto, la
   talla elegida no se pintaría de negro y el cliente no vería qué tocó. */
.dj-swatches.is-selectable .dj-swatch--size:hover {
  border-color: #b5b5bd !important;
}
.dj-swatches.is-selectable .dj-swatch--size.is-active,
.dj-swatches.is-selectable button.dj-swatch--size.is-active {
  background: var(--dj-black-soft, #111) !important;
  background-color: var(--dj-black-soft, #111) !important;
  border-color: var(--dj-black-soft, #111) !important;
  color: #fff !important;
}

/* Combinación que no existe o está agotada: se apaga, no se esconde.
   Esconderla movería las demás de sitio y rompería la simetría. */
.dj-swatches.is-selectable .dj-swatch.is-off {
  opacity: 0.3;
  cursor: not-allowed;
  position: relative;
}
/* !important por lo mismo: la base lo lleva */
.dj-swatches.is-selectable .dj-swatch--size.is-off { text-decoration: line-through !important; }

/* Aviso cuando intenta comprar sin haber elegido */
.dj-needs-choice .dj-swatches { animation: dj-nudge 0.45s ease 2; }
@keyframes dj-nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* El precio parpadea cuando cambia con la variación elegida */
.woocommerce ul.products li.product .price.is-updated {
  animation: dj-price-pop 0.5s ease;
}
@keyframes dj-price-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.woocommerce ul.products li.product img { transition: opacity 0.25s ease; }


/* --- Fila de compra: cantidad + botón --- */
.woocommerce ul.products li.product .dj-buy-row,
.woocommerce-page ul.products li.product .dj-buy-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: auto 14px 14px !important;   /* auto = siempre pegado abajo */
}

/* Desplegable de cantidad */
.dj-qty {
  position: relative;
  flex: 0 0 auto;
  display: block;
}
.dj-qty__select {
  appearance: none;
  -webkit-appearance: none;
  height: 100%;
  min-height: 40px;
  width: 56px;
  padding: 0 22px 0 11px;
  border: 1px solid #e0e0e4;
  border-radius: var(--dj-radius-sm, 4px);
  background: #fff;
  color: var(--dj-black-soft, #111);
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.dj-qty__select:hover  { border-color: #b5b5bd; }
.dj-qty__select:focus  { outline: 2px solid var(--dj-red, #FF0000); outline-offset: 1px; }
.dj-qty__caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #7a7a85;
}

/* Botón */
.woocommerce ul.products li.product .dj-buy-btn,
.woocommerce-page ul.products li.product .dj-buy-btn {
  position: relative;
  flex: 1 1 auto;
  min-height: 40px;
  margin: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none !important;
  border-radius: var(--dj-radius-sm, 4px) !important;
  background-color: var(--dj-red, #FF0000) !important;
  color: #fff !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase !important;
  padding: 10px 8px !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.woocommerce ul.products li.product .dj-buy-btn:hover,
.woocommerce-page ul.products li.product .dj-buy-btn:hover {
  background-color: var(--dj-red-dark, #C40000) !important;
}

/* Falta elegir color o talla: el botón se pone en gris y lo dice */
.woocommerce ul.products li.product .dj-buy-btn--needs-choice,
.woocommerce-page ul.products li.product .dj-buy-btn--needs-choice {
  background-color: #2a2a30 !important;
}

.dj-buy-btn__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Girito de carga */
.dj-buy-btn__spinner { display: none; }
.dj-buy-btn.is-loading .dj-buy-btn__label { opacity: 0.35; }
.dj-buy-btn.is-loading .dj-buy-btn__spinner {
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dj-spin 0.7s linear infinite;
}
@keyframes dj-spin { to { transform: rotate(360deg); } }

.dj-buy-btn.is-done { background-color: #1a7f37 !important; }

@media (max-width: 600px) {
  .dj-qty__select { width: 50px; padding: 0 20px 0 9px; font-size: 0.8rem; }
  .woocommerce ul.products li.product .dj-buy-btn { font-size: 0.7rem !important; }
}


/* ===========================================================
   v2.4 — "APROVECHA ANTES DE PAGAR" (debajo del carrito)
   =========================================================== */
.dj-upsell {
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 34px 24px 40px;
  border-radius: 16px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,0,0,0.10) 0%, transparent 55%),
    linear-gradient(155deg, #17171b 0%, #0c0c0f 60%, #1a0505 100%);
  color: #fff;
}

.dj-upsell__head { margin-bottom: 26px; }

.dj-upsell__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(255,0,0,0.34);
}

.dj-upsell__title {
  margin: 0 0 8px;
  font-family: var(--dj-font-display), sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #fff;
}

.dj-upsell__sub {
  margin: 0;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
}
.dj-upsell__sub strong { color: #fff; font-weight: 700; }

.dj-upsell__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* --- Cada sugerencia --- */
.dj-upsell-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) {
  .dj-upsell-card:hover {
    transform: translate3d(0,-6px,0);
    box-shadow: 0 22px 44px rgba(0,0,0,0.34);
  }
}

.dj-upsell-card__media {
  position: relative;
  display: block;
  background: var(--dj-gray-light, #f4f4f5);
}
.dj-upsell-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) {
  .dj-upsell-card:hover .dj-upsell-card__media img { transform: scale(1.06); }
}

.dj-upsell-card__off {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 16px rgba(255,0,0,0.36);
}

.dj-upsell-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 15px 15px;
}

.dj-upsell-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Dos líneas reservadas SIEMPRE: mismo criterio que en la tienda,
     todas las tarjetas tienen que medir igual */
  min-height: calc(1.35em * 2);
  margin-bottom: 8px;
  color: var(--dj-black-soft, #111);
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.dj-upsell-card__name:hover { color: var(--dj-red, #FF0000); }

.dj-upsell-card__price {
  margin: 0 0 8px;
  font-family: var(--dj-font-body), sans-serif;
  line-height: 1.2;
}
.dj-upsell-card__price del {
  color: var(--dj-gray, #AEAEAF);
  font-size: 0.82rem;
  margin-right: 6px;
  text-decoration: line-through;
}
.dj-upsell-card__price ins {
  color: var(--dj-red, #FF0000);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

/* Verde = ahorro. El único verde de toda la web, para que signifique
   exactamente una cosa. Con altura fija aunque esté vacío. */
.dj-upsell-card__save {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  margin: 0 0 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #eaf7ee;
  color: #16743a;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
}
.dj-upsell-card__save.is-empty { background: transparent; }
.dj-upsell-card__save strong { font-weight: 800; }

.dj-upsell-card__math {
  margin: 0 0 14px;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--dj-gray-dark, #4a4a4a);
}
.dj-upsell-card__math strong {
  display: block;
  color: var(--dj-black-soft, #111);
  font-size: 0.95rem;
  font-weight: 800;
}

.dj-upsell-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;          /* siempre abajo, todas a la misma altura */
  padding: 11px 12px;
  border-radius: var(--dj-radius-sm, 4px);
  background: var(--dj-black-soft, #111);
  color: #fff;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.22s ease;
}
.dj-upsell-card__btn:hover { background: var(--dj-red, #FF0000); color: #fff; }

/* --- Remate: el ahorro total --- */
.dj-upsell__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}
.dj-upsell__foot strong { color: #fff; font-weight: 800; }
.dj-upsell__foot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dj-red, #FF0000);
  color: #fff;
}

@media (max-width: 1024px) {
  .dj-upsell__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dj-upsell { margin-top: 34px; padding: 26px 16px 30px; border-radius: 12px; }
  .dj-upsell__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dj-upsell-card__body { padding: 12px; }
  .dj-upsell-card__name { font-size: 0.8rem; }
  .dj-upsell-card__math { font-size: 0.72rem; }
  .dj-upsell__foot { font-size: 0.82rem; }
}


/* ===========================================================
   v2.4.1 — ALINEACIÓN ESTRICTA DE LA TARJETA
   -----------------------------------------------------------
   Cada bloque tiene un alto RESERVADO, exista o no su contenido.
   Es la única forma de que los textos de una fila queden a la
   misma altura pase lo que pase:

     foto            1:1
     miniaturas      44 px SIEMPRE  (aunque no haya galería)
     título          2 líneas SIEMPRE
     precio          26 px SIEMPRE
     colores/tallas  62 px SIEMPRE
     fila de compra  pegada abajo
   =========================================================== */
.woocommerce ul.products li.product .dj-product-thumbs,
.woocommerce-page ul.products li.product .dj-product-thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  /* ⚠️ El alto fijo es lo que arregla la desalineación: antes esta
     fila no se imprimía en los productos sin galería y el título de
     esa tarjeta subía 44 px respecto a las de al lado. */
  height: 44px;
  padding: 8px 14px 0;
  overflow: hidden;
}
.woocommerce ul.products li.product .dj-product-thumbs.is-empty,
.woocommerce-page ul.products li.product .dj-product-thumbs.is-empty {
  /* Vacía pero ocupando: eso es justo lo que queremos */
  visibility: hidden;
}
.dj-product-thumbs__item {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid #e6e6ea;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.dj-product-thumbs__item:hover { border-color: var(--dj-red, #FF0000); }
.dj-product-thumbs__item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  display: block;
}

/* Precio: alto reservado aunque lleve tachado + rebajado */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  min-height: 26px;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
}

/* Fila de compra en productos agotados: mismo alto que las demás */
.dj-buy-row--out .dj-buy-btn {
  width: 100% !important;
  text-decoration: none;
}
.woocommerce ul.products li.product .dj-buy-btn--out,
.woocommerce-page ul.products li.product .dj-buy-btn--out {
  background-color: #6b6b73 !important;
}


/* ===========================================================
   v2.4.1 — BARRA DE ENVÍO GRATIS (debajo del total)
   =========================================================== */
.dj-freeship {
  margin: 16px 0 18px;
  padding: 15px 17px;
  border-radius: 12px;
  border: 1px solid #e6e6ea;
  background: #fff;
  font-family: var(--dj-font-body), sans-serif;
}
.dj-freeship.is-pending {
  border-color: rgba(255, 0, 0, 0.22);
  background: linear-gradient(135deg, #fff 0%, #fff6f6 100%);
}
.dj-freeship.is-done {
  border-color: rgba(26, 127, 55, 0.28);
  background: linear-gradient(135deg, #fff 0%, #f2fbf5 100%);
}

.dj-freeship__line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--dj-black-soft, #111);
}
.dj-freeship__line strong { font-weight: 800; }
.dj-freeship__line .woocommerce-Price-amount { font-weight: 800; }

.dj-freeship__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
}
.dj-freeship.is-pending .dj-freeship__icon { background: var(--dj-red, #FF0000); }
.dj-freeship.is-done    .dj-freeship__icon { background: #1a7f37; }

.dj-freeship__bar {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 4px;
  background: #ececf0;
  overflow: hidden;
}
.dj-freeship__bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  transform-origin: left center;
  animation: dj-bar-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.dj-freeship.is-pending .dj-freeship__bar > span {
  background: linear-gradient(90deg, var(--dj-red, #FF0000), #ff7a7a);
}
.dj-freeship.is-done .dj-freeship__bar > span {
  background: linear-gradient(90deg, #1a7f37, #4fc172);
}
@keyframes dj-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.dj-freeship__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 15px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--dj-black-soft, #111) !important;
  background-color: var(--dj-black-soft, #111) !important;
  color: #fff !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.22s ease, transform 0.22s ease;
}
.dj-freeship__cta:hover {
  background: var(--dj-red, #FF0000) !important;
  background-color: var(--dj-red, #FF0000) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Mientras el JS no la ha colocado, se ve igual (nunca desaparece) */
.dj-freeship:not(.is-placed) { max-width: 420px; }


/* ===========================================================
   v2.4.1 — AJUSTES DE LAS OFERTAS
   =========================================================== */
/* La tarjeta entera es clicable */
.dj-upsell-card[data-dj-add] { cursor: pointer; }
.dj-upsell-card.is-busy  { opacity: 0.6; pointer-events: none; }
.dj-upsell-card.is-added { outline: 2px solid #1a7f37; outline-offset: 2px; }

/* El número que decide: grande y respirando */
/* ⚠️ `> span` y no `span` a secas: wc_price() mete un <span> para el
   símbolo de moneda DENTRO del <strong>, y con el selector abierto el
   "$" se ponía en display:block y se iba a su propia línea. */
.dj-upsell-card__math > span {
  display: block;
  font-size: 0.74rem;
  color: var(--dj-gray-dark, #4a4a4a);
  margin-bottom: 1px;
}
.dj-upsell-card__math strong {
  display: block;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--dj-black-soft, #111);
}

/* "Se agranda y se achica": muy leve, dos segundos por ciclo.
   Lo justo para que el ojo vaya ahí sin que moleste. */
.dj-breathe {
  animation: dj-breathe 2.1s ease-in-out infinite;
  transform-origin: left center;
  will-change: transform;
}
@keyframes dj-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .dj-breathe { animation: none; }
}

/* Etiqueta "Con este, envío gratis" */
.dj-upsell-card__unlock {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(26, 127, 55, 0.95);
  color: #fff;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.dj-upsell-card.is-unlock { outline: 2px solid #1a7f37; outline-offset: 2px; }

/* Al bajar desde "Ver qué me falta" */
.dj-upsell.is-highlight { animation: dj-upsell-flash 1.4s ease; }
@keyframes dj-upsell-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
  100% { box-shadow: 0 0 0 26px rgba(255, 0, 0, 0); }
}


/* ===========================================================
   v2.4.1 — CELULAR Y TABLET
   =========================================================== */

/**
 * v3.10 — LA TIENDA, AL MISMO REPARTO QUE LA HOME
 *
 * Antes: tablet 2 y celular UNA sola columna. Con una foto por fila,
 * ver diez productos eran diez pantallas de scroll: el cliente se
 * cansa antes de llegar a lo que buscaba. Y no cuadraba con la home,
 * donde ya van de dos en dos.
 *
 * Ahora: celular 2, tablet 3, computadora 3 (como estaba).
 * Las medidas de la tarjeta bajan en la misma proporción más abajo,
 * porque partir la fila sin encoger el contenido no vale de nada.
 */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .dj-upsell__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .woocommerce ul.products li.product .dj-product-thumbs,
  .woocommerce-page ul.products li.product .dj-product-thumbs {
    height: 40px;
    padding: 6px 12px 0;
  }
  .dj-product-thumbs__item { width: 30px; height: 30px; }

  /* Las ofertas pasan a fila que se desliza con el dedo: se ven
     todas sin tener que hacer scroll vertical eterno. */
  .dj-upsell__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
    /* ⚠️ v3.11: fuera el `margin-right: -16px`.
       Era un sangrado para que se viera que hay más tarjetas a la
       derecha, pero sacaba la fila FUERA de su caja y con ella se
       iba el ancho de toda la página: el carrito quedaba desplazado
       de lado y el texto se cortaba por la izquierda.
       Que hay más ya se ve solo: la tarjeta siguiente asoma porque
       cada una mide el 72%. */
    max-width: 100%;
  }
  .dj-upsell__grid::-webkit-scrollbar { display: none; }

  .dj-upsell-card {
    flex: 0 0 72%;
    max-width: 260px;
    scroll-snap-align: start;
  }

  .dj-upsell__title { font-size: 1.35rem; }
  .dj-upsell-card__math strong { font-size: 1.15rem; }

  .dj-freeship { padding: 13px 14px; border-radius: 10px; }
  .dj-freeship__line { font-size: 0.82rem; gap: 8px; }
  .dj-freeship__icon { width: 25px; height: 25px; }
  .dj-freeship__cta { width: 100%; justify-content: center; }
}

/* Celular pequeño */
@media (max-width: 400px) {
  .dj-upsell-card { flex-basis: 80%; }
  .dj-upsell { padding: 22px 14px 26px; }
}


/* ===========================================================
   v2.4.2 — REMATES DEL CARRITO
   =========================================================== */

/* --- 1. El símbolo de moneda NO se separa del número ---
   wc_price() envuelve el "$" en su propio <span>. En una columna
   estrecha el navegador lo trataba como una palabra suelta y lo
   mandaba a la línea de abajo: se veía "$" arriba y "32.90" debajo. */
.dj-upsell-card__math .woocommerce-Price-amount,
.dj-upsell-card__price .woocommerce-Price-amount,
.dj-freeship .woocommerce-Price-amount,
.dj-upsell__sub .woocommerce-Price-amount,
.dj-upsell__foot .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  white-space: nowrap;
  display: inline-block;
}
.dj-upsell-card__math .woocommerce-Price-currencySymbol,
.dj-upsell-card__price .woocommerce-Price-currencySymbol,
.dj-freeship .woocommerce-Price-currencySymbol {
  margin-right: 1px;
}
.dj-upsell-card__math strong {
  white-space: nowrap;
  letter-spacing: -0.3px;
}


/* --- 2. La chapa de "Completa tu envío gratis", viva --- */
.dj-upsell__badge {
  position: relative;
  overflow: hidden;
  /* Latido del resplandor rojo: llama sin gritar */
  animation: dj-upsell-badge-glow 2.4s ease-in-out infinite;
}
/* ⚠️ ESTE ERA EL CULPABLE DE QUE LAS CHAPAS DEJARAN DE MOVERSE.
   Se llamaba `dj-badge-pulse`, EL MISMO NOMBRE que la animación de zoom
   de las chapas "Oferta" y "Nuevo" de arriba (línea ~272). Los nombres de
   @keyframes son globales para todo el sitio y gana el último declarado,
   así que esta versión —que solo anima una sombra— sustituía al zoom en
   TODAS las chapas de la tienda. Dejaban de moverse y no había forma de
   verlo mirando su propio CSS: el fallo estaba a 1.900 líneas de ahí.
   Renombrada. Los nombres de animación llevan ahora el sitio donde se
   usan, para que esto no se pueda repetir. */
@keyframes dj-upsell-badge-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(255, 0, 0, 0.30); }
  50%      { box-shadow: 0 8px 30px rgba(255, 0, 0, 0.72); }
}

/* Destello que barre la chapa cada pocos segundos */
.dj-upsell__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%);
  transform: translateX(-120%);
  animation: dj-badge-sheen 3.6s ease-in-out infinite;
}
@keyframes dj-badge-sheen {
  0%, 62%  { transform: translateX(-120%); }
  84%,100% { transform: translateX(120%); }
}

/* El rayo parpadea justo antes del destello */
.dj-upsell__badge svg {
  animation: dj-bolt 3.6s ease-in-out infinite;
}
@keyframes dj-bolt {
  0%, 55%, 100% { transform: scale(1);    opacity: 1; }
  62%           { transform: scale(1.35); opacity: 0.75; }
  70%           { transform: scale(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-upsell__badge,
  .dj-upsell__badge::after,
  .dj-upsell__badge svg { animation: none; }
  .dj-upsell__badge::after { display: none; }
}


/* --- 3. Aire entre las ofertas y el footer --- */
.dj-upsell {
  /* Antes quedaba pegado al footer y se leía como si fuera parte de él */
  margin-bottom: 64px;
}
@media (max-width: 640px) {
  .dj-upsell { margin-bottom: 40px; }
}


/* --- 4. El botón "Agregar" volvió a ser <button>: hay que blindarlo ---
   Hello Elementor y WooCommerce tienen reglas propias para <button>
   que le estaban ganando (fondo blanco y texto rosa). */
.dj-upsell .dj-upsell-card .dj-upsell-card__btn,
.dj-upsell button.dj-upsell-card__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: auto !important;
  padding: 11px 12px !important;
  border: none !important;
  border-radius: var(--dj-radius-sm, 4px) !important;
  background: var(--dj-black-soft, #111) !important;
  background-color: var(--dj-black-soft, #111) !important;
  color: #fff !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.22s ease;
}
.dj-upsell .dj-upsell-card .dj-upsell-card__btn:hover,
.dj-upsell button.dj-upsell-card__btn:hover {
  background: var(--dj-red, #FF0000) !important;
  background-color: var(--dj-red, #FF0000) !important;
  color: #fff !important;
}
.dj-upsell-card.is-added .dj-upsell-card__btn {
  background-color: #1a7f37 !important;
}

/* El nombre del producto tampoco lleva subrayado */
.dj-upsell-card__name { text-decoration: none !important; }
.dj-upsell-card__name:hover { text-decoration: none !important; }


/* Blindaje: el símbolo de moneda es SIEMPRE parte de la misma línea */
.woocommerce-Price-currencySymbol {
  display: inline !important;
  font-size: inherit !important;
  margin: 0 1px 0 0 !important;
}


/* ===========================================================
   v2.7 — LAS TARJETAS, IGUAL EN TODAS PARTES
   -----------------------------------------------------------
   ⚠️ POR QUÉ SE REPITEN ESTAS REGLAS

   Las de más arriba llevan el prefijo `.woocommerce ul.products`.
   En las páginas de tienda ese prefijo existe y todo va bien, pero
   en la HOME el <body> no lleva la clase `.woocommerce`, así que
   NINGUNA de esas reglas se aplicaba: por eso en los carruseles de
   "Recién Llegados" y "Los Más Vendidos" los títulos salían a
   alturas distintas, el desplegable de cantidad ocupaba toda la
   fila y el botón perdía su color.

   Estas van sin prefijo, colgando solo de `li.product`, así que
   valen en la tienda, en la home y en cualquier carrusel futuro.
   =========================================================== */

/* --- Miniaturas de galería: alto reservado SIEMPRE --- */
li.product .dj-product-thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 8px 14px 0;
  overflow: hidden;
  flex: 0 0 auto;
}
li.product .dj-product-thumbs.is-empty { visibility: hidden; }

/* --- Precio: alto reservado aunque lleve tachado --- */
li.product .price {
  min-height: 26px;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
}

/* --- Colores y tallas: el bloque que iguala las tarjetas --- */
li.product .dj-swatches {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  min-height: var(--dj-swatch-block, 62px);
  padding: 0 14px 10px;
  margin: 0;
  flex: 0 0 auto;
}

/* --- Fila de compra: cantidad y botón, SIEMPRE en la misma línea --- */
li.product .dj-buy-row {
  display: flex !important;
  align-items: stretch;
  gap: 8px;
  margin: auto 14px 14px !important;   /* auto = pegado abajo */
  padding: 0;
  flex: 0 0 auto;
}

li.product .dj-qty {
  position: relative;
  flex: 0 0 62px;      /* ancho fijo: el botón se queda con el resto */
  display: block;
  margin: 0;
}
li.product .dj-qty__select {
  width: 100%;
  min-height: 42px;
  height: 100%;
}

li.product .dj-buy-btn {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;         /* deja que el texto se recorte antes de desbordar */
  min-height: 42px;
  margin: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none !important;
  border-radius: var(--dj-radius-sm, 4px) !important;
  background: var(--dj-red, #FF0000) !important;
  background-color: var(--dj-red, #FF0000) !important;
  color: #fff !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 8px !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
li.product .dj-buy-btn:hover {
  background: var(--dj-red-dark, #C40000) !important;
  background-color: var(--dj-red-dark, #C40000) !important;
  color: #fff !important;
}
li.product .dj-buy-btn--needs-choice {
  background: #2a2a30 !important;
  background-color: #2a2a30 !important;
}
li.product .dj-buy-btn--out {
  background: #6b6b73 !important;
  background-color: #6b6b73 !important;
}
li.product .dj-buy-btn.is-done {
  background: #1a7f37 !important;
  background-color: #1a7f37 !important;
}
li.product .dj-buy-row--out .dj-buy-btn { flex: 1 1 100%; }

/* Pantallas medianas: el texto del botón es lo primero que se aprieta */
@media (max-width: 1200px) {
  li.product .dj-buy-btn { font-size: 0.68rem !important; letter-spacing: 0; }
  li.product .dj-qty { flex-basis: 56px; }
}
@media (max-width: 640px) {
  li.product .dj-buy-row { margin: auto 12px 12px !important; gap: 7px; }
  li.product .dj-qty { flex-basis: 54px; }
  li.product .dj-buy-btn { font-size: 0.72rem !important; }
}


/* ===========================================================
   v2.7 — LA CHAPA "NUEVO", QUE SE VEA
   -----------------------------------------------------------
   "Oferta" es roja y se lee de lejos; "Nuevo" era un gris oscuro
   que se perdía sobre las fotos. Ahora es negra con filete rojo,
   resplandor y un punto que late: distinta de "Oferta" —para que
   no compitan— pero igual de visible.
   =========================================================== */
.dj-badge-new {
  right: 10px !important;
  left: auto !important;
  gap: 6px;
  background: #0d0d10 !important;
  color: #fff !important;
  border: 1.5px solid var(--dj-red, #FF0000) !important;
  box-shadow:
    0 0 0 3px rgba(255, 0, 0, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.38) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.1px !important;
  padding: 5px 11px 5px 9px !important;
  /* ⚠️ Esta línea llevaba `dj-new-glow`, que SOLO animaba la sombra.
     Al llevar !important pisaba el zoom de `dj-badge-pulse` de arriba,
     así que la chapa dejaba de moverse: el resplandor solo se nota en
     una foto oscura y en la mitad del catálogo no se veía nada. Ahora
     la animación hace las dos cosas a la vez. */
  animation: dj-new-beat 2.4s ease-in-out infinite !important;
}

/* El puntito rojo que late, delante del texto */
.dj-badge-new::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dj-red, #FF0000);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.9);
  animation: dj-new-dot 1.5s ease-in-out infinite;
}

/* Zoom + resplandor en la misma animación: el zoom se ve sobre
   cualquier foto, el resplandor le pone el acento de marca. */
@keyframes dj-new-beat {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(255,0,0,0.14), 0 6px 18px rgba(0,0,0,0.38);
  }
  50% {
    transform: scale(1.11);
    box-shadow: 0 0 0 7px rgba(255,0,0,0.04), 0 8px 24px rgba(0,0,0,0.46);
  }
}
@keyframes dj-new-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.65; }
}

/* En la home eran diminutas: ahora se leen igual que en la tienda */
.dj-home-products__grid span.onsale.dj-badge-sale,
.dj-home-products__grid .dj-badge-new {
  font-size: 0.66rem !important;
  padding: 5px 11px !important;
  letter-spacing: 1px !important;
}
.dj-home-products__grid .dj-badge-new { padding-left: 9px !important; }

@media (prefers-reduced-motion: reduce) {
  .dj-badge-new,
  .dj-badge-new::before { animation: none !important; }
}


/* ===========================================================
   v2.7 — POP-UP DE ENVÍO GRATIS
   -----------------------------------------------------------
   Aparece al tocar "Finalizar compra" sin haber llegado al
   mínimo. Siempre con salida visible: nunca es un muro.
   =========================================================== */
.dj-fspop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dj-fspop[hidden] { display: none; }

.dj-fspop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.dj-fspop.is-open .dj-fspop__backdrop { opacity: 1; }

.dj-fspop__box {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px 28px 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.97);
  transition:
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.dj-fspop.is-open .dj-fspop__box {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.dj-fspop__x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  background: var(--dj-gray-light, #f4f4f5) !important;
  background-color: var(--dj-gray-light, #f4f4f5) !important;
  color: var(--dj-gray-dark, #4a4a4a) !important;
  font-size: 1.5rem !important;
  line-height: 1;
  padding: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.dj-fspop__x:hover {
  background: var(--dj-red, #FF0000) !important;
  background-color: var(--dj-red, #FF0000) !important;
  color: #fff !important;
}

/* --- Cabecera --- */
.dj-fspop__head { margin-bottom: 22px; padding-right: 34px; }

.dj-fspop__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--dj-red, #FF0000);
  color: #fff;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(255, 0, 0, 0.32);
}

.dj-fspop__title {
  margin: 0 0 8px;
  font-family: var(--dj-font-display), sans-serif;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--dj-black-soft, #111);
}
.dj-fspop__title strong {
  display: inline-block;
  /* Los márgenes son necesarios: al ser inline-block, el espacio en
     blanco que lo rodea se colapsa y el texto salía pegado
     ("$39.05PARA EL ENVÍO"). */
  margin: 0 0.28em;
  color: var(--dj-red, #FF0000);
  font-weight: inherit;
  white-space: nowrap;
}

.dj-fspop__sub {
  margin: 0 0 14px;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--dj-gray-dark, #4a4a4a);
}

.dj-fspop__bar {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 4px;
  background: #ececf0;
  overflow: hidden;
}
.dj-fspop__bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--dj-red, #FF0000), #ff7a7a);
  transform-origin: left center;
  animation: dj-bar-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

/* --- Las tres sugerencias --- */
.dj-fspop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.dj-fspop-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--dj-line, #e6e6ea);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.22s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s ease;
}
@media (hover: hover) {
  .dj-fspop-card:hover {
    border-color: var(--dj-red, #FF0000);
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
  }
}
/* El que ya le resuelve el envío gratis va marcado en verde */
.dj-fspop-card.is-solves { border-color: #1a7f37; border-width: 2px; }
.dj-fspop-card.is-busy   { opacity: 0.6; pointer-events: none; }
.dj-fspop-card.is-added  { border-color: #1a7f37; }

.dj-fspop-card__media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--dj-gray-light, #f4f4f5);
  margin-bottom: 10px;
}
.dj-fspop-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.dj-fspop-card__flag {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(26, 127, 55, 0.95);
  color: #fff;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase;
}

.dj-fspop-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Dos líneas reservadas: las tres tarjetas miden igual */
  min-height: calc(1.3em * 2);
  margin: 0 0 6px;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dj-black-soft, #111);
}

.dj-fspop-card__price {
  margin: 0 0 6px;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--dj-red, #FF0000);
}
.dj-fspop-card__price .woocommerce-Price-amount { white-space: nowrap; }

.dj-fspop-card__hint {
  min-height: 30px;   /* alto fijo: simetría también aquí */
  margin: 0 0 10px;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--dj-gray-dark, #4a4a4a);
}
.dj-fspop-card__hint .is-ok { color: #16743a; font-weight: 700; }

/* -----------------------------------------------------------
   COMBOS DE DOS  (v8.20)
   -----------------------------------------------------------
   Cuando ningún producto suelto llega al mínimo, se proponen
   pares que sumados sí. Las dos fotos van una al lado de la
   otra con un "+" en medio: se entiende de un vistazo que son
   dos cosas y no una.
   ----------------------------------------------------------- */
.dj-fspop-card.is-combo .dj-fspop-card__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: transparent;
}
.dj-fspop-card.is-combo .dj-fspop-card__media img {
  border-radius: 6px;
  background: var(--dj-gray-light, #f4f4f5);
}

.dj-fspop-card__combo-x {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dj-black-soft, #111);
  color: #fff;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
  /* El "+" se pinta encima de las fotos pero por debajo de la
     chapa verde: la chapa es la que tiene que leerse primero. */
  z-index: 1;
}
.dj-fspop-card__flag { z-index: 2; }

.dj-fspop-card__combo-nota {
  display: block;
  margin-top: 1px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--dj-gray-dark, #4a4a4a);
}

/* Dos líneas de pista (el visto bueno y el nuevo total) */
.dj-fspop-card__hint { min-height: 42px; }

/* -----------------------------------------------------------
   LOS BOTONES, BLINDADOS
   -----------------------------------------------------------
   En la tienda de verdad el texto de estos botones salía ROJO
   sobre verde: WooCommerce y Elementor traen reglas propias para
   `button` que ganaban por especificidad. Aquí no se negocia el
   color —fondo, texto y borde van con !important— porque un botón
   ilegible en el último paso de la compra cuesta la venta.
   ----------------------------------------------------------- */
.dj-fspop-card__btn {
  margin-top: auto;
  padding: 10px !important;
  border: none !important;
  border-radius: 6px !important;
  background: var(--dj-black-soft, #111) !important;
  background-color: var(--dj-black-soft, #111) !important;
  color: #fff !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dj-fspop-card__btn-label { color: inherit !important; }

@media (hover: hover) {
  .dj-fspop-card:hover .dj-fspop-card__btn {
    background: var(--dj-red, #FF0000) !important;
    background-color: var(--dj-red, #FF0000) !important;
    color: #fff !important;
  }
}

/* El verde se reserva para UNO solo: el recomendado (ver el PHP).
   Si se pintan los tres, el ojo no distingue cuál conviene. */
.dj-fspop-card.is-solves .dj-fspop-card__btn,
.dj-fspop-card.is-added  .dj-fspop-card__btn {
  background: #1a7f37 !important;
  background-color: #1a7f37 !important;
  color: #fff !important;
}
@media (hover: hover) {
  .dj-fspop-card.is-solves:hover .dj-fspop-card__btn {
    background: #15682d !important;
    background-color: #15682d !important;
  }
}

/* --- La salida, siempre visible --- */
.dj-fspop__skip {
  display: block;
  width: 100%;
  padding: 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dj-gray-dark, #4a4a4a) !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.2s ease;
}
.dj-fspop__skip:hover { color: var(--dj-black-soft, #111) !important; }

/* La X de cerrar: gris discreta, no un botón rojo de la tienda */
.dj-fspop__x {
  border: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* --- Celular: las tres en columna, y que quepa --- */
@media (max-width: 640px) {
  .dj-fspop { padding: 0; align-items: flex-end; }
  .dj-fspop__box {
    max-width: 100%;
    max-height: 90vh;
    padding: 24px 18px 18px;
    border-radius: 18px 18px 0 0;
    transform: translate3d(0, 100%, 0);   /* entra desde abajo */
  }
  .dj-fspop.is-open .dj-fspop__box { transform: translate3d(0, 0, 0); }

  .dj-fspop__grid { grid-template-columns: 1fr; gap: 10px; }

  /* En columna la tarjeta pasa a horizontal: se ven las tres sin scroll */
  .dj-fspop-card {
    display: grid;
    grid-template-columns: 74px 1fr;
    grid-template-areas:
      "media name"
      "media price"
      "media hint"
      "btn   btn";
    column-gap: 12px;
    align-items: start;
  }
  .dj-fspop-card__media { grid-area: media; margin-bottom: 0; }
  .dj-fspop-card__name  { grid-area: name; min-height: 0; }
  .dj-fspop-card__price { grid-area: price; font-size: 0.95rem; }
  .dj-fspop-card__hint  { grid-area: hint; min-height: 0; margin-bottom: 8px; }
  .dj-fspop-card__btn   { grid-area: btn; }
  .dj-fspop-card__flag  { font-size: 0.52rem; padding: 3px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-fspop__box,
  .dj-fspop__backdrop { transition: none; }
  .dj-fspop__bar > span { animation: none; }
}


/* ===========================================================
   v3.3 — TARJETA DE PRODUCTO EN CELULAR: 2 POR FILA, Y QUE QUEPA
   -----------------------------------------------------------
   En la home ya se ven 2 tarjetas por fila (data-per="4,3,2"), pero la
   tarjeta seguía usando las medidas de escritorio: título de 0.82rem,
   tallas de 26px, selector de cantidad de 62px y botón con 0.74rem y
   letras separadas. A 173 px de ancho (media pantalla de un celular
   normal) eso no cabía: el botón se cortaba, las tallas se montaban y
   la tarjeta medía 430 px de alto — dos filas y ya estabas fuera de
   pantalla.

   Aquí se baja TODO en la misma proporción. No se quita nada: se ven
   igual la foto, el título, el precio, los colores, las tallas, la
   cantidad y el botón de comprar. Solo que caben.

   Este bloque va en shop.css a propósito: es el último que carga y el
   único que gana a las reglas de `li.product` de más arriba.
   =========================================================== */
@media (max-width: 640px) {

  /* --- Título: sigue siendo una línea, pero más ajustado --- */
  .dj-product-carousel li.product .woocommerce-loop-product__title {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    padding: 9px 10px 0 !important;
  }

  /* --- Precio --- */
  .dj-product-carousel li.product .price {
    font-size: 0.8rem !important;
    padding: 2px 10px 6px !important;
    min-height: 18px;
  }
  .dj-product-carousel li.product .price del { font-size: 0.68rem !important; }

  /* --- Colores y tallas: más pequeños pero todavía tocables ---
     22px es el suelo. Por debajo el dedo no acierta y la talla
     deja de ser un botón para ser una rayita. */
  .dj-product-carousel li.product .dj-swatches {
    --dj-swatch-size: 22px;
    --dj-swatch-block: 50px;
    min-height: 50px;
    gap: 5px;
    padding: 0 10px 7px;
  }
  .dj-product-carousel li.product .dj-swatches__row { height: 22px; gap: 5px; }
  .dj-product-carousel li.product .dj-swatch--size,
  .dj-product-carousel li.product button.dj-swatch--size {
    font-size: 0.6rem !important;
    padding: 0 5px !important;
    min-width: 24px !important;
  }
  .dj-product-carousel li.product .dj-swatch--more { font-size: 0.6rem; }

  /* --- Fila de compra: cantidad + botón, en la misma línea --- */
  .dj-product-carousel li.product .dj-buy-row {
    margin: auto 10px 10px !important;
    gap: 5px;
  }
  .dj-product-carousel li.product .dj-qty { flex: 0 0 42px; }
  .dj-product-carousel li.product .dj-qty__select {
    min-height: 36px;
    font-size: 0.72rem;
    padding-left: 7px;
    padding-right: 14px;
  }
  .dj-product-carousel li.product .dj-qty__caret { right: 3px; }
  .dj-product-carousel li.product .dj-buy-btn {
    min-height: 36px;
    font-size: 0.63rem !important;
    letter-spacing: 0 !important;
    padding: 8px 4px !important;
    gap: 4px;
  }
  .dj-product-carousel li.product .dj-buy-btn svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }
  .dj-product-carousel li.product .dj-buy-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Chapas "Nuevo" y "Oferta": a media tarjeta, discretas --- */
  .dj-product-carousel li.product .dj-badge-new,
  .dj-product-carousel li.product span.onsale,
  .dj-product-carousel li.product span.onsale.dj-badge-sale {
    font-size: 0.58rem !important;
    padding: 3px 6px !important;
    letter-spacing: 0.2px !important;
    top: 7px !important;
  }
  .dj-product-carousel li.product .dj-badge-new { right: 7px !important; }
  .dj-product-carousel li.product span.onsale.dj-badge-sale {
    left: 7px !important;
    right: auto !important;
  }
}

/* Celulares estrechos (≤380): la tarjeta baja de 150 px de ancho.
   Medido en el navegador a 360 px: con las medidas de arriba la
   palabra "Agregar" se cortaba por 4 px y la fila de tallas se salía
   por 10 px. Aquí se recupera ese margen. */
@media (max-width: 380px) {
  .dj-product-carousel li.product .dj-qty { flex: 0 0 34px; }
  .dj-product-carousel li.product .dj-qty__select { padding-left: 5px; padding-right: 11px; }
  .dj-product-carousel li.product .dj-buy-btn {
    font-size: 0.58rem !important;
    padding: 8px 3px !important;
    gap: 3px;
  }
  .dj-product-carousel li.product .dj-buy-btn svg { width: 12px; height: 12px; }
  .dj-product-carousel li.product .woocommerce-loop-product__title {
    font-size: 0.68rem !important;
  }
  .dj-product-carousel li.product .dj-swatches__row { gap: 4px; }
  .dj-product-carousel li.product .dj-swatch--size,
  .dj-product-carousel li.product button.dj-swatch--size {
    font-size: 0.56rem !important;
    padding: 0 4px !important;
    min-width: 21px !important;
  }
}


/* ===========================================================
   v3.3 — TARJETA DE PRODUCTO EN TABLET (3 por fila)
   -----------------------------------------------------------
   Con 3 por fila la tarjeta baja a ~200 px. Los colores seguían a
   28 px: seis círculos más los huecos suman 198 px y la fila se
   cortaba por la derecha — el último color desaparecía y parecía
   que el producto no lo tenía. A 24 px caben los seis enteros.
   =========================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  .dj-product-carousel li.product .dj-swatches {
    --dj-swatch-size: 24px;
    --dj-swatch-block: 58px;
    min-height: 58px;
    gap: 6px;
    padding: 0 12px 8px;
  }
  .dj-product-carousel li.product .dj-swatches__row { gap: 5px; height: 24px; }
  .dj-product-carousel li.product .dj-swatch--size,
  .dj-product-carousel li.product button.dj-swatch--size {
    font-size: 0.64rem !important;
    padding: 0 5px !important;
    min-width: 24px !important;
  }
  .dj-product-carousel li.product .woocommerce-loop-product__title {
    font-size: 0.78rem !important;
    padding: 12px 12px 0 !important;
  }
  .dj-product-carousel li.product .price { padding: 3px 12px 8px !important; }
  .dj-product-carousel li.product .dj-buy-row { margin: auto 12px 12px !important; gap: 6px; }
  .dj-product-carousel li.product .dj-qty { flex: 0 0 52px; }
  .dj-product-carousel li.product .dj-buy-btn {
    font-size: 0.66rem !important;
    letter-spacing: 0 !important;
    padding: 9px 6px !important;
  }
}


/* ===========================================================
   v3.8 — "¡QUEDAN POCAS UNIDADES!"
   -----------------------------------------------------------
   La cantidad exacta no se enseña nunca (eso está en inc/stock.php).
   Cuando baja del umbral aparece esto, debajo del precio.

   Discreto a propósito: si grita más que el precio, deja de ser
   un dato y se convierte en publicidad — y el cliente que ve
   "¡ÚLTIMAS UNIDADES!" en las doce tarjetas de la fila no se lo
   cree en ninguna.
   =========================================================== */
li.product .dj-low-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 6px;
  font-family: var(--dj-font-body), sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #b26b00;
}
li.product .dj-low-stock__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e08b00;
  flex: 0 0 auto;
  animation: dj-low-stock-late 2.2s ease-in-out infinite;
}
@keyframes dj-low-stock-late {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

@media (max-width: 640px) {
  .dj-product-carousel li.product .dj-low-stock {
    margin: 0 10px 5px;
    font-size: 0.6rem;
  }
}

/* En la ficha del producto */
.woocommerce div.product .stock.dj-stock-low {
  color: #b26b00 !important;
  font-weight: 700;
}
.woocommerce div.product .stock.dj-stock-ok { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  li.product .dj-low-stock__dot { animation: none; }
}


/* ===========================================================
   v3.10 — LA TARJETA DE LA TIENDA, A LA MEDIDA DE LA PANTALLA
   -----------------------------------------------------------
   Mismo trabajo que se hizo en las filas de la home (v3.3), pero
   para la rejilla de la tienda, que ahora también va a 2 y 3 por
   fila.

   No es un capricho de tamaños: a 2 por fila en un celular la
   tarjeta mide unos 175 px. Con el título a 0.82rem, las tallas a
   26 px y el selector de cantidad a 62 px, el botón "Agregar" se
   corta y la fila de tallas se sale por la derecha. Aquí baja todo
   en la misma proporción: se sigue viendo la foto, el nombre, el
   precio, los colores, las tallas, la cantidad y el botón.
   =========================================================== */

/* --- TABLET: 3 por fila (tarjeta de ~230 px) --- */
@media (min-width: 641px) and (max-width: 1024px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.78rem !important;
    padding: 12px 12px 0 !important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price { padding: 3px 12px 8px !important; }

  .woocommerce ul.products li.product .dj-swatches,
  .woocommerce-page ul.products li.product .dj-swatches {
    --dj-swatch-size: 24px;
    --dj-swatch-block: 58px;
    min-height: 58px;
    gap: 6px;
    padding: 0 12px 8px;
  }
  .woocommerce ul.products li.product .dj-swatches__row { gap: 5px; height: 24px; }
  .woocommerce ul.products li.product .dj-swatch--size,
  .woocommerce ul.products li.product button.dj-swatch--size {
    font-size: 0.64rem !important;
    padding: 0 5px !important;
    min-width: 24px !important;
  }
  .woocommerce ul.products li.product .dj-buy-row { margin: auto 12px 12px !important; gap: 6px; }
  .woocommerce ul.products li.product .dj-qty { flex: 0 0 52px; }
  .woocommerce ul.products li.product .dj-buy-btn {
    font-size: 0.66rem !important;
    letter-spacing: 0 !important;
    padding: 9px 6px !important;
  }
}

/* --- CELULAR: 2 por fila (tarjeta de ~175 px) --- */
@media (max-width: 640px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    padding: 9px 10px 0 !important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    font-size: 0.8rem !important;
    padding: 2px 10px 6px !important;
    min-height: 18px;
  }
  .woocommerce ul.products li.product .price del { font-size: 0.68rem !important; }

  /* Miniaturas de galería fuera: a este tamaño son motas de polvo
     y lo que importa es que la foto principal se vea grande. */
  .woocommerce ul.products li.product .dj-product-thumbs,
  .woocommerce-page ul.products li.product .dj-product-thumbs {
    display: none !important;
  }

  .woocommerce ul.products li.product .dj-swatches,
  .woocommerce-page ul.products li.product .dj-swatches {
    --dj-swatch-size: 22px;
    --dj-swatch-block: 50px;
    min-height: 50px;
    gap: 5px;
    padding: 0 10px 7px;
  }
  .woocommerce ul.products li.product .dj-swatches__row { height: 22px; gap: 5px; }
  .woocommerce ul.products li.product .dj-swatch--size,
  .woocommerce ul.products li.product button.dj-swatch--size {
    font-size: 0.6rem !important;
    padding: 0 5px !important;
    min-width: 24px !important;
  }

  .woocommerce ul.products li.product .dj-buy-row { margin: auto 10px 10px !important; gap: 5px; }
  .woocommerce ul.products li.product .dj-qty { flex: 0 0 42px; }
  .woocommerce ul.products li.product .dj-qty__select {
    min-height: 36px;
    font-size: 0.72rem;
    padding-left: 7px;
    padding-right: 14px;
  }
  .woocommerce ul.products li.product .dj-qty__caret { right: 3px; }
  .woocommerce ul.products li.product .dj-buy-btn {
    min-height: 36px;
    font-size: 0.63rem !important;
    letter-spacing: 0 !important;
    padding: 8px 4px !important;
    gap: 4px;
  }
  .woocommerce ul.products li.product .dj-buy-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
  .woocommerce ul.products li.product .dj-buy-btn__label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .woocommerce ul.products li.product .dj-badge-new,
  .woocommerce ul.products li.product span.onsale,
  .woocommerce ul.products li.product span.onsale.dj-badge-sale {
    font-size: 0.58rem !important;
    padding: 3px 6px !important;
    letter-spacing: 0.2px !important;
    top: 7px !important;
  }
  .woocommerce ul.products li.product .dj-badge-new { right: 7px !important; }
  .woocommerce ul.products li.product span.onsale.dj-badge-sale { left: 7px !important; right: auto !important; }
}

@media (max-width: 380px) {
  .woocommerce ul.products li.product .dj-qty { flex: 0 0 34px; }
  .woocommerce ul.products li.product .dj-buy-btn { font-size: 0.58rem !important; padding: 8px 3px !important; gap: 3px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.68rem !important; }
  .woocommerce ul.products li.product .dj-swatches__row { gap: 4px; }
  .woocommerce ul.products li.product .dj-swatch--size,
  .woocommerce ul.products li.product button.dj-swatch--size {
    font-size: 0.56rem !important; padding: 0 4px !important; min-width: 21px !important;
  }
}


/* ===========================================================
   v3.11 — CARRITO Y PAGO EN CELULAR
   -----------------------------------------------------------
   WooCommerce trae dos carritos distintos y hay que servir a los
   dos: el clásico (tabla + "totales del carrito" a un lado) y el
   nuevo por bloques (`wc-block-*`), que es el que sale en la
   captura. Los dos están pensados para escritorio: dos columnas
   una al lado de la otra. En un celular eso no cabe, y lo que no
   cabe empuja el ancho de la página.

   Aquí se les obliga a ponerse en una sola columna y a no medir
   más que la pantalla.
   =========================================================== */
@media (max-width: 782px) {

  /* --- Carrito y pago POR BLOQUES --- */
  .wc-block-components-sidebar-layout {
    display: block !important;
  }
  .wc-block-components-main,
  .wc-block-components-sidebar,
  .wp-block-woocommerce-cart-items-block,
  .wp-block-woocommerce-cart-totals-block {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }

  .wc-block-cart-items,
  table.wc-block-cart-items {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .wc-block-cart-items__row { max-width: 100%; }

  .wc-block-cart-item__image,
  .wc-block-cart-item__image img {
    max-width: 72px;
    height: auto;
  }

  /* El bloque de totales: números a la derecha, etiquetas a la
     izquierda y nada que se salga. */
  .wc-block-components-totals-item {
    display: flex !important;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* El botón de pagar, a todo el ancho: es el que tiene que
     encontrarse con el pulgar sin buscarlo. */
  .wc-block-cart__submit-container a,
  .wc-block-cart__submit-container button,
  .wc-block-components-checkout-place-order-button {
    width: 100% !important;
    justify-content: center;
    text-align: center;
  }

  /* --- Carrito CLÁSICO --- */
  .woocommerce .cart-collaterals,
  .woocommerce-page .cart-collaterals,
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
  }
  .woocommerce table.shop_table_responsive,
  .woocommerce-page table.shop_table_responsive,
  .woocommerce table.cart,
  .woocommerce-page table.cart {
    width: 100% !important;
    display: block;
    max-width: 100%;
  }
  .woocommerce .quantity .qty { max-width: 70px; }
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; }

  /* Cupones y botones de la fila de acciones, uno debajo de otro:
     en dos columnas se solapaban y ninguno se podía tocar bien. */
  .woocommerce .coupon,
  .woocommerce-page .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .woocommerce .coupon .input-text,
  .woocommerce-page .coupon .input-text {
    flex: 1 1 140px;
    width: auto !important;
    min-width: 0;
  }
}


/* ===========================================================
   v3.11 — LAS OFERTAS DEL CARRITO, CENTRADAS EN CELULAR
   -----------------------------------------------------------
   El bloque de "completa tu envío gratis" nació para escritorio,
   con todo alineado a la izquierda. En una pantalla estrecha eso
   se lee mal: el ojo no tiene un eje al que agarrarse.
   =========================================================== */
@media (max-width: 640px) {
  .dj-upsell {
    padding: 22px 14px 26px;
    max-width: 100%;
    overflow: hidden;          /* nada de aquí dentro ensancha la página */
  }
  .dj-upsell__head { text-align: center; }
  .dj-upsell__badge { margin-left: auto; margin-right: auto; }
  .dj-upsell__title { font-size: 1.25rem; line-height: 1.15; }
  .dj-upsell__sub { font-size: 0.86rem; }

  /* La fila de tarjetas SÍ se desliza: se le devuelve el scroll
     que el `overflow: hidden` del padre no le quita. */
  .dj-upsell__grid { overflow-x: auto; }

  .dj-freeship__line { justify-content: center; text-align: center; flex-wrap: wrap; }
  .dj-freeship { text-align: center; }
  .dj-freeship__bar { margin-left: auto; margin-right: auto; }
}


/* ===========================================================
   v3.11 — QUE EL DEDO ACIERTE
   -----------------------------------------------------------
   Auditoría en el navegador a 390 px: los círculos de color y las
   tallas miden 22 px. Se VEN bien, pero un pulgar cubre unos 45
   px: el cliente apunta a "M" y le sale "L". Y una talla mal
   elegida no es una molestia, es una devolución.

   La solución no es agrandarlos —eso alargaría la tarjeta y
   volveríamos a la home kilométrica de la v3.2—: es agrandar la
   ZONA QUE ESCUCHA el toque, que es invisible y no ocupa sitio.
   Con `::after` estirado 7 px por cada lado, el punto de toque
   pasa de 22 a 36 px sin mover un solo píxel del diseño.
   =========================================================== */
@media (max-width: 1024px) {

  li.product .dj-swatch {
    position: relative;
  }
  li.product .dj-swatch::after {
    content: "";
    position: absolute;
    /* La zona invisible que recoge el toque */
    inset: -7px -4px;
    z-index: 1;
  }

  /* La cantidad y el botón de comprar: 40 px de alto mínimo, que
     es lo que mide un dedo con prisa. */
  li.product .dj-qty__select,
  li.product .dj-buy-btn {
    min-height: 40px;
  }

  /* "Ver todos" era un blanco de 17 px de alto. Ahora tiene aire
     por arriba y por abajo: mismo aspecto, el triple de acierto. */
  .dj-section-heading-row__link {
    padding: 9px 2px;
    margin: -9px 0;
    display: inline-block;
  }
}


/* --- Carrito: la cantidad y los botones, tocables --- */
@media (max-width: 782px) {
  .woocommerce .quantity .qty,
  .wc-block-components-quantity-selector input,
  input.qty {
    min-height: 42px !important;
    font-size: 16px !important;   /* 16px = iPhone no hace zoom al tocar */
  }
  .wc-block-cart__submit-container a,
  .wc-block-cart__submit-container button,
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
  .wc-block-components-checkout-place-order-button {
    min-height: 50px;
    display: inline-flex !important;
    align-items: center;
  }

  /* Cualquier campo de formulario: 16px o iOS hace zoom solo al
     tocarlo y el cliente se encuentra la página gigante. */
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="number"],
  .woocommerce input[type="password"],
  .woocommerce select,
  .woocommerce textarea,
  .wc-block-components-text-input input {
    font-size: 16px !important;
    min-height: 44px;
  }
}


/* --- Letra mínima legible en celular ---
   Medido: había textos a 8.3 px. Por debajo de 9-10 px la gente
   no lee: adivina. Estos son pequeños a propósito, pero no tanto. */
@media (max-width: 640px) {
  li.product .dj-badge-new,
  li.product span.onsale,
  li.product span.onsale.dj-badge-sale {
    font-size: 0.63rem !important;
  }
  li.product .dj-buy-btn {
    font-size: 0.63rem !important;
  }
  .dj-upsell__badge,
  .dj-upsell-card__unlock {
    font-size: 0.7rem;
  }
}


/* ===========================================================
   v3.14.2 — EL CARRITO, CENTRADO EN CELULAR Y TABLET
   -----------------------------------------------------------
   Los cupones, el total y el botón de pagar salían pegados a la
   izquierda y con un trozo fuera de la pantalla: se leía
   "…ted total" y el botón aparecía cortado.

   Son dos cosas distintas y hay que arreglar las dos:

   1) ANCHO. El carrito por bloques está pensado en dos columnas
      (artículos | totales). En un teléfono no caben, y lo que no
      cabe empuja: la página se hace más ancha que la pantalla y
      el navegador la deja desplazada de lado.

   2) SITIO. Aunque quepa, una columna estrecha pegada al borde
      izquierdo con medio metro de blanco a la derecha se lee como
      un error. Centrada, se lee como una decisión.

   Se aplica hasta 1024 px: la tablet en vertical tiene el mismo
   problema que el celular, solo que tarda un poco más en notarse.
   =========================================================== */
@media (max-width: 1024px) {

  /* --- El bloque entero, centrado y sin salirse --- */
  .wp-block-woocommerce-cart,
  .wc-block-cart,
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px;
    padding-right: 14px;
    float: none !important;
  }

  /* --- Totales, cupones y botón: una columna centrada --- */
  .wc-block-components-sidebar,
  .wp-block-woocommerce-cart-totals-block,
  .wc-block-components-totals-wrapper,
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .cart_totals {
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  /* Cada línea (Subtotal, Envío, Total): concepto a la izquierda,
     dinero a la derecha. Eso NO se centra — un precio centrado no
     se puede comparar de un vistazo con el de arriba. Lo que se
     centra es el bloque. */
  .wc-block-components-totals-item,
  .woocommerce-cart .cart_totals tr {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: left;
  }
  .wc-block-components-totals-item__value,
  .woocommerce-cart .cart_totals td { text-align: right; }

  /* "Add coupons" ocupando todo el ancho de su bloque */
  .wc-block-components-panel,
  .wc-block-components-totals-coupon {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* El botón de pagar: ancho completo y CENTRADO. Es el final del
     camino, tiene que estar donde cae el pulgar sin buscarlo. */
  .wc-block-cart__submit-container,
  .wc-block-cart__submit,
  .woocommerce-cart .wc-proceed-to-checkout {
    display: flex !important;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .wc-block-cart__submit-container a,
  .wc-block-cart__submit-container button,
  .wc-block-components-checkout-place-order-button,
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* Las barras del tema (envío gratis, ofertas) al mismo ancho que
     los totales, para que la columna se lea como una sola pieza. */
  .woocommerce-cart .dj-freeship {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Celular: el carrito manda en todo el ancho disponible */
@media (max-width: 640px) {
  .wp-block-woocommerce-cart,
  .wc-block-cart,
  .woocommerce-cart .woocommerce {
    max-width: 100% !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  .wc-block-components-sidebar,
  .wp-block-woocommerce-cart-totals-block,
  .woocommerce-cart .cart_totals { max-width: 100% !important; }
  .woocommerce-cart .dj-freeship { max-width: 100%; }
}


/* ===========================================================
   v7.2 — CANTIDAD + BOTÓN, APILADOS EN MOBILE Y TABLET
   -----------------------------------------------------------
   Hasta 1024px (celular y tablet) el botón de "Agregar al carrito" /
   "Elige tus opciones" se leía cortado: para que cupiera al lado del
   desplegable de cantidad, arriba se le venía apretando el font-size
   hasta 0.58rem y el padding hasta 3px. Ahora, en ese rango, el
   desplegable de cantidad pasa ARRIBA y el botón ocupa todo el ancho
   ABAJO — así el texto se lee completo, sin comprimir nada.
   En escritorio (>1024px) no cambia nada: siguen en la misma línea.
   Va al final del archivo a propósito: con !important y layout en
   columna le gana por cascada a todos los ajustes de arriba (que
   solo tocaban font-size/padding, pensados para la fila horizontal).
   =========================================================== */
@media (max-width: 1024px) {
  .woocommerce ul.products li.product .dj-buy-row,
  .woocommerce-page ul.products li.product .dj-buy-row,
  .dj-product-carousel li.product .dj-buy-row,
  li.product .dj-buy-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .woocommerce ul.products li.product .dj-qty,
  .dj-product-carousel li.product .dj-qty,
  li.product .dj-qty {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .woocommerce ul.products li.product .dj-qty__select,
  .dj-product-carousel li.product .dj-qty__select,
  li.product .dj-qty__select {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
  }

  /* El botón, a todo lo ancho y con letra legible de nuevo (se anulan
     los font-size/padding apretados de las reglas de arriba). */
  .woocommerce ul.products li.product .dj-buy-btn,
  .woocommerce-page ul.products li.product .dj-buy-btn,
  .dj-product-carousel li.product .dj-buy-btn,
  li.product .dj-buy-btn {
    flex: 1 1 auto !important;
    width: 100% !important;
    /* v8.6 — SIN ESTO EL BOTÓN SE SALE DE LA TARJETA.
       Con "width: 100%" el botón mide lo mismo que la fila... y
       encima se le suman los 10px de relleno de cada lado, así que
       terminaba 20px más ancho que la tarjeta y se desbordaba por la
       derecha (por eso además se veía descentrado). Con border-box,
       el relleno va incluido dentro de ese 100% y encaja justo. */
    box-sizing: border-box !important;
    min-height: 42px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.3px !important;
    padding: 11px 10px !important;
  }
  .woocommerce ul.products li.product .dj-buy-btn svg,
  .dj-product-carousel li.product .dj-buy-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  li.product .dj-buy-row--out .dj-buy-btn { flex: 1 1 auto !important; }

  /* v8.10 — EL TEXTO COMPLETO, EN DOS LÍNEAS Y CENTRADO.
     Hasta ahora el texto del botón iba obligado a una sola línea y,
     cuando no cabía, se cortaba con puntos suspensivos: "AGREGAR
     AL ...", "ELIGE TUS OPC...". En celular no cabe casi nunca, así
     que el cliente nunca terminaba de leer qué hace el botón.

     Aquí se levanta esa obligación (son TRES reglas distintas las
     que la imponen, de ahí la lista larga de selectores) y el texto
     pasa a partirse en dos líneas, centradas. El botón crece de
     alto lo necesario en vez de recortar la palabra.

     Se topa en 2 líneas con "line-clamp": si algún día un texto es
     larguísimo, se corta ahí en vez de estirar la tarjeta entera y
     descuadrar la rejilla. */
  .woocommerce ul.products li.product .dj-buy-btn__label,
  .woocommerce-page ul.products li.product .dj-buy-btn__label,
  .dj-product-carousel li.product .dj-buy-btn__label,
  li.product .dj-buy-btn__label {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: clip !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.15;
    width: 100%;
  }

  /* El botón deja de tener alto fijo: crece si el texto ocupa dos
     líneas, y todo queda centrado dentro. */
  .woocommerce ul.products li.product .dj-buy-btn,
  .woocommerce-page ul.products li.product .dj-buy-btn,
  .dj-product-carousel li.product .dj-buy-btn,
  li.product .dj-buy-btn {
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* En celular estrecho, un pelín menos para que quepa cómodo */
@media (max-width: 380px) {
  .woocommerce ul.products li.product .dj-buy-btn,
  .dj-product-carousel li.product .dj-buy-btn,
  li.product .dj-buy-btn {
    font-size: 0.74rem !important;
    padding: 10px 8px !important;
  }
}


/* ===========================================================
   v7.9 — FUERA EL MORADO DE WOOCOMMERCE
   -----------------------------------------------------------
   WooCommerce trae de fábrica un lila/morado (#a46497 en los botones,
   #7f54b3 en los avisos) que no tiene nada que ver con la marca.
   Aparecía en el botón "Añadir al carrito" de la ficha de producto,
   en los avisos de "producto agregado", en el botón de aplicar cupón,
   en las valoraciones... Aquí se cambia por el rojo de la casa DE UNA
   SOLA VEZ, para todos los botones de WooCommerce del sitio.

   Va al final del archivo a propósito: el CSS de WooCommerce carga
   después que el del tema, así que hace falta ganarle por !important
   y por posición.
   =========================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce .widget_price_filter .price_slider_amount .button {
  background: var(--dj-red, #FF0000) !important;
  background-color: var(--dj-red, #FF0000) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--dj-font-body), sans-serif !important;
  font-weight: var(--dj-weight-bold, 700) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: var(--dj-radius-sm, 4px) !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--dj-red-dark, #C40000) !important;
  background-color: var(--dj-red-dark, #C40000) !important;
  color: #fff !important;
}

/* Botón deshabilitado (producto agotado, falta elegir variación):
   gris, NO rojo apagado — tiene que leerse como "todavía no puedes",
   no como un botón rojo que no responde. */
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product .single_add_to_cart_button.disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {
  background: #b8b8bf !important;
  background-color: #b8b8bf !important;
  color: #fff !important;
  cursor: not-allowed;
}

/* Avisos de WooCommerce ("Producto agregado al carrito", errores):
   la franja de arriba venía en morado. */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--dj-red, #FF0000) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--dj-red, #FF0000) !important;
}
.woocommerce-error {
  border-top-color: var(--dj-red-dark, #C40000) !important;
}

/* Pestañas de la ficha de producto (Descripción / Información
   adicional / Valoraciones): la activa llevaba el morado. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--dj-red, #FF0000) !important;
}

/* Estrellas de valoración */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
  color: var(--dj-red, #FF0000) !important;
}

/* La barra del filtro de precio del sidebar */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background-color: var(--dj-red, #FF0000) !important;
}

/* El enlace "Limpiar" de las variaciones y el precio: el verde oliva
   de fábrica tampoco es de la marca. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--dj-black-soft, #111) !important;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  color: var(--dj-red, #FF0000) !important;
  text-decoration: none;
}


/* ===========================================================
   v8.11 — EL BOTÓN DE COMPRA, CENTRADO Y DENTRO DE LA TARJETA
   -----------------------------------------------------------
   Este bloque va AL FINAL del archivo a propósito.

   El botón se define y se corrige en varios sitios repartidos por
   shop.css (regla base, bloque de tablet, bloque de celular, bloque
   de carrusel). Entre tantas capas con "!important", el orden
   terminaba decidiendo cosas raras: el botón salía más ancho que la
   tarjeta y descentrado. Cuando dos reglas empatan en especificidad
   —y aquí empatan— gana la última del archivo. Por eso el ajuste
   definitivo se pone aquí, al final: para no seguir peleando con
   las de arriba.

   Lo que fija, en celular y tablet:
     · La fila va en columna (cantidad arriba, botón abajo).
     · El botón ocupa el ancho de la tarjeta, ni un pixel más.
     · El relleno cuenta DENTRO de ese ancho (border-box) — sin
       esto, los 8px de cada lado se sumaban al 100% y por eso se
       desbordaba.
     · El texto va centrado, en una o dos líneas.
   =========================================================== */
@media (max-width: 1024px) {

  .woocommerce ul.products li.product .dj-buy-row,
  .woocommerce-page ul.products li.product .dj-buy-row,
  .dj-product-carousel li.product .dj-buy-row,
  li.product .dj-buy-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    box-sizing: border-box !important;
  }

  .woocommerce ul.products li.product .dj-buy-btn,
  .woocommerce-page ul.products li.product .dj-buy-btn,
  .dj-product-carousel li.product .dj-buy-btn,
  li.product .dj-buy-btn,
  li.product .dj-buy-row--out .dj-buy-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: auto !important;
    min-height: 44px !important;
  }

  .woocommerce ul.products li.product .dj-buy-btn__label,
  .woocommerce-page ul.products li.product .dj-buy-btn__label,
  .dj-product-carousel li.product .dj-buy-btn__label,
  li.product .dj-buy-btn__label {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  .woocommerce ul.products li.product .dj-qty,
  .dj-product-carousel li.product .dj-qty,
  li.product .dj-qty {
    width: 100% !important;
  }
  .woocommerce ul.products li.product .dj-qty__select,
  .dj-product-carousel li.product .dj-qty__select,
  li.product .dj-qty__select {
    box-sizing: border-box !important;
    width: 100% !important;
  }
}


/* ===========================================================
   v8.12 — LOS DETALLES DE ESCRITORIO, TAMBIÉN EN CELULAR
   -----------------------------------------------------------
   Mismo motivo que en alive.css: todos los efectos de tarjeta de
   la tienda están escritos dentro de "@media (hover: hover)", que
   en una pantalla táctil no se aplica nunca. Aquí se traducen al
   dedo: lo decorativo siempre visible, lo de reacción con ":active"
   (mientras el dedo está apoyado).
   =========================================================== */
@media (hover: none) {

  /* --- Tarjeta "Siguiente página" / "Llegaste al final" ---
     En escritorio el resplandor rojo de la esquina crece y la
     flecha se corre al pasar el mouse. En celular el resplandor
     se queda encendido (es el detalle de marca) y la flecha
     reacciona al toque. */
  .dj-grid-card .dj-grid-card__link::before {
    transform: scale(1.12);
    opacity: 1;
  }
  .dj-grid-card:active .dj-grid-card__arrow {
    transform: translateX(6px);
  }
  .dj-grid-card:active .dj-grid-card__cta {
    color: #fff;
    border-color: var(--dj-red, #FF0000);
  }

  /* --- Tarjetas de producto recomendado (upsell) --- */
  .dj-upsell-card:active {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.30);
  }
  .dj-upsell-card:active .dj-upsell-card__media img {
    transform: scale(1.05);
  }

  /* --- Tarjetas del aviso de envío gratis --- */
  .dj-fspop-card:active {
    border-color: var(--dj-red, #FF0000);
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
  }
}


/* ===========================================================
   v10.0.3 — EL PRECIO, IGUAL EN LA HOME QUE EN LA TIENDA
   -----------------------------------------------------------
   En la tienda las tarjetas viven dentro de un contenedor con la
   clase "woocommerce", y TODO el CSS del precio cuelga de ahí
   (".woocommerce ul.products li.product .price"). Los carruseles
   de la portada usan la misma tarjeta pero NO están dentro de ese
   contenedor, así que ninguna de esas reglas les llegaba: el
   precio se quedaba con el color y la letra que trae WooCommerce
   de fábrica —un rosa que no es de la marca— y se veía distinto
   del de la tienda, en la misma página y a veces en la misma
   pantalla.

   Aquí se escribe el aspecto del precio UNA vez y se le da a los
   dos sitios, para que no puedan volver a separarse. Los
   "!important" son solo para los selectores de la home: ahí hay
   que ganarle a la hoja de WooCommerce, que apunta con más
   precisión.
   =========================================================== */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.dj-home-products__grid li.product .price,
.dj-star__grid li.product .price {
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: 1rem;
  font-weight: var(--dj-weight-bold, 700);
  color: var(--dj-red, #FF0000);
  min-height: 26px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
}

/* Solo la home necesita el refuerzo (ver arriba el porqué).

   El tamaño va un punto por encima del de la tienda a propósito: en
   la tienda el nombre del producto es más chico, así que un precio
   de 1rem ya destaca sobre él. En los carruseles de la portada el
   nombre es más grande y ese mismo precio se perdía — se veía
   "flaquito" al lado del título. Con 1.15rem la relación entre
   nombre y precio queda como la de la tienda, que es lo que se
   pidió: el precio en rojo, gordo, y que se vea primero. */
.dj-home-products__grid li.product .price,
.dj-star__grid li.product .price {
  font-family: var(--dj-font-body, 'Poppins', sans-serif) !important;
  font-weight: var(--dj-weight-bold, 700) !important;
  color: var(--dj-red, #FF0000) !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.01em;
  padding: 4px 14px 8px !important;
}

/* El precio viejo de una oferta: gris y sin negrita, en los dos sitios. */
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del,
.dj-home-products__grid li.product .price del,
.dj-star__grid li.product .price del {
  color: var(--dj-gray, #AEAEAF) !important;
  font-weight: var(--dj-weight-regular, 400) !important;
  text-decoration: line-through;
}

/* El precio nuevo: rojo y sin el subrayado que le pone el navegador. */
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins,
.dj-home-products__grid li.product .price ins,
.dj-star__grid li.product .price ins {
  color: var(--dj-red, #FF0000) !important;
  font-weight: var(--dj-weight-bold, 700) !important;
  text-decoration: none;
  background: transparent;
}

/* El símbolo y el importe nunca se parten en dos líneas. */
.dj-home-products__grid li.product .price .woocommerce-Price-amount,
.dj-star__grid li.product .price .woocommerce-Price-amount {
  white-space: nowrap;
  display: inline-block;
}

/* Celular: el mismo escalón que ya usa la tienda. */
@media (max-width: 600px) {
  .dj-home-products__grid li.product .price,
  .dj-star__grid li.product .price {
    font-size: 0.95rem !important;
    padding: 3px 12px 8px !important;
  }
}


/* ===========================================================
   v10.4.0 — EL CARRITO SE SALÍA POR LA IZQUIERDA
   -----------------------------------------------------------
   Síntoma: en la página del carrito la primera columna aparecía
   cortada — "PRODUCTO" se leía "ODUCTO" y la foto del producto
   quedaba partida contra el borde de la ventana.

   Causa, medida en la página en vivo:

     main.site-main            max-width 1140px, márgenes 62.5px
     .wp-block-woocommerce-cart.alignwide   margin: 0 -80px

   El bloque del carrito es "alignwide", y esa clase lo tira 80 px
   hacia fuera por cada lado para que respire. Pero al lado solo
   había 62.5 px de sitio: 62.5 − 80 = −17.5 px. El carrito nacía
   17 px FUERA de la pantalla.

   Y no se veía como una barra de scroll porque el <body> lleva
   `overflow-x: clip`: en vez de dejar desplazar, recorta. De ahí
   que pareciera un error de diseño y no un desbordamiento.

   Se anula el tirón solo en el carrito y el pago. En el resto de
   la web "alignwide" sigue funcionando igual, porque ahí los
   bloques sí tienen sitio de sobra a los lados.
   =========================================================== */
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart.alignfull,
.wp-block-woocommerce-checkout.alignfull {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* Cinturón y tirantes: si otro bloque ancho vuelve a asomarse, que
   se quede dentro en vez de recortarse contra el borde. */
.page-content > .alignwide,
.page-content > .alignfull {
  max-width: 100%;
}

/* El nombre del producto en el carrito se cortaba con puntos
   suspensivos ("Banda Elastica Ev…"). El cliente tiene que poder
   leer qué está comprando: se deja que ocupe las líneas que haga
   falta. */
.wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-metadata__description {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}