#header-main .header-1 {
	padding: 0 !important;
}
#header-main .element-logo .logo a img {
    display: inline-block;
    max-width: 100%;
}

element.style {
}
.element-banner-main img {
    width: 100%;
    border-radius: 0px;
}
img {
    max-width: 100%;
}
product-thumbnails{
	border-radius 0px;
}
img {
    display: block;
    border-radius: 25px;
}

/* Estado original com transição suave */
.element-banner-stripe #banner-stripe > li {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex: 1 1 0%;
    gap: 8px;
    transition: all 0.3s ease; /* Adicionado para a sombra não aparecer de soco */
    cursor: pointer;
}

/* Efeito ao passar o mouse */
.element-banner-stripe #banner-stripe > li:hover {
    background-color: #fff; /* Opcional: altera o fundo se necessário */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Sombra suave */
    transform: translateY(-2px); /* Pequeno levante para dar profundidade */
}

.wrapper-product-combination .product-combination-list .product-combination-item.product-combination-unavailable label {
    cursor: default;
    border-radius: 13px;
}

.element-product-detail .wrapper-product-price .wrapper-btn-buy .btn {
    display: block;
    padding: 12px;
    width: 100%;
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse */
.element-product-detail .wrapper-product-price .wrapper-btn-buy .btn:hover {
    background-color: #000;       /* ajuste a cor se quiser */
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Estado original */
.element-banner-shop #banner-shop > li {
    font-size: 14px;
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    text-transform: uppercase;
    box-sizing: border-box;
    flex: 1 1 0%;
    /* Adições para o efeito funcionar melhor: */
    transition: all 0.3s ease; 
    cursor: pointer;
    border-radius: 8px; /* Opcional: arredonda os cantos para a sombra encaixar melhor */
}

/* Efeito ao passar o mouse (Hover) */
.element-banner-shop #banner-shop > li:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Sombra elegante */
    transform: translateY(-3px); /* Leve levante visual */
    z-index: 10; /* Garante que a sombra fique por cima dos itens vizinhos */
    background-color: #fff; /* Garante que o fundo não seja transparente na sombra */
}

/* 1. Ajuste no estado normal (preparação) */
#product-list-sidebar .product-list-item .product-list-item-inner, 
#product-list .product-list-item .product-list-item-inner {
    padding: 10px;
    border-radius: 15px; /* Arredondado moderno para combinar com suas outras fotos */
    background-color: #fff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e elegante */
    border: 1px solid transparent; /* Evita que o card "pule" ao adicionar borda no hover */
}

/* 2. Efeito de Sombra e Movimento ao passar o mouse */
.product-list-item:hover .product-list-item-inner, 
#product-list .product-list-item:hover .product-list-item-inner {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Sombra mais profunda e suave */
    
    transform: translateY(-5px); /* O card sobe levemente */
    border-color: #eee; /* Uma borda bem clarinha para destacar o card */
    z-index: 5;
}