/* Mobile navigation is a single disclosure, with the existing desktop links. */
.mobile-menu-toggle{display:none}
@media(max-width:1100px){
  header{position:relative;display:flex;flex-wrap:wrap;min-height:90px;height:auto;padding:18px 5%;gap:12px}
  header>.logo{font-size:30px;margin-right:auto}
  header>.mobile-menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;order:2;width:46px;height:46px;padding:10px;flex-shrink:0;border:1px solid #bbc7ba;border-radius:7px;background:#fffdf8;color:var(--green)}
  .mobile-menu-toggle span{display:block;width:21px;height:2px;background:currentColor;transition:transform .15s}
  .mobile-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mobile-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
  header nav,header .header-actions{display:none}
  header.mobile-menu-open nav{display:flex;order:3;width:100%;max-width:none;flex-direction:column;align-items:stretch;gap:0;padding-top:12px;border-top:1px solid var(--line)}
  header.mobile-menu-open nav button{display:flex;align-items:center;justify-content:space-between;min-height:48px;text-align:left;padding:12px 10px;font-size:16px;border-radius:5px}
  header.mobile-menu-open nav button:hover{background:#e8eddf}
  header nav .barter-menu-symbol{position:static;transform:none;font-size:21px}
  header.mobile-menu-open .header-actions{display:flex;order:4;width:100%;flex-direction:column;align-items:stretch;gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--line)}
  header .header-actions>button,header .activity{width:100%;min-height:46px;text-align:left;padding:12px 10px;font-size:15px}
  header .account-menu{position:static;width:100%;max-width:none;margin-top:8px;box-shadow:none}
}
@media(max-width:760px){
  .demo-bar{position:relative;min-height:30px;height:auto;padding:8px 5%;padding-right:105px;letter-spacing:.7px}
  main{padding-inline:5%;min-width:0}
  .hero-buttons{flex-wrap:wrap}.hero-buttons button{min-height:46px}
  .tabs{overflow-x:auto;justify-content:flex-start;gap:20px;min-width:0;max-width:100%;padding:0 2px}
  .browse-toolbar{min-width:0}.search{min-width:0}.search input{min-width:0}
  .filters{flex-wrap:wrap;gap:10px}.filters>div{flex-wrap:wrap}.filters select{min-height:44px;font-size:12px;max-width:100%}
  .title-row{flex-wrap:wrap}.title-row>span{margin:0 0 12px}
  .community-intro,.barter-intro{min-width:0}
  .hero h1{font-size:40px;letter-spacing:-1.8px}
  .service-strip{gap:20px 12px}.service-strip>div{min-width:0}.service-strip small{line-height:1.5}
  .product-card h3{overflow-wrap:anywhere}.product-price{flex-wrap:wrap}
  .fulfill-choices{flex-wrap:wrap}.fulfill-choices label{min-width:100px}
  .form-grid{grid-template-columns:1fr}.form-grid>*{min-width:0}
  #toast{max-width:calc(100vw - 32px);width:max-content}
}