/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* ==========================================================
   BODY
========================================================== */

body{

    background:#f1f1f1;

    color:#222;

}


/* ==========================================================
   HEADER
========================================================== */

.header{

    position:sticky;

    top:0;

    z-index:99;

    padding:20px;

    background:#111;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.30);

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    justify-content:center;

}


.logo img{

    width:90px;

    height:auto;

    object-fit:contain;

    display:block;

}


.logo h2{

    font-size:24px;

    color:#fff;

}


.logo p{

    font-size:13px;

    color:#ccc;

}


.user{

    margin-left:auto;

    width:46px;

    height:46px;

    border-radius:50%;

    background:#2a2a2a;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s;

    font-size:18px;

    color:#fff;

    border:1px solid #444;

}


.user:hover{

    background:#f5c400;

    color:#111;

    border-color:#f5c400;

}


/* ==========================================================
   BUSCA
========================================================== */

.search{

    position:relative;

}


.search > i{

    position:absolute;

    left:16px;

    top:50%;

    transform:
        translateY(-50%);

    color:#777;

    z-index:2;

}


.busca-container{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

}


.busca-container input{

    flex:1;

    width:100%;

    min-width:0;

    height:44px;

    border:none;

    outline:none;

    padding:
        13px
        15px
        13px
        42px;

    border-radius:30px;

    font-size:15px;

    background:#fff;

    color:#222;

}


.busca-container input::placeholder{

    color:#888;

}


/* ==========================================================
   BOTÃO COMPARTILHAR
========================================================== */

.btn-compartilhar{

    flex-shrink:0;

    height:44px;

    border:none;

    border-radius:24px;

    padding:
        0
        18px;

    background:#f5c400;

    color:#111;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.25);

    transition:.2s;

}


.btn-compartilhar:hover{

    background:#ffd633;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.35);

}


.btn-compartilhar:active{

    transform:
        scale(.96);

}


.btn-compartilhar i{

    font-size:15px;

}


/* ==========================================================
   CATEGORIAS
========================================================== */

.categorias{

    background:#fff;

    display:flex;

    align-items:center;

    gap:10px;

    overflow:visible;

    padding:14px;

    position:sticky;

    top:116px;

    z-index:90;

    border-bottom:
        1px solid #d5d5d5;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.06);

}


/* ==========================================================
   BOTÕES DAS CATEGORIAS
========================================================== */

.categorias > button,
.categoria-btn{

    border:none;

    background:#e5e5e5;

    color:#333;

    padding:
        10px
        18px;

    border-radius:30px;

    cursor:pointer;

    white-space:nowrap;

    font-weight:600;

    transition:.2s;

}


.categorias > button:hover,
.categoria-btn:hover{

    background:#d2d2d2;

}


.categorias > button.ativo,
.categoria-btn.ativo{

    background:#111;

    color:#f5c400;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.18);

}


/* ==========================================================
   MENU DE AROS
========================================================== */

.categoria-bicicleta{

    position:relative;

    display:inline-block;

}


.lista-bicicletas{

    position:absolute;

    top:calc(100% + 7px);

    left:0;

    min-width:350px;

    max-height:320px;

    overflow-y:auto;

    padding:5px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.18);

    z-index:9999;

}


.lista-bicicletas button{

    display:block;

    width:100%;

    padding:11px 13px;

    border:none;

    background:#fff;

    color:#222;

    text-align:left;

    cursor:pointer;

    border-radius:7px;

    font-size:20px;

    transition:.15s;

}


.lista-bicicletas button:hover{

    background:#f0f0f0;

}


.lista-bicicletas button.ativo{

    background:#111;

    color:#f5c400;

}


/* ==========================================================
   GRID
========================================================== */

.grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px,1fr)
        );

    gap:18px;

    padding:20px;

}


/* ==========================================================
   CARD
========================================================== */

.card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.09);

    transition:.2s;

    border:
        1px solid #e5e5e5;

}


.card:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.14);

}


/* ==========================================================
   FOTO
========================================================== */

.foto{

    position:relative;

    height:170px;

    overflow:hidden;

    background:#eee;

    cursor:pointer;

}


.foto img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.25s;

}


.foto:hover img{

    transform:
        scale(1.03);

}


/* ==========================================================
   INDICADOR DE GALERIA
========================================================== */

.indicador-fotos{

    position:absolute;

    bottom:8px;

    right:8px;

    background:
        rgba(0,0,0,.78);

    color:#f5c400;

    padding:
        5px 9px;

    border-radius:20px;

    font-size:11px;

    font-weight:bold;

    border:
        1px solid
        rgba(245,196,0,.5);

}


/* ==========================================================
   INFORMAÇÕES
========================================================== */

.info{

    padding:14px;

}


.tipo{

    font-size:11px;

    font-weight:bold;

    color:#666;

    margin-bottom:6px;

    text-transform:uppercase;

}


.desc{

    font-size:15px;

    height:38px;

    overflow:hidden;

    color:#222;

}


.cod{

    font-size:12px;

    color:#888;

    margin-top:8px;

}


.preco{

    margin-top:12px;

    font-size:22px;

    font-weight:bold;

    color:#111;

}


/* ==========================================================
   LOADING
========================================================== */

.loading{

    text-align:center;

    padding:30px;

    color:#666;

}


.loading i{

    font-size:28px;

    color:#111;

    animation:
        spin 1s linear infinite;

}


@keyframes spin{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


/* ==========================================================
   WHATSAPP
========================================================== */

.whats{

    position:fixed;

    right:20px;

    bottom:20px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#f5c400;

    text-decoration:none;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.30);

    z-index:999;

    border:
        2px solid
        #f5c400;

    transition:.2s;

}


.whats:hover{

    background:#f5c400;

    color:#111;

    transform:
        scale(1.05);

}


/* ==========================================================
   TOPO
========================================================== */

.topo{

    position:fixed;

    left:20px;

    bottom:20px;

    width:52px;

    height:52px;

    background:#111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#f5c400;

    cursor:pointer;

    z-index:999;

    border:
        2px solid
        #444;

    transition:.2s;

}


.topo:hover{

    background:#f5c400;

    color:#111;

}


/* ==========================================================
   MODAL GALERIA
========================================================== */

.modal-fotos{

    display:none;

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.82);

    align-items:center;

    justify-content:center;

    z-index:10000;

    padding:20px;

}


.janela-fotos{

    position:relative;

    width:min(
        1000px,
        96vw
    );

    height:min(
        800px,
        92vh
    );

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.6);

}


.fechar-fotos{

    position:absolute;

    right:10px;

    top:10px;

    z-index:10;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:
        rgba(0,0,0,.78);

    color:#fff;

    font-size:25px;

    cursor:pointer;

    transition:.2s;

}


.fechar-fotos:hover{

    background:#f5c400;

    color:#111;

}


.iframe-fotos{

    width:100%;

    height:100%;

    border:0;

    display:block;

    background:#fff;

}


/* ==========================================================
   LOGIN
========================================================== */

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.72);

    align-items:center;

    justify-content:center;

    z-index:9999;

}


.box{

    background:#fff;

    width:340px;

    padding:30px;

    border-radius:20px;

    text-align:center;

    position:relative;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.35);

}


.fechar{

    position:absolute;

    right:18px;

    top:10px;

    font-size:28px;

    cursor:pointer;

    color:#333;

}


.fechar:hover{

    color:#f5c400;

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:600px){

    .grid{

        grid-template-columns:
            repeat(2,1fr);

        padding:12px;

        gap:12px;

    }


    .foto{

        height:140px;

    }


    .card img{

        height:100%;

    }


    .logo h2{

        font-size:30px;

        color:#f5c400;

    }


    .modal-fotos{

        padding:0;

    }


    .janela-fotos{

        width:100vw;

        height:100vh;

        border-radius:0;

    }


    .fechar-fotos{

        top:12px;

        right:12px;

    }


    .btn-compartilhar{

        width:44px;

        height:44px;

        padding:0;

        border-radius:50%;

    }


    .btn-compartilhar span{

        display:none;

    }


    .btn-compartilhar i{

        font-size:17px;

    }

}


/* ==========================================================
   MOBILE PEQUENO
========================================================== */

@media(max-width:380px){

    .header{

        padding:14px;

    }


    .logo{

        gap:10px;

    }


    .logo img{

        width:48px;

        height:48px;

    }


    .logo h2{

        font-size:18px;

    }


    .logo p{

        font-size:11px;

    }


    .user{

        width:40px;

        height:40px;

    }


    .grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:8px;

        padding:8px;

    }


    .info{

        padding:10px;

    }


    .preco{

        font-size:19px;

    }

}