/* PALMEA V22 — verified persistent navigation + premium back-to-top
   Layered strictly over V20/V21 without altering the approved visual system. */

:root{
  --palmea-head-h:78px;
  --palmea-cat-h:0px;
  --palmea-stack-gap:6px;
}

/* Header: use fixed positioning so persistence is deterministic on every browser. */
.site-head{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:180!important;
  transform:none!important;
  will-change:auto!important;
}

/* Reserve the exact measured header height in document flow. */
.page{
  padding-top:calc(var(--palmea-head-h) + 8px)!important;
}

/* Menu category bar stays in normal flow until it reaches the header. */
body[data-page="menu"] .category-wrap{
  position:relative!important;
  top:auto!important;
  z-index:165!important;
  transform:none!important;
}

/* Once the original category position reaches the header, pin it underneath. */
body[data-page="menu"] .category-wrap.is-pinned-v22{
  position:fixed!important;
  top:calc(var(--palmea-head-h) + var(--palmea-stack-gap))!important;
  left:50%!important;
  right:auto!important;
  width:min(1060px,calc(100vw - 24px))!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  z-index:170!important;
}

body[data-page="menu"] .category-wrap.is-pinned-v22 .category-nav{
  box-shadow:0 15px 38px rgba(178,104,96,.14)!important;
}

.category-sentinel-v22{
  height:1px;
  width:1px;
  pointer-events:none;
}
.category-placeholder-v22{
  height:0;
  width:100%;
  pointer-events:none;
}

/* Anchor jumps and scroll-spy targets clear both fixed bars. */
body[data-page="menu"]{
  scroll-padding-top:calc(var(--palmea-head-h) + var(--palmea-cat-h) + var(--palmea-stack-gap) + 20px)!important;
}
body[data-page="menu"] .section{
  scroll-margin-top:calc(var(--palmea-head-h) + var(--palmea-cat-h) + var(--palmea-stack-gap) + 20px)!important;
}

/* Toasts must never hide under the persistent header/category stack. */
.toast-stack{
  top:calc(var(--palmea-head-h) + 12px)!important;
}
body[data-page="menu"].palmea-category-pinned-v22 .toast-stack{
  top:calc(var(--palmea-head-h) + var(--palmea-cat-h) + var(--palmea-stack-gap) + 12px)!important;
}

/* Premium back-to-top: small, brand-led and non-intrusive. */
.back-to-top-v22{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:150;
  width:50px;
  height:50px;
  border:1px solid rgba(178,104,96,.16);
  border-radius:17px;
  background:rgba(243,237,224,.96);
  color:#b26860;
  box-shadow:0 14px 34px rgba(178,104,96,.16);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px) scale(.96);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease,background .22s ease,box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.back-to-top-v22::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:13px;
  border:1px solid rgba(178,104,96,.10);
  pointer-events:none;
}
.back-to-top-v22 svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.back-to-top-v22.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.back-to-top-v22:hover{
  background:#f3ede0;
  box-shadow:0 18px 38px rgba(178,104,96,.20);
  transform:translateY(-2px);
}
.back-to-top-v22:focus-visible{
  outline:3px solid rgba(178,104,96,.24);
  outline-offset:3px;
}
body.overlay-lock .back-to-top-v22{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:760px){
  :root{--palmea-stack-gap:4px}
  .page{padding-top:calc(var(--palmea-head-h) + 6px)!important}
  body[data-page="menu"] .category-wrap.is-pinned-v22{
    width:calc(100vw - 14px)!important;
  }
  .back-to-top-v22{
    width:46px;
    height:46px;
    border-radius:15px;
    right:max(10px,env(safe-area-inset-right));
    bottom:calc(88px + env(safe-area-inset-bottom));
  }
}

@media(max-width:390px){
  :root{--palmea-stack-gap:3px}
  .back-to-top-v22{width:44px;height:44px;border-radius:14px}
}

@media(prefers-reduced-motion:reduce){
  .back-to-top-v22{transition:none!important}
}

/* Keep all interaction layers above the persistent navigation stack. */
.drawer-backdrop{z-index:300!important}
.side-drawer{z-index:310!important}
.modal{z-index:320!important}
.image-viewer{z-index:325!important}
.confirm-layer{z-index:340!important}
.toast-stack{z-index:360!important}