/* =========================================================
   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 (solo móvil/tablet)
   --------------------------------------------------------- */
.dj-shop-cart-fab {
  display: none; /* se muestra solo en el media query móvil */
}

.dj-shop-cart-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 78vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.2);
  z-index: 1002;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.dj-shop-cart-drawer.is-open {
  transform: translateY(0);
}
.dj-shop-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  background: #fff;
}
.dj-shop-cart-drawer__header h3 {
  font-family: var(--dj-font-display);
  text-transform: uppercase;
  margin: 0;
  font-size: 1.1rem;
}
.dj-shop-cart-drawer__close {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--dj-black-soft, #111);
}
.dj-shop-cart-drawer__body { padding: 16px 20px 24px; }
.dj-shop-cart-drawer .dj-mini-cart { background: transparent; padding: 0; }

.dj-shop-cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.dj-shop-cart-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}


/* ===========================================================
   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;
  }

  /* Botón flotante del carrito */
  .dj-shop-cart-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--dj-red, #FF0000);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    z-index: 999;
    cursor: pointer;
  }
  .dj-shop-cart-fab .dj-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--dj-black-soft, #111);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* 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: más baja y en horizontal, que no ocupe una pantalla --- */
@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: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 16px;
    padding: 20px;
  }
  .dj-grid-card__arrow { margin-bottom: 0; width: 44px; height: 44px; }
  .dj-grid-card__title { font-size: 1.2rem; margin-bottom: 4px; }
  .dj-grid-card__meta  { margin-bottom: 0; font-size: 0.72rem; }
  .dj-grid-card__bar   { display: none; }
  .dj-grid-card__cta   { margin-top: 14px; flex-basis: 100%; }
}


/* ===========================================================
   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);
}

.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; }

/* -----------------------------------------------------------
   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%; }
}