/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Edu+NSW+ACT+Cursive:wght@400..700&family=Noto+Sans+Duployan:wght@400;700&family=Noto+Sans+JP:wght@100..900&display=swap');


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

body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}


/* teteu */

header {
    background-color: #33333309;
    padding: 0;
    padding-top: 25px;
}

header .all{
    width: 100%;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
}

header .all nav{
    width: 74%;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.4);
    align-items: center;
    justify-content: space-between;
    display: flex;
}

header .all nav .lupa{
    border: none;
    cursor: pointer;
    background-color: #00000000;
    
    img{
        height: 20px;
        margin-right: 10px;
    }
}

header .all nav .center{
        display: flex;
        align-items: center;
        cursor: default;
    }
        
        
        
    
header .all nav .info{
        object-fit: cover;
        display: flex;
        align-items: center;
        gap: 8px;
        
        a{
            text-decoration: none;
            color: #333;
            margin-left: 2px;
            font-weight: bold;
        }
        
        a:nth-child(1) img{
            height: 16px;
            margin-right: 3px;
            vertical-align: calc(-2px);
        }
        
        a img{
            height: 22px;
            vertical-align: calc(-4px);
        }


    }
            
    main .main-section{
        background-image: url(../img/teteu/background.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .main-section nav{
        text-align: center;            
        justify-content: center;
        display: flex;
        width: 100%;
        
        ul{
            width: 80%;
            margin-bottom: 15px;
            text-align: center;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-evenly;
            

                li{
                    list-style: none;
                    gap: 10px;
                    cursor: pointer;
                }
                
                .diff{
                display: none;
            }
            
            a{
                font-size: 12px;
                text-decoration: none;
                color: #333333cf;
                font-weight: bold;

                &:hover{
                    text-decoration-line: underline;
                }
        }
    }
} 

    
    
    .main-section .collection {
        display: flex;
        justify-content: space-evenly;
        padding-top: 20px;
        align-items: center;
    }
    
    .collection .shop{
        display: flex;
            gap: 20px;
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 5px;
            font-size: 20px;
            flex-flow: column wrap;
            
            button{
                color: white;
                width: 110px;
                height: 40px;
                border: none;
                background-color: rgb(0, 35, 38);
                display: flex;
                font-size: 14px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: 0.2s;
                
                &:hover{
                    transform: scale(1.05);
                    background-color: rgb(0, 70, 75);
                }

            img{
                height: 13px;
                margin-right: 5px;
            }
        }
    }
    


    .main-section .img{
        width: 300px;
        height: 420px;
        margin-bottom: 20px;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

        img{
            transform: rotateY(180deg);
            width: 300px;
            height: 420px;
            border-radius: 5px;
            object-fit: cover;
        }
    }
    

main .nav{
    background-color: white;
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
    .nav .logos{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-bottom: 15px;
        width: 100%;
        
        img{
            transition: 0.3s ease;
            height: 80px;
            cursor: pointer;
        }

        a{
            text-decoration: none;
        }

        img:nth-child(3){
            height: 40px;
        }

        img:nth-child(5){
            height: 60px;
        }

        img:hover{
            transform: scale(1.1);
    }
}



main .imagens{
    background-color: white;
    padding: 3px;
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
}
    .imagens .principal{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        
        img{
            height: 500px;
            width: 500px;
        }
        &::before{
            content: "EXPLORE NEW AND POPULAR STYLES";
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size: 14px;
            letter-spacing: 2px;
            white-space: nowrap;
            background-color: white;
            padding: 10px;
            z-index: 2;
    }
        
    }

    .imagens .outros{
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 504px;
        height: 500px;
        
        img{
            object-fit: cover;
            height: 245px;
            width: 245px;
        }
    }
    




@media (max-width: 634px) {
    .nav {

        margin-bottom: 0;
        gap: 0;
        
        .logos{
            flex-direction: column;
            align-items: center;


            img:nth-child(1){
                margin-bottom: -30px;
            }

            img:nth-child(5){
                margin-top: -20px;
            }
        }
    }
}

    
@media (max-width: 800px) {
    .main-section span{
        display: none;
    }

    .main-section nav ul .diff{
        display: inline-block;
    }
    
}

@media (max-width: 920px) {
    .main-section li{
        margin-top: 5px;
        line-height: 15px;
    }

}
    
@media (max-width: 930px) {
        .collection {
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: auto;
            padding-bottom: 10px;
        
        .shop {
            justify-content: center;
            align-items: center;
        }

        .img {
            margin: 0;
            height: auto;
        }
    }

    .main-section {
        width: 100%;
        height: auto;
    }

    .nav .logos {
            align-items: center;
            text-align: center;
            margin: 0;
        
    } 

   
}

@media (max-width: 480px) {

    .main-section nav ul{
        overflow-x: scroll;
        margin-right: 10px;
        margin-left: 10px;
    }

    header nav {
        align-items: center;
        flex-direction: column;
    }

    header nav .center {
        align-items: center;
    }

    .main-section nav ul {
        gap: 10px;
    }
    
}

@media (max-width: 1070px) {
    .imagens {
        flex-direction: column;

        .outros {
            margin-left: 30px;
        }
        .principal{
            margin-right: 0;
            margin-bottom: 10px;
        }


    }
    
}

@media (max-width: 552px) {

    .main-section nav ul li a{
        font-size: 10px;
        line-height: 3px;
    }

    .imagens .principal img{
        height: 300px;
        width: 300px;
    }
    .imagens .outros {
        height: 300px;
        width: 300px;
        align-content: center;
        margin-left: 40px;
        margin-top: -15px;
        
        img{
            height: 145px;
            width: 145px;
        }
    }
}
























/* Miguel */

.newsletter{
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    padding-bottom: 6pc;
}

.product-filter-bar {
  display: flex;
  justify-content: space-around; 
  align-items: center;
  background: #fff;
  padding: 10px 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}


.filter-list {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;

}


.filter-list li {
  color: #888;
  font-weight: 500;
  cursor: pointer;
  font-size: 15px;
  transition: color 0.2s;
}

.filter-list li.active {
  color: #222;
  font-weight: bold;
}

.filter-list li a{
    text-decoration: none;
    color: #333;
}

.filter-list li:hover{
    color: black;
}

.filter-btn {
  background: #222a31;
  color: #fff;
  border: none;
  padding: 7px 18px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: 0.3s;
}

.filter-btn span {
  font-size: 13px;
}

.filter-btn:hover {
  background: #555;
}



.imgbes-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 3px 0;
    background: #fff;
    align-items: center;
}

.product-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 18px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 220px;
    min-height: 100px;
    object-fit: cover;
}

.product-card img {
    width: 100%;
    height: 250px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.product-card img:hover {
    transform: scale(1.05);
    transition: 0.3s;
}

.product-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
}

.product-meta {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: #888;
    align-items:center;
}

.product-meta .category {
    color: #888;
}

.product-meta .price {
    color: #222;
    font-weight: bold;
}

.product-meta .old-price {
    color: #888;
    text-decoration: line-through;
    margin-right: 5px;
}

.label {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.label.hot {
    background: #e74c3c;
}

.label.sale {
    background: #222;
}

.product-title{
    font-size: 85%;
}

/* Responsive product card grid */

/* Desktop: 4 per row */
.imgbes-flex .product-card {
    width: 220px;
}

/* Tablet: 2 per row */
@media (max-width: 900px) {
    .imgbes-flex {
        gap: 20px;
    }
    .imgbes-flex .product-card {
        width: calc(50% - 20px);
        
    }
    .imgbes-flex  .product-card img {
        width: 100%;
        height: auto;
        object-fit: cover;

    }

}

/* Mobile: 2 per row */
@media (max-width: 600px) {
    .imgbes-flex {
        gap: 10px;
    }
    .imgbes-flex  .product-card img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}








/*teteu Zara Imagens*/
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');
.gigio{
    height: 40pc;
    width: 100%;
    display: flex;
    justify-content: right;
    background-image: url(../img/teteu/zara.svg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    object-fit: cover;
    background-repeat: no-repeat;

    .text{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        width: 45pc;
        background-repeat: no-repeat;
        background-position-x: 100%;
        background-position-y: 25%;
        background-size: 40pc;
        background-image: url(../img/teteu/zara-logo-opacity.png);

        img{
            width: 250px;
            height: 80px;
        }

        p{
            line-height: 2.2pc;
            color: white;
            font-size: larger;
        }

        button{
            font-size: 17px;
            height: 50px;
            border: none;
            border-radius: 0;
            width: 170px;
            
            h3{
                font-weight: 300;    
            }


            &:hover{
                background-color: #b1b1b1;
            }
        }
    }
}



@media (max-width: 1308px){
    .gigio{
        background-position: center;
        background-size: cover;
        background-attachment: local;
        justify-content: center;
        background-image: url(../img/teteu/zara-media.png);

        .img{
            display: none;
        }
        .text{
            text-align: center;
            align-items: center;
            width: 100%;
            height: auto;
            background-image: none;
        }
    }
}

@media (max-width: 438px) {
    .gigio .text p{
        font-size: 14px;
        box-shadow: 2px #000;
    }
}










/* lulu */

.bestsell{
    padding-top: 6pc;

    h2{
        text-align: center;
        padding: 20px;
    }

    p{
       display: flex;
       justify-content: center;
    }
    button{
       display:flex;
       align-self: flex-end;
    }
    

}

.cbests{
    display: flex;
    justify-content: center;
    gap: 470px;

    button{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 22px;
        color: white;
        background-color: black;
    }

}

 .listabest {
    display: flex;
    gap: 20px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #888;
    
    b{
        color: #1a1818;
    }

}

.listabest li:hover {
    cursor: pointer;
    color: black;
}

.imgbes{
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 20px;
    
}

.vesver, .bolsa, .hoodamare, .tennis{
    position: relative;
    flex-direction: row;
    justify-content: center;
    
    width: 190px;
    height:300px;

}

.hoodamare{
    background-color: rgb(240, 240, 245);
    display: flex;
    align-items: center; 
    img{
        height: 300px;
    }

}
.bolsa{
    background-color: rgb(235, 235, 235);
    img{
        width: 200px;
        height: 300px;
     }
    }


.vesver{
    background-color: rgb(240, 240, 245);
    display: flex;
    justify-content: center;
     img{
        width: 250px;
        height: 300px;
     }
}

.tennis{
    background-color: rgb(235, 235, 235);
    display: flex;
    align-items: center; 
    img{
        width: 210px;
        height: 300px;
     }

}


.disc_imgbest {
    display: flex;
    justify-content: center;
    ul {
        display: flex;     
        gap: 40px;         
        list-style: none;   
        padding: 0;
        margin: 0;
    }
    
    li {
        text-align: center;
        font-size: 14px;
    }
}



.itensbest {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    width: 200px;

    p {
        text-align: center;
        font-size: 12px;
        margin-top: 10px;
    }
}

.catbst {
    color: grey;
}
.catbest{
    color: grey;
    font-size: 12px;
    margin-top: 10px;
}

.catpbest {
    display: flex;
    justify-content: space-between; 
    width: 100%;
    margin-top: 5px;
}

.catbsti {
    color: grey;
    font-size: 12px;
    position: relative;
    left: 20px;
}

.precobst {
    position: relative;
    right: 11px;
    font-weight: bold;
    color: rgb(233, 99, 9);
}

.inbst{
     position: absolute;  
    top: 10px;           
    left: 1px;         
    color: white;
    font-size: 12px;
    background-color: rgb(0, 0, 0);  
    font-weight: bold;
    padding: 5px 8px;
}
.inbsti{
    position: absolute;  
    top: 9px;           
    left: 1px;         
    background-color: rgb(247, 111, 111);  
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
}

.precobsto{
    position: relative;
    right: 11px;
    font-weight: bold;
    color: black;


}
.soall{
    font-size: 9.5px;
}

.soall:hover{
    background-color: rgb(80, 80, 80);
}

@media (max-width: 860px) {
    .imgbes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly; 
    
        align-items: center;
    }

    .cbests {
        gap: 10px;
    }
    
    .listabest {
        gap: 10px;
    }
}


/* dadinho */


.follow {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #eaeaea;
    gap: 30px;
    padding: 20px;
    max-height: 70%;
}

.follow .prod .labubu .img{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
}


.sla{
    display: flex;
    gap: 20px;
    width: 36%;
    justify-content: center;
}
    
    .follow .prod {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 300px;
    }
    
    .follow .sla .input {
        width: 80%;
        border: none;
        border-bottom: 2px solid #000;
        background: transparent;
        padding: 10px 5px;
        font-size: 16px;
        outline: none;
    }

.follow .sla .submit {
    border: none;
    width: auto;
    border-bottom: 2px solid #000;
    background: transparent;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 10px 5px;
    text-align: left;
    transition: 0.3s;
    
    &:hover {
        color: #555;
        border-bottom: 2px solid #555;
    }
}



.section-1 {
    display: flex;
    background-color: #f4f4f4;
    height: 500px;
    padding: 80px;
    justify-content: space-between;
    width: 80%;

}



footer {
    display: flex;
    background-color: #01012d;
    width: 100%;
    height: 70px;
    color:#f4f4f4;
    align-items: center;
    justify-content:space-around;
    padding: 20px;

    a{
        text-decoration: none;
        color: white;
    }
}

.cartoes {
    display: flex;
    border-radius: 20px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.icons {
    display: flex;
    justify-content: space-around;
}
    
    
    
    .text {
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }


.cat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    min-width: 60%;
    gap: 40px;
}
.catalogo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.custome {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contat {
    display: flex;
    justify-content:flex-start;
    align-items: first baseline;
    flex-direction: column;
}

.containe-4 {
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* Responsividade */
@media (max-width: 1024px) {
  .section-1 {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 40px;
    gap: 30px;
  }

  .cat {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

   .img-2 {
    height: 130px;
  }


@media (max-width: 768px) {
  .input {
    width: 90%;
    font-size: 14px;
  }

  .submit {
    width: 90%;
    font-size: 14px;
    text-align: left;
  }

  .sla{
    width: 80%;
  }

  footer {
    flex-direction: column;
    gap: 10px;
    height: auto;
    padding: 20px 10px;
    
    .text {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

  .cartoes {
    width: 80%;
    height: auto;
    padding: 5px 10px;
  }


  .follow {
   text-align: center; 
  }

  .img-2 {
  height: 75px;
  display: flex;
  flex-wrap: wrap;

  }
 
}

@media (max-width: 480px) {
  .section-1 {
    padding: 20px;
    gap: 20px;
  }

  .input, .submit {
    width: 100%;
    text-align: center;
    font-size: 13px;
  }

  .contat {
    align-items: center;
    text-align: center;
  }

  .cat {
    min-width: 100%;
    gap: 15px;
  }
    .img-2 {
  height: 60px;
  display: flex;
  flex-wrap: wrap;

  }
}