:root{--header-h:86px;--footer-h:78px;--brown:#1c120d;--gold:#d49a35;--cream:#f6eeee;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:var(--cream);overflow-x:hidden;font-family:Arial,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#211}
a{text-decoration:none;color:inherit}
body{display:flex;flex-direction:column}
main{margin:0;padding:0;flex:0 0 auto}

/* Header */
.topbar{
  height:var(--header-h);
  background:#1b120d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px 0 0;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  position:relative;
  z-index:100;
}
.brand-logo{display:flex;align-items:center;height:100%;padding-left:0}
.brand-logo img{height:70px;max-width:330px;object-fit:contain;display:block}

.menu-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  height:58px;
  border-radius:999px;
  background-image:linear-gradient(rgba(20,12,8,.35),rgba(20,12,8,.35)),url('../img/dark-jogakbo-menu.png');
  background-size:cover;
  background-position:center;
  border:1px solid rgba(212,154,53,.45);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.menu-pill nav{display:flex;align-items:center;height:100%;gap:0}
.menu-pill nav a,.store-menu-btn{
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  color:#f1d59b;
  font-size:14px;
  font-weight:900;
  line-height:1;
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:Arial,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.menu-pill nav a.active,.menu-pill nav a:hover,.store-menu-btn:hover{background:rgba(0,0,0,.18)}
.store-menu-wrap{position:relative;display:inline-flex;height:100%;align-items:center}
.store-submenu{
  display:none;position:absolute;right:0;top:100%;min-width:220px;background:#1b120d;
  border:1px solid rgba(212,154,53,.45);border-radius:14px;padding:8px;box-shadow:0 16px 32px rgba(0,0,0,.35);z-index:1000
}
.store-menu-wrap:hover .store-submenu{display:block}
.store-submenu a{display:block!important;height:auto!important;padding:11px 12px!important;white-space:nowrap;color:#f1d59b!important;border-radius:10px}
.language-select{position:relative;display:flex;align-items:center;height:100%}
.lang-current{
  height:42px;border:1px solid rgba(212,154,53,.45);border-radius:999px;background:rgba(255,255,255,.08);
  color:#f1d59b;font-weight:900;padding:0 14px;cursor:pointer;white-space:nowrap
}
.lang-menu{
  display:none;position:absolute;right:0;top:100%;min-width:170px;background:#1b120d;border:1px solid rgba(212,154,53,.45);
  border-radius:14px;padding:8px;z-index:1001;box-shadow:0 16px 32px rgba(0,0,0,.35)
}
.language-select.open .lang-menu{display:block}
.lang-menu button{display:block;width:100%;background:transparent;border:0;color:#f1d59b;padding:9px 10px;text-align:left;font-weight:900;cursor:pointer;border-radius:9px}
.lang-menu button:hover{background:rgba(255,255,255,.08)}

/* Home */
.page-home,.page-home .content{margin:0;padding:0;width:100%;max-width:none;background:var(--cream)}
.peak-home{
  position:relative;
  height:calc(100vh - var(--header-h) - var(--footer-h));
  min-height:560px;
  background-image:url('../img/home-peak-bg.png');
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-position:right center;
  background-color:var(--cream);
  overflow:hidden;
  padding:96px 24px 24px clamp(34px,4vw,70px);
}
.peak-home::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.10) 32%,rgba(0,0,0,0) 48%);
}
.peak-copy{position:relative;z-index:2;width:min(620px,42vw);max-width:620px;color:#fff;background:transparent}
.peak-copy h1{
  margin:0 0 16px;color:#fff;font-size:clamp(34px,3.25vw,56px);line-height:.96;font-weight:900;letter-spacing:-.045em;
  text-shadow:0 5px 22px rgba(0,0,0,.72);white-space:nowrap
}
.peak-copy p{
  margin:0;width:min(500px,34vw);max-width:500px;color:#fff;font-size:clamp(12px,.85vw,14px);line-height:1.6;font-weight:800;
  text-shadow:0 4px 18px rgba(0,0,0,.78)
}

/* General pages */
.page:not(.page-home){min-height:calc(100vh - var(--header-h) - var(--footer-h));padding:56px clamp(22px,7vw,120px);background:#f8f4ef}
.page .content{max-width:1180px;margin:0 auto}
.page h1{font-size:clamp(36px,5vw,76px);line-height:1.05;margin:0 0 24px;color:#2d1e1a}
.lead{font-size:20px}

/* Membership */
.membership-wrap{max-width:1180px;margin:0 auto}
.membership-hero{background:rgba(255,255,255,.82);border-radius:26px;padding:30px;margin-bottom:22px;color:#241811;box-shadow:0 20px 60px rgba(70,45,35,.08)}
.membership-hero h1{font-size:clamp(34px,4.2vw,62px);margin:0 0 18px;color:#2d1e1a}
.membership-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.membership-grid article,.membership-detail{
  background:rgba(255,255,255,.88);border:1px solid rgba(122,74,43,.16);border-radius:24px;padding:24px;
  box-shadow:0 20px 60px rgba(70,45,35,.10);color:#241811
}
.membership-grid h2,.membership-detail h1{color:#5c2f0d;margin-top:0}
.membership-grid li,.membership-detail li{margin:7px 0;line-height:1.45}
.join-btn{display:inline-block;margin-top:16px;background:#1d1611;color:#E7D2A6!important;border-radius:999px;padding:11px 18px;font-weight:900}

/* Footer */
.kkot-footer-final{
  min-height:var(--footer-h);height:var(--footer-h);background:#202020;color:#fff;margin:0;padding:12px 16px;display:flex;align-items:center
}
.kkot-footer-tight-inner{display:flex;flex-direction:column;gap:5px;width:auto;max-width:100%}
.kkot-footer-tight-row{display:flex;align-items:baseline;gap:16px;line-height:1.25;flex-wrap:wrap}
.kkot-footer-tight-row span{white-space:nowrap;margin:0;padding:0;font-size:11px;font-weight:700}

/* Responsive */
@media(max-width:1180px){
  :root{--header-h:86px;--footer-h:78px}
  .brand-logo img{height:64px;max-width:300px}
  .menu-pill nav a,.store-menu-btn{font-size:13px;padding:0 10px}
  .peak-home{background-position:74% center;padding-top:94px}
  .peak-copy{width:min(460px,36vw)}
  .peak-copy p{width:min(440px,36vw)}
}
@media(max-width:760px){
  :root{--header-h:126px;--footer-h:96px}
  .topbar{height:var(--header-h);flex-direction:column;align-items:flex-start;justify-content:center;padding:8px 10px;gap:8px}
  .brand-logo{height:52px}.brand-logo img{height:50px;max-width:260px}
  .menu-pill{width:100%;height:52px;overflow-x:auto;justify-content:flex-start}
  .menu-pill nav a,.store-menu-btn{font-size:12px;padding:0 9px}
  .peak-home{height:auto;min-height:calc(100vh - var(--header-h) - var(--footer-h));background-position:center center;background-size:auto 100%;padding:120px 16px 32px}
  .peak-copy{width:min(88vw,390px)}
  .peak-copy h1{font-size:clamp(30px,9vw,42px)}
  .peak-copy p{width:min(86vw,380px);font-size:12.5px}
  .kkot-footer-final{height:auto;min-height:var(--footer-h);padding:12px 14px}
  .kkot-footer-tight-row{gap:10px}
  .kkot-footer-tight-row span{white-space:normal;font-size:12px}
}


/* === USER SCREENSHOT FINAL FIX === */

/* restore jogakbo pattern as main menu background */
.menu-pill{
  background-image:linear-gradient(rgba(18,10,7,.18),rgba(18,10,7,.18)),url('../img/dark-jogakbo-menu.png') !important;
  background-size:cover !important;
  background-position:center !important;
  border:1px solid rgba(212,154,53,.48) !important;
}

/* real flag icon, not KR text */
.lang-current{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
.lang-flag{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  display:inline-block !important;
  object-fit:cover !important;
  flex:0 0 auto !important;
}

/* home: left text panel wider, no text overflow */
.peak-home{
  background-size:auto 100% !important;
  background-position:right center !important;
  padding-left:clamp(34px,3.4vw,58px) !important;
}
.peak-home::before{
  background:linear-gradient(90deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.09) 34%,rgba(0,0,0,0) 48%) !important;
}
.peak-copy{
  width:min(500px,32vw) !important;
  max-width:500px !important;
}
.peak-copy h1{
  font-size:clamp(30px,2.7vw,48px) !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  line-height:1.08 !important;
}
.peak-copy p{
  width:min(500px,32vw) !important;
  max-width:500px !important;
  font-size:clamp(11px,.78vw,13px) !important;
  line-height:1.62 !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}

/* footer: reduce vertical height and text size */
:root{--footer-h:58px !important;}
.kkot-footer-final{
  height:58px !important;
  min-height:58px !important;
  padding:7px 12px !important;
}
.kkot-footer-tight-inner{
  gap:2px !important;
}
.kkot-footer-tight-row{
  gap:12px !important;
  line-height:1.15 !important;
}
.kkot-footer-tight-row span{
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
}

/* desktop recalculation after footer shrink */
.peak-home{
  height:calc(100vh - var(--header-h) - 58px) !important;
}

/* membership title size remains card layout */
.membership-hero h1{
  font-size:clamp(30px,3.6vw,56px) !important;
}

@media(max-width:1180px){
  .peak-copy{width:min(470px,34vw) !important;max-width:470px !important;}
  .peak-copy p{width:min(470px,34vw) !important;max-width:470px !important;}
}

@media(max-width:760px){
  :root{--footer-h:78px !important;}
  .peak-home{
    height:auto !important;
    min-height:calc(100vh - var(--header-h) - 78px) !important;
    background-size:contain !important;
    background-position:center center !important;
  }
  .peak-copy{width:min(88vw,390px) !important;max-width:390px !important;}
  .peak-copy p{width:min(86vw,380px) !important;max-width:380px !important;font-size:12px !important;}
  .kkot-footer-final{height:auto !important;min-height:78px !important;}
}


/* === FINAL MENU IMAGE + LANGUAGE ICON PATCH === */
.menu-pill{
  background-image:linear-gradient(rgba(18,10,7,.16),rgba(18,10,7,.16)),url('../img/dark-jogakbo-menu.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  border:1px solid rgba(212,154,53,.50) !important;
}

.lang-current,
.lang-menu button{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

.lang-flag{
  width:23px !important;
  height:23px !important;
  min-width:23px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:inline-block !important;
}

.lang-menu{
  min-width:178px !important;
}

.lang-menu button{
  white-space:nowrap !important;
  justify-content:flex-start !important;
}

/* Membership card headings are translated and should not overflow */
.membership-grid h2{
  font-size:clamp(20px,1.45vw,26px) !important;
  line-height:1.25 !important;
  word-break:keep-all !important;
}

/* Footer remains compact */
.kkot-footer-final{
  height:58px !important;
  min-height:58px !important;
  padding-top:7px !important;
  padding-bottom:7px !important;
}

.kkot-footer-tight-row span{
  font-size:11px !important;
}


/* === HOME TEXT BALANCE + KOREA FLAG FIX === */

/* Move home copy slightly left/up and keep it balanced inside left panel */
.peak-home{
  padding-top: clamp(74px, 7.4vh, 92px) !important;
  padding-left: clamp(28px, 2.8vw, 48px) !important;
}

.peak-copy{
  width: min(500px, 31vw) !important;
  max-width: 500px !important;
}

.peak-copy h1{
  font-size: clamp(28px, 2.55vw, 46px) !important;
  line-height: 1.08 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.035em !important;
}

.peak-copy p{
  width: min(470px, 30vw) !important;
  max-width: 470px !important;
  font-size: clamp(10.5px, .74vw, 12.5px) !important;
  line-height: 1.62 !important;
}

/* Make language flag icon clean and centered */
.lang-current,
.lang-menu button{
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.lang-flag{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.65) !important;
}

/* keep menu readable */
.menu-pill nav a,
.store-menu-btn{
  font-size: 14px !important;
  font-weight: 900 !important;
}

@media(max-width:1180px){
  .peak-home{
    padding-top: 84px !important;
    padding-left: 24px !important;
  }
  .peak-copy{
    width: min(455px, 34vw) !important;
  }
  .peak-copy p{
    width: min(440px, 33vw) !important;
  }
}

@media(max-width:760px){
  .peak-home{
    padding-top: 112px !important;
    padding-left: 16px !important;
  }
  .peak-copy{
    width: min(88vw, 390px) !important;
  }
  .peak-copy p{
    width: min(86vw, 380px) !important;
    font-size: 12px !important;
  }
}


/* FINAL HOME TEXT SCALE */
.peak-home{
  padding-top: clamp(58px,5vh,76px)!important;
  padding-left: clamp(34px,3vw,54px)!important;
}
.peak-copy{
  width:min(560px,34vw)!important;
  max-width:560px!important;
}
.peak-copy h1{
  font-size:clamp(38px,3.3vw,60px)!important;
  line-height:1.05!important;
  margin-bottom:18px!important;
}
.peak-copy p{
  width:min(540px,33vw)!important;
  max-width:540px!important;
  font-size:clamp(13px,1vw,16px)!important;
  line-height:1.7!important;
}
@media(max-width:760px){
 .peak-home{padding-top:96px!important;padding-left:18px!important;}
 .peak-copy{width:min(92vw,430px)!important;}
 .peak-copy h1{font-size:clamp(40px,9vw,56px)!important;}
 .peak-copy p{width:min(90vw,420px)!important;font-size:14px!important;}
}

/* Final left shift */
.peak-copy{transform:translateX(-28px)!important;}
@media(max-width:760px){.peak-copy{transform:translateX(-14px)!important;}}
.lang-flag{background:none!important;border-radius:50%!important;}


/* === RESET UPLOAD FIX: Home DE/ES bounds + reliable Korean flag PNG === */

/* Korean flag PNG rendering */
.lang-flag{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  background:#fff !important;
  display:inline-block !important;
}

/* General home text: keep inside left panel */
.peak-copy{
  box-sizing:border-box !important;
  max-width:min(540px,33vw) !important;
}
.peak-copy h1{
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  max-width:100% !important;
}
.peak-copy p{
  max-width:100% !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}

/* German and Spanish titles are longer: slightly smaller and narrower, without changing other languages */
html[data-lang="de"] .peak-copy,
html[lang="de"] .peak-copy,
html[data-lang="es"] .peak-copy,
html[lang="es"] .peak-copy{
  width:min(500px,30vw) !important;
  max-width:min(500px,30vw) !important;
  transform:translateX(-8px) !important;
}

html[data-lang="de"] .peak-copy h1,
html[lang="de"] .peak-copy h1,
html[data-lang="es"] .peak-copy h1,
html[lang="es"] .peak-copy h1{
  font-size:clamp(28px,2.35vw,42px) !important;
  line-height:1.1 !important;
  letter-spacing:-0.045em !important;
}

html[data-lang="de"] .peak-copy p,
html[lang="de"] .peak-copy p,
html[data-lang="es"] .peak-copy p,
html[lang="es"] .peak-copy p{
  font-size:clamp(11px,.78vw,13px) !important;
  width:100% !important;
}

/* Window mode */
@media(max-width:1180px){
  html[data-lang="de"] .peak-copy,
  html[lang="de"] .peak-copy,
  html[data-lang="es"] .peak-copy,
  html[lang="es"] .peak-copy{
    width:min(430px,32vw) !important;
    max-width:min(430px,32vw) !important;
    transform:translateX(-6px) !important;
  }
  html[data-lang="de"] .peak-copy h1,
  html[lang="de"] .peak-copy h1,
  html[data-lang="es"] .peak-copy h1,
  html[lang="es"] .peak-copy h1{
    font-size:clamp(26px,3vw,38px) !important;
  }
}

/* Mobile: do not squeeze too much */
@media(max-width:760px){
  html[data-lang="de"] .peak-copy,
  html[lang="de"] .peak-copy,
  html[data-lang="es"] .peak-copy,
  html[lang="es"] .peak-copy{
    width:min(88vw,390px) !important;
    max-width:min(88vw,390px) !important;
    transform:none !important;
  }
  html[data-lang="de"] .peak-copy h1,
  html[lang="de"] .peak-copy h1,
  html[data-lang="es"] .peak-copy h1,
  html[lang="es"] .peak-copy h1{
    font-size:clamp(30px,7.5vw,44px) !important;
  }
}


/* === ARABIC RTL MIRROR PATCH === */
html[dir="rtl"],
body[dir="rtl"]{
  direction:rtl !important;
  text-align:right !important;
}

html[dir="rtl"] body{
  font-family:Arial,Tahoma,"Noto Sans Arabic","Noto Sans KR",sans-serif !important;
}

html[dir="rtl"] .topbar{
  flex-direction:row-reverse !important;
  padding:0 0 0 18px !important;
}

html[dir="rtl"] .brand-logo{
  padding-left:0 !important;
  padding-right:0 !important;
}

html[dir="rtl"] .menu-pill{
  flex-direction:row-reverse !important;
}

html[dir="rtl"] .menu-pill nav{
  flex-direction:row-reverse !important;
}

html[dir="rtl"] .store-submenu{
  right:auto !important;
  left:0 !important;
  text-align:right !important;
}

html[dir="rtl"] .lang-menu{
  right:auto !important;
  left:0 !important;
}

html[dir="rtl"] .lang-menu button{
  text-align:right !important;
  justify-content:flex-start !important;
  flex-direction:row-reverse !important;
}

html[dir="rtl"] .lang-current{
  flex-direction:row-reverse !important;
}

html[dir="rtl"] .peak-home{
  background-position:left center !important;
  padding-left:24px !important;
  padding-right:clamp(34px,3vw,54px) !important;
}

html[dir="rtl"] .peak-home::before{
  background:linear-gradient(270deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.09) 34%,rgba(0,0,0,0) 48%) !important;
}

html[dir="rtl"] .peak-copy{
  margin-left:0 !important;
  margin-right:auto !important;
  transform:none !important;
  text-align:right !important;
}

html[dir="rtl"] .peak-copy h1,
html[dir="rtl"] .peak-copy p{
  text-align:right !important;
  letter-spacing:0 !important;
}

html[dir="rtl"] .page .content,
html[dir="rtl"] .membership-wrap,
html[dir="rtl"] .membership-detail,
html[dir="rtl"] .membership-grid article{
  text-align:right !important;
}

html[dir="rtl"] .membership-grid ul,
html[dir="rtl"] .membership-detail ul{
  padding-right:22px !important;
  padding-left:0 !important;
}

html[dir="rtl"] .kkot-footer-tight-row{
  flex-direction:row-reverse !important;
  justify-content:flex-end !important;
}

@media(max-width:760px){
  html[dir="rtl"] .topbar{
    align-items:flex-end !important;
    padding:8px 10px !important;
  }
  html[dir="rtl"] .menu-pill{
    justify-content:flex-start !important;
  }
  html[dir="rtl"] .peak-home{
    padding-right:18px !important;
    padding-left:16px !important;
    background-position:center center !important;
  }
}


/* === ARABIC HOME MIRROR + LANGUAGE ICON FINAL FIX ===
   Arabic home keeps the original Korean split ratio, but mirrors it:
   image/person area on the left, calm texture/text area on the right. */
html[dir="rtl"] .peak-home{
  background-image:none !important;
  background-color:var(--cream) !important;
  background-position:left center !important;
  padding-left:24px !important;
  padding-right:clamp(34px,3.4vw,58px) !important;
}

html[dir="rtl"] .peak-home::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('../img/home-peak-bg.png');
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-position:right center;
  transform:scaleX(-1);
  transform-origin:center center;
}

html[dir="rtl"] .peak-home::before{
  z-index:1 !important;
  background:linear-gradient(270deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.09) 34%,rgba(0,0,0,0) 48%) !important;
}

html[dir="rtl"] .peak-copy{
  position:relative !important;
  z-index:2 !important;
  margin-left:auto !important;
  margin-right:0 !important;
  transform:none !important;
  text-align:right !important;
  width:min(500px,31vw) !important;
  max-width:500px !important;
}

html[dir="rtl"] .peak-copy h1,
html[dir="rtl"] .peak-copy p{
  text-align:right !important;
  letter-spacing:0 !important;
}

html[dir="rtl"] .peak-copy p{
  width:min(470px,30vw) !important;
  max-width:470px !important;
}

@media(max-width:1180px){
  html[dir="rtl"] .peak-home{
    padding-right:clamp(26px,3vw,46px) !important;
    padding-left:18px !important;
  }
  html[dir="rtl"] .peak-copy{
    width:min(470px,34vw) !important;
    max-width:470px !important;
  }
  html[dir="rtl"] .peak-copy p{
    width:min(440px,32vw) !important;
    max-width:440px !important;
  }
}

@media(max-width:760px){
  html[dir="rtl"] .peak-home{
    padding-right:18px !important;
    padding-left:16px !important;
  }
  html[dir="rtl"] .peak-home::after{
    background-size:auto 100%;
    background-position:center center;
  }
  html[dir="rtl"] .peak-copy{
    width:min(88vw,390px) !important;
    max-width:390px !important;
  }
  html[dir="rtl"] .peak-copy p{
    width:min(86vw,380px) !important;
    max-width:380px !important;
  }
}


/* === ABOUT PAGE CONTENT + ARABIC RTL ALIGNMENT === */
.about-content{max-width:1100px!important;line-height:1.9;}
.about-card{background:rgba(255,255,255,.78);border:1px solid rgba(122,74,43,.13);border-radius:28px;padding:clamp(24px,4vw,52px);margin:0 0 30px;box-shadow:0 22px 70px rgba(70,45,35,.08);}
.about-card h1{margin-bottom:34px!important;}
.about-section p{font-size:clamp(16px,1.15vw,19px);margin:0 0 16px;color:#2b211d;word-break:keep-all;}
.about-section h2{font-size:clamp(24px,2.4vw,36px);margin:0 0 14px;color:#6a3a16;}
.about-section .mission-title{margin-top:40px;}
.about-section ul{margin:14px 0 0;padding-left:25px;}
.about-section .vision-list{margin:14px 0 32px;padding-left:25px;}
.about-section li{font-size:clamp(16px,1.05vw,18px);margin:8px 0;color:#2b211d;line-height:1.75;}
.about-section .vision-list li{font-size:clamp(16px,1.05vw,18px);margin:8px 0;color:#2b211d;line-height:1.75;padding-left:0;}
html[dir="rtl"] .about-page .about-content,
html[dir="rtl"] .about-page .about-card,
html[dir="rtl"] .about-page h1,
html[dir="rtl"] .about-page h2,
html[dir="rtl"] .about-page p,
html[dir="rtl"] .about-page li{text-align:right!important;direction:rtl;}
html[dir="rtl"] .about-section ul{padding-right:25px!important;padding-left:0!important;}
html[dir="rtl"] .about-card{margin-left:0;margin-right:0;}
html[dir="rtl"] .about-section p{letter-spacing:0;}


/* === STORE COMING SOON + DETAIL PAGES === */
.store-detail-page,.store-online-page{background:#f8f4ef;}
.store-detail-content{max-width:1040px!important;display:flex;flex-direction:column;align-items:center;gap:28px;}
.store-coming{width:min(760px,92vw);background:rgba(255,255,255,.84);border:1px solid rgba(122,74,43,.14);border-radius:28px;box-shadow:0 22px 70px rgba(70,45,35,.08);text-align:center;padding:clamp(28px,4vw,48px);}
.store-coming-top{margin-top:clamp(8px,3vh,34px);}
.store-coming h1{font-size:clamp(34px,4.4vw,62px);margin:0 0 12px;color:#2d1e1a;}
.store-coming p{font-size:clamp(22px,2.6vw,36px);font-weight:800;color:#6a3a16;margin:0;letter-spacing:-.02em;}
.store-info-card{width:min(900px,92vw);background:rgba(255,255,255,.78);border:1px solid rgba(122,74,43,.13);border-radius:28px;box-shadow:0 22px 70px rgba(70,45,35,.08);padding:clamp(26px,4vw,52px);color:#2b211d;word-break:keep-all;}
.store-info-card h2{font-size:clamp(30px,4vw,54px);line-height:1.08;margin:0 0 12px;color:#2d1e1a;}
.store-tagline{font-size:clamp(17px,1.6vw,23px);font-weight:800;color:#6a3a16;margin:0 0 20px;}
.store-desc{font-size:clamp(16px,1.2vw,19px);line-height:1.9;margin:0 0 30px;}
.store-info-card h3{font-size:clamp(20px,2vw,28px);margin:0 0 16px;color:#6a3a16;}
.store-service-list{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:16px;}
.store-service-list li{font-size:clamp(16px,1.08vw,18px);line-height:1.75;color:#2b211d;}
.store-service-list strong{display:block;font-size:1.05em;color:#3a241d;}
.store-service-list span{display:block;margin-top:2px;}
.store-online-page{display:flex;align-items:center;justify-content:center;}
.store-online-content{min-height:calc(100vh - var(--header-h) - var(--footer-h) - 112px);display:flex;align-items:center;justify-content:center;width:100%;}
.store-coming-center{margin:auto;}
html[dir="rtl"] .store-detail-content,html[dir="rtl"] .store-info-card,html[dir="rtl"] .store-info-card h2,html[dir="rtl"] .store-info-card h3,html[dir="rtl"] .store-info-card p,html[dir="rtl"] .store-service-list li{text-align:right!important;direction:rtl;}
html[dir="rtl"] .store-service-list{padding-right:26px;padding-left:0;}
@media(max-width:760px){.store-detail-page,.store-online-page{padding-top:40px!important}.store-info-card{padding:24px}.store-coming{padding:26px 20px}.store-online-content{min-height:420px}}


/* Membership / gallery / contact refinements */
.membership-coming-top{margin:0 auto 24px;}
.coming-center-content{min-height:calc(100vh - var(--header-h) - var(--footer-h) - 112px);display:flex;align-items:center;justify-content:center;width:100%;}
.gallery-coming-page,.membership-coming-page{display:flex;align-items:center;justify-content:center;}
.contact-content{max-width:720px!important;margin-left:0!important;}
.contact-page h1{font-size:clamp(48px,6vw,88px);margin-bottom:22px;color:#2d1e1a;}
.contact-content h2{font-size:clamp(24px,2.2vw,34px);line-height:1.35;margin:0 0 28px;color:#7a4a2b;font-weight:900;}
.contact-lead{font-size:clamp(17px,1.35vw,22px);line-height:1.75;margin:0 0 28px;color:#3a241d;}
.contact-form{width:min(640px,92vw);display:flex;flex-direction:column;gap:14px;}
.contact-form input,.contact-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(166,108,86,.34);border-radius:16px;background:rgba(255,255,255,.78);padding:17px 18px;font:inherit;font-size:17px;color:#2d1e1a;outline:none;}
.contact-form textarea{min-height:130px;resize:vertical;}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(122,74,43,.74);box-shadow:0 0 0 3px rgba(122,74,43,.08);}
.contact-form button{border:0;border-radius:999px;background:#845133;color:#fff;font-weight:900;font-size:17px;padding:17px 24px;cursor:pointer;}
.contact-form button:hover{filter:brightness(.96);}
html[dir="rtl"] .contact-content{margin-left:auto!important;margin-right:0!important;text-align:right;direction:rtl;}
html[dir="rtl"] .contact-form input,html[dir="rtl"] .contact-form textarea{text-align:right;direction:rtl;}
html[dir="rtl"] .membership-coming-top,html[dir="rtl"] .gallery-coming-page .store-coming,html[dir="rtl"] .membership-coming-page .store-coming{text-align:center!important;}
@media(max-width:760px){.contact-content{margin:0 auto!important}.contact-page h1{font-size:clamp(42px,13vw,64px)}}


/* === STORE DROPDOWN CLICKABILITY + ARABIC UX OPTIMIZATION === */
.store-submenu{
  min-width:260px !important;
  padding:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  border:1px solid rgba(212,154,53,.58) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.42) !important;
}
.store-submenu a{
  display:flex !important;
  align-items:center !important;
  min-height:58px !important;
  padding:0 24px !important;
  border-radius:0 !important;
  border-bottom:1px solid rgba(230,180,88,.22) !important;
  font-size:15px !important;
  line-height:1.35 !important;
  letter-spacing:-.01em !important;
  transition:background .18s ease, padding .18s ease, color .18s ease !important;
}
.store-submenu a:last-child{border-bottom:none !important;}
.store-submenu a:hover,
.store-submenu a:focus{
  background:rgba(230,180,88,.15) !important;
  color:#ffe4a8 !important;
  padding-left:30px !important;
  outline:none !important;
}
.store-menu-wrap.open .store-submenu{display:block !important;}
.store-menu-btn{min-width:70px !important;}

html[dir="rtl"] body{
  font-family:Tahoma,Arial,"Noto Naskh Arabic","Noto Sans Arabic","Noto Sans KR",sans-serif !important;
  word-spacing:.02em;
}
html[dir="rtl"] .store-submenu{
  left:0 !important;
  right:auto !important;
  text-align:right !important;
}
html[dir="rtl"] .store-submenu a{
  justify-content:flex-start !important;
  text-align:right !important;
  direction:rtl !important;
  padding:0 24px !important;
  font-size:16px !important;
}
html[dir="rtl"] .store-submenu a:hover,
html[dir="rtl"] .store-submenu a:focus{
  padding-right:30px !important;
  padding-left:24px !important;
}
html[dir="rtl"] .menu-pill nav a,
html[dir="rtl"] .store-menu-btn{
  font-size:15px !important;
  letter-spacing:0 !important;
  padding-inline:15px !important;
}
html[dir="rtl"] .lang-current,
html[dir="rtl"] .lang-menu button{
  font-family:Tahoma,Arial,"Noto Naskh Arabic","Noto Sans Arabic",sans-serif !important;
}
html[dir="rtl"] .page h1,
html[dir="rtl"] .store-coming h1,
html[dir="rtl"] .store-info-card h2,
html[dir="rtl"] .about-card h1,
html[dir="rtl"] .contact-page h1{
  letter-spacing:0 !important;
  line-height:1.18 !important;
}
html[dir="rtl"] .store-tagline,
html[dir="rtl"] .store-desc,
html[dir="rtl"] .store-service-list li,
html[dir="rtl"] .about-section p,
html[dir="rtl"] .about-section li,
html[dir="rtl"] .membership-grid li,
html[dir="rtl"] .contact-lead{
  line-height:1.95 !important;
  letter-spacing:0 !important;
}
html[dir="rtl"] .store-service-list strong{line-height:1.7 !important;}
html[dir="rtl"] .contact-form input,
html[dir="rtl"] .contact-form textarea{
  font-size:18px !important;
  line-height:1.8 !important;
}
html[dir="rtl"] .contact-form button{font-size:18px !important;}

@media (hover:none), (max-width:900px){
  .store-menu-wrap:hover .store-submenu{display:none;}
  .store-menu-wrap.open .store-submenu{display:block !important;}
  .store-submenu{min-width:280px !important;}
  .store-submenu a{min-height:62px !important;font-size:16px !important;}
}
@media(max-width:760px){
  .store-submenu{
    position:absolute !important;
    right:0 !important;
    left:auto !important;
    min-width:260px !important;
  }
  html[dir="rtl"] .store-submenu{left:0 !important;right:auto !important;}
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-btn{font-size:14px !important;padding-inline:11px !important;}
}


/* === FINAL COMPACT STORE DROPDOWN + JP HOME SAFE AREA + CONTACT ANTI-ROBOT === */
.store-submenu{
  min-width:218px !important;
  max-width:232px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}
.store-submenu a{
  min-height:46px !important;
  padding:0 18px !important;
  font-size:14px !important;
  line-height:1.25 !important;
  justify-content:center !important;
}
.store-submenu a:hover,.store-submenu a:focus{
  padding-left:22px !important;
}
html[dir="rtl"] .store-submenu a{padding:0 18px !important;justify-content:center !important;font-size:15px !important;}
html[dir="rtl"] .store-submenu a:hover,html[dir="rtl"] .store-submenu a:focus{padding-right:22px !important;padding-left:18px !important;}

html[data-lang="ja"] .peak-copy,
html[lang="ja"] .peak-copy,
html[data-lang="zh"] .peak-copy,
html[lang="zh"] .peak-copy,
html[data-lang="fr"] .peak-copy,
html[lang="fr"] .peak-copy{
  width:min(500px,31vw) !important;
  max-width:min(500px,31vw) !important;
  transform:translateX(-8px) !important;
}
html[data-lang="ja"] .peak-copy h1,
html[lang="ja"] .peak-copy h1,
html[data-lang="zh"] .peak-copy h1,
html[lang="zh"] .peak-copy h1,
html[data-lang="fr"] .peak-copy h1,
html[lang="fr"] .peak-copy h1{
  font-size:clamp(28px,3.05vw,50px) !important;
  line-height:1.12 !important;
  letter-spacing:-.055em !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-break:strict !important;
}
html[data-lang="ja"] .peak-copy p,
html[lang="ja"] .peak-copy p,
html[data-lang="zh"] .peak-copy p,
html[lang="zh"] .peak-copy p,
html[data-lang="fr"] .peak-copy p,
html[lang="fr"] .peak-copy p{
  font-size:clamp(11px,.82vw,14px) !important;
  line-height:1.7 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
@media(max-width:1180px){
  html[data-lang="ja"] .peak-copy,html[lang="ja"] .peak-copy,
  html[data-lang="zh"] .peak-copy,html[lang="zh"] .peak-copy,
  html[data-lang="fr"] .peak-copy,html[lang="fr"] .peak-copy{
    width:min(390px,34vw) !important;
    max-width:min(390px,34vw) !important;
  }
  html[data-lang="ja"] .peak-copy h1,html[lang="ja"] .peak-copy h1,
  html[data-lang="zh"] .peak-copy h1,html[lang="zh"] .peak-copy h1,
  html[data-lang="fr"] .peak-copy h1,html[lang="fr"] .peak-copy h1{font-size:clamp(25px,3.25vw,40px) !important;}
}
@media(max-width:760px){
  html[data-lang="ja"] .peak-copy,html[lang="ja"] .peak-copy,
  html[data-lang="zh"] .peak-copy,html[lang="zh"] .peak-copy,
  html[data-lang="fr"] .peak-copy,html[lang="fr"] .peak-copy{width:min(88vw,390px) !important;max-width:min(88vw,390px) !important;transform:none !important;}
}
.robot-check{display:flex;align-items:center;gap:10px;margin:4px 0 2px;font-size:15px;color:#3a241d;line-height:1.5;cursor:pointer;user-select:none;}
.robot-check input{width:20px!important;height:20px!important;min-width:20px;margin:0;accent-color:#845133;}
.contact-mail-note{font-size:13px;line-height:1.55;color:#7a4a2b;margin:0 0 2px;opacity:.9;}
html[dir="rtl"] .robot-check{direction:rtl;justify-content:flex-start;text-align:right;}

/* === REAL GOOGLE reCAPTCHA CONTACT FORM === */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;tab-size:0!important;}
.g-recaptcha{margin:8px 0 12px;transform-origin:left top;}
html[dir="rtl"] .g-recaptcha{transform-origin:right top;}
.contact-result{margin:18px 0 20px;padding:16px 18px;border-radius:16px;font-weight:700;line-height:1.6;border:1px solid rgba(132,81,51,.25);background:#fff;color:#3a241d;}
.contact-result.success{background:#f2fbf4;border-color:rgba(39,135,63,.28);color:#1f6b35;}
.contact-result.error{background:#fff4f2;border-color:rgba(190,70,50,.28);color:#8a2f24;}
@media(max-width:420px){.g-recaptcha{transform:scale(.88);transform-origin:left top;}html[dir="rtl"] .g-recaptcha{transform-origin:right top;}}


/* === PAGE BACKGROUND PHOTOS ADDED === */
.about-page,
.store-lounge-page,
.store-palace-page,
.store-online-page,
.membership-page,
.gallery-coming-page,
.contact-page{
  position:relative;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll;
  overflow:hidden;
}
.about-page{background-image:url('../img/bg-about.png')!important;}
.store-lounge-page{background-image:url('../img/bg-lounge.jpeg')!important;background-position:center 44%!important;}
.store-palace-page{background-image:url('../img/bg-palace.jpeg')!important;background-position:center 48%!important;}
.store-online-page{background-image:url('../img/bg-online.jpeg')!important;background-position:center 50%!important;}
.membership-page{background-image:url('../img/bg-membership.jpeg')!important;background-position:center 45%!important;}
.gallery-coming-page{background-image:url('../img/bg-gallery.jpeg')!important;background-position:center 47%!important;}
.contact-page{background-image:url('../img/bg-contact.jpeg')!important;background-position:center 45%!important;}
.about-page::before,
.store-lounge-page::before,
.store-palace-page::before,
.store-online-page::before,
.membership-page::before,
.gallery-coming-page::before,
.contact-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(248,244,239,.66),rgba(248,244,239,.76));
}
.store-lounge-page::before,
.store-palace-page::before,
.store-online-page::before{
  background:linear-gradient(180deg,rgba(248,244,239,.50),rgba(248,244,239,.72));
}
.membership-page::before,.gallery-coming-page::before,.contact-page::before{
  background:linear-gradient(180deg,rgba(248,244,239,.58),rgba(248,244,239,.78));
}
.about-page > .content,
.store-detail-page > .content,
.store-online-page > .content,
.membership-page > .content,
.gallery-coming-page > .content,
.contact-page > .content{
  position:relative;
  z-index:1;
}
.about-card,.store-coming,.store-info-card,.membership-hero,.membership-grid article,.contact-form input,.contact-form textarea{
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.contact-content{
  background:rgba(248,244,239,.50);
  border-radius:30px;
  padding:clamp(20px,3.5vw,42px);
  box-shadow:0 22px 70px rgba(70,45,35,.08);
}
@media(max-width:760px){
  .about-page,.store-lounge-page,.store-palace-page,.store-online-page,.membership-page,.gallery-coming-page,.contact-page{background-attachment:scroll!important;}
  .about-page::before,.store-lounge-page::before,.store-palace-page::before,.store-online-page::before,.membership-page::before,.gallery-coming-page::before,.contact-page::before{background:rgba(248,244,239,.78);}
}

/* === PAGE BACKGROUND COMPOSITION REFINEMENT ===
   Repositioned about/gallery/contact backgrounds and set the requested hanbok photo for membership. */
.about-page{
  background-image:url('../img/bg-about.png')!important;
  background-size:cover!important;
  background-position:right 42% center!important;
}
.gallery-coming-page{
  background-image:url('../img/bg-gallery.jpeg')!important;
  background-size:cover!important;
  background-position:center 42%!important;
}
.contact-page{
  background-image:url('../img/bg-contact.jpeg')!important;
  background-size:cover!important;
  background-position:center 38%!important;
}
.membership-page,
.membership-coming-page{
  background-image:url('../img/bg-membership.jpeg')!important;
  background-size:cover!important;
  background-position:center 44%!important;
}
.about-page::before{
  background:linear-gradient(90deg,rgba(248,244,239,.84) 0%,rgba(248,244,239,.70) 46%,rgba(248,244,239,.36) 100%)!important;
}
.gallery-coming-page::before{
  background:linear-gradient(180deg,rgba(248,244,239,.42) 0%,rgba(248,244,239,.72) 100%)!important;
}
.contact-page::before{
  background:linear-gradient(90deg,rgba(248,244,239,.86) 0%,rgba(248,244,239,.66) 48%,rgba(248,244,239,.34) 100%)!important;
}
.membership-page::before,
.membership-coming-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(248,244,239,.82) 0%,rgba(248,244,239,.58) 48%,rgba(248,244,239,.30) 100%)!important;
}
.membership-coming-page > .content{
  position:relative;
  z-index:1;
}
@media(max-width:760px){
  .about-page{background-position:center center!important;}
  .gallery-coming-page{background-position:center center!important;}
  .contact-page{background-position:center center!important;}
  .membership-page,.membership-coming-page{background-position:center center!important;}
  .about-page::before,.gallery-coming-page::before,.contact-page::before,.membership-page::before,.membership-coming-page::before{background:rgba(248,244,239,.78)!important;}
}


/* === FINAL USER REQUEST: exact page background composition ===
   Contact: keep the model's face visible below the header.
   Gallery: keep the main subject centered.
   Membership: use the hanbok portrait photo on the membership page.
   Membership join/detail pages: use the jogakbo pattern background. */
.contact-page{
  background-image:url('../img/bg-contact.jpeg')!important;
  background-size:cover!important;
  background-position:75% 25%!important;
  background-repeat:no-repeat!important;
}
.contact-page::before{
  background:linear-gradient(90deg,rgba(248,244,239,.88) 0%,rgba(248,244,239,.68) 43%,rgba(248,244,239,.30) 100%)!important;
}
.gallery-coming-page{
  background-image:url('../img/bg-gallery.jpeg')!important;
  background-size:cover!important;
  background-position:center 34%!important;
  background-repeat:no-repeat!important;
}
.gallery-coming-page::before{
  background:linear-gradient(180deg,rgba(248,244,239,.38) 0%,rgba(248,244,239,.70) 100%)!important;
}
.membership-page{
  background-image:url('../img/bg-membership.jpeg')!important;
  background-size:cover!important;
  background-position:70% 26%!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed;
}
.membership-page::before{
  background:linear-gradient(90deg,rgba(248,244,239,.74) 0%,rgba(248,244,239,.54) 48%,rgba(248,244,239,.22) 100%)!important;
}
.membership-coming-page{
  background-image:url('../img/bg-membership-detail.png')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.membership-coming-page::before{
  background:rgba(248,244,239,.58)!important;
}
.membership-page .membership-hero,
.membership-page .membership-grid article,
.membership-page .store-coming,
.gallery-coming-page .store-coming,
.membership-coming-page .store-coming{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
@media(max-width:760px){
  .contact-page{background-position:72% 22%!important;}
  .gallery-coming-page{background-position:center 32%!important;}
  .membership-page{background-position:66% 22%!important;background-attachment:scroll!important;}
  .membership-coming-page{background-position:center center!important;}
}

/* === FINAL FIX 2026-06-28: requested gallery/membership backgrounds + solid footer === */
.gallery-coming-page{
  background-image:url('../img/bg-gallery.jpeg')!important;
  background-size:cover!important;
  background-position:center 40%!important;
  background-repeat:no-repeat!important;
}
.gallery-coming-page::before{
  background:linear-gradient(180deg,rgba(248,244,239,.30) 0%,rgba(248,244,239,.60) 100%)!important;
}
.membership-page{
  background-image:url('../img/bg-membership.jpeg')!important;
  background-size:cover!important;
  background-position:68% 35%!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
.membership-page::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(248,244,239,.68) 0%,rgba(248,244,239,.52) 48%,rgba(248,244,239,.26) 100%)!important;
}
.membership-page .membership-wrap{position:relative!important;z-index:1!important;}
.membership-coming-page{
  background-image:url('../img/bg-membership-detail.png')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.kkot-footer-final,
footer.kkot-footer-final{
  background:#171717!important;
  background-color:#171717!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  color:#fff!important;
  position:relative!important;
  z-index:20!important;
  isolation:isolate!important;
}
.kkot-footer-final *{color:#fff!important;opacity:1!important;filter:none!important;}
@media(max-width:760px){
  .gallery-coming-page{background-position:center 36%!important;}
  .membership-page{background-position:64% 28%!important;background-attachment:scroll!important;}
}


/* === FIX: gallery/membership preview backgrounds + Arabic contact mirrored background === */
.gallery-coming-page{
  background-image:url('../img/bg-gallery.jpeg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.gallery-coming-page::before{
  background:linear-gradient(180deg,rgba(248,244,239,.30) 0%,rgba(248,244,239,.58) 100%) !important;
}
.membership-page{
  background-image:url('../img/bg-membership.jpeg') !important;
  background-size:cover !important;
  background-position:70% center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
.membership-page::before{
  background:linear-gradient(90deg,rgba(248,244,239,.70) 0%,rgba(248,244,239,.52) 48%,rgba(248,244,239,.24) 100%) !important;
}
.membership-page > .content,
.membership-page .membership-wrap{
  position:relative !important;
  z-index:3 !important;
}
html[data-lang="ar"] .contact-page{
  background-image:none !important;
  overflow:hidden !important;
}
html[data-lang="ar"] .contact-page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('../img/bg-contact.jpeg');
  background-size:cover;
  background-position:25% 25%;
  background-repeat:no-repeat;
  transform:scaleX(-1);
}
html[data-lang="ar"] .contact-page::before{
  z-index:1 !important;
  background:linear-gradient(270deg,rgba(248,244,239,.88) 0%,rgba(248,244,239,.68) 43%,rgba(248,244,239,.30) 100%) !important;
}
html[data-lang="ar"] .contact-page > .content,
html[data-lang="ar"] .contact-page .contact-content{
  position:relative !important;
  z-index:3 !important;
}
.kkot-footer-final, footer.kkot-footer-final{
  background:#171717 !important;
  background-color:#171717 !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  color:#fff !important;
}
@media(max-width:760px){
  .gallery-coming-page{background-position:center center !important;}
  .membership-page{background-position:66% center !important;background-attachment:scroll !important;}
  html[data-lang="ar"] .contact-page::after{background-position:28% center;}
}

/* === FINAL USER FIX: gallery portrait visible + membership main spa background 2026-06-28 === */
.gallery-coming-page{
  background-image:url('../img/bg-gallery.jpeg') !important;
  background-size:cover !important;
  background-position:62% 18% !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
.gallery-coming-page::before{
  background:rgba(248,244,239,.62) !important;
}
.gallery-coming-page .store-coming{
  margin-top:clamp(80px, 14vh, 160px) !important;
}
.membership-page{
  background-image:url('../img/bg-membership.jpeg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
.membership-page::before{
  background:rgba(248,244,239,.64) !important;
}
.kkot-footer-final,
footer.kkot-footer-final{
  background:#151515 !important;
  opacity:1 !important;
  filter:none !important;
}
@media(max-width:800px){
  .gallery-coming-page{background-position:66% top !important;background-attachment:scroll !important;}
  .membership-page{background-position:center center !important;background-attachment:scroll !important;}
  .gallery-coming-page::before,.membership-page::before{background:rgba(248,244,239,.72) !important;}
}

/* === MOBILE UX OPTIMIZATION: language/store panels + home hero alignment === */
html, body{max-width:100%;}
.menu-pill nav a,
.store-menu-btn,
.lang-current,
.lang-menu button,
.store-submenu a{
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
}
.store-menu-wrap.open .store-submenu{display:block !important;}

@media(max-width:760px){
  :root{--header-h:112px !important;--footer-h:70px !important;}
  .topbar{
    height:auto !important;
    min-height:112px !important;
    padding:8px 8px 9px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;
    overflow:visible !important;
  }
  .brand-logo{
    height:46px !important;
    width:100% !important;
    justify-content:flex-start !important;
    padding-left:0 !important;
  }
  .brand-logo img{
    height:44px !important;
    max-width:min(250px,76vw) !important;
    object-fit:contain !important;
  }
  .menu-pill{
    width:100% !important;
    max-width:100% !important;
    height:48px !important;
    min-height:48px !important;
    padding:4px 5px !important;
    gap:4px !important;
    border-radius:18px !important;
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
  }
  .menu-pill nav{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:40px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:2px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  .menu-pill nav::-webkit-scrollbar{display:none !important;}
  .menu-pill nav a,
  .store-menu-btn{
    flex:0 0 auto !important;
    height:38px !important;
    min-width:auto !important;
    max-width:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 9px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    letter-spacing:-.02em !important;
    border-radius:12px !important;
    transform:none !important;
  }
  .store-menu-wrap{
    flex:0 0 auto !important;
    height:38px !important;
    position:static !important;
  }
  .store-submenu{
    display:none !important;
    position:fixed !important;
    top:104px !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:calc(100vw - 20px) !important;
    padding:8px !important;
    border-radius:18px !important;
    z-index:9999 !important;
    background:#1b120d !important;
    box-shadow:0 18px 40px rgba(0,0,0,.42) !important;
  }
  .store-menu-wrap:hover .store-submenu{display:none !important;}
  .store-menu-wrap.open .store-submenu{display:block !important;}
  .store-submenu a{
    height:48px !important;
    min-height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 14px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    border-radius:12px !important;
    border-bottom:1px solid rgba(212,154,53,.24) !important;
  }
  .store-submenu a:last-child{border-bottom:0 !important;}
  .language-select{
    flex:0 0 auto !important;
    height:40px !important;
    position:static !important;
    display:flex !important;
    align-items:center !important;
  }
  .lang-current{
    height:38px !important;
    min-width:44px !important;
    max-width:58px !important;
    padding:0 7px !important;
    border-radius:999px !important;
    font-size:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    touch-action:manipulation !important;
  }
  .lang-current span,
  .lang-current .chev{display:none !important;}
  .lang-current::after{content:'▾';font-size:10px;color:#f1d59b;margin-left:4px;}
  .lang-flag{width:23px !important;height:23px !important;}
  .lang-menu{
    display:none !important;
    position:fixed !important;
    top:104px !important;
    right:10px !important;
    left:auto !important;
    width:min(230px,calc(100vw - 20px)) !important;
    min-width:0 !important;
    max-height:66vh !important;
    overflow:auto !important;
    padding:8px !important;
    border-radius:18px !important;
    z-index:10000 !important;
    background:#1b120d !important;
    box-shadow:0 18px 40px rgba(0,0,0,.42) !important;
  }
  .language-select.open .lang-menu{display:block !important;}
  .lang-menu button{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:9px 12px !important;
    font-size:14px !important;
    text-align:left !important;
    border-radius:12px !important;
  }

  .page-home,.page-home .content{min-height:auto !important;}
  .peak-home{
    min-height:calc(100svh - 112px - 70px) !important;
    height:auto !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 15px 28px !important;
    background-size:cover !important;
    background-position:67% center !important;
    background-color:#f6eeee !important;
  }
  .peak-home::before{
    background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,.58) 100%) !important;
  }
  .peak-copy{
    width:100% !important;
    max-width:440px !important;
    padding:20px 18px !important;
    border-radius:22px !important;
    background:rgba(28,18,13,.54) !important;
    backdrop-filter:blur(6px) !important;
    -webkit-backdrop-filter:blur(6px) !important;
    color:#fff !important;
    text-align:left !important;
    box-shadow:0 18px 45px rgba(0,0,0,.24) !important;
  }
  .peak-copy h1{
    font-size:clamp(28px,8.7vw,42px) !important;
    line-height:1.08 !important;
    letter-spacing:-.045em !important;
    margin:0 0 10px !important;
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
  }
  .peak-copy p{
    width:100% !important;
    max-width:none !important;
    font-size:13px !important;
    line-height:1.55 !important;
    font-weight:800 !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
  }
  html[data-lang="ja"] .peak-copy h1,
  html[data-lang="zh"] .peak-copy h1{
    font-size:clamp(25px,7.8vw,36px) !important;
    line-height:1.15 !important;
  }
  html[data-lang="de"] .peak-copy h1,
  html[data-lang="fr"] .peak-copy h1,
  html[data-lang="es"] .peak-copy h1{
    font-size:clamp(24px,7.5vw,34px) !important;
    line-height:1.16 !important;
  }
  html[dir="rtl"] .peak-copy{text-align:right !important;}
  html[dir="rtl"] .menu-pill nav{direction:rtl !important;}
  html[dir="rtl"] .lang-menu{right:auto !important;left:10px !important;}
  html[dir="rtl"] .lang-menu button{text-align:right !important;justify-content:flex-start !important;direction:rtl !important;}
  html[dir="rtl"] .store-submenu{text-align:right !important;direction:rtl !important;}

  .page:not(.page-home){padding:28px 16px !important;}
  .store-coming,.membership-hero,.membership-grid article,.store-info-card,.contact-content{
    border-radius:22px !important;
  }
}


/* === FINAL MOBILE FULL FIX 2026-06-28 ===
   Fixes mobile contact overflow, language/store panel tap reliability,
   vertical menu text, and page background visibility. */
@media (max-width: 900px){
  html, body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  .topbar{z-index:5000!important;overflow:visible!important;}
  .menu-pill{position:relative!important;overflow:visible!important;z-index:5100!important;}
  .menu-pill nav{overflow-x:auto!important;overflow-y:visible!important;}
  .menu-pill nav a,
  .store-menu-btn,
  .lang-current,
  .lang-menu button,
  .store-submenu a{
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .store-menu-wrap{position:static!important;}
  .store-submenu{
    display:none!important;
    position:fixed!important;
    top:calc(var(--header-h) + 8px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 24px)!important;
    padding:8px!important;
    border-radius:18px!important;
    background:#1b120d!important;
    border:1px solid rgba(212,154,53,.65)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.48)!important;
    z-index:99999!important;
  }
  .store-menu-wrap.open .store-submenu{display:flex!important;flex-direction:column!important;}
  .store-submenu a{
    width:100%!important;
    height:50px!important;
    min-height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 14px!important;
    border-radius:12px!important;
    font-size:14px!important;
    line-height:1.2!important;
    border-bottom:1px solid rgba(212,154,53,.24)!important;
  }
  .store-submenu a:last-child{border-bottom:0!important;}
  .language-select{position:static!important;z-index:5200!important;}
  .lang-menu{
    display:none!important;
    position:fixed!important;
    top:calc(var(--header-h) + 8px)!important;
    right:12px!important;
    left:auto!important;
    width:min(250px,calc(100vw - 24px))!important;
    min-width:0!important;
    max-height:68svh!important;
    overflow:auto!important;
    padding:8px!important;
    border-radius:18px!important;
    background:#1b120d!important;
    border:1px solid rgba(212,154,53,.65)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.48)!important;
    z-index:100000!important;
  }
  .language-select.open .lang-menu{display:block!important;}
  .lang-menu button{min-height:46px!important;font-size:14px!important;}
  html[dir="rtl"] .lang-menu{left:12px!important;right:auto!important;}
  html[dir="rtl"] .store-submenu{direction:rtl!important;text-align:right!important;}

  .page:not(.page-home){
    width:100%!important;
    max-width:100%!important;
    min-height:calc(100svh - var(--header-h) - var(--footer-h))!important;
    padding:26px 12px!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-attachment:scroll!important;
  }
  .page .content{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;}
  .about-page::before,.store-lounge-page::before,.store-palace-page::before,.store-online-page::before,
  .membership-page::before,.membership-coming-page::before,.gallery-coming-page::before,.contact-page::before{
    background:rgba(248,244,239,.68)!important;
  }
  .gallery-coming-page{background-position:62% top!important;}
  .membership-page{background-position:center center!important;}
  .contact-page{background-position:72% 24%!important;}
  html[data-lang="ar"] .contact-page::after{background-position:28% 24%!important;background-size:cover!important;}

  .contact-page{padding:18px 10px 26px!important;}
  .contact-content{
    width:100%!important;
    max-width:calc(100vw - 20px)!important;
    margin:0 auto!important;
    padding:18px 14px!important;
    border-radius:22px!important;
    background:rgba(248,244,239,.70)!important;
  }
  .contact-page h1{font-size:clamp(38px,12vw,58px)!important;margin-bottom:14px!important;}
  .contact-content h2{font-size:clamp(20px,6vw,28px)!important;margin-bottom:16px!important;}
  .contact-lead{font-size:15px!important;line-height:1.6!important;margin-bottom:18px!important;}
  .contact-form{width:100%!important;max-width:100%!important;gap:12px!important;overflow:hidden!important;}
  .contact-form input,.contact-form textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:14px 14px!important;
    font-size:16px!important;
    border-radius:14px!important;
  }
  .contact-form textarea{min-height:118px!important;}
  .g-recaptcha{max-width:100%!important;overflow:hidden!important;margin:4px 0 8px!important;transform:scale(.92)!important;transform-origin:left top!important;}
  html[dir="rtl"] .g-recaptcha{transform-origin:right top!important;}
  .contact-mail-note{font-size:12px!important;line-height:1.45!important;}
  .contact-form button{width:100%!important;padding:15px 18px!important;font-size:16px!important;}
}
@media(max-width:420px){.g-recaptcha{transform:scale(.84)!important;}}
@media(max-width:360px){.g-recaptcha{transform:scale(.76)!important;}}

/* === ARABIC + MOBILE MENU FINAL STABILITY FIX === */
.topbar,
.menu-pill,
.menu-pill nav,
.language-select{
  direction:ltr !important;
}
html[dir="rtl"] .topbar,
html[dir="rtl"] .menu-pill,
html[dir="rtl"] .menu-pill nav,
html[dir="rtl"] .language-select{
  direction:ltr !important;
}
html[dir="rtl"] .menu-pill nav{
  flex-direction:row !important;
  justify-content:flex-start !important;
}
html[dir="rtl"] .menu-pill nav a,
html[dir="rtl"] .store-menu-btn{
  direction:rtl !important;
  unicode-bidi:isolate !important;
  text-align:center !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}
html[dir="rtl"] .store-submenu,
html[dir="rtl"] .lang-menu{
  direction:rtl !important;
  text-align:right !important;
}
html[dir="rtl"] .store-submenu a,
html[dir="rtl"] .lang-menu button{
  direction:rtl !important;
  text-align:right !important;
  justify-content:flex-start !important;
  writing-mode:horizontal-tb !important;
  white-space:nowrap !important;
}

@media(max-width:900px){
  .topbar{position:relative !important; z-index:50000 !important; overflow:visible !important;}
  .menu-pill{overflow:visible !important; z-index:50010 !important;}
  .menu-pill nav{
    direction:ltr !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
  }
  html[dir="rtl"] .menu-pill nav{
    direction:ltr !important;
    flex-direction:row !important;
  }
  .menu-pill nav a,
  .store-menu-btn{
    display:inline-flex !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    flex:0 0 auto !important;
    min-width:max-content !important;
  }
  .store-menu-wrap{position:static !important; flex:0 0 auto !important;}
  .store-submenu{
    position:fixed !important;
    top:calc(var(--header-h) + 8px) !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:calc(100vw - 24px) !important;
    z-index:999999 !important;
    display:none !important;
  }
  .store-menu-wrap.open .store-submenu{display:flex !important; flex-direction:column !important;}
  .language-select{position:static !important; z-index:50020 !important;}
  .lang-menu{
    position:fixed !important;
    top:calc(var(--header-h) + 8px) !important;
    right:12px !important;
    left:auto !important;
    width:min(260px,calc(100vw - 24px)) !important;
    z-index:1000000 !important;
    display:none !important;
  }
  html[dir="rtl"] .lang-menu{left:12px !important; right:auto !important;}
  .language-select.open .lang-menu{display:block !important;}

  /* make all page backgrounds visible on mobile instead of disappearing behind solid blocks */
  .about-page,.store-lounge-page,.store-palace-page,.store-online-page,.membership-page,.membership-coming-page,.gallery-coming-page,.contact-page{
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
  }
  .about-page::before,.store-lounge-page::before,.store-palace-page::before,.store-online-page::before,.membership-page::before,.membership-coming-page::before,.gallery-coming-page::before,.contact-page::before{
    background:rgba(248,244,239,.58) !important;
  }
  .gallery-coming-page{background-position:58% top !important;}
  .membership-page{background-position:center center !important;}
  .contact-page{background-position:72% center !important;}

  /* home mobile: text and image act as one hero */
  .peak-home{
    min-height:calc(100svh - var(--header-h) - var(--footer-h)) !important;
    background-size:cover !important;
    background-position:68% center !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 14px 26px !important;
  }
  html[dir="rtl"] .peak-home{background-position:32% center !important;}
  .peak-copy{
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
    background:rgba(28,18,13,.62) !important;
    color:#fff !important;
    border-radius:22px !important;
    padding:18px 16px !important;
  }
  .peak-copy h1{font-size:clamp(27px,8.2vw,40px) !important; line-height:1.12 !important;}
  .peak-copy p{font-size:13px !important; line-height:1.55 !important;}
}

/* === DESKTOP LANGUAGE PANEL STABILITY 2026-06-28 === */
.language-select{position:relative!important;overflow:visible!important;z-index:100000!important;}
.lang-current{pointer-events:auto!important;cursor:pointer!important;}
.lang-menu{pointer-events:auto!important;z-index:100001!important;}
.language-select.open .lang-menu{display:block!important;}
.lang-menu button{width:100%!important;cursor:pointer!important;}
.store-menu-wrap{overflow:visible!important;}
.store-menu-btn{cursor:pointer!important;}
.store-menu-wrap.open .store-submenu{display:block!important;}
@media(min-width:901px){
  .lang-menu{position:absolute!important;top:calc(100% + 10px)!important;right:0!important;left:auto!important;min-width:210px!important;max-height:70vh!important;overflow:auto!important;}
  html[dir="rtl"] .lang-menu{right:0!important;left:auto!important;}
  .store-submenu{z-index:100000!important;}
  .store-menu-wrap.open .store-submenu{display:block!important;}
}


/* === PC LANGUAGE CLICK PANEL FIX 2026-06-28-4 === */
.language-select{position:relative!important;overflow:visible!important;z-index:1000000!important;}
.lang-current{pointer-events:auto!important;user-select:none!important;cursor:pointer!important;}
.lang-menu{pointer-events:auto!important;z-index:1000001!important;}
.language-select.open .lang-menu{display:block!important;visibility:visible!important;opacity:1!important;}
@media(min-width:901px){
  .lang-menu{position:absolute!important;top:calc(100% + 10px)!important;right:0!important;left:auto!important;min-width:210px!important;max-height:72vh!important;overflow:auto!important;}
  .lang-menu button{display:block!important;width:100%!important;min-height:42px!important;}
}


/* === CLEAN FINAL PANEL CSS: PC click + mobile tap stable === */
.language-select{position:relative!important;overflow:visible!important;z-index:99999!important;}
.lang-current{pointer-events:auto!important;cursor:pointer!important;touch-action:manipulation!important;}
.lang-menu{pointer-events:auto!important;z-index:100000!important;}
.language-select.open .lang-menu{display:block!important;visibility:visible!important;opacity:1!important;}
.store-menu-wrap{position:relative!important;overflow:visible!important;}
.store-menu-btn{cursor:pointer!important;touch-action:manipulation!important;}
.store-menu-wrap.open .store-submenu{display:block!important;visibility:visible!important;opacity:1!important;}
@media (max-width:900px){
  .lang-menu{position:absolute!important;right:0!important;top:calc(100% + 8px)!important;left:auto!important;min-width:190px!important;max-height:60vh!important;overflow:auto!important;}
  .store-submenu{position:absolute!important;right:0!important;top:calc(100% + 8px)!important;left:auto!important;min-width:230px!important;max-height:60vh!important;overflow:auto!important;}
  html[dir="rtl"] .lang-menu, html[dir="rtl"] .store-submenu{right:auto!important;left:0!important;}
}

/* === 20260628 MOBILE STORE + ARABIC HEADER SAFE PATCH === */
/* JS adds .open on click/touch; this rule is required on mobile where hover does not exist. */
.store-menu-wrap.open .store-submenu,
.store-menu-wrap:focus-within .store-submenu{
  display:block !important;
  pointer-events:auto !important;
  visibility:visible !important;
  opacity:1 !important;
}

.store-submenu,
.lang-menu{
  z-index:99999 !important;
}

.store-menu-btn,
.lang-current{
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

/* Keep the header/navigation physically stable in Arabic.
   Page text can be RTL, but the menu layout itself should not jump or become unreachable. */
html[dir="rtl"] .topbar{
  direction:ltr !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 18px 0 0 !important;
}

html[dir="rtl"] .menu-pill{
  direction:ltr !important;
  flex-direction:row !important;
  justify-content:flex-start !important;
}

html[dir="rtl"] .menu-pill nav{
  direction:ltr !important;
  flex-direction:row !important;
}

html[dir="rtl"] .menu-pill nav a,
html[dir="rtl"] .store-menu-btn{
  direction:rtl !important;
  text-align:center !important;
}

html[dir="rtl"] .store-submenu{
  right:0 !important;
  left:auto !important;
  direction:rtl !important;
  text-align:right !important;
}

html[dir="rtl"] .language-select{
  direction:ltr !important;
}

html[dir="rtl"] .lang-menu{
  right:0 !important;
  left:auto !important;
  direction:rtl !important;
  text-align:right !important;
}

html[dir="rtl"] .lang-current,
html[dir="rtl"] .lang-menu button{
  direction:rtl !important;
}

@media(max-width:760px){
  html[dir="rtl"] .topbar{
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding:8px 10px !important;
  }

  html[dir="rtl"] .menu-pill{
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
  }

  html[dir="rtl"] .menu-pill nav{
    flex-direction:row !important;
    min-width:max-content !important;
  }

  .store-submenu{
    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:auto !important;
  }
}

/* === 20260628 REAL FINAL MOBILE ARABIC + DROPDOWN OUTSIDE HEADER FIX ===
   Forces store/language choice panels to open as viewport overlays below the menu bar,
   not inside the horizontally scrolling menu pill. Also compacts Arabic mobile nav. */
@media (max-width: 900px){
  html,body{overflow-x:hidden!important;}
  .topbar{
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;
    z-index:900000!important;
    overflow:visible!important;
    transform:none!important;
    contain:none!important;
  }
  .menu-pill{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    margin:0 auto!important;
    overflow:visible!important;
    position:relative!important;
    transform:none!important;
    contain:none!important;
  }
  .menu-pill nav{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    gap:5px!important;
    direction:ltr!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
  }
  .menu-pill nav::-webkit-scrollbar{display:none!important;}
  .store-menu-wrap,.language-select{position:static!important;overflow:visible!important;transform:none!important;contain:none!important;}

  /* viewport-level dropdown panels */
  .store-submenu,
  .lang-menu{
    position:fixed!important;
    top:calc(var(--header-h) + 10px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 24px)!important;
    max-height:56svh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    padding:10px!important;
    border-radius:20px!important;
    background:rgba(27,18,13,.98)!important;
    border:1px solid rgba(212,154,53,.75)!important;
    box-shadow:0 22px 60px rgba(0,0,0,.58)!important;
    z-index:10000000!important;
    transform:none!important;
    contain:none!important;
  }
  .store-submenu{display:none!important;flex-direction:column!important;gap:6px!important;}
  .store-menu-wrap.open .store-submenu,
  body > .store-submenu.kkot-panel-open{display:flex!important;}
  .lang-menu{display:none!important;}
  .language-select.open .lang-menu,
  body > .lang-menu.kkot-panel-open{display:block!important;}

  .store-submenu a,
  .lang-menu button{
    width:100%!important;
    min-height:48px!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:12px 14px!important;
    margin:0!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
    color:#f7ead7!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(212,154,53,.16)!important;
    font-size:14px!important;
    line-height:1.35!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:anywhere!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    text-decoration:none!important;
  }
  .store-submenu a:active,.lang-menu button:active{background:rgba(212,154,53,.22)!important;}

  html[dir="rtl"] .topbar,
  html[dir="rtl"] .menu-pill,
  html[dir="rtl"] .menu-pill nav,
  html[dir="rtl"] .language-select{direction:ltr!important;}
  html[dir="rtl"] .menu-pill nav{flex-direction:row!important;}
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-btn,
  html[dir="rtl"] .lang-current{
    direction:rtl!important;
    unicode-bidi:isolate!important;
    text-align:center!important;
  }
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-btn{
    font-size:12px!important;
    line-height:1.15!important;
    padding:8px 9px!important;
    max-width:118px!important;
    min-width:max-content!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
  html[dir="rtl"] .lang-current{
    font-size:12px!important;
    padding:8px 9px!important;
    max-width:112px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  html[dir="rtl"] .store-submenu,
  html[dir="rtl"] .lang-menu,
  body > .store-submenu[dir="rtl"],
  body > .lang-menu[dir="rtl"]{
    direction:rtl!important;
    text-align:right!important;
    left:12px!important;
    right:12px!important;
  }
  html[dir="rtl"] .store-submenu a,
  html[dir="rtl"] .lang-menu button,
  body > .store-submenu[dir="rtl"] a,
  body > .lang-menu[dir="rtl"] button{
    direction:rtl!important;
    text-align:right!important;
    justify-content:flex-start!important;
    font-size:15px!important;
    line-height:1.45!important;
  }
}

@media (max-width: 390px){
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-btn{font-size:11.5px!important;padding:7px 8px!important;max-width:106px!important;}
  html[dir="rtl"] .lang-current{font-size:11.5px!important;max-width:102px!important;}
}

/* === 20260628 PC LANGUAGE DROPDOWN FINAL OVERRIDE === */
.language-select{position:relative!important;overflow:visible!important;z-index:1000000!important;}
.lang-current{pointer-events:auto!important;cursor:pointer!important;touch-action:manipulation!important;}
.lang-menu{pointer-events:auto!important;z-index:1000001!important;}
@media (min-width:901px){
  .lang-menu{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    right:0!important;
    left:auto!important;
    min-width:210px!important;
    max-height:72vh!important;
    overflow:auto!important;
    visibility:hidden;
    opacity:0;
  }
  .language-select.open .lang-menu,
  .lang-menu.kkot-panel-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html[dir="rtl"] .lang-menu{right:0!important;left:auto!important;}
}

/* === 20260628 STORE BUTTON REAL FINAL CSS OVERRIDE === */
.store-menu-btn{
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:rgba(212,154,53,.22)!important;
}
.store-submenu{
  pointer-events:auto!important;
}
.store-submenu.kkot-panel-open,
body > .store-submenu.kkot-panel-open{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
@media(max-width:900px){
  body > .store-submenu.kkot-panel-open{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
    flex-direction:column!important;
    gap:6px!important;
    z-index:10000000!important;
  }
}


/* =========================================================
   FINAL CONTENT PROTECTION PATCH - 20260628
   일반 사용자 복사/저장/인쇄 방지 보강
   ========================================================= */
html, body, body * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
img, picture, video, canvas, svg {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
img.protected-img, .brand-logo img, .page img, main img, header img, footer img {
  pointer-events: none !important;
}
input, textarea, select, button {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  -webkit-touch-callout: default !important;
}
button, a, .store-menu-wrap, .store-menu-btn, .language-select, .lang-btn, .lang-menu, .lang-menu * {
  pointer-events: auto !important;
}
@media print {
  html, body {
    display: none !important;
    visibility: hidden !important;
  }
}

/* === 20260628 PC STORE HOVER RESTORE CSS === */

/* === 20260628 PC STORE ORIGINAL HOVER ONLY / MOBILE SEPARATION FINAL === */
@media (min-width:901px){
  .store-menu-wrap{
    position:relative!important;
    display:inline-flex!important;
    height:100%!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .store-menu-wrap .store-submenu{
    display:none!important;
    position:absolute!important;
    right:0!important;
    left:auto!important;
    top:100%!important;
    min-width:220px!important;
    z-index:1000!important;
  }
  .store-menu-wrap:hover .store-submenu,
  .store-menu-wrap:focus-within .store-submenu{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  body > .store-submenu{
    display:none!important;
  }
}
@media (max-width:900px){
  .store-menu-btn,
  .store-submenu,
  .store-submenu *{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }
}

/* === 20260628 MOBILE HOME BOTTOM GAP REAL FIX ===
   Fix light blank space under footer in mobile browser UI by using dynamic viewport
   and making any leftover area match footer instead of page background. */
@media (max-width: 900px){
  html, body{
    min-height:100dvh !important;
    background:#202020 !important;
    overflow-x:hidden !important;
  }
  body{
    display:flex !important;
    flex-direction:column !important;
    min-height:100dvh !important;
  }
  main{
    flex:0 0 auto !important;
    background:#f6eeee !important;
  }
  .page-home,
  .page-home .content{
    background:#f6eeee !important;
    margin:0 !important;
    padding:0 !important;
  }
  .page-home .content,
  .peak-home{
    min-height:calc(100dvh - var(--header-h) - var(--footer-h)) !important;
  }
  .peak-home{
    height:auto !important;
    margin-bottom:0 !important;
    padding-bottom:26px !important;
  }
  .kkot-footer-final{
    margin:0 !important;
    flex:0 0 auto !important;
    background:#111 !important;
  }
}

/* === 20260628 CLEAN STORE PANEL FINAL PATCH === */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .store-menu-wrap{position:relative!important;overflow:visible!important;}
  .store-menu-wrap:hover .store-submenu{display:block!important;visibility:visible!important;opacity:1!important;}
}
@media (max-width:900px){
  .store-menu-wrap{position:static!important;overflow:visible!important;}
  .store-menu-wrap:hover .store-submenu{display:none!important;}
  .store-menu-btn,
  .store-submenu,
  .store-submenu *{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
    touch-action:manipulation!important;
  }
  body > .store-submenu.kkot-panel-open,
  body > .store-submenu.mobile-store-panel-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex-direction:column!important;
  }
  body > .store-submenu:not(.kkot-panel-open):not(.mobile-store-panel-open){
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}


/* === 20260628 MOBILE HOME ROLL-UP + BOTTOM GAP TRUE FIX ===
   Keep PC untouched. On mobile, remove old forced flex/vh home sizing that creates
   a pale blank area under the footer in in-app/Safari browsers. */
@media (max-width:900px){
  html{
    min-height:100% !important;
    height:auto !important;
    background:#111 !important;
    overflow-x:hidden !important;
  }
  body{
    min-height:0 !important;
    height:auto !important;
    display:block !important;
    background:#111 !important;
    overflow-x:hidden !important;
    overscroll-behavior-y:none;
  }
  main{
    display:block !important;
    flex:none !important;
    min-height:0 !important;
    height:auto !important;
    background:#111 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .page-home,
  .page-home .content{
    min-height:0 !important;
    height:auto !important;
    background:#111 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  .peak-home{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding-bottom:0 !important;
    overflow:visible !important;
  }
  .peak-home::after{bottom:0 !important;}
  .kkot-footer-final{
    display:block !important;
    position:relative !important;
    bottom:auto !important;
    margin:0 !important;
    padding-bottom:max(10px, env(safe-area-inset-bottom)) !important;
    background:#111 !important;
  }
  body::after{
    content:"";
    display:block;
    height:env(safe-area-inset-bottom);
    background:#111;
  }

  /* Mobile store panel: same persistent layer behavior as language panel. */
  .store-menu-wrap{position:static !important; overflow:visible !important;}
  .store-menu-wrap:hover .store-submenu{display:none !important;}
  body > .store-submenu.kkot-panel-open,
  body > .store-submenu.mobile-store-panel-open{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    max-width:calc(100vw - 24px) !important;
    flex-direction:column !important;
    z-index:2147483647 !important;
  }
}

/* === 20260628 TRUE MOBILE HOME LAYOUT RESTORE PATCH ===
   Fix: mobile home became short/black after footer and top hero looked pulled upward.
   Scope: mobile only. Header/menu/store/language button logic untouched. */
@media (max-width:900px){
  html{
    height:auto !important;
    min-height:100% !important;
    background:#f6eeee !important;
    overflow-x:hidden !important;
  }
  body{
    min-height:100svh !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    background:#f6eeee !important;
    overflow-x:hidden !important;
  }
  body::after{display:none !important;content:none !important;height:0 !important;}
  main{
    display:block !important;
    flex:1 0 auto !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#f6eeee !important;
    overflow:visible !important;
  }
  .page-home,
  .page-home .content{
    display:block !important;
    min-height:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#f6eeee !important;
    overflow:visible !important;
  }
  .peak-home{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:calc(100svh - var(--header-h) - var(--footer-h)) !important;
    margin:0 !important;
    padding:0 14px 28px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    background-color:#f6eeee !important;
    background-image:url('../img/home-peak-bg.png') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:68% center !important;
    overflow:hidden !important;
  }
  .peak-home::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.20) 46%,rgba(0,0,0,.58) 100%) !important;
  }
  .peak-copy{
    position:relative !important;
    z-index:2 !important;
    transform:none !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
    padding:18px 16px !important;
    border-radius:22px !important;
    background:rgba(28,18,13,.62) !important;
    color:#fff !important;
    text-align:left !important;
    box-shadow:0 18px 45px rgba(0,0,0,.24) !important;
    backdrop-filter:blur(6px) !important;
    -webkit-backdrop-filter:blur(6px) !important;
  }
  .peak-copy h1{
    display:block !important;
    margin:0 0 10px !important;
    padding:0 !important;
    color:#fff !important;
    font-size:clamp(27px,8.2vw,40px) !important;
    line-height:1.12 !important;
    font-weight:900 !important;
    letter-spacing:-.045em !important;
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
    text-shadow:0 5px 20px rgba(0,0,0,.65) !important;
  }
  .peak-copy p{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    max-width:none !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1.55 !important;
    font-weight:800 !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
    text-shadow:0 4px 18px rgba(0,0,0,.72) !important;
  }
  .kkot-footer-final,
  footer.kkot-footer-final{
    flex:0 0 auto !important;
    display:flex !important;
    position:relative !important;
    bottom:auto !important;
    min-height:var(--footer-h) !important;
    height:auto !important;
    margin:0 !important;
    padding:10px 14px max(10px, env(safe-area-inset-bottom)) !important;
    background:#111 !important;
  }
  html[dir="rtl"] .peak-home{
    background-image:none !important;
    background-position:32% center !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  html[dir="rtl"] .peak-home::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background-image:url('../img/home-peak-bg.png') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:32% center !important;
    transform:none !important;
  }
  html[dir="rtl"] .peak-copy{
    text-align:right !important;
    margin:0 auto !important;
  }
  html[dir="rtl"] .peak-copy h1,
  html[dir="rtl"] .peak-copy p{
    text-align:right !important;
    letter-spacing:0 !important;
  }
}

/* === 20260628 FINAL MOBILE GAP + DESKTOP LANGUAGE REOPEN FIX CSS ===
   Scope: mobile layout only. Prevent main/page flex filler from creating white gaps
   between the content and footer on Home, membership detail, and Contact pages. */
@media (max-width:900px){
  html{
    min-height:100% !important;
    height:auto !important;
    background:#111 !important;
    overflow-x:hidden !important;
  }
  body{
    display:block !important;
    min-height:auto !important;
    height:auto !important;
    background:#111 !important;
    overflow-x:hidden !important;
  }
  main{
    display:block !important;
    flex:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#111 !important;
    overflow:visible !important;
  }
  .page-home,
  .page-home .content{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#111 !important;
    overflow:hidden !important;
  }
  .peak-home{
    display:flex !important;
    min-height:calc(100dvh - var(--header-h) - var(--footer-h)) !important;
    height:auto !important;
    margin:0 !important;
    padding:0 14px 28px !important;
    align-items:flex-end !important;
    justify-content:center !important;
    background-color:#111 !important;
    overflow:hidden !important;
  }
  .page:not(.page-home),
  .membership-coming-page,
  .contact-page{
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    background:#111 !important;
    padding-bottom:24px !important;
  }
  .page:not(.page-home) .content,
  .coming-center-content,
  .contact-content,
  .membership-wrap,
  .store-online-content{
    min-height:0 !important;
    height:auto !important;
    margin-bottom:0 !important;
    padding-bottom:24px !important;
  }
  .coming-center-content,
  .store-online-content{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
  .kkot-footer-final,
  footer.kkot-footer-final{
    display:flex !important;
    position:relative !important;
    margin:0 !important;
    flex:none !important;
    min-height:var(--footer-h) !important;
    height:auto !important;
    background:#111 !important;
    padding-bottom:max(10px, env(safe-area-inset-bottom)) !important;
  }
}

/* === 20260628 MOBILE BACKGROUND RESTORE + HERO COMPOSITION PATCH ===
   Reason: the previous mobile gap fix used `background:#111` on main/page,
   which reset background images on several pages and created a dark filler area.
   This final block restores page photos and uses the upper part of the home photo. */
@media (max-width:900px){
  html, body{
    height:auto !important;
    min-height:100% !important;
    background:#f6eeee !important;
    overflow-x:hidden !important;
  }
  body{
    display:flex !important;
    flex-direction:column !important;
  }
  main{
    display:block !important;
    flex:0 0 auto !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }
  body::after{display:none !important;content:none !important;height:0 !important;}

  /* Home: show more of the upper photo and stop black/white filler blocks. */
  .page-home,
  .page-home .content{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#f6eeee !important;
    overflow:hidden !important;
  }
  .peak-home{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:calc(100svh - var(--header-h) - var(--footer-h)) !important;
    margin:0 !important;
    padding:0 14px 28px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    background-color:#f6eeee !important;
    background-image:url('../img/home-peak-bg.png') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:64% top !important;
    overflow:hidden !important;
  }
  .peak-home::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.15) 44%,rgba(0,0,0,.48) 100%) !important;
  }
  .peak-copy{
    position:relative !important;
    z-index:2 !important;
    transform:none !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 auto !important;
    padding:18px 16px !important;
    border-radius:22px !important;
    background:rgba(28,18,13,.62) !important;
    color:#fff !important;
    text-align:left !important;
    box-shadow:0 18px 45px rgba(0,0,0,.24) !important;
    backdrop-filter:blur(6px) !important;
    -webkit-backdrop-filter:blur(6px) !important;
  }

  /* Restore every non-home page's own background image on mobile. */
  .page:not(.page-home){
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:40px 20px 34px !important;
    background-color:#f8f4ef !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
    overflow:hidden !important;
  }
  .about-page{background-image:url('../img/bg-about.png') !important;background-position:center center !important;}
  .store-lounge-page{background-image:url('../img/bg-lounge.jpeg') !important;background-position:center 44% !important;}
  .store-palace-page{background-image:url('../img/bg-palace.jpeg') !important;background-position:center 48% !important;}
  .store-online-page{background-image:url('../img/bg-online.jpeg') !important;background-position:center center !important;}
  .membership-page{background-image:url('../img/bg-membership.jpeg') !important;background-position:62% top !important;}
  .membership-coming-page{background-image:url('../img/bg-membership-detail.png') !important;background-position:center top !important;}
  .gallery-coming-page{background-image:url('../img/bg-gallery.jpeg') !important;background-position:center top !important;}
  .contact-page{background-image:url('../img/bg-contact.jpeg') !important;background-position:68% top !important;}

  .about-page::before,
  .store-lounge-page::before,
  .store-palace-page::before,
  .store-online-page::before,
  .membership-page::before,
  .membership-coming-page::before,
  .gallery-coming-page::before,
  .contact-page::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:rgba(248,244,239,.58) !important;
  }
  .page:not(.page-home) > .content,
  .membership-wrap,
  .contact-content,
  .coming-center-content,
  .store-online-content{
    position:relative !important;
    z-index:2 !important;
    min-height:0 !important;
    height:auto !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }
  .coming-center-content,
  .store-online-content{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  footer.kkot-footer-final,
  .kkot-footer-final{
    position:relative !important;
    display:flex !important;
    flex:0 0 auto !important;
    height:auto !important;
    min-height:78px !important;
    margin:0 !important;
    background:#171717 !important;
    padding:10px 14px max(10px, env(safe-area-inset-bottom)) !important;
  }

  html[dir="rtl"] .peak-home{
    background-image:url('../img/home-peak-bg.png') !important;
    background-position:36% top !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  html[dir="rtl"] .peak-home::after{display:none !important;content:none !important;}
  html[dir="rtl"] .peak-copy{text-align:right !important;}
}

/* === 20260628 USER REQUEST EXACT FIX: mobile image position + remove filler + restore page backgrounds === */
@media (max-width:900px){
  :root{--footer-h:86px !important;}
  html,body{margin:0 !important;padding:0 !important;min-height:100dvh !important;background:#171717 !important;overflow-x:hidden !important;}
  body{display:flex !important;flex-direction:column !important;}
  main{display:block !important;flex:1 0 auto !important;margin:0 !important;padding:0 !important;background:transparent !important;min-height:auto !important;}

  /* Home must use the upper/right part of the original photo, like the user's second screenshot. */
  .page-home,
  .page-home .content{
    display:block !important;width:100% !important;margin:0 !important;padding:0 !important;background:#171717 !important;overflow:hidden !important;
    min-height:auto !important;height:auto !important;
  }
  .peak-home{
    position:relative !important;width:100% !important;margin:0 !important;
    min-height:calc(100dvh - var(--header-h) - var(--footer-h)) !important;
    height:auto !important;
    padding:0 14px 24px !important;
    display:flex !important;align-items:flex-end !important;justify-content:center !important;
    background-image:url('../img/home-peak-bg.png') !important;
    background-color:#f6eeee !important;
    background-repeat:no-repeat !important;
    background-size:auto 100% !important;
    background-position:78% top !important;
    overflow:hidden !important;
  }
  .peak-home::before{background:linear-gradient(180deg,rgba(0,0,0,.00) 0%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.44) 100%) !important;}
  .peak-copy{margin:0 auto 8px !important;max-width:430px !important;width:100% !important;padding:18px 16px !important;border-radius:22px !important;background:rgba(28,18,13,.62) !important;}

  /* No pale/white strip after footer. */
  footer.kkot-footer-final,.kkot-footer-final{margin:0 !important;background:#171717 !important;min-height:var(--footer-h) !important;height:auto !important;padding:12px 14px max(12px,env(safe-area-inset-bottom)) !important;}
  body::after,main::after,.page-home::after{display:none !important;content:none !important;height:0 !important;}

  /* Restore backgrounds on the pages that were flattened by previous gap fixes. */
  .page:not(.page-home){position:relative !important;background-size:cover !important;background-repeat:no-repeat !important;background-attachment:scroll !important;background-color:#f8f4ef !important;overflow:hidden !important;}
  .about-page{background-image:url('../img/bg-about.png') !important;background-position:center top !important;}
  .membership-page{background-image:url('../img/bg-membership.jpeg') !important;background-position:64% top !important;}
  .membership-coming-page{background-image:url('../img/bg-membership-detail.png') !important;background-position:center top !important;}
  .contact-page{background-image:url('../img/bg-contact.jpeg') !important;background-position:70% top !important;}
  .gallery-coming-page{background-image:url('../img/bg-gallery.jpeg') !important;background-position:center top !important;}
  .store-lounge-page{background-image:url('../img/bg-lounge.jpeg') !important;background-position:center top !important;}
  .store-palace-page{background-image:url('../img/bg-palace.jpeg') !important;background-position:center top !important;}
  .store-online-page{background-image:url('../img/bg-online.jpeg') !important;background-position:center top !important;}
  .about-page::before,.membership-page::before,.membership-coming-page::before,.contact-page::before,.gallery-coming-page::before,.store-lounge-page::before,.store-palace-page::before,.store-online-page::before{background:rgba(248,244,239,.36) !important;}

  html[dir="rtl"] .peak-home{background-position:30% top !important;}
}

/* === 20260628 ARABIC MOBILE MENU AXIS LOCK FINAL ===
   Arabic RTL was letting the horizontal menu behave like a free 2D pan area.
   Keep the menu viewport LTR/horizontal only; keep Arabic text itself RTL. */
@media (max-width:900px){
  html[dir="rtl"] .topbar,
  body.rtl .topbar{
    direction:ltr !important;
    overflow:visible !important;
  }
  html[dir="rtl"] .menu-pill,
  body.rtl .menu-pill{
    direction:ltr !important;
    overflow:hidden !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-x !important;
    contain:layout paint !important;
    transform:translateZ(0) !important;
    height:52px !important;
    max-height:52px !important;
  }
  html[dir="rtl"] .menu-pill nav,
  body.rtl .menu-pill nav{
    direction:ltr !important;
    writing-mode:horizontal-tb !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:none !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x !important;
    scroll-snap-type:none !important;
    transform:none !important;
  }
  html[dir="rtl"] .menu-pill nav::-webkit-scrollbar,
  body.rtl .menu-pill nav::-webkit-scrollbar{display:none !important;}
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-wrap,
  html[dir="rtl"] .store-menu-btn,
  html[dir="rtl"] .language-select,
  html[dir="rtl"] .lang-current,
  body.rtl .menu-pill nav a,
  body.rtl .store-menu-wrap,
  body.rtl .store-menu-btn,
  body.rtl .language-select,
  body.rtl .lang-current{
    flex:0 0 auto !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    transform:none !important;
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
  }
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-btn,
  html[dir="rtl"] .lang-current,
  body.rtl .menu-pill nav a,
  body.rtl .store-menu-btn,
  body.rtl .lang-current{
    direction:rtl !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    line-height:52px !important;
    height:52px !important;
    max-height:52px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  html[dir="rtl"] .store-submenu,
  html[dir="rtl"] .lang-menu,
  body.rtl .store-submenu,
  body.rtl .lang-menu{
    direction:rtl !important;
    writing-mode:horizontal-tb !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
  }
}

/* === 20260628 ALL MOBILE PAGE BACKGROUND TOP-COMPOSITION FIX ===
   User request: not only Home. Every mobile page background should use the
   upper part of the image like the preferred Home screenshot, and previous
   gap-fix blocks must not flatten/erase page photos. Buttons/PC untouched. */
@media (max-width:900px){
  html, body{
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    background:#171717 !important;
  }
  main{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  /* Home: same composition as the preferred second screenshot. */
  .page-home,
  .page-home .content{
    margin:0 !important;
    padding:0 !important;
    background:#171717 !important;
    overflow:hidden !important;
  }
  .peak-home{
    background-image:url('../img/home-peak-bg.png') !important;
    background-repeat:no-repeat !important;
    background-size:auto 100% !important;
    background-position:78% top !important;
    background-color:#f6eeee !important;
    min-height:calc(100dvh - var(--header-h) - var(--footer-h)) !important;
    padding:0 14px 24px !important;
    align-items:flex-end !important;
  }

  /* All other pages: keep their original page image, but use the upper area too. */
  .about-page,
  .store-lounge-page,
  .store-palace-page,
  .store-online-page,
  .membership-page,
  .membership-coming-page,
  .gallery-coming-page,
  .contact-page{
    position:relative !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-attachment:scroll !important;
    background-color:#f8f4ef !important;
    overflow:hidden !important;
  }
  .about-page{background-image:url('../img/bg-about.png') !important;background-position:center top !important;}
  .store-lounge-page{background-image:url('../img/bg-lounge.jpeg') !important;background-position:center top !important;}
  .store-palace-page{background-image:url('../img/bg-palace.jpeg') !important;background-position:center top !important;}
  .store-online-page{background-image:url('../img/bg-online.jpeg') !important;background-position:center top !important;}
  .membership-page{background-image:url('../img/bg-membership.jpeg') !important;background-position:64% top !important;}
  .membership-coming-page{background-image:url('../img/bg-membership-detail.png') !important;background-position:center top !important;}
  .gallery-coming-page{background-image:url('../img/bg-gallery.jpeg') !important;background-position:center top !important;}
  .contact-page{background-image:url('../img/bg-contact.jpeg') !important;background-position:70% top !important;}

  /* Backgrounds should remain visible; do not wash them out into a flat color. */
  .about-page::before,
  .store-lounge-page::before,
  .store-palace-page::before,
  .store-online-page::before,
  .membership-page::before,
  .membership-coming-page::before,
  .gallery-coming-page::before,
  .contact-page::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:rgba(248,244,239,.34) !important;
  }
  .about-page > .content,
  .store-detail-page > .content,
  .store-online-page > .content,
  .membership-page > .content,
  .membership-coming-page > .content,
  .gallery-coming-page > .content,
  .contact-page > .content,
  .membership-wrap,
  .coming-center-content,
  .contact-content,
  .store-online-content{
    position:relative !important;
    z-index:2 !important;
  }

  /* Keep Arabic header/menu axis lock from the previous fix. */
  html[dir="rtl"] .peak-home{background-position:30% top !important;}
  html[dir="rtl"] .menu-pill,
  body.rtl .menu-pill{
    overflow:hidden !important;
    touch-action:pan-x !important;
  }
  html[dir="rtl"] .menu-pill nav,
  body.rtl .menu-pill nav{
    direction:ltr !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    touch-action:pan-x !important;
  }
}

/* === 20260628 MOBILE PAGE TOP + BACKGROUND RESTORE FINAL PATCH ===
   Scope: mobile only. Fixes fixed header overlap and keeps page photos visible. */
@media (max-width:900px){
  :root{
    --header-h:112px !important;
    --footer-h:86px !important;
  }
  html,body{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:900000 !important;
    min-height:var(--header-h) !important;
    height:auto !important;
    overflow:visible !important;
  }
  main{
    display:block !important;
    flex:1 0 auto !important;
    margin:0 !important;
    padding:var(--header-h) 0 0 0 !important;
    background:transparent !important;
    min-height:calc(100dvh - var(--footer-h)) !important;
  }

  .page-home,
  .page-home .content{
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    background:#171717 !important;
    overflow:hidden !important;
  }
  .peak-home{
    margin:0 !important;
    min-height:calc(100dvh - var(--header-h) - var(--footer-h)) !important;
    height:auto !important;
    background-image:url('../img/home-peak-bg.png') !important;
    background-repeat:no-repeat !important;
    background-size:auto 100% !important;
    background-position:78% top !important;
    background-color:#f6eeee !important;
  }

  .page:not(.page-home){
    margin:0 !important;
    padding:24px 16px 34px !important;
    min-height:calc(100dvh - var(--header-h) - var(--footer-h)) !important;
    position:relative !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
    background-color:#f8f4ef !important;
    overflow:hidden !important;
  }

  .about-page{background-image:url('../img/bg-about.png') !important;background-position:center top !important;}
  .store-lounge-page{background-image:url('../img/bg-lounge.jpeg') !important;background-position:center top !important;}
  .store-palace-page{background-image:url('../img/bg-palace.jpeg') !important;background-position:center top !important;}
  .store-online-page,.page-services{background-image:url('../img/bg-online.jpeg') !important;background-position:center top !important;}
  .membership-page{background-image:url('../img/bg-membership.jpeg') !important;background-position:center top !important;}
  .membership-coming-page{background-image:url('../img/bg-membership-detail.png') !important;background-position:center top !important;}
  .gallery-coming-page{background-image:url('../img/bg-gallery.jpeg') !important;background-position:center top !important;}
  .contact-page{background-image:url('../img/bg-contact.jpeg') !important;background-position:70% top !important;}
  .page#profile{background-image:url('../img/about-bg.jpeg') !important;background-position:center top !important;}

  .about-page::before,
  .store-lounge-page::before,
  .store-palace-page::before,
  .store-online-page::before,
  .page-services::before,
  .membership-page::before,
  .membership-coming-page::before,
  .gallery-coming-page::before,
  .contact-page::before,
  .page#profile::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:rgba(248,244,239,.28) !important;
  }

  .page:not(.page-home) > .content,
  .membership-wrap,
  .coming-center-content,
  .contact-content,
  .store-detail-content,
  .store-online-content{
    position:relative !important;
    z-index:2 !important;
  }

  .store-detail-page,
  .store-online-page,
  .gallery-coming-page,
  .membership-coming-page{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .coming-center-content,
  .store-online-content{
    min-height:auto !important;
    padding-top:28px !important;
    padding-bottom:42px !important;
  }
  .gallery-coming-page .store-coming,
  .store-coming-center,
  .store-coming-top,
  .membership-coming-top{
    margin-top:0 !important;
  }

  footer.kkot-footer-final,
  .kkot-footer-final{
    position:relative !important;
    z-index:20 !important;
    margin:0 !important;
    background:#151515 !important;
  }

  html[dir="rtl"] .peak-home{background-position:30% top !important;}
  html[data-lang="ar"] .contact-page{background-image:url('../img/bg-contact.jpeg') !important;}
  html[data-lang="ar"] .contact-page::after{display:none !important;content:none !important;}
}

/* === 20260628 PC BACKGROUND MIRROR TO MOBILE PATCH ===
   Restore the same page photo backgrounds used on PC for every mobile page.
   This patch is intentionally placed last so older mobile blocks cannot reset
   the backgrounds to a flat color. */
@media (max-width:900px){
  main{
    padding-top:var(--header-h) !important;
    background:transparent !important;
  }

  .page:not(.page-home){
    background-color:#f8f4ef !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-attachment:scroll !important;
    background-blend-mode:normal !important;
    position:relative !important;
    overflow:hidden !important;
  }

  /* PC background image mapping, copied explicitly for mobile */
  .about-page{background-image:url('../img/bg-about.png') !important;background-position:center top !important;}
  .store-lounge-page{background-image:url('../img/bg-lounge.jpeg') !important;background-position:center top !important;}
  .store-palace-page{background-image:url('../img/bg-palace.jpeg') !important;background-position:center top !important;}
  .store-online-page{background-image:url('../img/bg-online.jpeg') !important;background-position:center top !important;}
  .membership-page{background-image:url('../img/bg-membership.jpeg') !important;background-position:center top !important;}
  .membership-coming-page{background-image:url('../img/bg-membership-detail.png') !important;background-position:center top !important;}
  .gallery-coming-page{background-image:url('../img/bg-gallery.jpeg') !important;background-position:center top !important;}
  .contact-page{background-image:url('../img/bg-contact.jpeg') !important;background-position:70% top !important;}
  .page#profile{background-image:url('../img/about-bg.jpeg') !important;background-position:center top !important;}
  .page-services,.page#services{background-image:url('../img/bg-online.jpeg') !important;background-position:center top !important;}

  .about-page::before,
  .store-lounge-page::before,
  .store-palace-page::before,
  .store-online-page::before,
  .membership-page::before,
  .membership-coming-page::before,
  .gallery-coming-page::before,
  .contact-page::before,
  .page#profile::before,
  .page-services::before,
  .page#services::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:rgba(248,244,239,.18) !important;
  }

  .page:not(.page-home) > .content,
  .about-content,
  .store-detail-content,
  .store-online-content,
  .membership-wrap,
  .coming-center-content,
  .contact-content{
    position:relative !important;
    z-index:2 !important;
    background:transparent !important;
  }

  .about-card,
  .store-coming,
  .store-info-card,
  .membership-hero,
  .membership-grid article,
  .membership-detail,
  .contact-content{
    background:rgba(248,244,239,.66) !important;
    backdrop-filter:none !important;
  }

  .contact-form input,
  .contact-form textarea{
    background:rgba(255,255,255,.74) !important;
  }

  html[data-lang="ar"] .contact-page{
    background-image:url('../img/bg-contact.jpeg') !important;
    background-position:30% top !important;
  }
  html[data-lang="ar"] .contact-page::after{
    display:none !important;
    content:none !important;
  }
}

/* === 20260628 REAL MOBILE BACKGROUND FIX ===
   Mobile pages now keep the actual PC photo backgrounds.  The page classes
   and inline PHP backgrounds are supported here so older mobile rules cannot
   turn sections back into a plain cream block. */
@media (max-width:900px){
  .page.about-page,
  .page.store-lounge-page,
  .page.store-palace-page,
  .page.store-online-page,
  .page.page-services,
  .page.profile-page,
  .page.membership-page,
  .page.membership-coming-page,
  .page.gallery-coming-page,
  .page.contact-page{
    background-color:#f8f4ef !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
    overflow:hidden !important;
  }
  .page.about-page{background-image:url('../img/bg-about.png') !important;background-position:center top !important;}
  .page.store-lounge-page{background-image:url('../img/bg-lounge.jpeg') !important;background-position:center top !important;}
  .page.store-palace-page{background-image:url('../img/bg-palace.jpeg') !important;background-position:center top !important;}
  .page.store-online-page,.page.page-services{background-image:url('../img/bg-online.jpeg') !important;background-position:center top !important;}
  .page.profile-page{background-image:url('../img/about-bg.jpeg') !important;background-position:center top !important;}
  .page.membership-page{background-image:url('../img/bg-membership.jpeg') !important;background-position:center top !important;}
  .page.membership-coming-page{background-image:url('../img/bg-membership-detail.png') !important;background-position:center top !important;}
  .page.gallery-coming-page{background-image:url('../img/bg-gallery.jpeg') !important;background-position:center top !important;}
  .page.contact-page{background-image:url('../img/bg-contact.jpeg') !important;background-position:70% top !important;}

  .page.about-page::before,
  .page.store-lounge-page::before,
  .page.store-palace-page::before,
  .page.store-online-page::before,
  .page.page-services::before,
  .page.profile-page::before,
  .page.membership-page::before,
  .page.membership-coming-page::before,
  .page.gallery-coming-page::before,
  .page.contact-page::before{
    background:rgba(248,244,239,.20) !important;
  }
}

/* === 20260628 MOBILE ARABIC BACKGROUND MIRROR FIX ===
   Mobile only: when Arabic is selected, mirror Home and Contact backgrounds
   like the PC Arabic view without flipping text/forms/content. */
@media (max-width: 900px) {
  html[data-lang="ar"] .peak-home,
  html[lang="ar"] .peak-home,
  html[dir="rtl"] .peak-home,
  body[dir="rtl"] .peak-home,
  html[data-lang="ar"] .contact-page,
  html[lang="ar"] .contact-page,
  html[dir="rtl"] .contact-page,
  body[dir="rtl"] .contact-page {
    position: relative !important;
    overflow: hidden !important;
  }

  html[data-lang="ar"] .peak-home,
  html[lang="ar"] .peak-home,
  html[dir="rtl"] .peak-home,
  body[dir="rtl"] .peak-home {
    background-image: none !important;
    background-color: var(--cream) !important;
  }

  html[data-lang="ar"] .contact-page,
  html[lang="ar"] .contact-page,
  html[dir="rtl"] .contact-page,
  body[dir="rtl"] .contact-page {
    background-image: none !important;
    background-color: #f8f4ef !important;
  }

  html[data-lang="ar"] .peak-home::before,
  html[lang="ar"] .peak-home::before,
  html[dir="rtl"] .peak-home::before,
  body[dir="rtl"] .peak-home::before,
  html[data-lang="ar"] .contact-page::before,
  html[lang="ar"] .contact-page::before,
  html[dir="rtl"] .contact-page::before,
  body[dir="rtl"] .contact-page::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transform: scaleX(-1) !important;
    transform-origin: center center !important;
    background-repeat: no-repeat !important;
  }

  html[data-lang="ar"] .peak-home::before,
  html[lang="ar"] .peak-home::before,
  html[dir="rtl"] .peak-home::before,
  body[dir="rtl"] .peak-home::before {
    background-image: url('../img/home-peak-bg.png') !important;
    background-size: auto 100% !important;
    background-position: center center !important;
  }

  html[data-lang="ar"] .contact-page::before,
  html[lang="ar"] .contact-page::before,
  html[dir="rtl"] .contact-page::before,
  body[dir="rtl"] .contact-page::before {
    background-image: url('../img/bg-contact.jpeg') !important;
    background-size: cover !important;
    background-position: 30% top !important;
  }

  html[data-lang="ar"] .peak-home::after,
  html[lang="ar"] .peak-home::after,
  html[dir="rtl"] .peak-home::after,
  body[dir="rtl"] .peak-home::after {
    z-index: 1 !important;
  }

  html[data-lang="ar"] .peak-copy,
  html[lang="ar"] .peak-copy,
  html[dir="rtl"] .peak-copy,
  body[dir="rtl"] .peak-copy,
  html[data-lang="ar"] .contact-page > .content,
  html[lang="ar"] .contact-page > .content,
  html[dir="rtl"] .contact-page > .content,
  body[dir="rtl"] .contact-page > .content {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* === 20260628 ARABIC MOBILE MENU HORIZONTAL SCROLL RESTORE ===
   Arabic only: keep the menu layout like Spanish/German etc. The page can be RTL,
   but the menu rail itself must remain a normal horizontal scroll strip. */
@media (max-width:900px){
  html[data-lang="ar"] .topbar,
  html[lang="ar"] .topbar,
  html[dir="rtl"] .topbar,
  body[dir="rtl"] .topbar{
    direction:ltr !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  html[data-lang="ar"] .menu-pill,
  html[lang="ar"] .menu-pill,
  html[dir="rtl"] .menu-pill,
  body[dir="rtl"] .menu-pill{
    direction:ltr !important;
    width:100% !important;
    max-width:100% !important;
    height:52px !important;
    max-height:52px !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:none !important;
    touch-action:pan-x !important;
    contain:none !important;
    transform:none !important;
  }

  html[data-lang="ar"] .menu-pill::-webkit-scrollbar,
  html[lang="ar"] .menu-pill::-webkit-scrollbar,
  html[dir="rtl"] .menu-pill::-webkit-scrollbar,
  body[dir="rtl"] .menu-pill::-webkit-scrollbar{
    display:none !important;
  }

  html[data-lang="ar"] .menu-pill nav,
  html[lang="ar"] .menu-pill nav,
  html[dir="rtl"] .menu-pill nav,
  body[dir="rtl"] .menu-pill nav{
    direction:ltr !important;
    display:flex !important;
    flex:0 0 auto !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:max-content !important;
    min-width:max-content !important;
    height:52px !important;
    max-height:52px !important;
    overflow:visible !important;
    touch-action:pan-x !important;
    transform:none !important;
  }

  html[data-lang="ar"] .menu-pill nav a,
  html[data-lang="ar"] .store-menu-wrap,
  html[data-lang="ar"] .store-menu-btn,
  html[data-lang="ar"] .language-select,
  html[data-lang="ar"] .lang-current,
  html[lang="ar"] .menu-pill nav a,
  html[lang="ar"] .store-menu-wrap,
  html[lang="ar"] .store-menu-btn,
  html[lang="ar"] .language-select,
  html[lang="ar"] .lang-current,
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-wrap,
  html[dir="rtl"] .store-menu-btn,
  html[dir="rtl"] .language-select,
  html[dir="rtl"] .lang-current,
  body[dir="rtl"] .menu-pill nav a,
  body[dir="rtl"] .store-menu-wrap,
  body[dir="rtl"] .store-menu-btn,
  body[dir="rtl"] .language-select,
  body[dir="rtl"] .lang-current{
    flex:0 0 auto !important;
    position:relative !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    transform:none !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    min-width:max-content !important;
  }

  html[data-lang="ar"] .menu-pill nav a,
  html[data-lang="ar"] .store-menu-btn,
  html[data-lang="ar"] .lang-current,
  html[lang="ar"] .menu-pill nav a,
  html[lang="ar"] .store-menu-btn,
  html[lang="ar"] .lang-current,
  html[dir="rtl"] .menu-pill nav a,
  html[dir="rtl"] .store-menu-btn,
  html[dir="rtl"] .lang-current,
  body[dir="rtl"] .menu-pill nav a,
  body[dir="rtl"] .store-menu-btn,
  body[dir="rtl"] .lang-current{
    direction:rtl !important;
    unicode-bidi:isolate !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:52px !important;
    line-height:1 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* === 20260628 USER REQUEST: MOBILE ARABIC CONTACT USE SAME BACKGROUND STRUCTURE, MIRRORED ===
   Arabic mobile contact keeps the same source image/position used by other languages
   (70% top), but renders it through a mirrored background layer so only the photo flips.
   Text, form, and menu remain normal. */
@media (max-width:900px){
  html[data-lang="ar"] .page.contact-page,
  html[lang="ar"] .page.contact-page,
  html[dir="rtl"] .page.contact-page,
  body[dir="rtl"] .page.contact-page{
    position:relative !important;
    overflow:hidden !important;
    background-image:none !important;
    background-color:#f8f4ef !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:70% top !important;
  }

  html[data-lang="ar"] .page.contact-page::before,
  html[lang="ar"] .page.contact-page::before,
  html[dir="rtl"] .page.contact-page::before,
  body[dir="rtl"] .page.contact-page::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background-image:url('../img/bg-contact.jpeg') !important;
    background-size:cover !important;
    background-position:70% top !important;
    background-repeat:no-repeat !important;
    transform:scaleX(-1) !important;
    transform-origin:center center !important;
  }

  html[data-lang="ar"] .page.contact-page::after,
  html[lang="ar"] .page.contact-page::after,
  html[dir="rtl"] .page.contact-page::after,
  body[dir="rtl"] .page.contact-page::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:rgba(248,244,239,.20) !important;
    transform:none !important;
  }

  html[data-lang="ar"] .page.contact-page > .content,
  html[lang="ar"] .page.contact-page > .content,
  html[dir="rtl"] .page.contact-page > .content,
  body[dir="rtl"] .page.contact-page > .content,
  html[data-lang="ar"] .page.contact-page .contact-content,
  html[lang="ar"] .page.contact-page .contact-content,
  html[dir="rtl"] .page.contact-page .contact-content,
  body[dir="rtl"] .page.contact-page .contact-content{
    position:relative !important;
    z-index:2 !important;
  }
}

/* === 20260628 USER REQUEST: ARABIC PC + MOBILE HEADER/MENU MIRROR ===
   Arabic only: mirror the top bar and menu bar layout/background like a left-right flip,
   while keeping menu text readable and keeping the mobile menu horizontally scrollable. */
html[data-lang="ar"] .topbar,
html[lang="ar"] .topbar,
html[dir="rtl"] .topbar,
body[dir="rtl"] .topbar{
  flex-direction:row-reverse !important;
  padding:0 0 0 18px !important;
  direction:rtl !important;
}

html[data-lang="ar"] .brand-logo,
html[lang="ar"] .brand-logo,
html[dir="rtl"] .brand-logo,
body[dir="rtl"] .brand-logo{
  padding-left:0 !important;
  padding-right:0 !important;
}

html[data-lang="ar"] .menu-pill,
html[lang="ar"] .menu-pill,
html[dir="rtl"] .menu-pill,
body[dir="rtl"] .menu-pill{
  position:relative !important;
  isolation:isolate !important;
  flex-direction:row-reverse !important;
  direction:ltr !important;
  background-image:none !important;
  overflow:visible !important;
}

html[data-lang="ar"] .menu-pill::before,
html[lang="ar"] .menu-pill::before,
html[dir="rtl"] .menu-pill::before,
body[dir="rtl"] .menu-pill::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background-image:linear-gradient(rgba(18,10,7,.16),rgba(18,10,7,.16)),url('../img/dark-jogakbo-menu.png') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  transform:scaleX(-1) !important;
  transform-origin:center center !important;
}

html[data-lang="ar"] .menu-pill nav,
html[lang="ar"] .menu-pill nav,
html[dir="rtl"] .menu-pill nav,
body[dir="rtl"] .menu-pill nav{
  flex-direction:row-reverse !important;
  direction:ltr !important;
}

html[data-lang="ar"] .language-select,
html[lang="ar"] .language-select,
html[dir="rtl"] .language-select,
body[dir="rtl"] .language-select{
  direction:rtl !important;
}

html[data-lang="ar"] .menu-pill nav a,
html[data-lang="ar"] .store-menu-btn,
html[data-lang="ar"] .lang-current,
html[lang="ar"] .menu-pill nav a,
html[lang="ar"] .store-menu-btn,
html[lang="ar"] .lang-current,
html[dir="rtl"] .menu-pill nav a,
html[dir="rtl"] .store-menu-btn,
html[dir="rtl"] .lang-current,
body[dir="rtl"] .menu-pill nav a,
body[dir="rtl"] .store-menu-btn,
body[dir="rtl"] .lang-current{
  direction:rtl !important;
  unicode-bidi:isolate !important;
  transform:none !important;
}

@media(max-width:900px){
  html[data-lang="ar"] .topbar,
  html[lang="ar"] .topbar,
  html[dir="rtl"] .topbar,
  body[dir="rtl"] .topbar{
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:8px 10px !important;
    direction:rtl !important;
  }

  html[data-lang="ar"] .menu-pill,
  html[lang="ar"] .menu-pill,
  html[dir="rtl"] .menu-pill,
  body[dir="rtl"] .menu-pill{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
    align-items:center !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x !important;
    overscroll-behavior-x:contain !important;
    direction:ltr !important;
  }

  html[data-lang="ar"] .menu-pill nav,
  html[lang="ar"] .menu-pill nav,
  html[dir="rtl"] .menu-pill nav,
  body[dir="rtl"] .menu-pill nav{
    display:flex !important;
    flex:0 0 auto !important;
    flex-direction:row-reverse !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:max-content !important;
    overflow:visible !important;
    direction:ltr !important;
  }

  html[data-lang="ar"] .brand-logo,
  html[lang="ar"] .brand-logo,
  html[dir="rtl"] .brand-logo,
  body[dir="rtl"] .brand-logo{
    align-self:flex-end !important;
  }
}


/* Instagram button added to the right side of the language switch */
.insta-link{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(45deg,#405DE6,#5851DB,#833AB4,#C13584,#E1306C,#FD1D1D,#F56040,#FCAF45);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.insta-link:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.insta-icon{width:21px;height:21px;display:block;fill:currentColor}
.menu-pill .language-select + .insta-link{margin-left:-2px}
html[dir="rtl"] .menu-pill .language-select + .insta-link,
body.rtl .menu-pill .language-select + .insta-link{margin-left:-2px;margin-right:0}
html[dir="rtl"] .insta-link,
body.rtl .insta-link{direction:ltr;transform:none!important}
@media (max-width:720px){
  .insta-link{width:40px;height:40px;flex-basis:40px}
  .insta-icon{width:20px;height:20px}
  .menu-pill{padding-right:8px!important}
}

/* === 20260628 Z-FLIP MOBILE VERTICAL SCROLL SAFE PATCH ===
   Fix: Samsung Galaxy Z Flip and other short mobile viewports were clipping pages
   because earlier mobile patches forced page sections to overflow:hidden and viewport-sized blocks.
   Scope is mobile only and does not change desktop layout or HTML structure. */
@media (max-width:900px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  body{
    display:flex !important;
    flex-direction:column !important;
  }

  main{
    display:block !important;
    flex:1 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  .page-home,
  .page-home .content,
  .page:not(.page-home),
  .about-page,
  .store-detail-page,
  .store-lounge-page,
  .store-palace-page,
  .store-online-page,
  .membership-page,
  .membership-coming-page,
  .gallery-coming-page,
  .contact-page{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .page:not(.page-home){
    min-height:calc(100svh - var(--header-h) - var(--footer-h)) !important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important;
  }

  .peak-home{
    height:auto !important;
    max-height:none !important;
    min-height:calc(100svh - var(--header-h) - var(--footer-h)) !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .membership-wrap,
  .membership-grid,
  .about-content,
  .store-detail-content,
  .store-online-content,
  .coming-center-content,
  .contact-content,
  .contact-form{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  footer.kkot-footer-final,
  .kkot-footer-final{
    flex:0 0 auto !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }

  /* Keep only the horizontal menu rail locked horizontally; do not let it lock page vertical scroll. */
  .menu-pill,
  .menu-pill nav{
    touch-action:pan-x !important;
  }

  .store-submenu,
  .lang-menu{
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

@media (max-width:430px) and (max-height:950px){
  .page:not(.page-home){
    min-height:auto !important;
  }

  .store-online-content,
  .coming-center-content{
    min-height:auto !important;
  }
}