/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  /* minmax(0,1fr), not 1fr: a bare 1fr won't shrink below its content, and the
     listing page ran a pixel off a 320px phone. */
  .detail,.stay-layout,.cart-layout{grid-template-columns:minmax(0,1fr)}
  .browse-layout{grid-template-columns:1fr}
  .filters{position:static;flex-direction:row;flex-wrap:wrap;gap:18px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .dash-grid,.dash-grid.wideleft{grid-template-columns:minmax(0,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:1fr}
  .sell-types{grid-template-columns:repeat(2,1fr)}
  .howsteps{grid-template-columns:1fr}
  .feecmp-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stay-gallery{height:280px}
  .bookbox{position:static}
}
/* Phones and small tablets: the filters fold away behind their button.
   Stacked open they are four headings and a dozen controls above the first
   result — on a 320px screen a search showed its own filters and nothing it
   had found. */
@media (max-width:760px){
  .filtertoggle{display:flex}
  .filters{display:none}
  .filters.open{display:flex;flex-direction:column;gap:18px;
    padding:16px;margin-bottom:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
  /* Open, it is a panel of its own — and its longest list stops eating the
     screen before the results below it. */
  .filters.open .facets{max-height:210px}
}
@media (max-width:640px){
  /* Everything above the first result, on a phone, measured: the promo bar
     was 74px of a 576px screen and the heading another 83, so a search showed
     its own furniture and none of what it had found. */
  .promo{font-size:12px;padding:6px 14px;line-height:1.35}
  .promo-more{display:none}

  /* Two cards to a row, not one.
     One card a row meant one *result* a screen: a search that found six things
     showed the first and asked for six swipes to see the rest, and a phone is
     where most of Harbour is read. Two is what a phone can hold without the
     price and the seller's name becoming unreadable — the card's own type
     comes down with it, below.
     repeat(2,minmax(0,1fr)) and not auto-fill: auto-fill with a 240px minimum
     is what produced one column, and minmax(0,…) is what lets a long shop
     name shrink its card instead of widening it. */
  .grid,.grid.wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .body{padding:10px 11px 12px;gap:3px}
  .card .seller{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .card .seller .sellerlink{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  /* Two lines and then an ellipsis, so a long title can't make one card in a
     row twice the height of the one beside it. */
  .card .name{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card .meta,.card .rating{font-size:11.5px}
  .card .price{font-size:15.5px}
  .card .unit,.card .was,.card .save,.card .bid-meta{font-size:11px}
  .card .pricerow{gap:5px;flex-wrap:wrap}
  /* The tag moves to the foot of the photo.
     At the top it shares the width with the heart, and on a 131px card there
     is not enough left for "SALE · 20% OFF" — it was cut off mid-word, and
     shrinking the type to fit only made it unreadable instead. Down here it
     has the whole width and the heart is out of its way. */
  .card .art .tag{top:auto;bottom:8px;left:8px;font-size:10px;padding:3px 7px;
    max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card .heart{width:28px;height:28px;top:6px;right:6px}
  .card .heart svg{width:14px;height:14px}
  .card .saleclock{font-size:10.5px;padding:3px 7px;gap:4px}
  .card .shopbadge.sm{display:none}     /* the seller's name first, on 140px */
  .browse-head{margin:16px 0 12px}
  .browse-head h1{font-size:21px}
  .browse-head p{font-size:13px}
  .filtertoggle{margin-bottom:10px;padding:10px 13px}
  .toolbar{margin-bottom:12px;gap:8px}
  .nav .searchbar{display:none}
  /* The header ran 33px off a phone screen, so every page scrolled sideways.
     Orders is in the account menu once you're signed in; the rest tighten. */
  .nav{gap:10px}
  .navlinks .navorders{display:none}
  .navlinks button{padding:8px 9px}
  .hero{padding:36px 26px 42px}
  .hero-search select{display:none}
  .tiles{grid-template-columns:1fr 1fr}
  .sell-types{grid-template-columns:1fr}
  /* Two fields to a row is two date pickers wider than a phone. */
  form.fields{grid-template-columns:minmax(0,1fr)}
  .fld input,.fld select,.fld textarea{min-width:0}
  .ordercard{padding:14px}
  .setup-main .panel{padding:16px 14px}
  .amgrid{grid-template-columns:minmax(0,1fr)}
  /* The seller card, on a phone, is two rows and not one.
     Wrapping a flex row left the name and "Selling on Harbour" in a column
     barely wider than the words, so they ran down the card *through* the two
     buttons beside them. A grid says it properly: the avatar and who they are
     on the first row, the buttons across the second. */
  /* The seller's schedule: the calendar above the settings, not beside them. */
  .schedule-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .sellercard,.hostrow{display:grid;grid-template-columns:auto minmax(0,1fr);row-gap:12px}
  .sellerbtns,.hostbtns{grid-column:1/-1;display:flex}
  /* Grow to fill the row, but never below the width of their own label: with
     three buttons (a phone number makes three) sharing 320px, flex:1 1 0 cut
     "Call 0400 123 456" off mid-number. max-content makes them wrap instead. */
  .sellerbtns .btn,.hostbtns .btn{flex:1 1 auto;min-width:max-content}
  .shophead-a{justify-content:flex-start}
}
@media (max-width:420px){
  /* The anchor alone is the mark on the narrowest phones, and the account
     button is its icon — or your initials — with the words in its aria-label. */
  .logo .word{display:none}
  .navlinks .acct-name{display:none}
}