* {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

}


.product-h {
    transition: opacity 0.2s ease-in-out;
}

.vamp-bg {
    background-color: #000;
    color: white;
}


.diagonal-image {
  width: 100%;
  aspect-ratio: 4 / 3;        
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}


.diagonal-image .product-img {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease-in-out;
}


.diagonal-image img {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            
}


.bg-pink {
    background-color: rgb(234, 115, 250);
}


.wave-shadow-container {
    position: relative;
    overflow: hidden;
    display: block;
    height: fit-content;
}

.wave-shadow {
    filter: drop-shadow(0 3px 20px rgba(255, 0, 0, 0.6));
    display: block;
    width: 100%;
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2px;
    width: 100%;
    background-color: #eee;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}


.nav-link:hover::after,
.nav-link:focus::after {
    transform: scaleX(1);
    /* transform-origin: right;  */
}

body.container {
    white-space: pre-wrap !important;
}


.product-img {
    max-width: 100%;
    object-fit: contain;
}

.thumb-img {
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    cursor: pointer;
}

.thumb-img.active {
    border: 2px solid black;
}


.size-option {
    border: 1px solid #ccc;
    padding: 10px 15px;
    margin: 0 5px;
    cursor: pointer;
}

.size-option.disabled {
    text-decoration: line-through;
    pointer-events: none;
    opacity: 0.5;
}

.rating input {
    display: none;
}

.rating label {
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}

/* Hover en estrellas */
.rating label:hover,
.rating label:hover~label {
    color: #ff9900;
}

/* Marcar solo las seleccionadas hacia la izquierda */
.rating input:checked+label,
.rating input:checked+label~label {
    color: #ffc107;
}


@media (max-width: 768px) {
    .thumb-img {
        height: 60px !important;
    }
}