.page-home{
    background:var(--cream);
    font-family:var(--font-primary);
    color:var(--red);
}

/* HERO */

.hero{
    position:relative;
    min-height: 900px;
    text-align:center;
    overflow:hidden;
    padding-top: 55px;
}

.hero__stage{
    position:relative;
    width:100%;
    height:780px;
    margin-inline: auto;
}

.hero__title{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:420px;
    z-index:5;
}

.hero__box{
    position:absolute;
    left:50%;
    top:215px;
    transform:translateX(-50%);
    width:375px;
    height:405px;
    object-fit:fill;
    z-index:1;
}

.hero__burger{
    position:absolute;
    left:50%;
    top:245px;
    transform:translateX(-50%);
    width:735px;
    z-index:4;
    transition:filter 0ms;
}

.hero__burger:hover{
    filter:saturate(1.15) contrast(1.08);
}

.hero__side{
    position:absolute;
    top:250px;
    font-size:35px;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    color:var(--red);
    z-index:6;
}

.hero__side--left{
    left:45px;
}

.hero__side--right{
    right:45px;
}

.hero__of{
    position:absolute;
    left:50%;
    top:675px;
    transform:translateX(-50%);
    font-size:38px;
    font-weight:700;
    line-height:1;
    color:var(--red);
    z-index:6;
}

.hero__name{
    position:absolute;
    left:50%;
    top:720px;
    transform:translateX(-50%);
    width:100%;
    margin:0;
    font-size:58px;
    line-height:.92;
    color:var(--red);
    text-transform:uppercase;
    font-weight:700;
    z-index:6;
}

/* ABOUT */

.about{
    position:relative;
    min-height:760px;
    padding:40px 0 270px;
}

.about__inner{
    position:relative;
    width:100%;
    margin-inline:auto;
    display:grid;
    grid-template-columns:160px 340px 180px;
    gap:80px;
    align-items:center;
    justify-content:center;
}

.about__title{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:86px;
    font-weight:700;
    line-height:.85;
    color:var(--red);
    margin:0;
    justify-self:end;
}

.about__video-wrap{
    position:relative;
    width:340px;
    height:604px;
}

.about__video{
    width:340px;
    height:604px;
    object-fit:cover;
    position:relative;
    z-index:9;
}

.about__sq{
    position:absolute;
    width:50px;
    height:50px;
    background:var(--red);
}

.about__sq--top{
    right:-35px;
    top:50px;
}

.about__sq--bottom{
    left:-35px;
    bottom:50px;
}

.about__text{
    font-size:20px;
    line-height:21px;
    color:var(--red);
    max-width:180px;
    font-weight:700;
}

@media(max-width:700px){

.about{
    min-height:auto;
    padding:50px 0 80px;
    overflow:hidden;
}

.about__inner{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    text-align:center;
}

.about__title{
    order:1;
    writing-mode:horizontal-tb;
    transform:none;
    font-size:36px;
    line-height:1;
    margin:0;
    text-align:center;
    justify-self:auto;
}

.about__video-wrap{
    order:2;
    width:220px;
    height:390px;
    margin:0 auto;
}

.about__video{
    width:220px;
    height:390px;
    object-fit:cover;
}

.about__sq--top{
    right:-30px;
    top:45px;
}

.about__sq--bottom{
    left:-30px;
    bottom:45px;
}

.about__text{
    order:3;
    font-size:13px;
    line-height:1.35;
    text-align:center;
    margin:0 auto;
	max-width: 85%;
}

}

/* MENU CTA */

.menu-cta{
    position:relative;
    background:var(--cream);
    padding-bottom:116px;
    overflow:visible;
}

.menu-cta__main{
    position:relative;
    width:100%;
    height:239px;
    background:var(--orange);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    overflow:visible;
    isolation:isolate;
	z-index:9;
}

.menu-cta__tag{
    position:absolute;
    width:180px;
    height:70px;
    background:url('/assets/images/drawings/taz-drawing.svg') center/contain no-repeat;
    opacity:0;
    transition:opacity .2s ease-out,transform .2s ease-out;
    z-index:2;
    pointer-events:none;
}

.menu-cta__tag--left {
    left:55px;
    top:42px;
    transform:rotate(-10deg) translateY(10px);
}

.menu-cta__tag--right {
    right:55px;
    bottom:34px;
    transform:rotate(10deg) translateY(10px);
}

.menu-cta__main:hover .menu-cta__tag {
    opacity:1;
    transform:rotate(0deg) translateY(0);
}

.menu-cta__main:hover .menu-cta__tag--left {
    transform:rotate(-10deg) translateY(0);
}

.menu-cta__main:hover .menu-cta__tag--right {
    transform:rotate(10deg) translateY(0);
}

.menu-cta__main:hover .menu-cta__decor {
	display: none;
}

.menu-cta__media {
    position:absolute;
    inset:0;
    background:url('/assets/images/gallery/cover.jpg') center/cover no-repeat;
    opacity:0;
    transform:scale(1.02);
    transition:opacity .2s ease-out,transform .2s ease-out;
    z-index:-1;
}

.menu-cta__main:hover .menu-cta__media {
    opacity:1;
    transform:scale(1);
}

.menu-cta__main:hover::after {
    opacity:1;
}

.menu-cta__main::after {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.34);
    opacity:0;
    transition:opacity .2s ease-out;
    z-index:0;
}

.menu-cta__taz{
    position:absolute;
    left:50%;
    top:-153px;
    transform:translateX(-50%);
    z-index:3;
    pointer-events:none;
}

.menu-cta__text{
    position:relative;
    z-index:2;
    font-size:92px;
    font-weight:700;
    line-height:1;
    color:var(--white);
    text-align:center;
    white-space:nowrap;
}

.menu-cta__decor{
    position:absolute;
    top:50%;
    width:120px;
    height:82px;
    border:4px solid var(--white);
    border-bottom:0;
    z-index:2;
}

.menu-cta__decor--left{
    left:70px;
    border-right:0;
    border-top-left-radius:22px;
    transform:translateY(-50%);
}

.menu-cta__decor--right{
    right:70px;
    border-left:0;
    border-top-right-radius:22px;
    transform:translateY(-50%);
}

.menu-cta__order{
    position:absolute;
    left:50%;
    bottom:50px;
    transform:translateX(-50%);
    width:min(720px,calc(100% - 80px));
    background:var(--red);
    color:var(--white);
    border-radius:0 0 18px 18px;
    padding:66px 32px 18px;
    font-size:31px;
    line-height:1;
    text-align:center;
    text-decoration:none;
    z-index:4;
}

@media(max-width:1024px){

.menu-cta{
    padding-bottom:92px;
}

.menu-cta__main{
    height:185px;
}

.menu-cta__taz{
    top:-118px;
}

.menu-cta__text{
    font-size:62px;
}

.menu-cta__decor{
    width:82px;
    height:56px;
}

.menu-cta__decor--left{
    left:36px;
}

.menu-cta__decor--right{
    right:36px;
}

.menu-cta__order{
    bottom:46px;
    width:min(520px,calc(100% - 56px));
    font-size:22px;
    padding:38px 24px 14px;
}

}

@media(max-width:700px){

.menu-cta{
    padding-bottom:58px;
}

.menu-cta__main{
    height:152px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.menu-cta__taz{
    top:-48px;
}
	
.menu-cta__tag--left {
	 display: none;
}
	
.menu-cta__main:hover .menu-cta__tag--right {
    position: relative;
    width: 180px;
    height: 70px;
    right: inherit;
    bottom: inherit;
}

.menu-cta__text{
    font-size:28px;
}

.menu-cta__decor{
    display: none;
}

.menu-cta__order{
    bottom:28px;
    width:min(280px,calc(100% - 40px));
    border-radius:0 0 8px 8px;
    padding:30px 18px 10px;
    font-size:12px;
}

}

/* STORES */

.stores-home{
    padding: clamp(55px, 8vw, 95px) 0 clamp(35px, 4vw, 45px);
    text-align: center;
}

.section-title{
    font-size: clamp(28px, 6vw, 74px);
    font-weight: 700;
    letter-spacing: clamp(2px, 0.6vw, 8px);
    color: var(--brown);
    margin: 0 0 clamp(28px, 4vw, 50px);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vw, 20px);
    line-height: 1.1;
    flex-wrap: nowrap;
}

.section-title .dot{
    width: clamp(18px, 2.2vw, 32px);
    flex: 0 0 auto;
    display: inline-flex;
}

.section-title .dot img {
    width: 100%;
    height: auto;
    display: block;
}

.stores-burger{
    position: relative;
    width: min(100%, 592px);
    aspect-ratio: 592 / 502;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stores-burger__lines{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.stores-burger__buttons{
    position: relative;
    z-index: 2;
    width: min(100%, 592px);
    display: grid;
    gap: clamp(10px, 1.5vw, 14px);
}

.stores-burger__button{
    background: var(--brown-2);
    color: var(--white);
    border-radius: clamp(10px, 1vw, 12px);
    padding: clamp(9px, 1.2vw, 10px) clamp(14px, 2vw, 20px);
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: background .2s ease, transform .2s ease;
}

.stores-burger__button:hover{
    background: var(--black);
    transform: translateY(-1px);
}

.stores-burger__button::before,
.stores-burger__button::after{
    position: absolute;
    top: 50%;
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 600;
    color: var(--black);
    letter-spacing: 0.3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.stores-burger__button::before{
    content: attr(data-address);
    right: calc(100% + 22px);
    transform: translate(10px, -50%);
    text-align: right;
}

.stores-burger__button::after{
    content: attr(data-phone);
    left: calc(100% + 22px);
    transform: translate(-10px, -50%);
}

.stores-burger__button:hover::before,
.stores-burger__button:hover::after,
.stores-burger__button:focus-visible::before,
.stores-burger__button:focus-visible::after{
    opacity: 1;
    transform: translate(0, -50%);
}

.stores-home__small{
    display: inline-block;
    background: var(--red);
    color: var(--white);
    font-size: clamp(15px, 1.8vw, 18px);
    border-radius: clamp(9px, 1vw, 10px);
    padding: clamp(10px, 1.2vw, 11px) clamp(18px, 2.5vw, 22px);
    margin-top: clamp(24px, 4vw, 40px);
    text-decoration: none;
}

.divider-star{
    width: clamp(26px, 2.4vw, 32px);
    aspect-ratio: 1;
    margin: clamp(38px, 5vw, 56px) auto 0;
    background: url('/assets/images/star.gif') center/contain no-repeat;
}

@media (max-width:1024px){
    .stores-home{
        padding:75px 0 40px;
    }
    .section-title{
        font-size:52px;
        letter-spacing:5px;
        margin:0 0 38px;
    }
    .section-title .dot{
        width:28px;
        margin:0 14px;
    }
}
@media (max-width:767px){
    .stores-home {
        padding:55px 0 35px;
    }

    .stores-home .section-title{
        width:100%;
        max-width:100%;
        font-size:28px;
        line-height:1.2;
        letter-spacing:2px;
        margin:0 auto 28px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        text-align:center;
        white-space:normal;
        overflow:hidden;
    }
    .stores-home .section-title .dot{
        width:20px;
        height:20px;
        margin:0;
        display:block;
        flex:0 0 auto;
    }
    .stores-home .section-title .dot img{
        width:100%;
        height:100%;
        object-fit:contain;
        display:block;
    }
	
	.stores-burger__button::before,
    .stores-burger__button::after{
        display: none;
    }
}
@media (max-width:420px) {
    .stores-home .section-title{
        font-size:28px;
        letter-spacing:1.5px;
    }

    .section-title .dot {
        width:18px;
        flex-basis:18px;
    }
}

/* SOCIAL */

.social{
    padding:45px 0 0;
    text-align:center;
}

.social__title{
    font-size:72px;
    font-weight:700;
    line-height:1;
    color:var(--brown);
    margin:0 0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
}

.social__title img{
    width:120px;
}

.social-tabs{
    height:72px;
    background:var(--red-dark);
    color:var(--white);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:center;
    font-size:31px;
}

.social-tabs a{
    color:var(--white);
    text-decoration:none;
}

/* SOCIAL RESPONSIVE */

@media(max-width:1024px){
	.social{
		padding:35px 0 0;
	}

	.social__title{
		font-size:clamp(44px,8vw,64px);
		gap:20px;
		margin-bottom:25px;
	}

	.social__title img{
		width:clamp(75px,13vw,105px);
	}

	.social-tabs{
		height:auto;
		min-height:62px;
		font-size:clamp(22px,4vw,28px);
	}
}

@media(max-width:767px){
	.social{
		padding:30px 0 0;
	}

	.social__title{
		font-size:clamp(42px,13vw,56px);
		gap:14px;
		margin-bottom:22px;
		flex-wrap:wrap;
	}

	.social__title img{
		width:70px;
	}

	.social-tabs{
		grid-template-columns:1fr;
		height:auto;
		font-size:26px;
	}

	.social-tabs a{
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:54px;
		padding:6px 12px;
	}

	.social-tabs a:not(:last-child){
		border-bottom:2px solid rgba(255,255,255,.25);
	}
}

@media(max-width:480px){
	.social__title{
		font-size:42px;
	}

	.social__title img{
		width:62px;
	}

	.social-tabs{
		font-size:24px;
	}
}

/* GALLERY */

.gallery-route{
    position:relative;
    width:100%;
    height:1219px;          /* match SVG viewBox για να μη "τραβιέται" η γραμμή */
    margin:75px auto 0;
}
.gallery-route__line{
    position:absolute;
    inset:0;
    z-index:0;
}
.gallery-route__line svg{
    width:100%;
    height:100%;
    overflow:visible;
}
.gallery-route__line path{
    fill:none;
    stroke:var(--red);
    stroke-width:7;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.gallery-route__item{
    position:absolute;
    z-index:2;
}
.gallery-route__item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
	object-position: top;
}

.gallery-route__item--1 {
	left: 100px;
    top: 0;
    width: 500px;
    height: 305px;
}
.gallery-route__item--2{
    right: 100px;
    top: 346px;
    width: 500px;
    height: 305px;
}
.gallery-route__item--3{
    left:115px;
    top:685px;
    width: 500px;
    height: 305px;
}

.gallery-route__label{
    position:absolute;
    color:var(--red);
    font-size:22px;
    font-weight:700;
    z-index:3;
    white-space:nowrap;
}
.gallery-route__label--1{
    right: 307px;
    top: 53px;
    transform: rotate(9deg);
}
.gallery-route__label--2{
    left: 325px;
    top: 377px;
    transform: rotate(-9deg);
}
.gallery-route__label--3{
    right: 355px;
    top: 808px;
    transform: rotate(-16deg);
}
.gallery-route__label--4{
    right:404px;
    top:1075px;
    font-size:18px;
    transform:rotate(14deg);
}

.gallery-route__logo{
    position:absolute;
    left:50%;
    bottom:-71px;
    transform:translateX(-50%);
    width:215px;
    z-index:2;
}

/* TABLET + MOBILE ONLY */

@media(max-width:1024px){

	.gallery-route{
		position:relative;
		display:flex;
		flex-direction:column;
		gap:42px;
		height:auto;
		margin:50px auto 0;
		padding:0 0 80px;
	}

	/* ΚΑΘΕΤΗ ΓΡΑΜΜΗ */

	.gallery-route__line{
		position:absolute;
		left:50%;
		top:120px;
		bottom:120px;
		width:4px;
		background:var(--red);
		transform:translateX(-50%);
		z-index:0;
	}

	.gallery-route__line svg{
		display:none;
	}

	.gallery-route__item,
	.gallery-route__label,
	.gallery-route__logo{
		position:relative;
		left:auto;
		right:auto;
		top:auto;
		bottom:auto;
		transform:none;
		z-index:2;
	}

	.gallery-route__item{
		width:78%;
		height:auto;
	}

	.gallery-route__item img{
		width:100%;
		height:auto;
		aspect-ratio:500/305;
		object-fit:cover;
		display:block;
	}

	.gallery-route__item--1,
	.gallery-route__item--3{
		align-self:flex-start;
	}

	.gallery-route__item--2{
		align-self:flex-end;
	}

	/* LABELS */

	.gallery-route__label{
		position:absolute;
		color:var(--red);
		font-size:18px;
		font-weight:700;
		line-height:1;
		white-space:nowrap;
	}

	.gallery-route__label--1{
		top:160px;
		right:7%;
		transform:rotate(8deg);
	}

	.gallery-route__label--2{
		top:470px;
		left:6%;
		transform:rotate(-8deg);
	}

	.gallery-route__label--3{
		top:790px;
		right:8%;
		transform:rotate(-8deg);
	}

	.gallery-route__label--4{
		top:845px;
		right:22%;
		font-size:15px;
		transform:rotate(8deg);
	}

	.gallery-route__logo{
		width:145px;
		align-self:center;
		margin-top:20px;
	}
}

@media(max-width:767px){

	.gallery-route{
		gap:28px;
		padding-bottom:60px;
	}

	.gallery-route__item{
		width:86%;
	}

	.gallery-route__line{
		top:100px;
		bottom:90px;
	}

	.gallery-route__label{
		font-size:15px;
	}

	.gallery-route__label--1{
		top:145px;
		right:5%;
	}

	.gallery-route__label--2{
		top:395px;
		left:5%;
	}

	.gallery-route__label--3{
		top:655px;
		right:6%;
	}

	.gallery-route__label--4{
		top:705px;
		right:18%;
		font-size:13px;
	}

	.gallery-route__logo{
		width:120px;
	}
}

/* TABLET */

@media(max-width:1024px){

.hero{
    min-height:620px;
    padding-top:30px;
}

.hero__stage{
    height:540px;
}

.hero__title{
    width:300px;
}

.hero__box{
    top:125px;
    width:260px;
    height:280px;
}

.hero__burger{
    top:145px;
    width:480px;
}

.hero__side{
    top:425px;
    font-size:24px;
    white-space:nowrap;
}

.hero__side--left{
    left:50%;
    transform:translateX(-105%);
}

.hero__side--right{
    right:auto;
    left:50%;
    transform:translateX(5%);
}

.hero__of{
    top:465px;
    font-size:26px;
}

.hero__name{
    top:500px;
    font-size:38px;
}

}