/* ===========================================
                GLOBAL
=========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#171717;

    color:white;

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

    overflow-x:hidden;

}


/* ===========================================
              PROMOTIONAL POPUP
=========================================== */

#promo-popup{

    position:fixed;

    right:25px;

    top:300px;

    width:280px;

    background:#151515;

    border:2px solid #d8b26e;

    border-radius:10px;

    box-shadow:0 10px 35px rgba(0,0,0,.6);

    z-index:2000;

    overflow:hidden;

    transform:translateX(120%);

    opacity:0;

    transition:
        transform .8s ease,
        opacity .8s ease;

}


#promo-popup.show{

    transform:translateX(0);

    opacity:1;

}


#promo-popup img{

    display:block;

    width:100%;

    height:auto;

}


#promo-close{

    position:absolute;

    top:7px;

    right:7px;

    z-index:10;

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:rgba(15,15,15,.8);

    color:white;

    font-size:25px;

    line-height:25px;

    cursor:pointer;

    transition:.3s;

}


#promo-close:hover{

    background:#d8b26e;

    color:black;

}

.promo-text{

    margin:0;

    padding:12px 15px 15px;

    color:#dddddd;

    font-size:14px;

    line-height:1.5;

    text-align:center;

}

.promo-text strong{

    color:#d8b26e;

}


/*==========================================
                TOP BAR  black top bar 
==========================================*/

.top-bar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:32px;

    background:#111;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

    z-index:1100;

    font-size:13px;
	
	transition:background 1.5s ease;

}

.top-social{

    position:absolute;

    right:8.5%;

    top:83%;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    gap:10px;

}

.top-social img{

    width:30px;

    height:30px;

    display:block;

    transition:.3s;

}

.top-social img:hover{

    transform:scale(1.2);

    filter:none;

}



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

header{    

    position:fixed;

    top:32px;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:63px 8%;

    z-index:1000;

    background:rgba(17,17,17,1);

    transition:background 1.5s ease;

}

.header-phone{

    color:#F0FFFF;

    font-size:15px;

    letter-spacing:1px;

}

.header-email{

    font-size:15px;

    color:#cfcfcf;

    margin-top:4px;
	
	margin-left:15px;

}


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

.logo{

    position:absolute;

    top:1px;

    left:0;

    width:100%;

    height:88px;

    background:
        linear-gradient(#b7b7b7  ,#b7b7b7   )
        left 0 top 10px / 100% 2px no-repeat;

}

.logo::before{

    content:"";

    position:absolute;

    top:81px;

    left:0;

    width:calc(50% - 70px);

    height:2px;

    background:#b7b7b7  ;

}

.logo::after{

    content:"";

    position:absolute;

    top:81px;

    right:0;

    width:calc(50% - 70px);

    height:2px;

    background:#b7b7b7  ;

}

.logo-image{

    position:absolute;

    left:50%;

    top:1px;

    transform:translateX(-50%);

    width:340px;

}

/* Navigation */

.top-nav{

    position:absolute;

    top:100px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    gap:45px;

}

.top-nav a{

    text-decoration:none;

    color:white;

    font-size:14px;

    transition:.3s;

}

.top-nav a:hover{

    color:#d8b26e;

}


/* ===========================================
                HERO
=========================================== */

.hero{

    position:relative;

    height:100vh; /*= the hero is exactly 100% of the browser window height.*/ 

    overflow:hidden;

}

.hero-slideshow{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    z-index:0;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity 1.8s ease;

    animation:heroZoom 10s ease-out forwards;

}

.hero-image.active{

    opacity:1;

}

}

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.65),

        rgba(0,0,0,.45)

    );

    z-index:1;

}


/* ===========================================
              SIDEBAR
=========================================== */

#product-toggle{

    position:fixed;

    left:0;

    top:50%;

    transform:translateY(-80%);

    z-index:1001;

    padding:25px 10px;

    background:rgba(15,15,15,.85);

    border:2px solid #d8b26e;

    border-left:none;

    border-radius:0 8px 8px 0;

    color:#d8b26e;

    font-size:18px;

    letter-spacing:2px;

    cursor:pointer;

    writing-mode:vertical-rl;

    transition:.3s;

}


.product-menu{

    position:fixed;

    top:0;

    left:0;

    width:360px;

    height:100vh;

    background:rgba(15,15,15,.92);

    backdrop-filter:blur(12px);

    border-right:2px solid #d8b26e;

    z-index:1000;

    transform:translateX(-100%);

    transition:transform 0.7s ease;
	
	overflow:visible;

}

.product-menu.open{

    transform:translateX(0);

}

.product-menu .product-sidebar{

    position:relative;

    top:0;

    left:0;

    transform:translateY(70px);;

    width:100%;

    display:flex;

    flex-direction:column;

    flex-wrap:nowrap;

    justify-content:flex-start;

    align-items:stretch;

    gap:7px;

    padding:75px 17px 30px;
	padding-left:55px;

    box-sizing:border-box;

}

.product-button{

    min-width:100px;

	max-width:320px;
	
	flex:none;
	
	width:100%;

    padding:6px 12px;

    background:rgba(15,15,15,.65);

    backdrop-filter:blur(6px);

    border:2px solid #d8b26e;

    border-radius:6px;

    color:white;

    font-size:15px;

    font-weight:600;
	
	font-family:Segoe UI;

    text-align:center;

    cursor:pointer;

    transition:.30s;

}

.product-button:hover{

    background:#d8b26e;

    color:black;

	transform:scale(1.062);

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

}

.product-item{

    position:relative;

}


.product-preview{

    position:fixed;

    left:50vw;
    top:50vh;

    width:min(900px, 80vw);

    transform:translate(-50%, -50%);

    opacity:0;

    pointer-events:none;

    transition:opacity .6s;

    z-index:1100;

}


.product-preview.active{

    opacity:1;

    pointer-events:auto;

}

.preview-close{

    position:absolute;

    top:10px;

    right:15px;

    z-index:20;

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:rgba(15,15,15,.75);

    color:white;

    font-size:32px;

    line-height:40px;

    cursor:pointer;

    transition:.3s;

}

.preview-close:hover{

    background:#d8b26e;

    color:black;

}


.preview-prev,
.preview-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:20;

    width:55px;
    height:100px;

    border:none;

    background:rgba(15,15,15,.40);

    color:#d8b26e;

    font-size:50px;

    line-height:60px;

    cursor:pointer;

    transition:.3s;

}


.preview-prev{

    left:15px;

}


.preview-next{

    right:15px;

}


.preview-prev:hover,
.preview-next:hover{

    background:rgba(15,15,15,.95);

    color:white;

}

.product-preview img{

    display:block;

    width:auto;
    height:auto;
	
	max-width:100%;
    max-height:70vh;

    object-fit:contain;
	
	margin-left: auto;
    margin-right: auto;

    border-radius:12px;

    border:2px solid #d8b26e;

    box-shadow:0 10px 30px rgba(0,0,0,.5);

}


/*==========================================
            HERO BUTTON - Descubra as nossas lojas
==========================================*/


.hero-button{

    position:absolute;

    left:50%;

    bottom:160px;

    transform:translateX(-50%);

    z-index:10;
	
	font-size:22px;

    display:inline-block;

    padding:16px 34px;

    border:2px solid #d8b26e;

    border-radius:8px;
	
	background:rgba(25,25,25,.35);

	backdrop-filter:blur(6px);
	
	color:#d8b26e;

    text-decoration:none;

    color:#d8b26e;
	
	text-shadow: 0 3px 5px rgba(0,0,0,1);

    transition:.35s;
	
	white-space:nowrap;

}

.hero-button::before{

    content:"▼ ";

}

.hero-button::after{

    content:" ▼";

}

.hero-button:hover{

    background:#d8b26e;

    color:black;
	
	transform:scale(1.015)
					translateX(-50%);
	
}


/*==========================================
            HERO BOTTOM BAR
==========================================*/

.hero-bottom{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:20px 8% 24px;

    background:rgba(15,15,15,.90);

    backdrop-filter:blur(8px);

    z-index:2;

}

.hero-bottom h3{

    margin:0 0 18px;

    text-align:center;

    color:#d8b26e;

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

}

.store-list{

    display:grid;

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

    gap:10px 40px;

    text-align:center;

}

.store-list span{

    color:#eeeeee;

    font-size:15px;

    font-weight:400;

    letter-spacing:.5px;

}

.store-list span {
    cursor: pointer;
}

.store-list span:hover {
    color: #d8b26e;
}


/* ===========================================
                TITLES
=========================================== */

.section-title{

    text-align:center;

    font-size:48px;

    margin-top:90px;

    margin-bottom:60px;

}


/* ===========================================
                SHOPS
=========================================== */

#shops{

    scroll-margin-top: 160px;

}

.shops-grid{

    width:85%;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:30px;

}

.shop{

    background:#202020;

    border-radius:10px;

    overflow:hidden;

    transition:.35s;

    border:1px solid #333;

}

.shop:hover{

    transform:scale(1.05);

    border-color:#d8b26e;

}

.shop img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.shop:hover img{

    transform:scale(1.15);

}

.shop-info{

    padding:25px;

}

.shop-info h3{

    margin-bottom:12px;

}

.shop-info p{

    color:#bfbfbf;

    margin-bottom:25px;

}

.shop-address{
	
    display:flex;
	
    justify-content:left;
	
    gap:30px;
	
}

.shop-info a{

    text-decoration:none;

    color:#d8b26e;

    border:1px solid #d8b26e;

    padding:10px 18px;

    border-radius:7px;

    transition:.3s;

}

.shop-info a:hover{

    background:#d8b26e;

    color:black;

}


/* ===========================================
                LIGHTBOX
=========================================== */

#lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.lightbox-content{

	position:relative;

    width:90%;

    max-width:1200px;

    height:90vh;

    background:#1d1d1d;

    border-radius:18px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

#lightbox-img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.lightbox-image{

    position:relative;

    width:100%;

    height:82%;

}

/* ==========================
   Gallery Arrows
========================== */

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:120px;

    height:200px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:100;

}

.gallery-arrow.left{

    left:20px;

}

.gallery-arrow.right{

    right:20px;

}

.gallery-arrow span{

    width:70px;

    height:70px;

    border-radius:50%;

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

    color:white;

    font-size:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

.gallery-arrow:hover span{

    background:#d8b26e;

    color:black;

}

.lightbox-info{

    height:18%;

    padding:25px 35px;

    background:#202020;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

#popup-title{

    margin:0;

    font-size:28px;

}

#popup-address{

    color:#c8c8c8;

    margin:8px 0 18px;

}

#popup-map{

    width:fit-content;

    text-decoration:none;

    color:#d8b26e;

    border:1px solid #d8b26e;

    padding:10px 18px;

    border-radius:8px;

    transition:.3s;

}

#popup-map:hover{

    background:#d8b26e;

    color:black;

}

#close{

    position:absolute;

    top:25px;

    right:40px;

    font-size:55px;

    color:white;

    cursor:pointer;

    transition:.3s;
	
	 z-index:1000;

}

#close:hover{

    color:#d8b26e;

}

@keyframes popupZoom{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.language-switch{

    display:flex;

    gap:8px;

}

.language-switch button{

    background:transparent;

    color:white;

    border:1px solid #d8b26e;

    padding:8px 12px;

    border-radius:6px;

    cursor:pointer;

    transition:.3s;

}

.language-switch button:hover{

    background:#d8b26e;

    color:black;

}

.language-switch button.active{

    background:#d8b26e;

    color:black;

}

}


/* ===========================================
                GALLERY ARROWS
=========================================== */

.gallery-arrow{

    position:absolute;

    top:0;

    width:12%;

    height:100%;

    z-index:20;

    display:flex;

    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.gallery-arrow.left{

    left:0;

    justify-content:flex-start;

}

.gallery-arrow.right{

    right:0;

    justify-content:flex-end;

}

.gallery-arrow span{

    width:54px;

    height:54px;

    margin:20px;

    border-radius:50%;

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

    color:white;

    font-size:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

.gallery-arrow:hover{

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

}

.gallery-arrow:hover span{

    background:#d8b26e;

    color:black;

}

/* ===========================================
                ABOUT
=========================================== */

#about {
    padding:100px 8%;
}

.about-content {
    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:80px;

    max-width:80%;
    margin:auto;
}

#about-title {
    color:#d8b26e;
    font-size:32px;
    margin-bottom:30px;
    text-align:center;
}

#about-text {
    color:#dddddd;
    font-size:18px;
    line-height:1.8;
    text-align:left;
    max-width:1200px;
}

.about-social {
    text-align:center;
}

.about-social h3 {
    color:#d8b26e;
    font-size:32px;
    margin-bottom:25px;
    letter-spacing:2px;
    white-space:nowrap;
}

.about-social img {
    width:40px;
    margin:0 12px;
    transition:.3s;
}

.about-social img:hover {
    transform:scale(1.2);
    filter:none;
}



/* ===========================================
                RECRUITMENT
=========================================== */

#recruitment{

    padding:60px 8%;

    min-height:200px;

    background:#151515;

    text-align:Center;

}

#recruitment h2{

    color:#d8b26e;

    font-size:42px;

    margin-bottom:25px;

}

#recruitment p{

    color:#dddddd;

    font-size:42px;

    margin-bottom:60px;

}

.recruit-text{

    cursor:pointer;

    transition:.3s;

}

.recruit-text:hover{

    color:#d8b26e;

    transform:scale(1.05);

}


/* ===========================================
                FOOTER
=========================================== */

footer{
	
	border-top:1px solid rgba(216,178,110,.35);
	
    background:#111;

    text-align:center;

    padding:70px;

}

footer h2{

    margin-bottom:20px;
	
	color:#d8b26e; 
}

footer p{

    font-size:11px;


}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.1);

    }

}




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

@media (max-width: 1200px){

    .about-content{

        flex-direction:column;

        align-items:center;

        gap:60px;

    }

    #about-text{

        max-width:100%;

        text-align:left;
		
		font-size:16px;

    }

    .about-social{

        width:100%;

    }

}


@media(max-width:900px){

header{

    flex-direction:column;

    gap:20px;

}

nav{

    gap:20px;

    flex-wrap:wrap;

    justify-content:center;

}

.hero h2{

    font-size:48px;

}

.hero-content{

    left:6%;

    width:88%;

}

.shops-grid{

    width:95%;

}


    .hero-button{

        bottom:210px;

        font-size:17px;

        padding:12px 20px;

    }

	.header-phone{

		font-size:12px;

		letter-spacing:1px;

	}

	.header-email{

		font-size:12px;

		margin-top:2px;
	
		margin-left:5px;

	}


.store-list span{

    font-size:12px;
	
}

.top-social{

    top:38%;

}


}




@media (max-width:570px){

    #promo-popup{

        width:220px;
		
		height:380px;

        right:15px;

        bottom:15px;

    }
	
	.top-bar{

    position:absolute;

}
	
	.top-nav{

    position:absolute;

    top:100px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    gap:18px;

}
	
    header {
        position: absolute;
        padding: 80px 8%;
        line-height: 1.0;
        gap: 10px;
    }

    .top-left {
        display: flex;
        flex-direction: column;
    }

    .header-email {
        margin-left: 0;
        margin-top: 2px;
    }
	
	.top-social{

    top:118%;
	
}

#product-toggle{
	
	font-size:15px;

	padding:12px 5px;

    border:1px solid #d8b26e;

    border-left:none;

    border-radius:0 8px 8px 0;

    letter-spacing:2px;

}
	
    .hero-bottom {
        padding: 15px 4% 18px;
    }

.hero-button{

    bottom:245px;

	font-size:20px;
	
    padding:5px 10px;

}

    .store-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 15px;
    }

    .store-list span {
        font-size: 13px;
    }

}	
	
	    #about-text{
		
		font-size:13px;

    }



}