/* ===== Fondo gris premium ===== */
html, body { min-height: 100%; }

body{
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 520px at 82% 12%, rgba(230,236,245,.75) 0%, rgba(230,236,245,0) 60%),
    linear-gradient(180deg, #f6f7f9 0%, #eef1f5 45%, #e7ecf2 100%);
  background-attachment: fixed;
}


/* =========================================================
   PRODUCTOS (2:3) + bordes redondeados
   ========================================================= */

.product-item-image-container > div {
  padding-bottom: 150% !important; /* 2:3 */
  border-radius: 16px !important;
  overflow: hidden !important;
}

.product-item-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}


/* =========================================================
   CATEGORÍAS (textbanner) – CORREGIDO 100%
   - Bordes redondeados reales
   - Sombra visible y pareja
   - Texto blanco con fondo oscuro
   - Capas ordenadas (sin “pastillas” raras)
   ========================================================= */

/* 1) Card externa: sombra + borde */
.textbanner,
.textbanner-item{
  position: relative !important;
  margin: 12px 10px !important;           /* aire arriba/abajo */
  border-radius: 18px !important;
  background: transparent !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,.14),
    0 3px 8px rgba(0,0,0,.10) !important;
}

/* 2) Imagen (base) */
img.textbanner-image{
  display: block !important;
  width: 100% !important;
  border-radius: 18px !important;

  position: relative !important;
  z-index: 1 !important;                  /* imagen abajo */
}

/* 3) Capa “marco” invisible (no tapa nada) */
.textbanner::after,
.textbanner-item::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;

  background: transparent !important;     /* CLAVE: no genera overlay */
  z-index: 2 !important;                  /* arriba de la imagen */
}

/* 4) Texto: blanco + fondo oscuro (siempre arriba) */
.textbanner-text,
.textbanner-text.gallery-text-container{
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  padding: 6px 14px !important;
  background: rgba(0,0,0,.55) !important;
  border-radius: 999px !important;

  z-index: 3 !important;                  /* texto arriba de todo */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;

  width: fit-content !important;
  max-width: 90% !important;
}

/* 5) Título */
.textbanner-text .gallery-title{
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  line-height: 1.1 !important;
  color: #fff !important;

  -webkit-text-stroke: 0 !important;      /* sin borde */
  text-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
}

/* 6) Ocultar descripción */
.textbanner-text .gallery-description{
  display: none !important;
}

/* 7) Mobile ajustes */
@media (max-width: 768px){
  .textbanner,
  .textbanner-item{
    margin: 10px 6px !important;
    border-radius: 16px !important;
  }

  img.textbanner-image{
    border-radius: 16px !important;
  }

  .textbanner-text,
  .textbanner-text.gallery-text-container{
    bottom: 12px !important;
    padding: 6px 12px !important;
  }

  .textbanner-text .gallery-title{
    font-size: 15px !important;
  }
}