/* ==========================================================================
   pwa-shell.css — reusable installed-PWA app chrome
   Phase 4.4.2: full-width fixed nav; sheets terminate above the nav.
   ========================================================================== */
:root{
  --pwa-shell-top:64px;
  --pwa-shell-nav-height:78px;
  --pwa-sheet-radius:24px;
}

.pwa-app-header,
.pwa-bottom-nav,
.pwa-sheet-backdrop,
.pwa-sheet{ display:none; }

body.is-pwa{
  padding-top:calc(var(--pwa-shell-top) + env(safe-area-inset-top));
  padding-bottom:calc(var(--pwa-shell-nav-height) + env(safe-area-inset-bottom));
  overscroll-behavior-y:none;
}
body.is-pwa #siteHeaderNav,
body.is-pwa #site-footer,
body.is-pwa #floating-whatsapp,
body.is-pwa #pwa-install-banner{ display:none !important; }

body.is-pwa .pwa-app-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1080;
  height:calc(var(--pwa-shell-top) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-surface);
  border-bottom:1px solid rgba(74,39,35,.08);
  box-shadow:0 7px 24px rgba(74,39,35,.055);
}
@supports (background:color-mix(in srgb,white 50%,transparent)){
  body.is-pwa .pwa-app-header{
    background:color-mix(in srgb,var(--color-surface) 96%,transparent);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}
.pwa-app-brand{
  width:min(190px,52vw);
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.pwa-app-brand img{ width:100%; height:100%; object-fit:contain; }

/* Full-width persistent app navigation. The safe-area padding keeps it above
   iOS home indicator / compatible system navigation areas. */
body.is-pwa .pwa-bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1110;
  height:calc(var(--pwa-shell-nav-height) + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  padding:7px 6px max(7px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(74,39,35,.09);
  background:var(--color-surface);
  box-shadow:0 -7px 28px rgba(54,31,27,.10);
}
@supports (background:color-mix(in srgb,white 50%,transparent)){
  body.is-pwa .pwa-bottom-nav{
    background:color-mix(in srgb,var(--color-surface) 97%,transparent);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
}
.pwa-nav-action{
  position:relative;
  min-width:0;
  height:64px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--color-text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  padding:7px 3px 5px;
  font:inherit;
  font-size:.68rem;
  font-weight:400;
  line-height:1.05;
  text-align:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,color .18s ease,transform .14s ease;
}
.pwa-nav-action > span:last-child:not(.pwa-nav-badge){ font-weight:400; }
.pwa-nav-action:active{ transform:scale(.96); }

.pwa-nav-icon-wrap{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  color:var(--color-primary);
}

.pwa-nav-icon-wrap svg{
  display:block;
  color:var(--color-primary);
}

/* Optical balancing: every icon uses the same inline-SVG rendering system. */
.pwa-nav-icon-shop svg{
  width:29px !important;
  height:29px !important;
}

.pwa-nav-icon-categories svg{
  width:30px !important;
  height:30px !important;
}

.pwa-nav-action[data-pwa-action="cart"] .pwa-nav-icon-wrap svg{
  width:26px !important;
  height:26px !important;
}

.pwa-nav-icon-more svg{
  width:29px !important;
  height:29px !important;
}

.pwa-nav-action.is-active,
.pwa-nav-action[aria-expanded="true"]{
  color:var(--color-text);
  background:color-mix(in srgb,var(--color-primary) 9%,transparent);
}
.pwa-nav-action.is-active::after,
.pwa-nav-action[aria-expanded="true"]::after{
  content:"";
  position:absolute;
  bottom:4px;
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--color-primary);
}

.pwa-nav-badge{
  position:absolute;
  top:2px;
  left:calc(50% + 8px);
  min-width:18px;
  height:18px;
  padding:0 4px;
  border:2px solid var(--color-surface);
  border-radius:999px;
  background:var(--color-primary);
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:.58rem;
  font-weight:800;
  line-height:1;
}
.pwa-nav-badge.is-visible{ display:flex; }
.pwa-nav-badge.bump{ animation:pwaBadgeBump .28s ease; }
@keyframes pwaBadgeBump{ 50%{ transform:scale(1.22); } }

/* Backdrop stops above persistent nav so the nav remains visible/interactive. */
body.is-pwa .pwa-sheet-backdrop{
  position:fixed;
  inset:0 0 calc(var(--pwa-shell-nav-height) + env(safe-area-inset-bottom)) 0;
  z-index:1090;
  display:block;
  background:rgba(35,22,20,.34);
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease,visibility .24s ease;
}
body.is-pwa .pwa-sheet-backdrop.is-open{ opacity:1; visibility:visible; }

/* Sheet is anchored immediately above the PWA nav and visually emerges from
   behind it rather than covering the navigation. */
body.is-pwa .pwa-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(var(--pwa-shell-nav-height) + env(safe-area-inset-bottom));
  z-index:1100;
  display:flex;
  flex-direction:column;
  max-height:min(68vh,600px);
  padding:8px 14px 16px;
  border-radius:var(--pwa-sheet-radius) var(--pwa-sheet-radius) 0 0;
  background:var(--color-surface);
  box-shadow:0 -16px 48px rgba(45,27,23,.20);
  transform:translateY(calc(100% + var(--pwa-shell-nav-height)));
  visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s ease;
}
body.is-pwa .pwa-sheet.is-open{
  transform:translateY(0);
  visibility:visible;
}
.pwa-sheet-handle{
  width:42px;
  height:5px;
  margin:2px auto 8px;
  border-radius:999px;
  background:rgba(74,39,35,.18);
  flex:0 0 auto;
}
.pwa-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 2px 10px;
  flex:0 0 auto;
}
.pwa-sheet-title{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  color:var(--color-text);
}
.pwa-sheet-close{
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--color-bg);
  color:var(--color-text);
}
.pwa-sheet-body{
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:0 2px 4px;
}
.pwa-sheet-list{ display:grid; gap:4px; }
.pwa-sheet-row{
  width:100%;
  min-height:50px;
  border:0;
  border-radius:14px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  color:var(--color-text);
  text-decoration:none;
  text-align:left;
  font:inherit;
  font-weight:500;
  transition:background .18s ease,color .18s ease;
}
.pwa-sheet-row:active,
.pwa-sheet-row.is-active{
  background:var(--color-bg);
  color:var(--color-primary);
}
.pwa-sheet-row > svg{ flex:0 0 auto; opacity:.55; }
.pwa-more-meta{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.pwa-more-meta .pwa-asset-icon,
.pwa-more-inline-icon{
  width:21px;
  height:21px;
  flex:0 0 21px;
  color:currentColor;
}
.pwa-more-inline-icon{
  display:grid;
  place-items:center;
}
.pwa-more-inline-icon svg{
  width:20px !important;
  height:20px !important;
}

body.pwa-sheet-lock{ overflow:hidden; }

/* Existing fixed overlays remain above the shell when explicitly opened. */
body.is-pwa .cart-drawer-panel,
body.is-pwa .quickview-modal{ z-index:1130; }
body.is-pwa .offcanvas-backdrop{ z-index:1125 !important; }
body.is-pwa .cart-stage-footer,
body.is-pwa .quickview-footer{
  padding-bottom:calc(1rem + max(env(safe-area-inset-bottom),18px));
}
body.is-pwa .connectivity-pill,
body.is-pwa .toast-pop{
  bottom:calc(var(--pwa-shell-nav-height) + 18px + env(safe-area-inset-bottom));
}
body.is-pwa .toast-pop{ z-index:1140; }

body.is-pwa #menu-categories,
body.is-pwa #cart-bar-mount{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .pwa-nav-action,.pwa-sheet,.pwa-sheet-backdrop{ transition:none !important; }
  .pwa-nav-badge.bump{ animation:none; }
}

@media (display-mode:standalone){
  #siteHeaderNav,#site-footer,#floating-whatsapp,#pwa-install-banner{ display:none !important; }
}

/* Shantilal colours */
:root{--color-surface:#FFF9EE;--color-pop:#D87719;--color-accent:#AF432D;--color-text:#442F29}
body.is-pwa .pwa-app-header,body.is-pwa .pwa-bottom-nav{background:#FFF9EE!important;border-color:#EFDEC5!important}
body.is-pwa .pwa-nav-action.is-active{color:#AF432D!important;background:#FBE8D0!important}
body.is-pwa .pwa-app-brand{width:min(230px,68vw)}
body.is-pwa #menu-hero .hero-block.hero-compact{height:125px!important}

/* Shantilal Phase 3 clean PWA shell refinements */
body.is-pwa #siteHeaderNav,body.is-pwa #menu-categories{display:none!important}
body.is-pwa .pwa-app-header{position:fixed!important;top:0!important;left:0!important;right:0!important;margin:0!important;transform:none!important;z-index:1080!important}
body.is-pwa .pwa-app-brand{width:min(285px,78vw)!important}
body.is-pwa .pwa-nav-icon-wrap .sh-ui-icon{width:25px;height:25px}
body.is-pwa .pwa-more-inline-icon .sh-ui-icon{width:22px;height:22px}
body.is-pwa .pwa-sheet-row>.sh-ui-icon{width:18px;height:18px;flex-shrink:0;color:#997A6A}
body.is-pwa .pwa-sheet-row:is(:hover,.is-active){background:#F9E9D7!important;color:#A33F2C!important}

/* v5 fixed PWA header: body reserves precisely one header-height. */
@media(display-mode:standalone){body{margin-top:0!important}body:not(.is-pwa) #siteHeaderNav{display:none!important}}
body.is-pwa{margin-top:0!important;padding-top:calc(var(--pwa-shell-top) + env(safe-area-inset-top))!important}
body.is-pwa .pwa-app-header{position:fixed!important;inset:0 0 auto!important;height:calc(var(--pwa-shell-top) + env(safe-area-inset-top))!important;min-height:0!important}
body.is-pwa .pwa-app-brand{width:min(285px,78vw)!important}
body.is-pwa .pwa-nav-action{font-family:inherit!important;color:#442F29!important}
body.is-pwa .pwa-nav-action.is-active{background:#FBE8D0!important;color:#AF432D!important}