/* =========================================================================
   Ajustes sueltos — Venados Store (aditivo, reversible)
   1. Botón "Comprar" de las cards: aire entre el icono y el texto
   2. Mini-carrito lateral vacío: mismo trato que la página de carrito
   3. "Visto Recientemente": fondo blanco (compartía la banda oscura del
      pre-footer "Lleva tu pasión", que vive en la misma fila grid-row-bottom-1)
   2026-07-27
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) Botón "Comprar" — separación icono / texto
   ------------------------------------------------------------------------- */
/* El gap separa icono/texto; el padding despega el icono del borde de la
   pastilla (Journal deja el botón con padding 0 y el carrito pegado al filo). */
/* Journal fija `padding:0 !important` con selector de 5 clases
   (.main-products-style.product-grid .product-thumb .btn-cart.btn), así que
   hay que igualar o superar esa especificidad para que el padding entre. */
html body .main-products-style.product-grid .product-thumb .btn-cart.btn,
html body .main-products-style.product-list .product-thumb .btn-cart.btn,
html body .product-thumb .btn-cart.btn {
  gap: 9px;
  padding-left: 17px !important;
  padding-right: 19px !important;
}

/* -------------------------------------------------------------------------
   2) Mini-carrito lateral vacío
   ------------------------------------------------------------------------- */
html body .cart-content .venados-minicart-empty,
.venados-minicart-empty {
  padding: 26px 20px 24px !important;
  text-align: center;
  background: #fff !important;
}

.cart-content li:has(> .venados-minicart-empty) {
  background: #fff;
}

.venados-minicart-empty .vme-title {
  margin: 14px 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #111;
}

.venados-minicart-empty .vme-sub {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #7a7a7a;
}

.venados-minicart-empty .vme-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.venados-minicart-empty .vme-btn {
  display: block;
  padding: 11px 18px;
  border: 1.5px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111 !important;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.venados-minicart-empty .vme-btn:hover {
  background: #111;
  color: #fff !important;
}

.venados-minicart-empty .vme-btn-primary {
  background: #d41111;
  border-color: #d41111;
  color: #fff !important;
}

.venados-minicart-empty .vme-btn-primary:hover {
  background: #b00d0d;
  border-color: #b00d0d;
  color: #fff !important;
}

.venados-minicart-empty .vme-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
  width: 100%;
  max-width: 300px;
  font-size: 12px;
  line-height: 1.5;
  color: #9a9a9a;
}

/* -------------------------------------------------------------------------
   3) "Visto Recientemente" — fondo blanco
   La banda oscura de categorias.css apunta a .grid-row-bottom-1, que en el
   home es el pre-footer "Lleva tu pasión" (info_blocks) y en producto es el
   módulo de productos vistos. Sólo se aclara la variante de productos.
   ------------------------------------------------------------------------- */
.grid-row-bottom-1:has(.module-products):not(:has(.module-info_blocks)) .row-bg {
  background: #ffffff !important;
  border-top: 1px solid #ececec;
}

.grid-row-bottom-1:has(.module-products):not(:has(.module-info_blocks)) .module-title {
  color: #111 !important;
}

.grid-row-bottom-1:has(.module-products):not(:has(.module-info_blocks)) .title-main .item-all-link,
.grid-row-bottom-1:has(.module-products):not(:has(.module-info_blocks)) .title-main a {
  color: #6a6a6a !important;
}

.grid-row-bottom-1:has(.module-products):not(:has(.module-info_blocks)) .title-main a:hover {
  color: #111 !important;
}

/* Las cards ya son claras: se les devuelve el borde para que no floten */
.grid-row-bottom-1:has(.module-products):not(:has(.module-info_blocks)) .product-thumb {
  border: 1px solid #ececec;
}

/* ---------------------------------------------------------------------------
   BOTÓN DE QUITAR DEL CARRITO (mini-carrito y página del carrito)

   Venía casi blanco sobre fondo blanco y, además, su <i class="fa fa-times">
   no dibujaba nada: el tema no carga FontAwesome, así que el ::before salía
   vacío. Se oculta ese <i> y se pinta una papelera con un SVG incrustado, que
   no depende de ninguna fuente de iconos.
   (Que el botón además NO borrara es un bug aparte, arreglado en
   venados-redesign.js — ahí está explicado.)
--------------------------------------------------------------------------- */
html body .cart-remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8a8f98 !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* el glifo vacío de FontAwesome estorba: fuera */
html body .cart-remove > i {
  display: none !important;
}

html body .cart-remove::before {
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: var(--venados-papelera) center / contain no-repeat;
  mask: var(--venados-papelera) center / contain no-repeat;
}

:root {
  --venados-papelera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

html body .cart-remove:hover,
html body .cart-remove:focus-visible {
  background: #fdecec;
  color: #c52028 !important;
}

/* la celda que lo contiene no debe encogerlo */
html body .td-remove {
  width: 40px;
  vertical-align: middle;
}