.bs-subscription__title strong
Specificity: (0,1,1)
 {
    color: #427978;
}
.bs-categories__title {
  text-align: center;
  word-break: break-word;
  font-size: 16px;
}
.bs-categories.grid .bs-categories__img img {
  width:75% !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}

.bs-categories.grid {
    --slider-margin: 1rem;
    --cols-xl: 3;
    --cols-lg: 3;
    --cols-md: 3;
    --cols-sm: 2;
    --cols: 1;
    --banner-title-bg: #0000007d;
    --banner-title-color: black;
    --banner-title-font-size: 2rem;
    --banner-border-radius: 0;
    --banner-title-transform: uppercase;

    position: relative;         /* Necesario para el ::before */
    overflow: hidden;           /* Evita que el blur se salga */
}

.bs-categories.grid::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url(https://dojiw2m9tvv09.cloudfront.net/107947/1/tiposdepielbanner.png?95);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: blur(8px);          /* ???? Difuminado */
    opacity: 1;               /* ???? Transparencia */
    
    z-index: -1;                /* Lo envía detrás del contenido */
}


/* Botones de navegación del slider */
.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.4);
    color: transparent;            /* Oculta el texto "Next"/"Previous" */
    border: none;
    border-radius: 50%;
    display: flex;                 /* Centra el ícono */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0;                  /* Asegura que el texto no ocupe espacio */
    overflow: hidden;              /* Evita que el texto se vea */
}

.slick-prev:hover,
.slick-next:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Flechas visuales */
.slick-prev::before,
.slick-next::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform-origin: center;
}

/* Direcciones */
.slick-prev::before {
    transform: rotate(-135deg);
}

.slick-next::before {
    transform: rotate(45deg);
}

/* Posiciones base */
.slick-prev,
.slick-next {
    top: 45%; /* puedes ajustar entre 40–55% según la altura del slider */
    transform: translateY(-50%);
}

/* ???? Ajuste individual de cada flecha */
.slick-prev {
    left: 10px;  /* distancia desde el borde izquierdo */
}

.slick-next {
    right: 20px; /* ???? mueve manualmente hacia adentro o afuera */
    /* también puedes ajustar la altura si no está centrada */
    top: 45%;    /* o usa calc(50% + 5px) para bajarla un poco */
}

/* GRID DE LA COLECCIÓN */
.bs-collection.grid {
    display: grid;
    gap: 16px;
}

/* Desktop grande: 4 columnas */
@media (min-width: 1200px) {
    .bs-collection.grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablets / laptops pequeñas: 3 columnas */
@media (min-width: 768px) and (max-width: 1199px) {
    .bs-collection.grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Móviles grandes: 2 columnas */
@media (min-width: 480px) and (max-width: 767px) {
    .bs-collection.grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móviles pequeños: 1 columna */
@media (max-width: 479px) {
    .bs-collection.grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    background-color: black;
}