/* Build 37 — Hills to Holler-style full-width header + off-canvas menu */
:root{--yipp-header-height:72px;--yipp-drawer-width:300px;--yipp-menu-head:210px;--yipp-menu:#111c2e;--yipp-line:#e5e9ef}
html[data-yipp-role] .yipp-unified-topbar{position:sticky!important;top:0!important;z-index:40!important;width:100%!important;height:var(--yipp-header-height)!important;min-height:var(--yipp-header-height)!important;margin:0!important;padding:0 22px!important;display:flex!important;align-items:center!important;gap:12px!important;background:#fff!important;border-bottom:1px solid var(--yipp-line)!important;box-shadow:0 1px 3px rgba(16,24,40,.04)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:14px!important}
html[data-yipp-role] .merchant-menu-button{display:flex!important;width:42px!important;height:42px!important;flex:0 0 42px!important;margin:0!important;padding:0!important;border:1px solid #e2e7ed!important;border-radius:10px!important;background:#fff!important;color:#344054!important;align-items:center!important;justify-content:center!important}
html[data-yipp-role] .merchant-menu-button:hover{background:#f5f7f9!important;color:#e23943!important}
html[data-yipp-role] .merchant-mobile-brand{display:flex!important;align-items:center!important;gap:10px!important;min-width:150px!important}
html[data-yipp-role] .merchant-mobile-brand img{width:92px!important;height:auto!important}
html[data-yipp-role] .merchant-mobile-brand span{padding-left:10px!important;border-left:1px solid var(--yipp-line)!important;font-size:11px!important;font-weight:850!important;color:#667085!important;white-space:nowrap!important}
html[data-yipp-role] .merchant-top-location{height:42px!important;min-width:150px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 10px!important;border:1px solid #dfe4eb!important;border-radius:9px!important;background:#fff!important;color:#5d6674!important;box-shadow:none!important}
html[data-yipp-role] .merchant-top-location select{height:40px!important;min-height:40px!important;padding:0 24px 0 0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px!important;font-weight:800!important;color:#111827!important}
html[data-yipp-role] .merchant-topbar-spacer{flex:1 1 auto!important}
html[data-yipp-role] .backend-badge{min-height:30px!important;padding:0 12px!important;border-radius:999px!important;font-size:12px!important;font-weight:850!important}
html[data-yipp-role] .merchant-top-icon{width:38px!important;height:38px!important;border:0!important;background:transparent!important;color:#465164!important;font-size:17px!important}
html[data-yipp-role] .merchant-top-icon{position:relative!important}.notification-count{position:absolute!important;top:1px!important;right:0!important;display:grid!important;place-items:center!important;min-width:17px!important;height:17px!important;padding:0 4px!important;border:2px solid #fff!important;border-radius:99px!important;background:#ed3445!important;color:#fff!important;font:700 10px/1 Inter,sans-serif!important}
html[data-yipp-role] .merchant-owner-control{min-width:205px!important;margin-left:6px!important;padding-left:14px!important;border-left:1px solid var(--yipp-line)!important;display:flex!important;align-items:center!important;gap:10px!important}
html[data-yipp-role] .merchant-owner-avatar{width:40px!important;height:40px!important;font-size:11px!important}
html[data-yipp-role] .merchant-owner-control strong{font-size:13px!important;line-height:1.2!important;font-weight:850!important}
html[data-yipp-role] .merchant-owner-control span{font-size:10px!important;line-height:1.25!important;color:#6f7783!important}
html[data-yipp-role] .merchant-owner-control select{width:28px!important;min-width:28px!important;height:42px!important;min-height:42px!important;padding:0!important;border:1px solid #dfe4eb!important;border-radius:9px!important;background:#fff!important;font-size:0!important}
html[data-yipp-role] .desktop-nav,html[data-yipp-role] .merchant-desktop-nav{position:fixed!important;inset:0 auto 0 0!important;z-index:55!important;width:min(var(--yipp-drawer-width),88vw)!important;height:100vh!important;padding:0 14px 24px!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;background:var(--yipp-menu)!important;border-right:0!important;transform:translateX(-105%)!important;transition:transform .24s ease!important;box-shadow:20px 0 50px rgba(3,9,20,.3)!important;overscroll-behavior:contain!important}
html[data-yipp-role] .nav-open .desktop-nav,html[data-yipp-role] .nav-open .merchant-desktop-nav{transform:translateX(0)!important}
html[data-yipp-role="merchant"] .merchant-workspace{margin-left:0!important;width:100%!important}
html[data-yipp-role] .main-content{margin-left:0!important;min-height:calc(100vh - var(--yipp-header-height))!important}
html[data-yipp-role] .menu-identity{position:sticky!important;left:auto!important;top:0!important;flex:0 0 var(--yipp-menu-head)!important;width:calc(100% + 28px)!important;height:var(--yipp-menu-head)!important;min-height:var(--yipp-menu-head)!important;margin:0 -14px 16px!important;padding:14px 20px 16px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;border-bottom:1px solid var(--yipp-line)!important;background:#fff!important;text-align:center!important;z-index:4!important}
html[data-yipp-role] .menu-identity-brand{position:relative!important;width:100%!important;min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important}
html[data-yipp-role] .menu-identity-brand img{width:100px!important;height:auto!important}
html[data-yipp-role] .menu-close{position:absolute!important;right:0!important;top:0!important;display:flex!important;border:0!important;background:#f3f5f7!important;color:#344054!important;width:34px!important;height:34px!important;border-radius:8px!important;align-items:center!important;justify-content:center!important;z-index:5!important}
html[data-yipp-role] .menu-city{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;margin-top:5px!important;color:#5e6877!important;font-size:12px!important;font-weight:850!important}
html[data-yipp-role] .menu-user{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:100%!important;margin-top:18px!important;padding:14px 0 0!important;border:0!important;border-top:1px solid #edf0f4!important;background:transparent!important;text-align:center!important;color:#111827!important}
html[data-yipp-role] .menu-user-avatar{display:grid!important;place-items:center!important;width:52px!important;height:52px!important;flex:0 0 52px!important;border-radius:50%!important;background:#e23943!important;color:#fff!important;font-size:13px!important;font-weight:900!important}
html[data-yipp-role] .menu-user>span:last-child{display:grid!important;justify-items:center!important;min-width:0!important}
html[data-yipp-role] .menu-user strong{font-size:11px!important;line-height:1.2!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html[data-yipp-role] .menu-user small{font-size:9px!important;line-height:1.3!important;color:#7a8390!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
html[data-yipp-role] .nav-open .menu-scrim{display:block!important;position:fixed!important;inset:0!important;z-index:50!important;border:0!important;background:rgba(15,23,42,.44)!important;backdrop-filter:blur(2px)!important}
html[data-yipp-role] .side-card,html[data-yipp-role] .merchant-grow-card{display:none!important}
/* Live mobile/tablet drawer must keep text labels visible. */
html[data-yipp-role] .desktop-nav .nav-label{display:block!important;color:#aeb8c8!important}
html[data-yipp-role] .desktop-nav .nav-button{justify-content:flex-start!important;width:100%!important;text-align:left!important;gap:12px!important;padding:13px 14px!important}
html[data-yipp-role] .desktop-nav .nav-button span{display:inline!important;visibility:visible!important;opacity:1!important;white-space:nowrap!important}
html[data-yipp-role] .merchant-desktop-nav .merchant-nav-button{justify-content:flex-start!important;width:100%!important;text-align:left!important;gap:12px!important}
html[data-yipp-role] .merchant-desktop-nav .merchant-nav-button span{display:inline!important;visibility:visible!important;opacity:1!important;white-space:nowrap!important}
@media(max-width:800px){html[data-yipp-role] .yipp-unified-topbar{height:64px!important;min-height:64px!important;padding:0 10px!important;gap:6px!important}html[data-yipp-role] .merchant-menu-button{width:38px!important;height:38px!important;flex-basis:38px!important;border:0!important}html[data-yipp-role] .merchant-mobile-brand{min-width:auto!important}html[data-yipp-role] .merchant-mobile-brand img{width:78px!important}html[data-yipp-role] .merchant-mobile-brand span{display:none!important}html[data-yipp-role] .merchant-top-location{display:none!important}html[data-yipp-role] .backend-badge,html[data-yipp-role] .merchant-top-icon[aria-label="Help"],html[data-yipp-role] .merchant-owner-control>div{display:none!important}html[data-yipp-role] .merchant-owner-control{min-width:auto!important;margin-left:0!important;padding-left:4px!important;border-left:0!important}html[data-yipp-role] .merchant-owner-control select{width:24px!important;min-width:24px!important}html[data-yipp-role] .merchant-owner-avatar{width:36px!important;height:36px!important}html[data-yipp-role] .main-content{min-height:calc(100vh - 64px)!important}}