/* ============================================================
   CDI V21 drawer and PWA install refinement
   - quieter, sharper mobile navigation typography
   - always-visible install CTA in normal browser mode
   - compact CTA dock that fits common mobile viewports
   ============================================================ */
@media (max-width: 760px){
  body:not(.admin-body) .mobile-drawer{
    width:min(88vw,360px)!important;
    max-width:min(88vw,360px)!important;
  }

  body:not(.admin-body) .mobile-drawer .dtop{
    min-height:68px!important;
    padding:10px 15px!important;
  }

  body:not(.admin-body) .mobile-drawer .drawer-logo{
    max-width:142px!important;
  }

  body:not(.admin-body) .mobile-drawer .dclose{
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    font-size:24px!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu{
    padding:10px 15px 8px!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu details,
  body:not(.admin-body) .mobile-drawer .mmenu .mmenu-flat{
    margin-bottom:8px!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu summary,
  body:not(.admin-body) .mobile-drawer .mmenu-flat{
    min-height:54px!important;
    padding:12px 14px!important;
    border-radius:18px!important;
    font-family:Poppins,Arial,sans-serif!important;
    font-size:16px!important;
    font-weight:500!important;
    line-height:1.2!important;
    letter-spacing:-.015em!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu details[open] > summary{
    font-weight:600!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu-chevron{
    font-size:12px!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu-panel{
    padding:6px 5px 10px!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu-grid a,
  body:not(.admin-body) .mobile-drawer .mmenu-panel > a,
  body:not(.admin-body) .mobile-drawer .mmenu-viewall{
    min-height:38px!important;
    padding:8px 7px!important;
    font-size:13.5px!important;
    font-weight:500!important;
    line-height:1.3!important;
  }

  body:not(.admin-body) .mobile-drawer .mmenu-flat .tag{
    font-size:10px!important;
    font-weight:500!important;
    padding:4px 8px!important;
  }

  body:not(.admin-body) .mobile-drawer .dfoot{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:9px 15px calc(11px + env(safe-area-inset-bottom))!important;
  }

  body:not(.admin-body) .mobile-drawer .dfoot .btn{
    min-height:43px!important;
    border-radius:15px!important;
    padding:9px 8px!important;
    font-size:12.5px!important;
    font-weight:600!important;
    line-height:1.12!important;
  }

  body:not(.admin-body) .mobile-drawer .dfoot .btn:nth-child(3){
    grid-column:1 / -1!important;
  }

  /* Put the app action first so it is visible without scrolling. */
  html:not(.pwa-standalone) body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn:not([hidden]){
    display:flex!important;
    order:-1!important;
    grid-column:1 / -1!important;
    min-height:46px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    background:#0B1F3D!important;
    border:1px solid #0B1F3D!important;
    color:#fff!important;
    box-shadow:0 8px 20px rgba(11,31,61,.14)!important;
    font-size:13.5px!important;
    font-weight:600!important;
  }

  html:not(.pwa-standalone) body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn:not([hidden]) .cdi-icon,
  html:not(.pwa-standalone) body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn:not([hidden]) i{
    width:18px!important;
    height:18px!important;
    font-size:18px!important;
    flex:0 0 auto!important;
  }

  html.pwa-standalone body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn,
  body:not(.admin-body) .mobile-drawer .dfoot .cdi-install-menu-btn[hidden]{
    display:none!important;
  }
}