/* CoffeeDaddy — shops page styles.
 * Extracted verbatim from the inline <style> in shops.html (Phase 5). */
/* DM Mono for numeric badges */
  .ribbon, .subcell b{font-family:'DM Mono',monospace;letter-spacing:-.01em}

  /* ---------- Layout ---------- */
  main{max-width:1080px;margin:0 auto;padding:20px 20px 60px}
  .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
  .search{
    flex:1 1 200px;display:flex;align-items:center;gap:8px;
    background:var(--surface);border:1px solid var(--line);border-radius:11px;
    padding:0 12px;box-shadow:var(--shadow-sm);
  }
  .search input{border:none;outline:none;background:none;padding:11px 0;width:100%;color:var(--ink)}
  select.pick{
    background:var(--surface);border:1px solid var(--line);border-radius:11px;
    padding:11px 12px;color:var(--ink);box-shadow:var(--shadow-sm);outline:none;
  }
  .btn{
    display:inline-flex;align-items:center;gap:7px;border-radius:11px;
    padding:11px 15px;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;
    transition:transform .06s ease, filter .15s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:linear-gradient(145deg,var(--btn-a),var(--btn-b));color:#fff;box-shadow:var(--shadow-sm)}
  .btn-primary:hover{filter:brightness(1.06)}
  .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .btn-ghost:hover{background:var(--surface-2)}

  /* ---------- Overflow (⋯) menu: backups, exports, reviewer names ---------- */
  .more-wrap{position:relative}
  .more-pop{
    position:absolute;top:calc(100% + 6px);right:0;z-index:45;min-width:190px;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 6px 22px rgba(58,36,26,.2);padding:6px;
    display:flex;flex-direction:column;gap:1px;
  }
  .more-pop[hidden]{display:none}
  .more-pop button{
    display:flex;align-items:center;gap:9px;width:100%;text-align:left;
    padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink);
    background:none;border:none;cursor:pointer;font-family:inherit;
  }
  .more-pop button:hover{background:var(--surface-2)}
  .more-pop svg{color:var(--ink-soft);flex:none}

  /* ---------- Filter bar ---------- */
  .filterbar{
    display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:20px;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:10px 12px;box-shadow:var(--shadow-sm);
  }
  .filterbar .fb-label{
    display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);padding-left:3px;
    background:none;border:none;cursor:default;font-family:inherit;
  }
  .fb-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;border-radius:999px;padding:0 5px;
    background:var(--caramel);color:#fff;font-size:11px;font-weight:700;letter-spacing:0;
  }
  .fb-label .chev{display:none}
  .filterbar select{
    background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
    padding:9px 11px;color:var(--ink);outline:none;font-size:14px;
  }
  .fb-clear{
    margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-soft);
    background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
    padding:9px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  }
  .fb-clear:hover{background:var(--bg-grad);color:var(--ink)}

  /* ---------- Grid + cards ---------- */
  .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:16px 16px 14px;display:flex;flex-direction:column;gap:11px;
    transition:box-shadow .15s ease, transform .1s ease;overflow:hidden;
  }
  .card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
  .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .card-title b{font-size:17px;display:block;line-height:1.25}
  .loc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .loc-tag{
    display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
    color:var(--accent-ink);background:var(--surface-2);border:1px solid var(--line);
    border-radius:999px;padding:3px 9px;cursor:pointer;
  }
  .loc-tag:hover{background:var(--bg-grad)}
  .loc-tag svg{opacity:.8;flex:none}
  /* Distance "X km" chip — shown when geolocation is active */
  .dist-chip{
    display:inline-flex;align-items:center;gap:4px;
    font-size:11.5px;font-weight:600;border-radius:8px;padding:3px 9px;
    background:rgba(37,99,235,.08);color:#1d4ed8;
    border:1px solid rgba(37,99,235,.2);cursor:default;
  }
  html[data-theme="dark"] .dist-chip{
    background:rgba(96,165,250,.12);color:#93c5fd;border-color:rgba(96,165,250,.25);
  }
  /* Geo button active + denied states */
  .btn-ghost.geo-active{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}
  .btn-ghost.geo-active:hover{filter:brightness(1.15)}
  .btn-ghost.geo-denied{opacity:.55;cursor:not-allowed}
  .badge{
    flex:none;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    border-radius:999px;padding:4px 9px;border:1px solid transparent;
  }
  .badge-visited{background:#e6f0e3;color:#3f7339;border-color:#cfe3c9}
  .badge-wish{background:#f7e9d4;color:#9d6a1f;border-color:#ecd6b0}
  .rate-row{display:flex;align-items:center;gap:8px}
  .rate-row small{color:var(--ink-soft);font-size:12px}
  .rate-row .muted{font-style:italic}
  .stars{position:relative;display:inline-block;font-size:0;line-height:0;white-space:nowrap}
  .stars .layer{display:inline-block}
  .stars .top{position:absolute;left:0;top:0;overflow:hidden}
  .star{width:17px;height:17px;display:inline-block}
  .subgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
  .subcell{background:var(--surface-2);border-radius:10px;padding:7px 4px;text-align:center}
  .subcell b{display:block;font-size:14px}
  .subcell span{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft)}
  .notes-line{font-size:12.5px;color:var(--ink-soft);font-style:italic;border-left:3px solid var(--line);padding-left:8px}
  .ref-line{font-size:12.5px;color:var(--ink-soft);word-break:break-word}
  .map-box{
    display:block;position:relative;height:160px;margin:-16px -16px 0;
    background:var(--surface-2);overflow:hidden;
  }
  .map-fallback{
    position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;
    align-items:center;justify-content:center;background:var(--surface-2);
  }
  .map-hint{font-size:11px;font-weight:600;color:var(--ink-soft);letter-spacing:.2px}
  .map-box[data-mapload]{cursor:pointer}
  .map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}
  .map-pin{
    position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;
    background:rgba(255,255,255,.93);color:var(--ink);font-size:11.5px;font-weight:700;
    padding:5px 9px;border-radius:999px;box-shadow:var(--shadow-sm);z-index:2;
  }
  .map-box:hover .map-pin{background:#fff}
  .card-actions{display:flex;gap:7px;margin-top:auto;padding-top:4px;justify-content:flex-end}
  .card-actions .btn{flex:1;justify-content:center;padding:10px 8px}
  .icon-btn{
    width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
  }
  .icon-btn:hover{background:var(--bg-grad);color:var(--ink)}

  .empty{
    text-align:center;padding:50px 22px 44px;color:var(--ink-soft);
    background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
  }
  .empty-illust{
    width:84px;height:84px;margin:0 auto 14px;
    background:linear-gradient(140deg,var(--surface-2),var(--bg-grad));
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:var(--accent-ink);
  }
  .empty-illust svg{width:42px;height:42px;opacity:1}
  .empty h3{font-size:18px;color:var(--ink);margin-bottom:6px;font-weight:700}
  .empty p{font-size:13.5px;line-height:1.55;max-width:340px;margin:0 auto 16px}
  .empty .empty-tip{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
    padding:6px 12px;font-size:12px;color:var(--ink-soft);
  }
  .empty .empty-tip b{color:var(--ink)}
  .empty svg{margin-bottom:10px}

  /* ---------- Phase 2: tags, view toggle, map ---------- */
  .viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--shadow-sm)}
  .viewtoggle button{
    padding:11px 14px;font-size:13.5px;font-weight:600;background:var(--surface);
    color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;
  }
  .viewtoggle button.on{background:var(--espresso);color:var(--on-espresso)}
  .tags-row{display:flex;flex-wrap:wrap;gap:6px}
  .tag-chip{
    font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;cursor:pointer;
    background:var(--surface-2);color:var(--accent-ink);border:1px solid var(--line);
  }
  .tag-chip:hover{background:var(--bg-grad)}
  .visit-chip{
    font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px;
    background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);
  }
  .ordered-line{font-size:12.5px;color:var(--ink-soft)}
  .ordered-line b{color:var(--ink)}
  #mapView{
    height:520px;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow-sm);background:var(--surface-2);
  }
  #mapEl{width:100%;height:100%}
  .map-note{text-align:center;font-size:13px;color:var(--ink-soft);padding:30px 14px}
  .tag-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
  .tp-chip{
    font-size:12.5px;font-weight:600;border-radius:999px;padding:5px 11px;cursor:pointer;
    background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);
  }
  .tp-chip.on{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}
  .tp-add{display:flex;gap:7px}
  .tp-add input{flex:1}
  .tp-add button{
    flex:none;padding:0 14px;border-radius:10px;background:var(--surface-2);
    border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;
  }
  .tp-add button:hover{background:var(--bg-grad)}
  .leaflet-popup-content{font-family:inherit}
  .lp-name{font-weight:700;font-size:14px}
  .lp-meta{font-size:12px;color:#6f5b4d;margin-top:2px}

  /* ---------- Modal ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(34,20,12,.55);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;padding:18px;z-index:50;
  }
  .overlay.open{display:flex}
  .modal{
    background:var(--surface);border-radius:20px;box-shadow:0 24px 60px rgba(20,10,4,.4);
    width:100%;max-width:460px;max-height:92vh;overflow:auto;
  }
  .modal-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);
  }
  .modal-head h2{font-size:18px}
  .modal-body{padding:18px 20px 22px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;color:var(--ink-soft);margin-bottom:5px}
  .field input,.field textarea{
    width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
    background:var(--surface-2);color:var(--ink);outline:none;
  }
  .field input:focus,.field textarea:focus{border-color:var(--caramel);background:#fff}
  .field textarea{resize:vertical;min-height:58px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .hint{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
  .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .seg button{padding:10px 18px;font-size:13.5px;font-weight:600;background:var(--surface-2);color:var(--ink-soft)}
  .seg button.on{background:var(--espresso);color:var(--on-espresso)}
  .rate-input-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .ri-label{width:64px;font-size:13px;font-weight:600;color:var(--ink-soft)}
  .star-input{display:flex;align-items:center;gap:2px}
  .star-input .si{width:26px;height:26px;cursor:pointer;color:var(--line)}
  .star-input .si.on{color:var(--gold)}
  .star-input .clear{margin-left:6px;font-size:11.5px;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
  .modal-foot{display:flex;gap:10px;margin-top:6px}
  .modal-foot .btn{flex:1;justify-content:center;padding:12px}
  .x-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
    justify-content:center;color:var(--ink-soft);background:var(--surface-2)}
  .x-btn:hover{background:var(--bg-grad);color:var(--ink)}

  .toast{
    position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);
    background:var(--espresso);color:var(--on-espresso);padding:12px 20px;border-radius:12px;
    box-shadow:var(--shadow);font-size:14px;z-index:80;opacity:0;transition:all .3s ease;
    max-width:calc(100% - 32px);
  }
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  /* Undo toast: inline action button on the right */
  .toast.with-action{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px}
  .toast .toast-action{
    background:transparent;border:1px solid rgba(246,234,217,.55);
    color:var(--on-espresso);font-weight:700;font-size:13px;letter-spacing:.3px;
    padding:7px 13px;border-radius:9px;cursor:pointer;font-family:inherit;
    transition:background .15s;flex:none;
  }
  .toast .toast-action:hover{background:rgba(246,234,217,.16)}
  footer{text-align:center;padding:0 20px 30px;color:var(--ink-soft);font-size:12.5px}

  /* ---------- Mobile polish (phone screens) ---------- */
  @media(max-width:640px){
    /* Tighter header on mobile */
    header{padding:10px 14px}
    .header-inner{gap:9px}

    /* FAB and bottom-nav handled by theme.css glass-nav section */
    /* Hide the toolbar Add button on phones — FAB takes over */
    #addBtn{display:none}

    /* Sync pill collapses to just the dot */
    .sync{padding:9px;gap:0}
    .sync #syncText{display:none}

    /* Stats compress so the row fits */
    .stats{margin-left:auto;gap:6px}
    .stat{padding:6px 10px;min-width:0;flex:0 0 auto}
    .stat b{font-size:17px}
    .stat span{font-size:10px}

    main{padding:14px 14px 60px}
    .toolbar{gap:8px}
    .filterbar{padding:10px 11px;gap:7px}

    /* Collapsible filter panel: tap "Filter" to expand. The count badge
       shows how many filters are active while collapsed. */
    .fb-label{cursor:pointer;width:100%;justify-content:flex-start;padding:2px 1px}
    .fb-label .chev{display:block;margin-left:auto;transition:transform .2s ease}
    .filterbar.open .fb-label .chev{transform:rotate(180deg)}
    .filterbar:not(.open) select,
    .filterbar:not(.open) .chip-row,
    .filterbar:not(.open) .fb-clear{display:none !important}

    /* Bigger touch targets — review and shop tool buttons grow on phones */
    .mini-btn{width:40px;height:40px}
    .rev-ic{width:36px;height:36px}
    .loc-tag{padding:5px 11px;font-size:12.5px}
    .tag-chip,.visit-chip{padding:5px 11px;font-size:12px}
    .rp-chip{padding:8px 14px;font-size:13.5px}
    .tp-chip{padding:7px 13px;font-size:13px}
    .reviewer-chip{padding:5px 11px;font-size:12px}

    /* Card breathing room */
    .card{padding:15px 15px 14px;gap:12px}
    .card-title b{font-size:18px;line-height:1.22}
    .review-block{padding-top:13px;gap:10px}
    .add-review-btn{padding:12px}

    /* Modal: more comfortable taps */
    .modal-head{padding:16px 18px}
    .modal-body{padding:16px 18px 20px}
    .field input,.field textarea{padding:12px 13px;font-size:15px}
    .modal-foot .btn{padding:14px}

    /* Map view height fits a phone screen */
    #mapView{height:380px}
  }

  /* ---------- Reviewer names ---------- */
  .reviewer-chip{
    font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px;
    background:var(--espresso);color:var(--on-espresso);border:1px solid var(--espresso);
    display:inline-flex;align-items:center;gap:4px;
  }
  .rp-row{display:flex;flex-wrap:wrap;gap:6px}
  .rp-chip{
    font-size:13px;font-weight:600;border-radius:999px;padding:6px 13px;cursor:pointer;
    background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);
  }
  .rp-chip.on{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}
  .rp-empty{font-size:12.5px;color:var(--ink-soft)}
  .name-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
  .name-row{
    display:flex;align-items:center;gap:10px;
    border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  }
  .name-row span{flex:1;font-weight:600}
  .name-row button{
    width:28px;height:28px;flex:none;border-radius:7px;background:var(--surface-2);
    border:1px solid var(--line);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
  }
  .name-row button:hover{background:var(--bg-grad);color:var(--red)}

  /* ---------- Multi-review per shop ---------- */
  /* A row someone else owns. Without this the missing Edit/Delete buttons just
     look like a bug; the point is to say "view only" rather than stay silent. */
  .not-mine{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-soft);opacity:.75;
  }
  .not-mine svg{opacity:.7}
  .shop-tools{display:flex;gap:6px;flex:none}
  .mini-btn{
    width:32px;height:32px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
  }
  .mini-btn:hover{background:var(--bg-grad);color:var(--ink)}
  .mini-btn.danger:hover{color:var(--red)}
  .reviews-wrap{display:flex;flex-direction:column;gap:0}
  .review-block{
    border-top:1px dashed var(--line);padding-top:11px;margin-top:1px;
    display:flex;flex-direction:column;gap:9px;
  }
  .review-block:first-child{border-top:none;padding-top:0;margin-top:0}
  .rev-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .rev-actions{margin-left:auto;display:flex;gap:5px}
  .rev-ic{
    width:28px;height:28px;flex:none;border-radius:7px;display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
  }
  .rev-ic:hover{background:var(--bg-grad);color:var(--ink)}
  .rev-ic.danger:hover{color:var(--red)}
  /* Quiet text links for per-review actions — visually distinct from the
     shop-level icon tools so the two levels can't be confused. */
  .rev-link{
    font-size:12px;font-weight:600;color:var(--ink-soft);
    background:none;border:none;cursor:pointer;font-family:inherit;
    text-decoration:underline;text-underline-offset:2px;padding:6px 3px;
  }
  .rev-link:hover{color:var(--ink)}
  .rev-link.danger:hover{color:var(--red)}
  .review-count{font-size:12px;color:var(--ink-soft);font-weight:600}
  .no-reviews{font-size:12.5px;color:var(--ink-soft);font-style:italic;padding:1px 0}
  .add-review-btn{width:100%;justify-content:center;margin-top:1px;padding:10px;border-style:dashed}
  .modal-sub{
    font-size:13px;color:var(--ink-soft);margin:0 0 15px;
    padding:9px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  }
  .modal-sub b{color:var(--ink)}

  /* Star fill colors (used by the rate display) */
  .star-e{fill:var(--line)}
  .star-f{fill:var(--gold)}
  .sync-pop{position:absolute}
  .sync-pop{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 6px 22px rgba(58,36,26,.20);padding:13px 14px 12px;
    min-width:220px;z-index:60;
    color:var(--ink);font-size:13px;font-weight:500;letter-spacing:0;
    cursor:default;text-transform:none;text-align:left;
  }
  .sync-pop[hidden]{display:none}
  .sync-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-weight:700;font-size:13.5px}
  .sync-pop-head .dot{width:10px;height:10px;border-radius:50%;background:#a08f7d;flex:none}
  .sync-pop.synced .dot{background:#5fb85a}
  .sync-pop.saving .dot{background:#e0a52e}
  .sync-pop.error .dot{background:#e0664a}
  .sync-pop.offline .dot{background:#a08f7d}
  .sync-pop-time{color:var(--ink-soft);font-size:12px;margin-bottom:11px}
  .sync-pop-err{
    color:var(--red);font-size:12px;margin-bottom:11px;font-style:italic;
    background:rgba(192,73,47,.08);border-radius:7px;padding:6px 9px;
  }
  /* Matches index.page.css — see the note there. */
  .sync-pop-build{
    margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
    font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-soft);
    letter-spacing:.01em;
  }
  .sync-pop-btn{
    width:100%;background:var(--surface-2);color:var(--ink);
    border:1px solid var(--line);border-radius:9px;padding:9px 12px;
    font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;
    transition:background .15s;
  }
  .sync-pop-btn:hover{background:var(--bg-grad)}

  /* ---------- Filter chip row ---------- */
  .chip-row{
    display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:2px 1px;scrollbar-width:none;
  }
  .chip-row::-webkit-scrollbar{display:none}
  .chip-row .fchip{
    flex:none;display:inline-flex;align-items:center;gap:5px;
    font-size:13px;font-weight:600;border-radius:999px;padding:8px 13px;
    background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);
    cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;
  }
  .chip-row .fchip:hover{background:var(--bg-grad);color:var(--ink)}
  .chip-row .fchip.on{background:var(--espresso);color:var(--on-espresso);border-color:var(--espresso)}

  /* ---------- Floating Action Button (mobile primary CTA) ---------- */
  .fab{
    position:fixed;right:18px;bottom:18px;z-index:30;
    width:58px;height:58px;border-radius:50%;
    background:linear-gradient(145deg,var(--btn-a),var(--btn-b));color:#fff;
    display:none;align-items:center;justify-content:center;
    box-shadow:0 8px 22px rgba(189,123,62,.45);cursor:pointer;
    border:none;transition:transform .12s ease,filter .15s ease;
  }
  .fab:hover{filter:brightness(1.06)}
  .fab:active{transform:scale(.96)}
  .fab svg{width:26px;height:26px}

  /* ---------- Bottom navigation: replaced by .glass-nav in theme.css ---------- */
  .bottom-nav{display:none!important}

/* DES-07: a destructive control has to be distinguishable BEFORE the tap, not
   on hover — which never happens on a phone. These carried --red only in a
   :hover rule, so on touch they were indistinguishable from Edit sitting 12px
   away. */
.icon-btn.danger,
.mini-btn.danger,
.rev-ic.danger,
.rev-link.danger,
.bi-del{ color:var(--red); }

/* DES-05: Apple's minimum touch target is 44x44pt. Several controls are
   deliberately smaller than that visually — a 25px roaster chip would look
   absurd at 44px — so the HIT AREA is extended instead, with a transparent
   pseudo-element. Nothing moves; the tappable region just stops being 25px. */
.roaster-link, .tag-chip, .loc-tag, .mini-btn, .rev-ic, .rev-link,
.fchip, .tp-chip, .m-chip-pick, .seg button, .viewtoggle button,
.map-pin, .theme-seg button{
  position:relative;
}
.roaster-link::after, .tag-chip::after, .loc-tag::after, .mini-btn::after,
.rev-ic::after, .rev-link::after, .fchip::after, .tp-chip::after,
.m-chip-pick::after, .seg button::after, .viewtoggle button::after,
.map-pin::after, .theme-seg button::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:max(100%, 44px);
  height:max(100%, 44px);
  /* Purely a hit area: never paints, never affects layout. */
  background:transparent;
  pointer-events:auto;
}
/* The search field is 42px; two more pixels costs nothing and clears the bar. */
.search input, input[type="search"]{ min-height:44px; }

/* DES-05, second pass. Extending the hit area with a pseudo-element works where
   a control has room around it, but in a tight horizontal row the expanded
   boxes of neighbouring chips overlap and whichever sits on top wins — so the
   probe lands on the wrong chip and the target is no better than before.
   Measured: 7 of 15 small controls were genuinely covered that way.

   For toolbar controls the honest fix is real height. They are primary
   controls, 44px suits them, and nothing about the layout suffers. The small
   in-card metadata chips (tags, city, roaster) keep the pseudo-element: making
   those 44px tall would look absurd, and their vertical reach is what matters.*/
.fchip, .seg button, .viewtoggle button, .theme-seg button,
.chip-row .fchip, .sortbar button{
  min-height:44px;
}

  /* ---------- DES-03: control row (v1.23.0) ----------
     Shops used to open on four stacked rows of chrome — search, then sort +
     near-me + list/map + more, then the filter header — about 220px before the
     first café. Sort and Near-me moved into the filter panel (both are
     filtering decisions, changed occasionally, and they were costing a full row
     on every single visit), leaving one row that is only ever about what you
     are looking at. */
  .ctlbar{
    display:flex;gap:8px;align-items:center;flex-wrap:nowrap;
    margin:0 0 10px;
  }
  .ctlbar .viewtoggle{flex:0 0 auto}
  .ctlbar .fb-label{
    flex:1 1 auto;min-width:0;justify-content:center;
    background:var(--surface);border:1px solid var(--line);
    border-radius:11px;box-shadow:var(--shadow-sm);
    padding:11px 12px;min-height:44px;
    font-size:13.5px;font-weight:600;color:var(--ink-soft);
  }
  .ctlbar .fb-label .chev{display:block;transition:transform .2s ease}
  .ctlbar .more-wrap{flex:0 0 auto}

  @media (max-width:640px){
    /* The chevron now lives on the control row, so the panel's open state has
       to drive it from outside the panel. */
    .ctlbar .fb-label{width:auto}
    /* Sort and Near-me fold away with the rest of the filters. */
    .filterbar:not(.open) #sort,
    .filterbar:not(.open) #geoBtn{display:none !important}
    /* With the toggle gone from inside it, a closed panel is an empty box. */
    .filterbar:not(.open){display:none}
    .filterbar{margin-top:-4px}
  }

  .ctlbar .fb-label.open .chev{transform:rotate(180deg)}