/* ==================================================================
   EXTRACTED from index.blade.php's inline css section (2026-09-09, page-speed:
   the block re-downloaded with every HTML response; now cached).
   ORDER IS LOAD-BEARING — blocks appear in their original sequence;
   the documented specificity traps (before-vs-after _detail.css)
   depend on it. Edit HERE, not in the blade.
   ================================================================== */
/* ============================================================
       RESTAURANTS BROWSE (v3_old/restaurants.html LIST view, ported
       2026-07-23). Selectors scoped under .rstl. The LIVE v3 nav is
       position:fixed (73px desktop / 69px mobile) while the prototype's
       header was in-flow — the dark hero carries the clearance.
       Cards without a photo use ONE shared default image (user decision
       2026-07-23 — no gradient monogram/initials fallback). ============ */
    .rstl{font-family:'Nunito',sans-serif;color:#0E0E12}
    .rstl .phero{background:#0D0D12;padding:107px 0 36px}
    .rstl .phin{max-width:1200px;margin:0 auto;padding:0 24px}
    .rstl .bcrumb{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:14px}
    .rstl .bcrumb a{color:rgba(255,255,255,.55);text-decoration:none}
    .rstl .bcrumb .sep{margin:0 8px;opacity:.5}
    .rstl .bh1{font-family:'Nunito',sans-serif;font-weight:800;font-size:30px;color:#fff;line-height:1.15;letter-spacing:-.5px;margin:4px 0 0}
    .rstl .bh1 .gtext{background:linear-gradient(90deg,#FF08C9,#AE00FF,#00AEFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .rstl .phsub{color:rgba(255,255,255,.62);font-size:15px;margin-top:10px;max-width:560px}

    .rstl .fbar{background:#fff;border-bottom:1px solid #E6E7E8}
    .rstl .fbin{max-width:1200px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .rstl .filter-label{font-size:14px;font-weight:700;color:#111;white-space:nowrap}
    .rstl .filter-pills{display:flex;gap:8px;flex-wrap:wrap}
    .rstl .filter-pill{padding:8px 18px;border-radius:100px;border:1.5px solid #E6E7E8;font-size:13px;font-weight:600;color:#666;cursor:pointer;background:#fff;font-family:'Nunito',sans-serif;transition:.2s}
    .rstl .filter-pill.active{border-color:#FF08C9;color:#FF08C9;background:rgba(255,8,201,.05)}
    /* "How memberships work" hero link REMOVED (owner, 10 Aug — supersedes the
         Lars 8-Aug Q1 placement). The footer link remains the path to the page. */
    .rstl .filter-count{background:linear-gradient(135deg,rgba(255,8,201,.08),rgba(174,0,255,.08),rgba(0,174,255,.08));color:#FF08C9;font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;margin-left:auto;white-space:nowrap}

    .rstl .csec{background:#F1F2F2;padding:30px 0 70px;min-height:46vh}
    .rstl .csin{max-width:1200px;margin:0 auto;padding:0 24px}
    .rstl .cards{display:block}

    .rstl .rcard{display:block;border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06);border:1px solid #E6E7E8;margin-bottom:18px;cursor:pointer;background:#fff;text-decoration:none;color:inherit}
    /* Card image frame = 3:4 PORTRAIT, cover-filled (user 2026-08-07 "increase
         the card design": the masters are 9:16 portrait, so a taller frame keeps
         most of the photo; the earlier compact-260px + blur-letterbox cut was
         rejected the same day). ⚠️ PENDING LARS — "compact wide cards vs taller
         portrait cards" rides the next Lars email as an open design question;
         whichever he picks, keep the master-first image precedence. */
    .rstl .rimg{aspect-ratio:3/4;position:relative;overflow:hidden;background:#101014;background-size:cover;background-position:center}
    .rstl .rimg:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,10,.66),transparent 55%)}
    .rstl .rate{position:absolute;top:13px;left:13px;z-index:1;background:rgba(255,255,255,.95);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}
    .rstl .heart{position:absolute;top:13px;right:13px;z-index:1;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
    .rstl .heart svg{width:17px;height:17px;stroke:#FF08C9;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .rstl .rimg .nm{position:absolute;left:15px;bottom:13px;z-index:1;color:#fff}
    .rstl .rimg .nm .t{font-weight:800;font-size:19px}
    .rstl .rimg .nm .c{font-size:12.5px;opacity:.9}
    .rstl .cs-ribbon{position:absolute;top:0;left:0;z-index:2;background:linear-gradient(135deg,#FF08C9,#AE00FF,#00AEFF);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:6px 16px;border-bottom-right-radius:12px;box-shadow:0 4px 14px rgba(174,0,255,.35)}
    .rstl .rmeta{display:flex;align-items:center;padding:12px 15px}
    .rstl .rmeta .loc{font-size:12.5px;color:#6D6E71}
    .rstl .rmeta .pr{margin-left:auto;text-align:right}
    .rstl .rmeta .pr .f{font-size:10px;color:#6D6E71;font-weight:600;display:block}
    .rstl .rmeta .pr .v{font-weight:800;font-size:15px;color:#0E0E12}
    .rstl .rmeta .soon-chip{margin-left:auto;font-size:11.5px;font-weight:800;color:#AE00FF;background:rgba(174,0,255,.08);border:1px solid rgba(174,0,255,.16);border-radius:999px;padding:6px 12px;white-space:nowrap}

    .rstl .empty-state{text-align:center;padding:72px 24px;color:#6D6E71}
    .rstl .empty-state .eh{font-weight:800;font-size:20px;color:#0E0E12;margin-bottom:6px}
    .rstl .empty-state .es{font-size:15px;max-width:400px;margin:0 auto;line-height:1.5}

    @media(min-width:880px){
        .rstl .bh1{font-size:42px}
        .rstl .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
        .rstl .rcard{margin-bottom:0}
    }
    /* TABLET (600–879): 2-up grid. Below 880 the cards are display:block (single
       column), so on a 768 portrait tablet ONE full-width card gave the 3:4 frame a
       ~1000px-tall image — phone layout stretched to a tablet (tablet pass). Two
       columns keeps the SAME portrait card design (the wide-vs-tall card SHAPE is the
       Lars-pending question — untouched) while halving the image size. Phone (<600)
       stays single-column; desktop (≥880) stays 3-up. */
    @media(min-width:600px) and (max-width:879px){
        .rstl .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
        .rstl .rcard{margin-bottom:0}
    }
    @media(max-width:879px){
        .rstl .phero{padding-top:99px}
        .rstl .heart{width:44px;height:44px}
        /* Filter row → the /browse_chefs mobile treatment, count on the RIGHT
           (user 2026-08-07): grid puts the label top-left and the count top-right
           on ONE line, with the single horizontally-scrolling pill row (no wrap,
           hidden scrollbar, no-shrink pills) full-width below. min-width:0 on the
           pills grid item is load-bearing (grid min-content trap) or the scroller
           blows the column. */
        .rstl .fbin{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label count" "pills pills";align-items:center;gap:8px 12px}
        .rstl .filter-label{grid-area:label;padding-right:12px}
        .rstl .filter-pills{grid-area:pills;flex-wrap:nowrap;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px}
        .rstl .filter-pills::-webkit-scrollbar{display:none}
        .rstl .filter-pill{flex-shrink:0;white-space:nowrap;min-height:38px;display:inline-flex;align-items:center}
        .rstl .filter-count{grid-area:count;margin-left:0;justify-self:end}
    }