* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    height: 100vh;
    width: 100%;
}

::-webkit-scrollbar{
    display: none;
}


#logo {

    height: 70px;
    width: 140px;
}


#emCima{
    height: 10%;
    width: 100%;
    position: relative;
}


span.reduzido {
    font-size: 12px;
    color: #6fb9ff;
}

h1{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}

i{
    color: white;
}

span{
    color: white;
}

/* Footer navigation buttons */
/* Esconde o footer por padrão e exibe apenas em dispositivos móveis */
footer { display: none; background: #111; padding: 8px 0; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; }

@media (max-width: 768px) {
    footer { display: block; }
    .footer-nav { display: flex; justify-content: space-around; align-items: center; width: 100%; padding: 0 6px; }
    .footer-btn { background: transparent; border: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; padding: 8px 6px; flex: 1; }
    .footer-btn i { font-size: 20px; }
    .footer-btn span { font-size: 10px; display: block; }
    body { padding-bottom: 70px; }
}

@media (min-width: 769px) {
    /* Mesmo escondido, garante que os labels não apareçam em desktops */
    .footer-btn span{ display: none; }
}









/* =============== Absolute Center Spinner ===============*/

div#loading {
    display: none;
}


#loading {

    position: fixed;
    z-index: 999;

    height: 2em;
    width: 2em;

    overflow: show;

    /*CENTRALIZANDO O ELEMENTO*/
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: none;

}


/* Transparent Overlay */
#loading:before {

    content: '';
    display: block;
    position: fixed;

    top: 0;
    left: 0;

    height: 100%;
    width: 100%;


    background: radial-gradient(rgba(20, 20, 20, .8), rgba(0, 0, 0, .8));
}



/* :not(:required) hides these rules from IE9 and below */
#loading:not(:required) {

    /* hide "loading..." text */

    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;


}

#loading:not(:required):after {

    content: '';
    display: block;

    font-size: 10px;

    height: 1em;
    width: 1em;
    margin-top: -0.5em;

    animation: spinner 2s infinite linear;
    border-radius: 0.5em;
    box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;


}


/* Animation */
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);


    }
}






/* =============== End Absolute Center Spinner ===============*/



.image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.image-skeleton {
    width: 100%;
    padding-top: 100%;
    /* mantém proporção quadrada */
    background: linear-gradient(90deg, #f0f0f0 25%, #e2e2e2 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: loading 1.2s ease-in-out infinite;
    border-radius: 10px;
}

.product-img {
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    object-fit: cover;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

@keyframes loading {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.product-img.loaded {
    opacity: 1;
}