/* ============================================================
   HowfenConnect — Browse businesses, v2
   Loaded only by businesses/index-v2.blade.php (route /businesses-v2).
   Theme vars used: --accent --accent-dark --ink --line
   Theme components reused: .wrap .cta .cta.on-light .ico .script
   ------------------------------------------------------------
   Every link's colour is set on its own selector. There is deliberately
   no blanket `.browse a { color: inherit }` — that outranked the specific
   rules in the first attempt and turned icons black on black.
   ============================================================ */

.browse{padding:72px 0 96px;color:var(--ink)}
.browse a{text-decoration:none}

/* ---------- page head ---------- */
.browse .sec-head{text-align:center;max-width:760px;margin:0 auto 26px;padding:0 20px}
.browse .sec-head .script{margin:0 0 2px;color:var(--accent-dark)}
.browse .sec-head h1{margin:0 0 12px;font-size:clamp(2rem,4.2vw,3.25rem);font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.browse .sec-sub{margin:0;font-size:1.05rem;line-height:1.55}

/* ============================================================
   FILTER SYSTEM
   The panel is a <details>, so open/close and apply need no JavaScript.
   ============================================================ */
.bf{margin:0 0 16px}
/* the row is the positioning context, so the panel spans the full width
   rather than hanging off the right edge from the button */
.bf-row{position:relative;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* search */
.bf-search{flex:1 1 320px;min-width:0;height:60px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:999px;background:#FBFAF8;
  padding:0 8px 0 22px;display:flex;align-items:center;gap:13px;
  transition:border-color .14s ease,background .14s ease}
.bf-search-ico{flex:none;color:var(--accent-dark);display:grid;place-items:center}
.bf-search-ico svg{width:21px;height:21px;stroke:currentColor;fill:none}
.bf-search input{flex:1;min-width:0;border:0;outline:0;background:none;
  font:inherit;font-size:1.05rem;color:var(--ink);-webkit-appearance:none;appearance:none}
.bf-search input::placeholder{color:var(--ink);opacity:1}
.bf-search input::-webkit-search-decoration,
.bf-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.bf-search:focus-within{border-color:var(--accent-dark);background:#fff}
.bf-search-go{width:44px;height:44px;flex:none;border:0;border-radius:999px;
  background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.bf-search-go svg{width:18px;height:18px;stroke:#fff;fill:none}
.bf-search-go:hover{background:#000}

/* the Filters button — a <label> driving a hidden checkbox */
.bf-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.bf-btn{flex:none;height:60px;padding:0 26px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:1rem;font-weight:700;
  display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.bf-btn svg{width:19px;height:19px}
.bf-btn .bf-count{min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;
  border-radius:999px;background:var(--accent);color:var(--ink);
  font-size:.78rem;font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center}
.bf-toggle:checked~.bf-btn{background:#000}
.bf-toggle:focus-visible~.bf-btn{outline:2px solid var(--accent-dark);outline-offset:2px}

/* backdrop: invisible on desktop, just there to catch a click outside */
/* kept in the DOM so it can fade; visibility also keeps it from catching
   clicks and from entering the tab order while closed */
.bf-scrim{display:block;position:fixed;inset:0;z-index:80;cursor:default;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.bf-toggle:checked~.bf-scrim{opacity:1;visibility:visible;transition:opacity .2s ease}

/* sort */
.bf-sort{flex:none;min-width:212px;height:60px;box-sizing:border-box;
  border:0;border-radius:999px;background:var(--accent);color:var(--ink);
  padding:0 24px;display:flex;align-items:center;gap:11px}
.bf-sort>svg{width:18px;height:18px;flex:none;stroke:var(--ink);fill:none}
.bf-sort-text{flex:1;min-width:0;display:flex;flex-direction:column}
.bf-sort-text small{font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);line-height:1}
.bf-sort select{margin-top:2px;border:0;outline:0;background:none;font:inherit;
  font-size:.97rem;font-weight:700;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;padding:0}
/* appearance:none removes the native arrow, so draw one back */
.bf-sort::after{content:"";flex:none;width:9px;height:9px;margin-top:-4px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg);pointer-events:none}

/* ---------- the panel itself ---------- */
/* On a desktop it drops in: a short rise and fade rather than appearing.
   display cannot be animated, so the panel stays rendered and `visibility`
   hides it — which, unlike opacity alone, keeps its radios and switches out
   of the tab order while the panel is shut. */
/* Opens out of the Filters button and folds back into it. The origin is set
   at roughly where that button sits in the row — search grows to fill, then
   Filters, then Sort — so the panel appears to come from under it rather than
   from the middle of the page.
   display cannot be animated, so the panel stays rendered and `visibility`
   hides it — which, unlike opacity alone, keeps its radios and switches out
   of the tab order while the panel is shut. */
.bf-sheet{display:flex;position:absolute;z-index:90;top:calc(100% + 10px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 18px 44px rgba(15,20,36,.14);overflow:hidden;
  max-height:min(72vh,660px);flex-direction:column;
  transform-origin:76% 0;
  opacity:0;visibility:hidden;transform:scale(.94) translateY(-10px);
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,.61,.36,1),
             visibility 0s linear .22s}
.bf-toggle:checked~.bf-sheet{opacity:1;visibility:visible;transform:none;
  transition:opacity .16s ease,transform .24s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion:reduce){
  .bf-scrim,.bf-sheet{transition:none}
}
.bf-sheet-grab{display:none}
.bf-sheet-head{flex:none;padding:18px 26px 15px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.bf-sheet-head h2{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.03em}
.bf-head-actions{display:flex;align-items:center;gap:14px}
.bf-clear{font-size:.92rem;font-weight:700;color:var(--accent-dark)}
.bf-close{width:38px;height:38px;flex:none;border-radius:999px;background:#F3F2EE;
  color:var(--ink);display:grid;place-items:center;cursor:pointer}
.bf-close svg{width:17px;height:17px}
.bf-close:hover{background:#E6E3DB}
.bf-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 26px}
.bf-sheet-foot{flex:none;padding:14px 26px 18px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;align-items:center;gap:12px}
.bf-cancel{height:48px;padding:0 22px;border:1px solid #D9D7D0;border-radius:999px;
  background:#fff;font-size:1rem;font-weight:700;color:var(--ink);
  display:inline-flex;align-items:center;cursor:pointer}
.bf-cancel:hover{background:#F3F2EE}
.bf-apply{height:48px;padding:0 28px;border:0;border-radius:999px;
  background:var(--accent);color:var(--ink);font:inherit;font-size:1rem;
  font-weight:800;cursor:pointer}
.bf-apply:hover{background:var(--accent-dark)}

.bf-cols{display:flex;gap:36px;align-items:flex-start}
.bf-col{flex:1.5 1 0;min-width:0}
.bf-col-side{flex:1 1 0;max-width:340px}
.bf-rule{width:1px;align-self:stretch;background:var(--line);flex:none}
.bf-legend{margin:0 0 11px;font-size:.74rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.bf-col .bf-legend+.bf-chips{margin-bottom:22px}
.bf-col .bf-chips+.bf-legend{margin-top:0}

/* chips: a hidden radio with a styled span, so selection needs no script */
.bf-chips{display:flex;gap:8px;flex-wrap:wrap}
.bf-chip{display:inline-flex;cursor:pointer}
.bf-chip input{position:absolute;opacity:0;width:0;height:0}
.bf-chip span{height:38px;padding:0 15px;border-radius:999px;background:#F3F2EE;
  color:var(--ink);font-size:.9rem;font-weight:700;display:inline-flex;
  align-items:center;gap:7px}
.bf-chip span b{font-weight:800;color:var(--accent-dark)}
.bf-chip:hover span{background:#EBE9E2}
.bf-chip input:checked+span{background:var(--ink);color:#fff}
.bf-chip input:checked+span b{color:var(--accent)}
.bf-chip input:focus-visible+span{outline:2px solid var(--accent-dark);outline-offset:2px}
.bf-chip-more{height:38px;padding:0 4px;color:var(--accent-dark);font-size:.92rem;
  font-weight:700;display:inline-flex;align-items:center;gap:7px}
.bf-chip-more svg{width:14px;height:14px}
.bf-chip-more:hover{color:var(--ink)}

/* rating segment */
.bf-seg{display:flex;gap:8px;margin-bottom:20px}
.bf-pill{flex:1 1 0;cursor:pointer}
.bf-pill input{position:absolute;opacity:0;width:0;height:0}
.bf-pill span{height:42px;border-radius:12px;background:#F3F2EE;color:var(--ink);
  font-size:.9rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;gap:5px}
.bf-pill span i{display:inline-flex;color:var(--accent)}
.bf-pill span svg{width:13px;height:13px}
.bf-pill input:checked+span{background:var(--ink);color:#fff}
.bf-pill input:focus-visible+span{outline:2px solid var(--accent-dark);outline-offset:2px}

/* switches */
.bf-switch{display:flex;align-items:center;gap:14px;padding:13px 16px;
  margin-bottom:12px;border-radius:14px;background:#F8F7F4;cursor:pointer}
.bf-switch input{position:absolute;opacity:0;width:0;height:0}
.bf-switch-text{flex:1;min-width:0}
.bf-switch-text b{display:block;font-size:.97rem;font-weight:700}
.bf-switch-text em{display:block;margin-top:2px;font-size:.82rem;font-style:normal;color:var(--ink)}
.bf-switch-track{position:relative;flex:none;width:50px;height:30px;border-radius:999px;
  background:#DDDAD2;transition:background .14s ease}
.bf-switch-track::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;
  border-radius:999px;background:#fff;transition:transform .14s ease;
  box-shadow:0 1px 3px rgba(15,20,36,.2)}
.bf-switch input:checked~.bf-switch-track{background:var(--ink)}
.bf-switch input:checked~.bf-switch-track::after{transform:translateX(20px)}
.bf-switch input:focus-visible~.bf-switch-track{outline:2px solid var(--accent-dark);outline-offset:2px}

/* ---------- active filter chips ---------- */
.bf-active{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 20px}
.bf-active a{height:36px;padding:0 10px 0 14px;border-radius:999px;background:var(--ink);
  color:#fff;font-size:.88rem;font-weight:700;display:inline-flex;align-items:center;gap:9px}
.bf-active a i{display:inline-flex}
.bf-active a svg{width:13px;height:13px}
.bf-active a:hover{background:#000}
.bf-active .bf-active-clear{background:none;color:var(--ink);border:1px solid var(--line);padding:0 14px}
.bf-active .bf-active-clear:hover{background:#F3F2EE}

/* ---------- results bar ---------- */
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;flex-wrap:wrap}
.results-bar h2{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.view-toggle{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:#F3F2EE}
.view-toggle .vt{width:44px;height:40px;border:0;border-radius:999px;background:none;
  color:var(--ink);opacity:.4;display:grid;place-items:center;cursor:pointer;padding:0}
.view-toggle .vt svg{width:17px;height:17px}
.view-toggle .vt.on{background:#fff;color:var(--ink);opacity:1;box-shadow:0 1px 3px rgba(15,20,36,.14)}

/* ---------- card grid: four across, now the rail has gone ---------- */
.biz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

.card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:border-color .16s ease}
.card:hover{border-color:#C9C5BA}

.card-media{position:relative;display:block;aspect-ratio:1.8/1;background:#E7E5DE;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card-media img.logo-fallback{object-fit:contain;padding:16px;box-sizing:border-box;background:#fff}
.card-initial{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--ink);color:var(--accent);font-size:2.2rem;font-weight:800}

.card-body{padding:13px 15px 14px;display:flex;flex-direction:column;flex-grow:1}

/* The title holds two lines whether or not it needs them, so the category and
   area under it start at the same height on every card in a row. Left to wrap
   naturally, "Bakehouse" took one line and "The Beauty Hut - Laser clinic,
   beauty studio & Training Academy" took two, and the meta below sat 21px
   lower on one card than the next — which is what made the row look ragged.

   min-height holds the floor; the clamp holds the ceiling, so a very long
   name cannot push to three lines and break the alignment the other way.
   Both are in em, so the larger type in the list view scales with them. */
.card h3{margin:0;font-size:1.04rem;font-weight:700;letter-spacing:-.025em;line-height:1.28;
  min-height:2.56em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card h3 a{color:var(--ink)}
.card-sub{margin:3px 0 0;font-size:.88rem}
.card-sub a,.card-sub span{display:block;line-height:1.42;color:var(--ink)}
.card-sub a:hover{color:var(--accent-dark)}
.card-dist{font-weight:700;color:var(--accent-dark)}

.card-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.card-rate{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;color:var(--ink)}
.card-rate i{display:inline-flex;color:var(--accent)}
.card-rate svg{width:14px;height:14px}
.card-rate b{font-weight:500}
.card-open{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--ink)}
.card-open i{width:7px;height:7px;border-radius:999px;background:#8A8F9C;flex:none}
.card-open.is-open i{background:#3E9B44}
.card-call{margin-left:auto;width:40px;height:40px;flex:none;border-radius:999px;
  background:var(--accent);color:var(--ink);display:grid;place-items:center}
/* stroke set here, not left to the SVG's stroke="currentColor" attribute:
   presentation attributes lose to any CSS rule, so this cannot be overridden
   into invisibility by a theme rule somewhere else. */
.card-call svg{width:17px;height:17px;stroke:var(--ink);fill:none}
/* inverts to ink rather than going a darker amber, which reads as muddy */
.card-call:hover{background:var(--ink)}
.card-call:hover svg{stroke:#fff}

/* ---------- local favourite spotlight ---------- */
.spotlight{grid-column:span 2;display:flex;background:var(--ink);color:#fff;border-radius:18px;overflow:hidden}
.spot-media{width:190px;flex:none;background:#3A3222;display:block}
.spot-media img{width:100%;height:100%;object-fit:cover;display:block}
.spot-media img.logo-fallback{object-fit:contain;padding:20px;box-sizing:border-box}
.spot-body{padding:18px 22px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.spot-eyebrow{margin:0;font-family:'Caveat',cursive;font-size:1.3rem;font-weight:600;color:var(--accent);line-height:1}
.spotlight h3{margin:3px 0 0;font-size:1.22rem;font-weight:800;letter-spacing:-.03em;line-height:1.25}
.spotlight h3 a{color:#fff}
.spot-quote{margin:8px 0 0;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.9)}
.spot-foot{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.spot-rate{font-size:.88rem;color:rgba(255,255,255,.82)}
.spot-btn{height:40px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--ink);
  font-size:.93rem;font-weight:700;display:inline-flex;align-items:center}

/* ---------- list view ---------- */
.biz-grid.is-list{grid-template-columns:1fr;gap:12px}
.biz-grid.is-list .card{flex-direction:row;align-items:center;gap:18px;padding:12px}
.biz-grid.is-list .card-media{width:168px;height:106px;flex:none;aspect-ratio:auto;border-radius:12px}
.biz-grid.is-list .card-media img.logo-fallback{padding:12px}
.biz-grid.is-list .card-initial{font-size:1.8rem}
.biz-grid.is-list .card-body{padding:0;flex-grow:1;min-width:0}
/* One card per row here, so there is nothing to line up with — no reason to
   reserve a second line or to cut a long name short. */
.biz-grid.is-list .card h3{font-size:1.14rem;min-height:0;display:block;overflow:visible}
.biz-grid.is-list .card-foot{margin-top:9px;padding-top:0}
.biz-grid.is-list .spotlight{grid-column:span 1;flex-direction:row}
.biz-grid.is-list .spot-media{width:168px}
.biz-grid.is-list .spot-body{padding:16px 20px}

/* ---------- empty state ---------- */
.empty{text-align:center;padding:56px 20px;border:1px solid var(--line);border-radius:18px}
.empty h3{margin:0 0 8px;font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.empty p{margin:0 0 22px}

/* ---------- pagination ----------
   .load-more is deliberately unstyled: the theme renders it as the
   underlined text link, which is how it looked before. */
.pagination-wrap{margin-top:40px;display:flex;justify-content:center}
.pagination-wrap nav>div:first-child{display:none}
.pagination-wrap nav>div{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%}
.pagination-wrap nav p{display:none}
.pagination-wrap span[aria-disabled],.pagination-wrap span[aria-current] span,.pagination-wrap a{
  min-width:44px;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.95rem;
  background:#fff;color:var(--ink)}
.pagination-wrap span[aria-current] span{background:var(--accent);border-color:var(--accent)}
.pagination-wrap span[aria-disabled]{opacity:.35}
.pagination-wrap a:hover{background:var(--accent);border-color:var(--accent)}
.pagination-wrap svg{width:16px;height:16px}

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width:1180px){
  .biz-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bf-sheet{width:min(880px,calc(100vw - 64px))}
}

@media (max-width:980px){
  .biz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .bf-cols{flex-direction:column;gap:22px}
  .bf-rule{width:auto;height:1px;align-self:stretch}
  .bf-col-side{max-width:none;width:100%}
}

/* ============================================================
   Narrow — the same markup becomes a full-height bottom sheet.
   820px, not 640, so a large phone in landscape and a narrow
   desktop window get the sheet rather than a cramped dropdown.
   ============================================================ */
@media (max-width:820px){
  /* The backdrop blurs rather than dimming heavily — a .55 sheet behind the
     frosted bottom bar made the bar look darker whenever something was open. */
  /* saturate down 35% from 130% to match the bottom bar's scrim — 130% was
     pushing colour out of the blurred page behind and tinting everything. */
  .bf-toggle:checked~.bf-scrim{background:rgba(15,20,36,.12);
    -webkit-backdrop-filter:blur(14px) saturate(85%);
    backdrop-filter:blur(14px) saturate(85%);
    width:100vw;height:100vh}

  /* Still grows out of the Filters button — transform-origin:76% 0 from the
     base rule is untouched, so it scales out of it and folds back into it —
     but it is pinned to the window rather than hung off the row.

     The plain dropdown could not work on a phone. It was absolute, so its top
     landed wherever the row happened to be (a long way down the browse page,
     under the heading), and min(68vh,560px) then took it well past the bottom
     of the screen. The footer ended up beneath the bottom bar, and because
     .bf-scrim is fixed and covers the window you could not scroll the page to
     reach it either — so Show results was unreachable.

     Pinned instead: it starts just under the header and stops 10px above the
     bottom bar, whatever the page height or the scroll position, so the
     footer is always on screen and the chips scroll inside the body. Measured
     at 390x844 and 360x780; the footer clears the bar on both.

     The left/width pair matches the bottom bar's own inset exactly, and right
     is deliberately auto — a fixed element resolves `right` against a
     transformed or filtered ancestor if one exists, and would then land on
     that box's edge rather than the screen's. */
  .bf-sheet{position:fixed;z-index:125;
    top:calc(var(--hdr) + var(--bar) + 10px);
    left:12px;width:calc(100vw - 24px);right:auto;
    bottom:calc(20px + env(safe-area-inset-bottom) + 62px);
    max-height:none;border-radius:22px}

  /* Below the bottom bar, not above it, so the bar stays crisp while the
     filter is open — exactly as it does behind the More sheet. */
  .bf-toggle:checked~.bf-scrim{z-index:105}
  .bf-sheet-grab{display:none}
  .bf-sheet-head{padding:16px 18px 13px}
  .bf-sheet-body{padding:16px 18px;-webkit-overflow-scrolling:touch}
  .bf-sheet-foot{padding:13px 18px 15px}
  .bf-cancel{height:52px;padding:0 20px}
  .bf-apply{flex:1;height:52px;font-size:1.02rem}
}

/* ============================================================
   Phone
   ============================================================ */
@media (max-width:640px){
  .browse{padding:44px 0 64px}
  /* roomier than desktop on purpose: on a phone every one of these sits
     directly on top of the next with no column to separate them */
  .browse .sec-head{margin-bottom:30px}
  .bf{margin-bottom:26px}

  /* nowrap + a zero basis is what keeps search, Filters and Sort on one line.
     With wrap, flex places items at their basis and wraps BEFORE shrinking,
     so the two circles kept dropping to a second row. */
  .bf-row{gap:12px;flex-wrap:nowrap}
  /* min-width:0 matters: a flex item will not shrink below its content width
     without it, so the search pill kept the two circles on a second row. */
  .bf-search{flex:1 1 0;min-width:0;height:54px;border-radius:999px;padding:0 6px 0 18px}
  .bf-search input{min-width:0;width:100%;font-size:1rem}
  .bf-search-ico svg{width:19px;height:19px}
  .bf-search-go{width:40px;height:40px}
  .bf-btn{height:54px;width:54px;padding:0;border-radius:999px;justify-content:center;position:relative}
  .bf-btn b{display:none}
  .bf-btn .bf-count{position:absolute;top:-6px;right:-6px;border:2px solid #fff}
  /* Sort collapses to an amber circle beside the black Filters circle, so the
     whole control is one row. The <select> is still the real control — it is
     stretched over the whole circle at opacity 0, so tapping anywhere on it
     opens the native picker. Its aria-label carries the meaning. */
  .bf-sort{position:relative;order:0;flex:none;width:54px;height:54px;min-width:0;
    padding:0;border-radius:999px;justify-content:center;gap:0}
  .bf-sort>svg{width:20px;height:20px}
  .bf-sort::after{display:none}
  .bf-sort-text{position:absolute;inset:0;flex:none}
  .bf-sort-text small{display:none}
  .bf-sort select{position:absolute;inset:0;width:100%;height:100%;
    margin:0;padding:0;opacity:0;cursor:pointer}

  .bf-active{margin:0 0 20px}
  .results-bar{margin-bottom:18px}
  .results-bar h2{font-size:1.05rem}

  .biz-grid,.biz-grid.is-list{grid-template-columns:1fr;gap:14px}
  .view-toggle{display:none}

  /* The card keeps its desktop shape on a phone — picture on top, text under —
     rather than flipping to a row with a thumbnail. One shape everywhere, so
     browse, areas, categories and the homepage all read the same. */
  .card{border-radius:18px}
  .card h3{font-size:1.05rem}
  .card-sub{font-size:.88rem}
  .card-rate,.card-open{font-size:.85rem}
  .card-call{width:44px;height:44px}

  .spotlight{grid-column:span 1;flex-direction:column}
  .spot-media{width:100%;height:140px}
  .spot-body{padding:16px 18px}
  .spotlight h3{font-size:1.15rem}
  .spot-foot{margin-top:12px}
}