/* Keep the original VIA layout. Only fix navigation usability at its existing breakpoints. */
#grouplogo, #grouplogo img { background:transparent!important; }
#menuWrapper, #menuWrapper #menuContent { background:#fff; color:#000; }
#menuContent { overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
#menuContent a:focus-visible, #navBtn:focus-visible { outline:2px solid #111; outline-offset:3px; }
#shopType.show, #regionType.show { max-height:400px; }

/* The logo overlays the existing About photograph; do not add a white header
   spacer or change the original desktop content/sidebar widths. */
@media(min-width:768px) {
  html.about-page #header { background:transparent; pointer-events:none; }
  html.about-page #mainWrapper { padding-top:0; }
}

/* The original full-height sidebar slides out from the 50px left rail.
   It never becomes a floating card or a permanently expanded desktop column.
   Explicit state avoids sticky CSS :hover after tapping on a tablet. */
html[data-menu-layout="rail"] body #menuWrapper {
  top:0; left:0; width:50px; padding-left:0; height:100vh; height:100dvh;
  transition:width .45s ease;
}
html[data-menu-layout="rail"] body #menuWrapper #menuContent {
  position:absolute; left:-220px; top:0; width:220px;
  height:100vh; height:100dvh; visibility:hidden; pointer-events:none;
  transition:left .45s ease,visibility .45s;
}
html[data-menu-layout="rail"] body #menuWrapper.active,
html[data-menu-layout="rail"] body #menuWrapper.hover-open { width:270px; }
html[data-menu-layout="rail"] body #menuWrapper.active #menuContent,
html[data-menu-layout="rail"] body #menuWrapper.hover-open #menuContent {
  left:50px; visibility:visible; pointer-events:auto;
}
html[data-menu-layout="rail"] body #menuWrapper #navBtn {
  display:block; left:3px; right:auto; top:0; bottom:0;
  width:44px; height:44px; margin:auto 0;
}
html[data-menu-layout="rail"] #navBtn .navBar { left:12px; top:21px; }
html[data-menu-layout="rail"] #menuWrapper.active #navBar1 { transform:rotate(-45deg); }
html[data-menu-layout="rail"] #menuWrapper.active #navBar2 { opacity:0; }
html[data-menu-layout="rail"] #menuWrapper.active #navBar3 { transform:rotate(45deg); }
html[data-menu-layout="rail"] body #grouplogo { left:50px; padding-left:0; }
html[data-menu-layout="rail"] body #container { margin-left:50px; width:calc(100% - 70px); }
html.index-page[data-menu-layout="rail"] body #container { width:calc(100% - 50px); }
html[data-menu-layout="rail"] body #footer { margin-left:50px; width:calc(100% - 50px); }

/* Preserve the existing mobile top bar; allow space for the uncropped logo. */
@media(max-width:767px) {
  html body #menuWrapper { height:76px; }
  html body #menuWrapper #menuContent {
    top:76px; height:calc(100vh - 76px); height:calc(100dvh - 76px);
    background:#fff; visibility:hidden; pointer-events:none;
  }
  html body #menuWrapper.active #menuContent { visibility:visible; pointer-events:auto; height:calc(100vh - 76px); height:calc(100dvh - 76px); }
  html body #navBtn { width:44px; height:44px; top:16px; }
  html body #navBtn .navBar { left:12px; top:21px; }
  html body #menuInnerWrapper { height:auto; min-height:100%; display:flex; flex-direction:column; }
  html body #menuContent #topContentWrapper { box-sizing:border-box; width:86%; margin:0; padding:28px 0; }
  html body #menuContent #bottomContentWrapper { box-sizing:border-box; width:86%; margin-top:auto; padding:24px 0; }
  html body #mMenuBG { display:none; }
  html.about-page #mainWrapper { padding-top:76px; }
  /* A wide photograph scales to its original ratio; text follows rather than
     covering half the picture on a narrow phone. */
  html.about-page #aboutContentWapper { box-sizing:border-box; width:100%; margin-top:0; padding:24px; }
  html.about-page #aboutTitle { margin:0 0 24px; padding:0; }
  html.about-page #companyName { font-size:clamp(26px,7.5vw,33px); }
  html.about-page #companyTitle1 { font-size:22px; line-height:1.5; }
  html.about-page #companyTitle2 { font-size:15px; line-height:1.8; }
  html.about-page #companyDesc { width:100%; font-size:16px; line-height:1.8; }
  html.about-page #aboutHeader { margin-bottom:28px; }
}
/* Home already switches to a top bar at 1024px; keep that original breakpoint. */
@media(max-width:1023px) {
  html.index-page #menuWrapper { height:76px; }
  html.index-page #menuWrapper #menuContent {
    top:76px; height:calc(100vh - 76px); height:calc(100dvh - 76px);
    background:#fff; visibility:hidden; pointer-events:none;
  }
  html.index-page #menuWrapper.active #menuContent { visibility:visible; pointer-events:auto; height:calc(100vh - 76px); height:calc(100dvh - 76px); }
  html.index-page #navBtn { width:44px; height:44px; top:16px; }
  html.index-page #navBtn .navBar { left:12px; top:21px; }
  html.index-page #menuInnerWrapper { height:auto; min-height:100%; display:flex; flex-direction:column; }
  html.index-page #menuContent #topContentWrapper { box-sizing:border-box; width:86%; margin:0; padding:28px 0; top:0; }
  html.index-page #menuContent #bottomContentWrapper { box-sizing:border-box; width:86%; margin-top:auto; padding:24px 0; }
  html.index-page #mMenuBG { display:none; }
}
@media(max-width:767px) {
  html.about-page .shopDetailsItem { min-width:0; overflow-wrap:anywhere; }
}
@media(min-width:768px) and (max-height:650px) {
  #menuContent #topContentWrapper { padding-top:120px; padding-bottom:36px; }
}
/* Existing team/news drop-downs remain scrollable in short landscape windows. */
@media(max-width:920px) {
  .via-nav { max-height:calc(100vh - 92px); max-height:calc(100dvh - 92px); overflow-y:auto; }
}
@media(max-width:560px) {
  .via-nav { max-height:calc(100vh - 76px); max-height:calc(100dvh - 76px); }
}
/* A phone/tablet gets the actual homepage photograph, not a tall cover crop. */
@media(max-width:1279px) {
  html.index-page body #indexGalleryBG { display:none!important; }
  html.index-page body #indexGallery { display:block; height:auto; }
  html.index-page body #indexGallery img { display:block; width:100%; height:auto; }
}
/* Contact's legacy floated panels must end before the footer on small screens. */
@media(max-width:767px) {
  html.contact-page #container,html.contact-page #mainWrapper { height:auto; box-sizing:border-box; }
  html.contact-page #mainWrapper { padding-top:76px; display:flow-root; }
  html.contact-page #MWrapper,html.contact-page #RWrapper { box-sizing:border-box; float:none; width:100%; }
  html.contact-page #MWrapper { padding:24px; }
  html.contact-page #listWrapper { margin:24px 0 0; display:flex; flex-wrap:wrap; gap:12px 24px; }
  html.contact-page #listWrapper li { font-size:18px; line-height:1.5; min-height:44px; }
  html.contact-page #joinUsDetails { box-sizing:border-box; }
  html.contact-page #footer { clear:both; }
  html.contact-page label.title { float:none; display:block; width:100%; }
}
@media(max-width:1023px) {
  html.contact-page .inputbox,html.contact-page .combodate select { min-height:44px; font-size:16px; }
  html.contact-page textarea.inputbox { min-height:100px; }
  html.shopinfo-page #gradientBG { display:none; }
  html.shopinfo-page #ctrlWrapper { position:relative; left:auto; right:auto; bottom:auto; width:90%; margin:24px auto; clear:both; }
  html.shopinfo-page #shopControl { height:44px; }
  html.shopinfo-page #btnShopIndex { width:44px; height:44px; }
  html.shopinfo-page #btnShopIndex svg { position:absolute; width:22px; height:22px; left:11px; top:11px; }
  html.shopinfo-page #btnShopPrev>svg,html.shopinfo-page #btnShopNext>svg { top:11px; }
}
@media(max-width:767px) {
  html.shopinfo-page #mainWrapper { padding-top:76px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-menu-layout="rail"] body #menuWrapper,
  html[data-menu-layout="rail"] body #menuWrapper #menuContent { transition:none; }
}