/* Navigation is chosen independently of the storefront template. */
html[data-menu] body>header {
  position:relative; inset:auto; width:auto; max-width:1320px;
  min-height:100px; flex-direction:row; align-items:center;
  justify-content:space-between; padding:28px 48px; margin:0 auto;
  border:0; background:var(--page); z-index:6;
}
html[data-menu] body>header>nav {
  display:flex; flex-direction:row; align-items:center; margin:0; gap:28px;
}
html[data-menu] body>header>.menu-toggle { display:none; }
html[data-menu] body>.bottom-nav { display:none; }
html[data-menu] body>main,html[data-menu] body>footer { margin-left:auto; margin-right:auto; }
html[data-menu] body>.announcement { margin-left:0; }
html[data-menu]:not([data-menu=sidebar]) body.minimal>main,
html[data-menu]:not([data-menu=sidebar]) body.minimal>footer { max-width:1320px; }
html[data-menu]:not([data-menu=app]) body.bold>main { padding-bottom:35px; }
html[data-menu]:not([data-menu=app]) body.bold>footer { padding-bottom:40px; }

html[data-menu=hamburger] body>header>nav { display:none; }
html[data-menu=hamburger] body>header>.menu-toggle { display:block; }

html[data-menu=sidebar] body>header {
  position:fixed; inset:0 auto 0 0; width:235px; height:100dvh;
  padding:42px 26px; margin:0; flex-direction:column;
  align-items:flex-start; justify-content:flex-start;
  border-right:1px solid var(--line);
}
html[data-menu=sidebar] body>header .brand { font-size:23px; overflow-wrap:anywhere; }
html[data-menu=sidebar] body>header>nav {
  display:flex; flex-direction:column; align-items:flex-start; margin-top:75px; gap:30px;
}
html[data-menu=sidebar] body>main,html[data-menu=sidebar] body>footer {
  margin-left:235px; margin-right:0; max-width:none;
}
html[data-menu=sidebar] body>.announcement,
html[data-menu=sidebar] body>.preview-banner { margin-left:235px; }

html[data-menu=top] body.luxe>header,
html[data-menu=hamburger] body.luxe>header {
  position:absolute; inset:0 0 auto; background:transparent; max-width:none;
}
html[data-menu=top] body.luxe:has(.preview-banner)>header,
html[data-menu=hamburger] body.luxe:has(.preview-banner)>header { top:40px; }

html[data-menu=app] body>header { position:sticky; top:0; min-height:82px; border-bottom:1px solid var(--line); }
html[data-menu=app] body>header>nav { display:none; }
html[data-menu=app] body>header>.menu-toggle { display:none; }
html[data-menu=app] body>.bottom-nav {
  display:flex; position:fixed; z-index:8; bottom:16px; left:50%;
  transform:translateX(-50%); width:min(94%,520px);
  padding:12px 20px max(12px,env(safe-area-inset-bottom));
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:24px; box-shadow:0 8px 40px #0002;
  justify-content:space-around; gap:10px;
}
html[data-menu=app] body>footer { padding-bottom:120px; }
html[data-menu=app] body>main { padding-bottom:60px; }

@media(max-width:760px) {
  html[data-menu] body>header {
    padding:20px; min-height:80px; max-width:none;
  }
  html[data-menu] body>header>nav { display:none; }
  html[data-menu] body>header>.menu-toggle { display:none; }
  html[data-menu=hamburger] body>header>.menu-toggle,
  html[data-menu=sidebar] body>header>.menu-toggle { display:block; }
  html[data-menu=top] body>header { flex-wrap:wrap; gap:16px; }
  html[data-menu=top] body>header>nav {
    display:flex; width:100%; gap:20px; overflow-x:auto;
    padding:4px 0; white-space:nowrap; font-size:12px;
  }
  html[data-menu=sidebar] body>header {
    position:sticky; inset:auto; top:0; width:auto; height:auto;
    flex-direction:row; align-items:center; justify-content:space-between;
    border:0; border-bottom:1px solid var(--line);
  }
  html[data-menu=sidebar] body>main,html[data-menu=sidebar] body>footer,
  html[data-menu=sidebar] body>.announcement,
  html[data-menu=sidebar] body>.preview-banner { margin-left:0; }
}

/* Product details keep the merchant's chosen navigation. */
html[data-menu] .product-page>header>nav{font-size:13px}html[data-menu] .product-page.luxe>header{position:relative;inset:auto;background:var(--page)}
.product-page .menu-toggle{width:44px;height:44px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:50%;flex-shrink:0}.product-page .mobile-menu{margin:0 0 0 auto;width:min(88vw,360px);max-width:none;height:100dvh;max-height:none;padding:32px;border:0;background:var(--page);color:var(--ink)}.product-page .mobile-menu::backdrop{background:#0007}.product-page .mobile-menu nav{display:flex;flex-direction:column;gap:28px;margin-top:50px;font-size:23px}.product-page #close-menu{float:right;width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--ink);border:1px solid var(--line)}.product-page>.bottom-nav a{font-size:12px;padding:10px 8px}.product-page .bottom-nav a:focus-visible{outline:2px solid var(--accent)}
@media(max-width:760px){html[data-menu=app] .product-page .detail-mobile-bar{bottom:88px}html[data-menu=app] .product-page #cart-open{bottom:182px}html[data-menu=app] .product-page #cart-toast{bottom:235px}html[data-menu=app] .product-page>footer{padding-bottom:220px}html[data-menu] .product-page .detail-layout{gap:28px}}
@media(min-width:761px) and (max-width:1100px){html[data-menu=sidebar] .product-page .detail-layout{grid-template-columns:1fr;gap:28px}html[data-menu=sidebar] .product-page .detail-info{position:static}}