/* productos */
.item {
    color: #000000;
    font-size: 14px;
    font-weight: 400;
}
.item .precio span{
    font-weight: 600;   
}
.item .item-off {
    position: absolute;
    left: -20px;
    top: -20px;        
}
.item .item-thumb {
    position: absolute;
    right: -25px;
    top: -80px;
}
@media only screen and (min-width:1200px) {
    .item .item-thumb {
        top: -100px;
    }
}

.item .nombre-corto {
    min-height: 3em;
}
.item .item-inmediata {
    position: absolute;
    left: 0px;
    top: 52%;
}
.item .mas-vendidos {
    line-height: 12px;
    min-height: 1em;
}
.item .w-58 {
    width: 58%;
}
.descuento-dinamico {
    background-image: url('/2021/img/descuento.svg'); /* Ruta a tu imagen de fondo */
    background-position: center; /* Centrar la imagen */
    background-size: cover; /* Ajuste de tamaño automático */
    height: 0; /* Establecer altura inicial en 0 */

    width:  33%; /* Ajustar el ancho al contenido */
    padding-bottom: 33%; /* Porcentaje igual al ancho */

    color: white;
    font-weight: bold;
    rotate: -20deg;
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));

    left: -20px !important;
}
.descuento-dinamico span {
    font-size: 2vw;
    line-height: 1.7vw;
    position: absolute; /* Establece el elemento a centrar como absoluto */
    top: 50%; /* Coloca el elemento en el 50% de la altura del contenedor padre */
    left: 50%; /* Coloca el elemento en el 50% del ancho del contenedor padre */
    transform: translate(-50%, -50%); /* Desplaza el elemento hacia arriba y hacia la izquierda la mitad de su propio tamaño */
}
@media only screen and (max-width:768px) {
    .descuento-dinamico span {
        font-size: 4.5vw;
        line-height: 3.8vw;
    }
    .descuento-dinamico {
        width:  50%; /* Ajustar el ancho al contenido */
        padding-bottom: 50%; /* Porcentaje igual al ancho */

    }
}
@media only screen and (min-width:1200px) {
    .descuento-dinamico span {
        font-size: 23px;
        line-height: 19px;
    }
}


/* BOOTSTRAP OVERRIDES */
.bg-success.small{
    background-color: #1F8B41 !important;
    font-size: 0.6em !important;
}
.text-secondary.small {
    font-size: 0.75em !important;
}

/* VARIACIONES DESKTOP */
@media only screen and (min-width: 1024px) {
    .item, .filtros { font-size: 16px; }
    .item:nth-child(1n) { padding-left: 0 !important; }
}

.filtros .dropdown-menu {
    margin-top: -9px !important;
}

.item .item-thumb {
    /* top: 250px !important; */
    height: auto;
    width: 40%;
    min-width: 80px;
}
.item .card {
    border-radius: 0.5rem;
}
.item .card-footer {
    border-top: 1px solid rgba(183,183,183,1);
    border-width: 0.05rem;
}
.item h3 {
    font-size: 16px;
    color: #C2C2C2;
}
.item .item-off {
    left: -10px;
    top: -20px;
}
.rsc-item .img-thumbnail,
.item .img-thumbnail {
    border-radius: 0.25rem;
    border: 1px solid #DEDEDE;
    max-width: 80%;
    padding: 0.45rem !important;
}
.rsc-item .img-thumbnail.active,
.item .img-thumbnail.active {
    border: 2px solid rgba(205,49,78,0.8) !important;
}
.sitio-productos {
    min-height: 690px;
}

.dropdown-item:focus, 
.dropdown-item a:hover {
    background-color: #FFF !important;
}

.nav-item.active a:hover,
.nav-item.active {
    background: linear-gradient(115deg, #E30347 0%, #872369 100%);
    border-radius: 10px;
    color: #FFFFFF !important;
}
.nav-item a:hover {
    color: inherit;
    background: transparent;
}
.nav-item.active a,
.nav-item.active a:hover {
    color: #FFFFFF !important;
}

/* radio & checkbox */
.radio-div,
.checkbox-div {
    position: relative;
    padding-left: 38px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio-div input,
.checkbox-div input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.radio-rs,
.checkbox-rs {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    border: solid 1px #B9B9B9;
}

.radio-rs {
    border-radius: 50%;
}

.radio-div:hover input ~ .radio-rs,
.checkbox-div:hover input ~ .checkbox-rs {
    background-color: #ccc;
}
.radio-div input:checked ~ .radio-rs,
.checkbox-div input:checked ~ .checkbox-rs {
    background: linear-gradient(115deg, #E30347 0%, #872369 100%);
}
.radio-rs:after,
.checkbox-rs:after {
    content: "";
    position: absolute;
    display: none;
}

.radio-div input:checked ~ .radio-rs:after,
.checkbox-div input:checked ~ .checkbox-rs:after {
    display: block;
}

.radio-div .radio-rs:after,
.checkbox-div .checkbox-rs:after {
    left: 7px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}