@charset "utf-8";
@font-face {font-family: 'S-CoreDream-3Light';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');font-weight: normal;font-style: normal;}


/* CSS Reset */
body,html,
header,footer,aside,nav,section,article,details,figure,figcaption,menu,command,
div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td, /* Block Element */
h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist,
img,embed,object,canvas,audio,video,meter,progress,keygen, /* Inline Block Element */
a,label,output,dialog, /* Inline Element */
address,blockquote, /* Text Block Element */
p,pre,/* Text Inline Block Element */
span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp, /* Text Inline Element */
acronym,big,frame,frameset,noframes,tt, /* Not HTML5 Used Element */
map,option,hr,*{border:0;padding:0;margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;}
header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block} /* HTML5 Block Element */
applet,basefont,center,dir,font,strike{display:none} /* XHTML4, HTML5 Element Not Used Remove */
q,blockquote{quotes:none;content:none}

/* CSS Reset */
body,html,
header,footer,aside,nav,section,article,details,figure,figcaption,menu,command,
div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td, /* Block Element */
h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist,
img,embed,object,canvas,audio,video,meter,progress,keygen, /* Inline Block Element */
a,label,output,dialog, /* Inline Element */
address,blockquote, /* Text Block Element */
p,pre,/* Text Inline Block Element */
span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp, /* Text Inline Element */
acronym,big,frame,frameset,noframes,tt, /* Not HTML5 Used Element */
map,option,hr,*{border:0;padding:0;margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;}
header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block} /* HTML5 Block Element */
applet,basefont,center,dir,font,strike{display:none} /* XHTML4, HTML5 Element Not Used Remove */
q,blockquote{quotes:none;content:none}
li,menu{list-style:none;word-break:break-all}

table{width:100%;border-spacing:0;border-collapse:separate;} /* Table Border (separate) */
caption{text-align:left}
th,td{text-align:center;vertical-align:middle}

address{font-style:normal}
label{display:inline-block;}
a{text-decoration:none;display:inline-block;} /* A Attribute  */

/* Common Setting */
html{overflow-y:auto;}
/* Horizen Scroll */
body{color:#000;font-size:15px;font-family:'S-CoreDream-3Light', 'Noto Sans KR', sans-serif, "Nanum Gothic";font-weight:normal;min-width:320px;}
div{outline:0}
img {vertical-align:middle;}

::selection {background-color:#000;color:#fff;}


/* GNB */
.gnb {position:fixed;width:100%;height:110px;top:0;left:0;z-index:100;border-bottom:solid 1px #e5e5e5;}
.gnb .logo {position:absolute;top:30px;left:50px;}
.gnb .logo img {width:150px;}
.gnb .menu {position:absolute;top:45px;right:50px;}
.gnb .menu a {font-weight:bold;font-size:17px;margin-left:20px;color:black;}
.gnb .menu .on, .gnb .menu a:hover {text-decoration:underline;}

.gnb_float {height:85px;background-color:black;border:0;}
.gnb_float .logo {top:22px;left:30px;}
.gnb_float .logo img {width:120px;filter:invert(100);}
.gnb_float .menu {top:30px;right:30px;}
.gnb_float .menu a {color:white;}

.gnb_main {height:85px;background-color:black;}
.gnb_main .logo {top:22px;left:30px;}
.gnb_main .logo img {width:120px;}
.gnb_main .menu {top:30px;right:30px;}
.gnb_main .menu a {color:black;}

.gnb_brand {height:85px;border-bottom:0;}
.gnb_brand .logo {top:25px;left:30px;}
.gnb_brand .logo img {width:120px;}
.gnb_brand .menu {top:30px;right:30px;}

.gnb_float .dropbtn {
  background-color: black;
  color: white !important;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.footer {position:relative;margin:0 50px;padding-bottom:30px;clear:both;text-align:center;border-top:solid 1px #e5e5e5;}
.footer img {width:150px;padding:70px 0 25px 0;}
.footer span {padding:0 10px;}
.footer p {font-size:12px;letter-spacing:1px;padding-top:10px;}

.gnb .ham {display:none;}
.pop_mobile {display:none;}

/* MAIN */
.fullscreen-bg {position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:-100;}
.fullscreen-bg__video{position:absolute;top:0;left:0;width:100%;height:100%;}
@media (min-aspect-ratio: 16/9) { .fullscreen-bg__video {height:300%;top:-100%;} }
@media (max-aspect-ratio: 16/9) { .fullscreen-bg__video {width:300%;left:-100%;} }
@media only screen and (max-width:766px) {
.fullscreen-bg {background-image:url("../img/mainvod_poster_02.JPG");background-size:auto 100%;background-position:center;;}
.fullscreen-bg__video {display:none;}
}

.main_vod {
  position: relative;
  display: grid;
  place-items: center;   /* по центру по вертикали и горизонтали */
  min-height: 100vh;     /* или нужная высота секции */
}

.main_vod .box { 
  text-align: center; 
  color: #fff; 
  z-index: 1; 
}

.main_vod .box img {width:240px;}
.main_vod .box p {font-size:24px;padding:12px 0 40px 0;}
.main_vod .box a {font-size:20px;padding:12px 35px;border:solid 1px white;}
.main_vod .box a:hover {background-color:black;border:solid 1px black;}
.main_vod .scroll {position:absolute;width:60px;text-align:center;bottom:30px;left:50%;margin-left:-30px;z-index:1;}

.main_floor {position:relative;width:900px;margin:100px auto;}
.main_floor .top {position:relative;text-align:center;}
.main_floor .top h1 {font-size:28px;padding-bottom:30px;}
.main_floor .top .line {position:relative;width:50px;border-top:solid 2px black;padding-bottom:60px;margin:0 auto;}
.main_floor .tab {position:relative;}
.main_floor .tab li {float:left;width:16.5%;border-top:solid 1px #e5e5e5;border-bottom:solid 1px #e5e5e5;border-left:solid 1px #e5e5e5;text-align:center;}
.main_floor .tab li:last-child {border-right:solid 1px #e5e5e5;}
.main_floor .tab li a {font-size:12px;letter-spacing:2px;display:block;padding:20px 0;z-index:50;}
.main_floor .tab li:hover, .main_floor .tab .on {font-weight:bold;background-color:#fafafa;}
.main_floor .link {position:relative;padding-top:50px;text-align:center;clear:both;}
.main_floor .link img {width:100%;}
.main_floor .link .box {position:absolute;width:320px;height:140px;top:50%;left:50%;margin-left:-160px;margin-top:-70px;border:solid 1px white;text-align:center;color:white;}
.main_floor .link .box h2 {font-size:26px;letter-spacing:1px;padding:40px 0 5px 0;}
.main_floor .link .box p {font-size:13px;letter-spacing:2px;}
.main_floor .link a {font-size:15px;padding:12px 30px;border:solid 1px black;margin-top:40px;}
.main_floor .link a:hover {background-color:black;color:white;}
.main_floor .link2 {display:none;}
.main_floor .link3 {display:none;}
.main_floor .link4 {display:none;}
.main_floor .link5 {display:none;}
.main_floor .link6 {display:none;}

.main_photo {position:relative;}
.main_photo li {float:left;width:33.3%;}
.main_photo li img {width:100%;}

.main_map {position:relative;margin:0 auto 150px auto;clear:both;padding:100px 0 0 0;}
.main_map .top {position:relative;text-align:center;}
.main_map .top h1 {font-size:28px;padding-bottom:30px;}
.main_map .top .line {position:relative;width:50px;border-top:solid 2px black;padding-bottom:60px;margin:0 auto;}
.main_map .map {position:relative;margin:0 50px;background-color:#fafafa;text-align:center;padding:170px 0;}
.main_map .text {text-align:center;}
.main_map .text p {font-size:18px;padding-top:30px;}
.main_map .text a {font-size:15px;padding:12px 30px;border:solid 1px black;margin-top:30px;}
.main_map .text a:hover {background-color:black;color:white;}


/* comm */
.warp {position:relative;width:1000px;padding:220px 0 150px 0;margin:0 auto;}
.blank {position:relative;padding:0;clear:both;}

/* MateHill */
.brand {position:relative;width:100%;height:auto;min-height: 100vh;background-repeat: no-repeat;background-size:cover;background-position:center;}
.brand_01 {background-image:url('../img/brandback_10.jpg');}
.brand_01 {background-image:url('../img/brandback_10.jpg');}
.brand_02 {background-image:url('../img/brandback_02.png');}
.brand_03 {background-image:url('../img/brandback_03.png');}
.brand_04 {background-image:url('../img/brandback_04.png');}
.brand_05 {background-image:url('../img/brandback_06.png');}
.brand_06 {background-image:url('../img/brandback_09.JPG');}
.brand_07 {background-image:url('../img/brandback_08.png');}
.brand_08 {background-image:url('../img/brandback_05.png');}

.brand .text{position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;text-align: center;color: #fff;}
.brand .text h1 {font-size:45px;font-weight:normal;}
.brand .text h1 b {font-weight:bold;}
.brand .text p {font-size:25px;}

.brand_flow {position:fixed;width:30px;height:120px;right:30px;top:50%;margin-top:-60px;z-index:100;}
.brand_flow li {text-align:center;line-height:1px;padding:4px 0;}

/* FLOOR */
.floor_top {position:relative;text-align:center;padding:0 0 50px 0;}
.floor_top h1 {font-size:28px;letter-spacing:6px;}
.floor_top p {font-size:12px;font-weight:bold;letter-spacing:2px;padding:5px 0 35px 0;}
.floor_top .line {position:relative;width:60px;margin:0 auto;height:2px;background-color:black;}

.floor_guide {position:relative;border:solid 1px #e5e5e5;}
.floor_guide .menu {position:absolute;top:0;left:0;width:220px;z-index:1;}
.floor_guide .menu li {position:relative;text-align:center;border-bottom:solid 1px #e5e5e5;border-right:solid 1px #e5e5e5;}
.floor_guide .menu li img {position:absolute;top:55px;right:-10px;display:none;}
.floor_guide .menu li a {display:block;padding:57px 0;font-size:17px;letter-spacing:2px;}
.floor_guide .menu li:last-child {border-bottom:0;}
.floor_guide .menu li:hover, .floor_guide .menu .on {background-color:black;color:white;font-weight:bold;}
.floor_guide .menu .on img {display:inline-block;}
.floor_guide .menu li:hover img {display:inline-block;}
.floor_guide .plan {position:relative;text-align:center;padding:220px 0 220px 220px;}
.floor_guide .plan .pano {position:absolute;}
.floor_guide .guide {position:absolute;top:40px;right:40px;text-align:right;}
.floor_guide .guide h3 {font-size:24px;letter-spacing:2px;}
.floor_guide .guide p {font-size:13px;letter-spacing:2px;}

.floor_tab {position:relative;padding:100px 0 60px 0;text-align:center;}
.floor_tab a {font-size:17px;border:solid 1px #e5e5e5;padding:17px 110px;font-weight:bold;}
.floor_tab .on, .floor_tab a:hover {color:white;background-color:#000;border:solid 1px black;}

.floor_pano {position:relative;text-align:center;padding:80px 0 50px 0;}
.floor_pano h1 {font-size:18px;font-weight:normal;letter-spacing:2px;padding-bottom:50px;}
.floor_pano .box {position:relative;}
.floor_pano .box li {position:relative;padding-bottom:70px;}
.floor_pano .box li .here {position:absolute;top:10px;left:10px;padding:15px;background-color:white;}
.floor_pano .box li .here .floor {width:130px;}
.floor_pano .box li .here .location {position:absolute;}
.floor_pano .box li .here .location img {width:22px;}
.floor_pano .box li .here .close {position:absolute;top:5px;right:10px;}
.floor_pano .box li .here .close img {width:12px;opacity:0.5;}
.floor_pano .box li p {font-size:19px;padding-top:30px;}

.floor_photo {position:relative;text-align:center;padding:100px 0 50px 0;border-top:solid 1px #e5e5e5;}
.floor_photo > h1 {font-size:18px;font-weight:normal;letter-spacing:2px;}
.floor_photo .box {position:relative;}
.floor_photo .box li {float:left;width:495px;margin-right:10px;margin-bottom:10px;}
.floor_photo .box li:nth-child(even) {margin-right:0;}
.floor_photo .box li img {width:100%;}


/* STORE */
.store_top {position:relative;text-align:center;padding:0 0 50px 0;}
.store_top h1 {font-size:28px;letter-spacing:0px;}
.store_top p {font-size:12px;font-weight:bold;letter-spacing:2px;padding:5px 0 35px 0;}
.store_top .line {position:relative;width:60px;margin:0 auto;height:2px;background-color:black;}

.store_tab {position:relative;}
.store_tab li {float:left;width:24.8%;border-top:solid 1px #e5e5e5;border-bottom:solid 1px #e5e5e5;border-left:solid 1px #e5e5e5;padding:30px 0;text-align:center;letter-spacing:2px;}
.store_tab li:last-child {border-right:solid 1px #e5e5e5;}
.store_tab li img {height:59px;}

.store_tab li p {font-weight:bold;font-size:24px;padding:0 0 5px 0;}
.store_tab .on {border-bottom:solid 3px black;}

.store_box {position:relative;padding-top:70px;clear:both;}
.store_box .logo {position:relative;text-align:center;padding-bottom:50px;font-size:17px;}
.store_box .logo img {height:150px;}
.store_box .logo p {font-weight:bold;font-size:28px;}
.store_box .intro {position:relative;text-align:center;}
.store_box .intro img {width:100%;}
.store_box .intro h1 {font-size:26px;padding:50px 0 10px 0;}
.store_box .intro p {font-size:17px;padding:0 0 50px 0;}
.store_box .intro a {border:solid 1px black;padding:13px 40px;}
.store_box .intro a:hover {background-color:black;color:white;}
.store_box .photo {position:relative;padding:70px 0 0 0;}
.store_box .photo li {float:left;width:495px;margin-right:10px;margin-bottom:10px;}
.store_box .photo li:nth-child(even) {margin-right:0;}
.store_box .photo li img {width:100%;}
.store_box .link {position:relative;padding:40px 0 0 0;text-align:center;clear:both;}
.store_box .link a {border:solid 1px black;padding:13px 40px;}
.store_box .link a:hover {background-color:black;color:white;}

.store_box2 {display:none;}
.store_box3 {display:none;}
.store_box4 {display:none;}

/* MAP */
.map_top {position:relative;text-align:center;padding:0 0 50px 0;}
.map_top h1 {font-size:28px;letter-spacing:0px;}
.map_top p {font-size:12px;font-weight:bold;letter-spacing:2px;padding:5px 0 35px 0;}
.map_top .line {position:relative;width:60px;margin:0 auto;height:2px;background-color:black;}

.map {position:relative;background-color:#fafafa;text-align:center;padding:200px 0;}

.map_text {position:relative;padding:50px 0 0 0;text-align:center;}
.map_text h1 {font-size:22px;}
.map_text h2 {font-weight:normal;font-size:17px;}
.map_text p {font-size:20px;font-weight:bold;padding-bottom:35px;}
.map_text a {border:solid 1px black;padding:13px 40px;}
.map_text a:hover {background-color:black;color:white;}

/* Review */
.review_top {position:relative;text-align:center;padding:0 0 50px 0;}
.review_top h1 {font-size:28px;letter-spacing:0px;}
.review_top p {font-size:12px;font-weight:bold;letter-spacing:2px;padding:5px 0 35px 0;}
.review_top .line {position:relative;width:60px;margin:0 auto;height:2px;background-color:black;}

.review_tab {position:relative;padding:30px 0 50px 0;text-align:center;}
.review_tab a {font-size:17px;border:solid 1px #e5e5e5;padding:17px 110px;font-weight:bold;}
.review_tab .on, .review_tab a:hover {color:white;background-color:#000;border:solid 1px black;}

.review_box {position:relative;}
.review_box li {float:left;width:490px;margin-right:10px;padding-bottom:70px;text-align:left;}
.review_box li:nth-child(even) {margin-right:0;}
.review_box li img {width:100%;}
.review_box li h3 {font-size:20px;padding:20px 0 5px 0;}
.review_box li p {font-size:13px;padding-bottom:20px;}
.review_box li span {font-size:13px;color:#999;}
.review_more {position:relative;clear:both;padding:20px 0 0 0;text-align:center;}
.review_more a {border:solid 1px black;padding:13px 40px;}
.review_more a:hover {background-color:black;color:white;}

.review_box2 {display:none;}

.youtube_vod {position:relative;width:100%;padding:50px 0;}

@media only screen and (max-width:1000px) { 

/* comm */
.warp {position:relative;width:auto;padding:150px 0 100px 0;margin:0 20px;}
.blank {position:relative;padding:0;clear:both;}

.floor_guide .menu {width:150px;}
.floor_guide .menu li a {padding:55px 0;}
.floor_guide .plan {padding:100px 0 100px 150px;}
.floor_guide .floorpaln {width:600px;}
.floor_guide .guide {top:20px;right:20px;}

.floor_photo .box li {width:49%;margin-right:1%;}
.store_box .photo li {width:49%;margin-right:1%;}
.review_box li {width:49%;margin-right:1%;}


}



@media only screen and (max-width:766px) {
html,body{min-width:320px;}

.gnb {height:75px;}
.gnb .logo {top:18px;left:50%;margin-left:-60px;}
.gnb .logo img {width:120px;}
.gnb .menu {display:none}
.gnb .ham img {filter:invert(100%);}

.gnb_float .logo img {filter:invert(100);}
.gnb_float .ham img {filter:invert(0%);}

.gnb .ham {position:absolute;top:25px;right:20px;display:block;}
.gnb .ham img {width:20px;}

.pop_mobile {position:fixed;top:0;left:0;width:100%;height:100%;background-color:white;z-index:1000;display:none;}
.pop_mobile .close {position:absolute;top:20px;right:20px;z-index:100;}
.pop_mobile .close img {width:17px;}
.pop_mobile .menu {position:relative;text-align:center;}
.pop_mobile .menu .logo {position:relative;padding:100px 20px 50px 20px;}
.pop_mobile .menu .logo img {width:180px;}
.pop_mobile .menu .line {position:relative;width:60px;border-top:solid 2px black;margin:0 auto;padding-bottom:20px;}
.pop_mobile .menu a {display:block;font-size:20px;font-weight:bold;padding:12px 0;}

.pop_mobile .dropbtn {
  font-weight: 700;   /* делаем жирным */
  font-size: 16px;    /* подгони под размер ссылок */
  text-transform: uppercase; /* если нужно в верхнем регистре */
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 0;
}


.footer {margin:0 10px;}
.footer img {width:130px;padding:40px 0 15px 0;}
.footer span {padding:0 5px;font-size:12px;}
.footer p {font-size:11px;}

.main_vod .box {width:auto;margin-top:-100px;}
.main_vod .box img {width:180px;}
.main_vod .box p {font-size:22px;padding:10px 25px 20px 25px;}
.main_vod .box a {font-size:18px;padding:9px 25px;}
.main_vod .box a:hover {background-color:black;border:solid 1px black;}
.main_vod .scroll {bottom:10px;}
.main_vod .scroll img {width:18px;}

.main_floor {width:auto;margin:40px 10px;}
.main_floor .top h1 {font-size:22px;padding-bottom:20px;}
.main_floor .top .line {width:30px;padding-bottom:30px;}
.main_floor .tab li {width:32.7%;border-bottom:solid 1px #e5e5e5;border-left:solid 1px #e5e5e5;}
.main_floor .tab li:nth-child(3n) {border-right:solid 1px #e5e5e5;}
.main_floor .tab li:nth-child(n+4) {border-top:0;}
.main_floor .tab li a {font-size:11px;letter-spacing:1px;padding:13px 0;}

.main_floor .link {padding-top:10px;}
.main_floor .link img {width:100%;}
.main_floor .link .box {width:280px;height:100px;margin-left:-140px;margin-top:-70px;}
.main_floor .link .box h2 {font-size:22px;padding:24px 0 5px 0;}
.main_floor .link a {font-size:13px;padding:10px 20px;margin-top:20px;}

.main_map {margin:0 10px 50px 10px;padding:40px 0 0 0;}
.main_map .top h1 {font-size:22px;padding-bottom:20px;}
.main_map .top .line {width:30px;padding-bottom:30px;}
.main_map .map {margin:0;}
.main_map .text p {font-size:15px;padding-top:20px;}
.main_map .text a {font-size:13px;padding:10px 20px;margin-top:20px;}


/* comm */
.warp {width:auto;padding:120px 0 80px 0;margin:0 10px;}

/* MateHill */

.brand .text {width:100%;height:80px;left:50%;top:50%;margin-left:-50%;margin-top:-40px;}
.brand .text h1 {font-size:35px;padding:0 20px;}
.brand .text h1 b {font-weight:bold;}
.brand .text p {font-size:19px;padding:0 20px;}

.brand_flow {right:5px;}
.brand_flow li {padding:3px 0;}
.brand_flow li img {opacity:0.7;}

/* FLOOR */
.floor_top {padding:0 0 40px 0;}
.floor_top h1 {font-size:22px;letter-spacing:3px;}
.floor_top p {padding:5px 0 20px 0;}
.floor_top .line {width:30px;}

.floor_guide {border:0;}
.floor_guide .menu {position:relative;width:auto;}
.floor_guide .menu li {float:left;width:32.7%;border-top:solid 1px #e5e5e5;border-left:solid 1px #e5e5e5;border-right:0;}
.floor_guide .menu li a {display:inline-block;padding:17px 0;font-size:12px;letter-spacing:1px;}
.floor_guide .menu li:nth-child(3n) {border-right:solid 1px #e5e5e5;}
.floor_guide .menu li:nth-child(n+4) {border-top:0;}
.floor_guide .menu li:last-child {border-bottom:solid 1px #e5e5e5;;}
.floor_guide .menu li a:hover img {display:none;}
.floor_guide .menu .on img {display:none;}

.floor_guide .plan {padding:30px 0;clear:both;}
.floor_guide .plan .floorpaln {width:100%;}
.floor_guide .plan .pano01 {display:none;}
.floor_guide .plan .pano02 {display:none;}
.floor_guide .plan .pano03 {display:none;}
.floor_guide .plan .pano04 {display:none;}
.floor_guide .plan .pano05 {display:none;}
.floor_guide .plan .pano06 {display:none;}
.floor_guide .plan .pano07 {display:none;}
.floor_guide .plan .pano08 {display:none;}
.floor_guide .plan .pano09 {display:none;}

.floor_guide .guide {display:none;}

.floor_tab {padding:50px 0 30px 0;}
.floor_tab a {font-size:13px;padding:15px 35px;}

.floor_pano {padding:0 0 30px 0;}
.floor_pano h1 {font-size:15px;letter-spacing:1px;padding-bottom:20px;}
.floor_pano .box li {padding-bottom:40px;}
.floor_pano .box li .here {top:5px;left:5px;padding:10px;}
.floor_pano .box li .here .floor {width:100px;}
.floor_pano .box li .here .location img {width:17px;}
.floor_pano .box li .here .close {display:none;}
.floor_pano .box li p {font-size:17px;padding-top:10px;}

.floor_photo {padding:0 0 30px 0;}
.floor_photo h1 {font-size:15px;letter-spacing:1px;padding-bottom:20px;}
.floor_photo .box li {width:100%;margin-right:0;}
.floor_photo .box li:nth-child(even) {margin-right:0;}


/* STORE */
.store_top {padding:0 0 40px 0;}
.store_top h1 {font-size:22px;}
.store_top p {padding:5px 0 20px 0;}
.store_top .line {width:30px;}

.store_tab li {width:24.8%;padding:20px 0;letter-spacing:0px;font-size:11px;}
.store_tab li img {height:50px;}
.store_tab li p {font-size:18px;padding:5px 0 5px 0;}
.store_tab .on {border-bottom:solid 3px black;}

.store_box {padding-top:50px;}
.store_box .logo {padding-bottom:40px;font-size:13px;}
.store_box .logo img {height:100px;}
.store_box .logo p {font-size:22px;}

.store_box .intro h1 {font-size:20px;padding:20px 0 5px 0;}
.store_box .intro p {font-size:14px;padding:0 0 25px 0;}
.store_box .intro a {padding:10px 25px;font-size:13px;}
.store_box .photo {padding:50px 0 0 0;}
.store_box .photo li {width:100%;margin-right:0;}
.store_box .link {position:relative;padding:25px 0 0 0;text-align:center;clear:both;}
.store_box .link a {padding:10px 25px;font-size:13px;}

/* MAP */
.map_top {padding:0 0 40px 0;}
.map_top h1 {font-size:22px;}
.map_top p {padding:5px 0 20px 0;}
.map_top .line {width:30px;}

.map_text {padding:30px 0 0 0;}
.map_text h1 {font-size:17px;}
.map_text h2 {font-size:13px;}
.map_text p {font-size:13px;padding-bottom:20px;}
.map_text a {padding:10px 25px;font-size:13px;}

/* Review */
.review_top {padding:0 0 0px 0;}
.review_top h1 {font-size:22px;}
.review_top p {letter-spacing:1px;padding:5px 0 20px 0;}
.review_top .line {width:30px;}

.review_tab {padding:30px 0 30px 0;}
.review_tab a {font-size:13px;padding:14px 30px;}

.review_box li {width:100%;margin-right:0;padding-bottom:30px;}
.review_box li img {width:100%;}
.review_box li h3 {font-size:17px;padding:12px 0 5px 0;}
.review_box li p {font-size:12px;padding-bottom:5px;}
.review_box li span {font-size:12px;}
.review_more a {padding:10px 25px;font-size:13px;}


}

/* Language Switcher */
#language-switcher {
    position: static;
    z-index: 101;
}

#language-switcher button {
    background-color: #ff0000;
    border: 1px solid #ccc;
    padding: 5px 10px;
    cursor: pointer;
}

#language-switcher button:hover {
    background-color: #dddddd00;
}

/* --- i18n helpers --- */
html.i18n-loading body { visibility: hidden; }

/* Для длинных языков (RU) уменьшаем шрифт и убираем лишний кернинг */
html[lang="ru"] .gnb .menu a,
html[lang="ru"] #language-switcher .dropbtn { font-size: 15px; letter-spacing: 0; }
html[lang="ru"] .gnb .menu a { margin-left: 16px; }

/* Элементы в дропдауне не наследуют отступы меню */
#language-switcher .dropdown-content a { margin-left: 0 !important; }

/* Делаем шапку гибкой, язык ставим в один ряд с пунктами */
.gnb .menu { display: inline-flex; align-items: center; gap: 20px; }
#language-switcher.dropdown { position: relative; display: inline-block; }
#language-switcher .dropbtn { background: transparent; border: none; font-weight: bold; cursor: pointer; padding: 0; }
#language-switcher .dropdown-content { left: 0; }

/* Респонсивный размер шрифта для меню */
.gnb .menu a, #language-switcher .dropbtn { font-size: clamp(14px, 1.6vw, 17px); }

/* Kakao Map container must have explicit height */
#map {
  width: 95%;
  height: 520px;   /* десктоп */
  padding: 0;      /* перебиваем .map { padding:200px 0 } */
  background: #fff;
}

@media (max-width: 1024px) { #map { height: 420px; } }
@media (max-width: 600px)  { #map { height: 320px; } }

/* Если где-то нужен большой отступ вокруг секции карты, сделай его на родителе */
.main_map { padding-top: 40px; padding-bottom: 40px; }

/* На всякий случай: ссылки в дропдауне не наследуют margin из меню */
#language-switcher .dropdown-content a { margin-left: 0 !important; }


/* === HERO / VIDEO (ЖЁСТКАЯ ПРАВКА СЛОЁВ) === */
.main_vod{ position:relative; min-height:100vh; overflow:hidden; }

/* контейнер видео внутри секции, а не fixed к вьюпорту */
.fullscreen-bg{
  position:absolute; inset:0; z-index:1;
  background:#000 url("../img/mainvod_poster_02.JPG") center/cover no-repeat;
  pointer-events:none; /* чтоб не ловил клики */
}

/* само видео во весь контейнер */
.fullscreen-bg__video{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  top:0 !important; left:0 !important; transform:none !important;
}

/* тёмный оверлей над фоном/видео */
.main_vod::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.35); z-index:2;
}

/* текст/кнопка всегда поверх */
.main_vod .box{ position:absolute; z-index:3; }

@media (max-width:766px){
  .fullscreen-bg__video{ display:none !important; } /* экономия на мобиле */
}

/* === HERO / VIDEO: ПОЛНОЕ ПЕРЕКРЫТИЕ СТАРЫХ ПРАВИЛ === */
.main_vod{
  position: relative !important;
  height: 100vh !important;          /* вместо старого height:100% */
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* делаем .vod + .fullscreen-bg абсолютными и растянутыми */
.main_vod > .vod.fullscreen-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: #000 url("../img/mainvod_poster_02.JPG") center/cover no-repeat !important;
  pointer-events: none !important;
}

/* само видео во весь контейнер */
.main_vod > .vod.fullscreen-bg > .fullscreen-bg__video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  display: block !important;
}

/* тёмный слой поверх видео */
.main_vod::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.35) !important;
  z-index: 2 !important;
}

/* контент всегда поверх */
.main_vod .box{
  position: absolute !important;
  z-index: 3 !important;
}

@media (max-width: 766px){
  .main_vod > .vod.fullscreen-bg > .fullscreen-bg__video{
    display: none !important; /* на мобилках оставляем постер, экономим трафик */
  }
}

/* Поп-меню поверх всего гарантированно */
.pop_mobile{ z-index: 1000; }

/* На всякий случай: ссылки в дропдауне не наследуют внешний margin */
#language-switcher .dropdown-content a,
#language-switcher-mobile .dropdown-content a { margin-left: 0 !important; }

/* ===== [LANGUAGE SWITCHER: click-to-open, без изменения внешнего вида] ===== */

/* 1) Якорь для абсолютного меню: было static, делаем relative, визуально не меняет вид */
#language-switcher,
#language-switcher-mobile {
  position: relative;
  display: inline-block;
  z-index: 101; /* оставляем твой уровень */
}

/* 2) Кнопка — оставляем твои стили (цвета/паддинги/размер */
#language-switcher .dropbtn,
#language-switcher-mobile .dropbtn,
#language-switcher button,
#language-switcher-mobile button {
  background-color: #00000000;
  color: inherit;
  padding: 10px 14px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}

/* 3) Меню: оставляем твою геометрию/цвет/тень и анимацию пунктов */
#language-switcher .dropdown-content,
#language-switcher-mobile .dropdown-content {
  /* твоя позиция и визуал */
  position: absolute;
  top: 100%;
  left: 5%;              /* как в твоём коде */
  background-color: #00000000;
  min-width: 80px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;

  /* логика показа теперь управляется атрибутом, а не :hover */
  display: none;
}

/* 4) Пункты — оставляем твою анимацию и оформление */
#language-switcher .dropdown-content a,
#language-switcher-mobile .dropdown-content a {
  margin-left: 0;        /* у тебя стояло !important, но порядок в конце файла перебьёт без него */
  color: black;

  padding: 12px 16px;
  text-decoration: none;
  text-align: center;
  display: block;
  transform-origin: top center;
  opacity: 0;
  transform: scale(0);
}

#language-switcher .dropdown-content a:hover,
#language-switcher-mobile .dropdown-content a:hover {
  background-color: rgba(247, 240, 240, 1);
}

/* Когда меню открыто (JS добавил .show) — показываем пункты */
#language-switcher .dropdown-content.show a,
#language-switcher-mobile .dropdown-content.show a {
  opacity: 1;
  transform: scale(1);
  animation: none; /* можно убрать, чтобы не ждать анимацию */
}

/* 5) Показ меню ТОЛЬКО при клике: контейнер получает data-open="true" */
#language-switcher[data-open="true"] .dropdown-content,
#language-switcher-mobile[data-open="true"] .dropdown-content {
  display: block;
}

/* 6) Твоя поочерёдная анимация (сохраняем как есть, только в состоянии открыто) */
@keyframes scaleZ {
  0%   { opacity: 0; transform: scale(0); }
  80%  { transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
#language-switcher[data-open="true"] .dropdown-content a:nth-child(1),
#language-switcher-mobile[data-open="true"] .dropdown-content a:nth-child(1) {
  animation: scaleZ 300ms 0ms ease-in-out forwards;
}
#language-switcher[data-open="true"] .dropdown-content a:nth-child(2),
#language-switcher-mobile[data-open="true"] .dropdown-content a:nth-child(2) {
  animation: scaleZ 300ms 60ms ease-in-out forwards;
}
#language-switcher[data-open="true"] .dropdown-content a:nth-child(3),
#language-switcher-mobile[data-open="true"] .dropdown-content a:nth-child(3) {
  animation: scaleZ 300ms 120ms ease-in-out forwards;
}

/* 7) Чтобы выпадашка не обрезалась контейнером меню (визуально это ничего не меняет) */
.gnb .menu { overflow: visible; }

/* ========== LANGUAGE SWITCHER: фикс "пустого" меню и срыва hover ========== */

/* 1) "мостик", чтобы hover не рвался между кнопкой и меню */
#language-switcher .dropdown-content::before,
#language-switcher-mobile .dropdown-content::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}

/* 2) ТРИГГЕРЫ анимации ТОЛЬКО когда меню реально открыто
      — для десктопа по :hover, для клавы по :focus-within,
      — для кликового режима по [data-open="true"],
      — для мобайла отдельный контейнер. */

/* DESKTOP: :hover + :focus-within */
#language-switcher:hover .dropdown-content a:nth-child(1),
#language-switcher:focus-within .dropdown-content a:nth-child(1) { animation: scaleZ 300ms 0ms   ease-in-out forwards; }
#language-switcher:hover .dropdown-content a:nth-child(2),
#language-switcher:focus-within .dropdown-content a:nth-child(2) { animation: scaleZ 300ms 60ms  ease-in-out forwards; }
#language-switcher:hover .dropdown-content a:nth-child(3),
#language-switcher:focus-within .dropdown-content a:nth-child(3) { animation: scaleZ 300ms 120ms ease-in-out forwards; }

/* CLICK-режим (если используешь data-open) */
#language-switcher[data-open="true"] .dropdown-content a:nth-child(1) { animation: scaleZ 300ms 0ms   ease-in-out forwards; }
#language-switcher[data-open="true"] .dropdown-content a:nth-child(2) { animation: scaleZ 300ms 60ms  ease-in-out forwards; }
#language-switcher[data-open="true"] .dropdown-content a:nth-child(3) { animation: scaleZ 300ms 120ms ease-in-out forwards; }

/* MOBILE: :focus-within (тап по кнопке внутри мобильного контейнера) */
#language-switcher-mobile:focus-within .dropdown-content a:nth-child(1),
#language-switcher-mobile[data-open="true"] .dropdown-content a:nth-child(1) { animation: scaleZ 300ms 0ms   ease-in-out forwards; }
#language-switcher-mobile:focus-within .dropdown-content a:nth-child(2),
#language-switcher-mobile[data-open="true"] .dropdown-content a:nth-child(2) { animation: scaleZ 300ms 60ms  ease-in-out forwards; }
#language-switcher-mobile:focus-within .dropdown-content a:nth-child(3),
#language-switcher-mobile[data-open="true"] .dropdown-content a:nth-child(3) { animation: scaleZ 300ms 120ms ease-in-out forwards; }

/* 3) На случай, если базовые правила навсегда оставляют пункты невидимыми,
      принудительно делаем их видимыми КОГДА меню открыто: */
#language-switcher:hover .dropdown-content a,
#language-switcher:focus-within .dropdown-content a,
#language-switcher[data-open="true"] .dropdown-content a,
#language-switcher-mobile:focus-within .dropdown-content a,
#language-switcher-mobile[data-open="true"] .dropdown-content a {
  opacity: 1;
  transform: scale(1);
}

/* 4) Чтобы выпадашка не обрезалась контейнером меню в хедере */
.gnb .menu { overflow: visible; }

/* === LANGUAGE SWITCHER: центр под кнопкой (всегда) === */

/* контейнер — якорь для абсолютного меню */
#language-switcher,
#language-switcher-mobile {
  position: relative;   /* перебиваем твой static */
  display: inline-block;
}

/* меню: ровно по центру кнопки, сразу под ней */
#language-switcher .dropdown-content,
#language-switcher-mobile .dropdown-content {
  position: absolute;
  top: calc(100% + 8px);   /* на 8px ниже кнопки */
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
  display: none;           /* показываешь как раньше: hover/open/data-open */
  z-index: 1000;
}

/* мостик, чтобы hover не срывался при переходе к меню */
#language-switcher .dropdown-content::before,
#language-switcher-mobile .dropdown-content::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}

/* ваши способы показа — оставляем: */
#language-switcher.open .dropdown-content,
#language-switcher[data-open="true"] .dropdown-content,
#language-switcher:hover .dropdown-content,
#language-switcher:focus-within .dropdown-content,
#language-switcher-mobile.open .dropdown-content,
#language-switcher-mobile[data-open="true"] .dropdown-content,
#language-switcher-mobile:focus-within .dropdown-content {
  display: block;
}

/* чтобы выпадашка не обрезалась контейнером меню в шапке */
.gnb .menu { overflow: visible; }
/* === FIX: язык-меню строго по центру под кнопкой === */
#language-switcher .dropdown-content,
#language-switcher-mobile .dropdown-content {
  left: 50% !important;          /* строго середина кнопки */
  transform: translateX(-50%) !important;
  top: calc(100% + 8px) !important;  /* чуть ниже кнопки */
}



/* попап по умолчанию скрыт (открываешь через JS как у тебя) */
.pop_mobile{ display:none; z-index:2000; }

/* === LANGUAGE SWITCHER: центр под кнопкой (и десктоп, и мобайл) === */
#language-switcher,
#language-switcher-mobile{
  position:relative; display:inline-block;
}

#language-switcher .dropdown-content,
#language-switcher-mobile .dropdown-content{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  transform-origin:top center;
}

/* ховер-«мостик», чтобы курсор не рвал показ при переходе */
#language-switcher .dropdown-content::before,
#language-switcher-mobile .dropdown-content::before{
  content:""; position:absolute; top:-8px; left:0; right:0; height:8px;
}

/* на мобиле используем свитчер из попапа; десктопный прячем */
@media (max-width:1024px){
  #language-switcher{ display:none !important; }
  #language-switcher-mobile{ display:inline-block; }
}

/* чтобы выпадашка не отрезалась контейнером меню хедера */
.gnb .menu{ overflow:visible; }

/* MOBILE HEADER: прячем горизонтальное меню, показываем бургер */
@media (max-width:1024px){
  .gnb .menu{ display:none !important; }
  .gnb .ham{
    display:block !important;
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:1100;
  }
}

/* --- STORE TAB: мобильная сетка 2×2, без "прыжков" --- */
@media (max-width: 766px) {
  .store_tab { padding: 0 20px; } /* чуть воздуха по бокам, опционально */
  .store_tab ul{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0;
  }

  /* карточка одинаковой высоты, без изменения размера при активном состоянии */
  .store_tab li{
    float: none !important;           /* убираем старый флоат */
    width: auto !important;
    border: 0 !important;             /* все бордеры управляем линком */
  }

  .store_tab li a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;                     /* фиксированная высота ячейки */
    padding: 12px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    background: #fff;
  }

  /* логотипы всегда вписываются и центрируются */
  .store_tab li img{
    max-width: 100%;
    max-height: 48px;
    object-fit: contain;
    display: block;
  }

  /* активная – подчёркивание через inset box-shadow (не меняет высоту) */
  .store_tab li.on a{
    border-color: #e5e5e5;            /* можно и #000, если хочешь рамку чёрную */
    box-shadow: inset 0 -3px 0 #000;  /* «линию» как на макете */
  }

  /* наведённая – тот же эффект, чтобы не прыгало */
  .store_tab li a:hover{
    box-shadow: inset 0 -3px 0 #000;
  }
}

.pop_mobile{ display:none; position:fixed; inset:0; z-index:1000; } /* фулл-оверлей */

.pop_mobile{ display:none; }


/* Базовое состояние: дропдаун скрыт */
#language-switcher .dropdown-content,
#language-switcher-mobile .dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
  /* дальше твои box-shadow, фон и т.д. */
}

/* Открытое состояние, которое даёт JS (iOS-friendly) */
#language-switcher .dropdown-content.show,
#language-switcher-mobile .dropdown-content.show {
  display: block !important;
  visibility: visible;
}

/* Чтобы не резалось и не пряталось под контентом (особенно на айфоне) */
#language-switcher {
  position: relative;
  z-index: 1001;
}
#language-switcher .dropdown-content {
  z-index: 1002;
}


/* === STORE: 8 tabs support (desktop: 4x2), same look as original 4 === */
.store_tab ul{
  border-top: solid 1px #e5e5e5;
  border-bottom: solid 1px #e5e5e5;
}
.store_tab li{
  width: 25%;
  box-sizing: border-box;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
}
/* right border per row (4 columns) */
.store_tab li:nth-child(4n){
  border-right: solid 1px #e5e5e5;
}
/* row divider for 2nd row (items 5+) */
.store_tab li:nth-child(n+5){
  border-top: solid 1px #e5e5e5;
}

/* hide new store boxes by default (JS shows selected) */
.store_box5,
.store_box6,
.store_box7,
.store_box8 { display:none; }


/* === STORE TAB GRID FIX (8 stores) ===
   Why: original uses floats + 24.8% width + borders (4 items only). With 8 items it can wrap/shift.
   This keeps the same visuals, but uses flexbox for stable 4x2 (desktop) / 2x4 (mobile).
*/
.store_tab ul{
  display:flex;
  flex-wrap:wrap;
  border-top:solid 1px #e5e5e5;
  border-bottom:solid 1px #e5e5e5;
}
.store_tab li{
  float:none;
  flex:0 0 25%;
  width:auto;
  box-sizing:border-box;
  border-top:solid 1px #e5e5e5;
  border-left:solid 1px #e5e5e5;
  border-right:0;
  padding:30px 0;
  text-align:center;
  letter-spacing:2px;
}
.store_tab li:nth-child(4n){
  border-right:solid 1px #e5e5e5;
}
.store_tab li:nth-child(n+5){
  border-top:solid 1px #e5e5e5;
}

/* mobile: 2 columns, same borders */
@media only screen and (max-width:766px){
  .store_tab li{
    flex:0 0 50%;
    padding:20px 0;
  }
  .store_tab li:nth-child(2n){
    border-right:solid 1px #e5e5e5;
  }
  .store_tab li:nth-child(4n){
    border-right:0;
  }
}


/* === STORE TAB: ACTIVE INDICATOR (works for li.on OR a.on) === */
.store_tab li{position:relative;}
.store_tab li.on,
.store_tab li[aria-current="true"]{
  box-shadow: inset 0 -6px 0 #000;
}
.store_tab li.on::after,
.store_tab li[aria-current="true"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  border-bottom:6px solid #000;
  pointer-events:none;
}
/* If someone adds .on to <a>, still reflect on parent visually */
.store_tab a.on,
.store_tab a[aria-current="true"]{
  font-weight:700;
}




/* === STORE TAB: 7 items desktop layout 3 + 4 (keep mobile as-is) ===
   Desktop: 12-col grid. Items 1-3 span 4 cols (3 across). Items 4-7 span 3 cols (4 across).
   Place this at the VERY END of matehill.css so it wins over earlier float/flex rules.
*/
@media (min-width: 767px){
  .store_tab ul{
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 !important;

    /* table-like borders (single line) */
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 0;
    border-bottom: 0;
  }

  .store_tab li{
    float: none !important;
    width: auto !important;
    box-sizing: border-box;

    border-left: 0 !important;
    border-top: 0 !important;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;

    padding: 30px 0;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
    z-index: 0;
  }

  .store_tab li:nth-child(-n+3){ grid-column: span 4; }
  .store_tab li:nth-child(n+4){  grid-column: span 3; }

  /* Active indicator: thick underline INSIDE tile, always visible on desktop */
  .store_tab li.on{ z-index: 2; }
  .store_tab li.on::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:6px;
    background:#000;
    pointer-events:none;
  }
}

/* === STORE TAB (DESKTOP): BRICK PYRAMID 3+4 (clean borders) + visible active line === */
@media (min-width: 767px){
  .store_tab ul{
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 0 !important;

    /* IMPORTANT: убираем "табличные" бордеры, они и давали лишние линии */
    border: 0 !important;
  }

  .store_tab li{
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    box-sizing: border-box;

    /* убираем старые бордеры (float-версии) */
    border: 0 !important;

    /* рисуем рамку на каждой плитке */
    border: 1px solid #e5e5e5 !important;

    /* убираем двойные линии между плитками */
    margin: -1px 0 0 -1px;

    position: relative;
    background: #fff;
  }

  /* ссылка всегда занимает "плитку" (чтобы линия не уезжала к середине) */
  .store_tab li a{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 30px 0;         /* оригинальный размер/воздух */
    min-height: 120px;       /* чтобы при src="#" не схлопывалось */

    box-sizing: border-box;
    position: relative;
    z-index: 1;
  }

  /* ===== кирпичная пирамида ===== */
  .store_tab li:nth-child(1){ grid-row: 1; grid-column: 2 / span 2; }
  .store_tab li:nth-child(2){ grid-row: 1; grid-column: 4 / span 2; }
  .store_tab li:nth-child(3){ grid-row: 1; grid-column: 6 / span 2; }

  .store_tab li:nth-child(4){ grid-row: 2; grid-column: 1 / span 2; }
  .store_tab li:nth-child(5){ grid-row: 2; grid-column: 3 / span 2; }
  .store_tab li:nth-child(6){ grid-row: 2; grid-column: 5 / span 2; }
  .store_tab li:nth-child(7){ grid-row: 2; grid-column: 7 / span 2; }

  /* ===== активная линия (всегда видна) ===== */
  .store_tab li.on a,
  .store_tab li a.on{
    box-shadow: inset 0 -8px 0 #000 !important;
  }
}

/* === STORE TAB: bigger tiles + bigger logos + NO gaps on mobile === */
/* Works with 7 tabs (yoga commented). Keeps pyramid layout (3 top + 4 bottom). */

@media (min-width: 767px){
  .store_tab ul{
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 0 !important;
  }

  /* Clean 1px borders without double-thickness */
  .store_tab li{
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    border: 1px solid #e5e5e5 !important;
    margin: -1px 0 0 -1px;
    box-sizing: border-box;
    position: relative;
    background: #fff;
  }

  /* Brick pyramid positioning */
  .store_tab li:nth-child(1){ grid-row: 1; grid-column: 2 / span 2; }
  .store_tab li:nth-child(2){ grid-row: 1; grid-column: 4 / span 2; }
  .store_tab li:nth-child(3){ grid-row: 1; grid-column: 6 / span 2; }

  .store_tab li:nth-child(4){ grid-row: 2; grid-column: 1 / span 2; }
  .store_tab li:nth-child(5){ grid-row: 2; grid-column: 3 / span 2; }
  .store_tab li:nth-child(6){ grid-row: 2; grid-column: 5 / span 2; }
  .store_tab li:nth-child(7){ grid-row: 2; grid-column: 7 / span 2; }

  /* Bigger tile + logo (PC) */
  .store_tab li a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;        /* tile size up */
    padding: 44px 0;          /* keeps “original feel”, just bigger */
    box-sizing: border-box;
  }

  .store_tab li img{
    height: auto !important;
    max-height: 110px;         /* logo bigger */
    max-width: 78%;
  }

  /* Active underline (always visible) */
  .store_tab li.on a{
    box-shadow: inset 0 -10px 0 #000 !important;
  }
}

@media (max-width: 766px){
  /* NO space between tiles */
  .store_tab ul{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;        /* <- no gaps */
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .store_tab li{
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    border: 1px solid #e5e5e5 !important;
    margin: -1px 0 0 -1px;    /* collapse borders */
    box-sizing: border-box;
    background: #fff;
  }

  /* Bigger tile + logo (mobile) */
  .store_tab li a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 128px;        /* bigger than before */
    padding: 18px 12px;
    box-sizing: border-box;
  }

  .store_tab li img{
    height: auto !important;
    max-height: 90px;         /* logo bigger on mobile */
    max-width: 85%;
  }

  .store_tab li.on a{
    box-shadow: inset 0 -8px 0 #000 !important;
  }
}

/* === CLICK FIX: no overlap tiles (use inset border instead of negative margins) === */

/* DESKTOP */
@media (min-width: 767px){
  .store_tab li{
    margin: 0 !important;          /* IMPORTANT: remove -1px overlap */
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #e5e5e5;  /* 1px border without affecting layout */
    position: relative;
    z-index: 0;
  }

  .store_tab li a{
    position: relative;
    z-index: 2;                     /* clickable layer on top */
  }

  .store_tab li img{
    pointer-events: none;           /* clicks always go to <a> */
  }

  /* active underline (always visible) */
  .store_tab li.on a,
  .store_tab li a.on{
    box-shadow:
      inset 0 -10px 0 #000,         /* underline */
      inset 0 0 0 1px #e5e5e5;      /* keep border */
  }
}

/* MOBILE (no gaps, no overlap) */
@media (max-width: 766px){
  .store_tab ul{ gap: 0 !important; }

  .store_tab li{
    margin: 0 !important;           /* IMPORTANT */
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #e5e5e5;
    position: relative;
    z-index: 0;
  }

  .store_tab li a{ position: relative; z-index: 2; }
  .store_tab li img{ pointer-events: none; }

  .store_tab li.on a,
  .store_tab li a.on{
    box-shadow:
      inset 0 -8px 0 #000,
      inset 0 0 0 1px #e5e5e5;
  }
}
/* === REMOVE 1st (extra) underline: kill ::after, keep only box-shadow === */
@media (min-width: 767px){
  .store_tab li.on::after,
  .store_tab a.on::after{
    content: none !important;
    height: 0 !important;
    border: 0 !important;
  }

  .store_tab li.on,
  .store_tab li.on a{
    border-bottom: 0 !important; /* если где-то старое правило осталось */
  }

  /* ONE underline only */
  .store_tab li.on a,
  .store_tab li a.on{
    box-shadow: inset 0 -8px 0 #000 !important;
  }
}

/* === SINGLE ACTIVE LINE (fix double line due to a padding/min-height) === */
@media (min-width: 767px){
  /* kill ALL underline variants on <a> */
  .store_tab li.on a,
  .store_tab li a.on{
    box-shadow: none !important;
    border-bottom: 0 !important;
  }

  /* kill legacy underline on li/.on */
  .store_tab .on,
  .store_tab li.on{
    box-shadow: none !important;
    border-bottom: 0 !important;
  }

  /* kill any old pseudo elements on <a> */
  .store_tab li.on a::after,
  .store_tab a.on::after{
    content: none !important;
  }

  /* keep ONE underline: on li bottom (stable, not affected by a height) */
  .store_tab li.on{
    position: relative;
  }
  .store_tab li.on::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;       /* always at tile bottom */
    height: 8px;     /* thickness */
    background: #000;
    pointer-events: none;
  }
}