/* Mobile composition repair after the dark-luxury redesign. Keep this last. */
@media (max-width:700px){
  #app{padding:0 16px!important;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important;border:0!important;overflow:hidden}
  body{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
  .header{position:relative!important;top:auto!important;min-height:92px!important;padding:8px 0!important;background:#080808!important}
  .brand-logo-image{width:96px!important;height:74px!important}
  .brand-copy{display:none!important}
  .header-tools{margin-left:auto!important;gap:8px!important}
  .local-status{display:none!important}
  .unit-toggle{min-width:78px!important;min-height:52px!important;padding:9px 10px!important}
  .bartender-legal-strip{margin:0 -16px!important;padding:8px 16px!important;font-size:8px!important}

  /* Phone nav: count above, equal-size icon centered, label below. */
  .nav{margin:0 -16px!important;padding:10px 12px 12px!important;min-height:88px!important;gap:4px!important;position:relative!important;top:auto!important;display:flex!important;align-items:stretch!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important}
  .nav::-webkit-scrollbar{display:none!important}
  .nav a{position:relative!important;flex:1 0 72px!important;min-width:72px!important;min-height:66px!important;padding:2px 4px 5px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;display:grid!important;grid-template-rows:18px 28px 16px!important;grid-template-columns:1fr!important;align-items:center!important;justify-items:center!important;gap:1px!important;font-size:0!important;line-height:1!important;color:#f4e7d1!important;text-decoration:none!important}
  .nav a[aria-current="page"]{background:#d5a24710!important;box-shadow:inset 0 0 0 1px #d5a24755!important}
  .nav a::before{content:""!important;grid-row:2!important;width:24px!important;height:24px!important;display:block!important;background-repeat:no-repeat!important;background-position:center!important;background-size:24px 24px!important;filter:none!important;opacity:.96!important}
  .nav a::after{grid-row:3!important;font-size:9px!important;line-height:1!important;letter-spacing:.08em!important;text-transform:uppercase!important;white-space:nowrap!important;color:#f2e6d5!important}
  .nav .count{grid-row:1!important;position:static!important;transform:none!important;margin:0!important;padding:0!important;min-width:0!important;height:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:11px!important;font-weight:700!important;line-height:16px!important;color:#e3b85f!important;text-align:center!important}
  .nav a:nth-child(1)::after{content:"Discover"!important}
  .nav a:nth-child(2)::after{content:"My cabinet"!important}
  .nav a:nth-child(3)::after{content:"Favorites"!important}
  .nav a:nth-child(4)::after{content:"Shopping list"!important}
  .nav a:nth-child(5)::after{content:"Sources"!important}
  .nav a:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7a653' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.8 8.2l-2.2 5.4-5.4 2.2 2.2-5.4 5.4-2.2z'/%3E%3C/svg%3E")!important}
  .nav a:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7a653' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v3l1.7 2.2V20H7.3V8.2L9 6V3z'/%3E%3Cpath d='M9 11h6M9 15h6'/%3E%3C/svg%3E")!important}
  .nav a:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7a653' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 5.7a5 5 0 00-7.1 0L12 7l-1.3-1.3a5 5 0 00-7.1 7.1L12 21l8.4-8.2a5 5 0 000-7.1z'/%3E%3C/svg%3E")!important}
  .nav a:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7a653' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='1.5'/%3E%3Cpath d='M9 2h6v4H9zM8.5 10h7M8.5 14h7M8.5 18h4'/%3E%3C/svg%3E")!important}
  .nav a:nth-child(5)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7a653' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8M9 4v4l-3 4v8h12v-8l-3-4V4'/%3E%3Cpath d='M8 13h8M8 17h8'/%3E%3C/svg%3E")!important}

  .hero{display:block!important;min-height:0!important;padding:18px 0 24px!important}
  .hero:before{inset:0!important;border-radius:16px!important;background:radial-gradient(circle at 80% 74%,#17496a32 0,transparent 27%),linear-gradient(145deg,#11100f,#0a0908 68%,#080808)!important}
  .hero:after{display:none!important}
  .hero-copy{padding:28px 24px 22px!important}
  .hero .eyebrow{margin-bottom:10px!important;font-size:8px!important;letter-spacing:.18em!important}
  .hero h1{font-size:clamp(36px,11vw,52px)!important;line-height:.98!important;letter-spacing:-.035em!important;margin:0 0 18px!important;max-width:none!important}
  .hero h1 em{display:inline!important}
  .hero p{font-size:14px!important;line-height:1.6!important;margin:0 0 20px!important}
  .hero .actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .hero .actions button,.hero .actions .link-button{width:100%!important;min-height:48px!important;text-align:center!important}
  .hero-art{height:230px!important;margin:0 18px 18px!important;border-top:1px solid #33271e!important;background:url('./maneframe-bartender-logo.svg') center/contain no-repeat!important;filter:var(--logo-blue)!important;opacity:.9!important}
  .hero-art .art-label{display:none!important}

  .stats{grid-template-columns:repeat(3,1fr)!important;margin:0 0 28px!important;border-radius:14px!important}
  .stat{min-height:98px!important;padding:14px 8px!important;display:block!important;text-align:center!important}
  .stat strong{display:block!important;font-size:30px!important;margin-bottom:7px!important}
  .stat span{font-size:8px!important;line-height:1.35!important;letter-spacing:.07em!important}

  .section-heading{display:block!important;margin:26px 0 14px!important}
  .section-heading h2{font-size:30px!important;margin-bottom:6px!important}
  .toolbar{display:grid!important;grid-template-columns:1fr!important}
  .toolbar select{width:100%!important;max-width:none!important}
  .cards{grid-template-columns:1fr!important;gap:14px!important}
  .card-art{height:170px!important}
  .page-intro{padding:34px 0 22px!important}
  .page-intro h1{font-size:38px!important}
  .page-intro:before,.about:before,.suggestions:before{display:none!important}
  .inventory-grid{grid-template-columns:1fr 1fr!important}
  .list-layout,.detail-layout{grid-template-columns:1fr!important}
  footer{gap:10px!important;padding:26px 0 calc(88px + env(safe-area-inset-bottom,0px))!important;min-height:220px!important}
  .footer-brand-logo{width:78px!important;height:60px!important}
}
@media (max-width:390px){
  #app{padding:0 12px calc(28px + env(safe-area-inset-bottom,0px))!important}
  .bartender-legal-strip,.nav{margin-left:-12px!important;margin-right:-12px!important;padding-left:8px!important;padding-right:8px!important}
  .nav a{flex-basis:68px!important;min-width:68px!important}
  .hero-copy{padding:24px 18px 18px!important}
  .hero-art{height:205px!important;margin:0 14px 14px!important}
  .hero h1{font-size:38px!important}
  .inventory-grid{grid-template-columns:1fr!important}
}