/* ============================================================================
   Enclave Bazaar — "Everything Around You" homepage rebrand.
   Approved direction 11 Aug 2026. Light + warm brand aesthetic; everything is
   scoped under .eb2 so it never bleeds into the rest of the (dark-mode) site.
   Tokens mirror specs/design-tokens.json.
   ========================================================================== */
.eb2{
  --g:#005A3C; --g-deep:#00452F; --amber:#F6A000; --warm:#FFFBF6;
  --ink:#151515; --muted:#5F6368; --bd:#E8E8E8;
  --tint-doc:#F3F8FF; --tint-car:#F4FAF1; --tint-prop:#F8F3FF; --tint-food:#FFF6EC; --tint-svc:#FFF4E6;
  --r-card:16px; --r-search:18px; --r-btn:12px;
  --shadow:0 2px 10px rgba(16,40,30,.06); --shadow-h:0 8px 24px rgba(16,40,30,.10);
  background:var(--warm); color:var(--ink);
  font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Clip any residual child overflow at the page level (the inner scroll strips
     keep their own overflow-x:auto, so they still scroll). Guarantees no
     horizontal BODY overflow at any width — a hard rebrand acceptance criterion. */
  overflow-x:clip;
}
.eb2 *{box-sizing:border-box}
.eb2-wrap{max-width:1440px;margin:0 auto;padding:0 24px}
.eb2 a{text-decoration:none;color:inherit}
.eb2 h1,.eb2 h2{margin:0}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.eb2-hero{position:relative;overflow:visible;margin-bottom:36px;padding-bottom:34px}
/* Purpose-built hero scene (all five gates, open sky on the left for the copy).
   `cover` fills the hero; the composition already leaves the left clear, so the
   headline never buries a gate. */
.eb2-hero-photo{position:absolute;inset:0;background-image:var(--hero-d);background-size:cover;background-repeat:no-repeat;background-position:center 38%;z-index:0}
/* Gentle left fade for headline contrast — kept light so the Park Enclave /
   Bahria Enclave gate signs on the left aren't washed out (they're the reason
   the scene exists). */
.eb2-hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,251,246,.42) 0%,rgba(255,251,246,.12) 26%,rgba(255,251,246,0) 50%)}
/* Headline + subtext, top-left; min-height gives the scene room to breathe. */
.eb2-hero-inner{position:relative;z-index:1;display:flex;align-items:flex-start;min-height:236px;padding-top:22px;padding-bottom:0}
.eb2-hero-copy{max-width:480px}
/* Community pills (left) + search (right) share ONE row below the copy — a small
   positive gap so it NEVER overlaps the subtext (the earlier pull-up caused that). */
.eb2-hero-bottom{position:relative;z-index:2;display:flex;align-items:flex-end;gap:20px;margin-top:14px}
.eb2-hero-h1{font-weight:800;font-size:clamp(34px,4.4vw,50px);line-height:1.03;letter-spacing:-.02em;overflow-wrap:break-word}
.eb2-hero-h1 .eb2-g{color:var(--g)}
.eb2-hero-h1 .eb2-a{color:var(--amber)}
.eb2-hero-sub{margin:10px 0 0;font-size:clamp(13.5px,1.15vw,15px);line-height:1.4;color:#2b3a33;max-width:390px}
/* Community box (design): "Our Communities" label ABOVE a dark-green box holding
   pipe-separated community names; the selected area is a filled white pill. */
.eb2-comm-wrap{flex:none;width:clamp(300px,38%,480px)}
.eb2-comm-lbl{display:block;font-size:13px;font-weight:800;color:var(--g);letter-spacing:.01em;margin:0 0 6px 2px}
.eb2-comm{background:var(--g);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.eb2-comm-chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.eb2-comm-sep{color:rgba(255,255,255,.4);font-weight:400;font-size:13px}
.eb2-comm-chip{font:700 13.5px/1 inherit;color:#fff;background:transparent;border:0;border-radius:999px;padding:5px 10px;white-space:nowrap;cursor:pointer;transition:background .14s,color .14s}
.eb2-comm-chip:hover{background:rgba(255,255,255,.15)}
.eb2-comm-chip.is-on{background:#fff;color:var(--g)}
.eb2-comm-chip.is-on + .eb2-comm-sep,.eb2-comm-sep:has(+ .eb2-comm-chip.is-on){opacity:0}

/* Search bar — the right half of the hero-bottom row (community pills on the left). */
.eb2-search{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:8px;
  background:#fff;border:1px solid var(--bd);border-radius:var(--r-search);box-shadow:0 14px 38px rgba(16,40,30,.16);padding:10px}
.eb2-search-area{display:flex;align-items:center;gap:8px;padding:6px 14px;border-right:1px solid var(--bd);flex:none}
.eb2-search-ic{display:inline-flex;color:var(--g)}
.eb2-search-ic svg{display:block}
.eb2-search-go svg{display:block;margin:auto}
.eb2-search-area-txt{display:flex;flex-direction:column;line-height:1.1}
.eb2-search-area-txt small{font-size:11px;color:var(--muted)}
.eb2-search-area-txt select{border:0;background:transparent;font:700 15px/1.2 inherit;color:var(--ink);padding:2px 0;cursor:pointer;max-width:180px}
.eb2-search-area-txt select:focus{outline:none}
.eb2-search-in{flex:1;border:0;background:transparent;font-size:15px;padding:0 8px;color:var(--ink)}
.eb2-search-in:focus{outline:none}
.eb2-search-go{flex:none;width:52px;border:0;border-radius:12px;background:var(--g);color:#fff;font-size:18px;cursor:pointer;transition:background .15s}
.eb2-search-go:hover{background:var(--g-deep)}

/* ── Five journeys ────────────────────────────────────────────────────────── */
.eb2-journeys{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:44px}
.eb2-journey{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--bd);border-radius:var(--r-card);
  padding:16px 16px 16px 14px;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.eb2-journey:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.eb2-journey-ic{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:15px;background:var(--tint-food)}
.eb2-journey-ic svg{width:32px;height:32px}
.eb2-journey.is-doc .eb2-journey-ic{background:var(--tint-doc);color:#2F7AD6} .eb2-journey.is-car .eb2-journey-ic{background:var(--tint-car);color:#2FA35A}
.eb2-journey.is-prop .eb2-journey-ic{background:var(--tint-prop);color:#7C4DD0} .eb2-journey.is-svc .eb2-journey-ic{background:var(--tint-svc);color:#E07C0A}
.eb2-journey-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.eb2-journey-txt strong{font-size:15.5px;font-weight:700}
.eb2-journey-txt small{font-size:12px;color:var(--muted);line-height:1.3}
.eb2-journey-go{margin-left:auto;flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--amber);color:#fff;font-weight:800;font-size:15px}
.eb2-journey.is-doc .eb2-journey-go{background:#2f7ad6} .eb2-journey.is-car .eb2-journey-go{background:#2fa35a}
.eb2-journey.is-prop .eb2-journey-go{background:#7c4dd0}

/* ── Near You Now ─────────────────────────────────────────────────────────── */
.eb2-now{margin-bottom:40px}
.eb2-now-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eb2-now-head h2{font-size:20px;font-weight:800}
.eb2-live{font-size:12.5px;color:var(--g);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.eb2-now-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.eb2-stat{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--bd);border-radius:14px;padding:14px;box-shadow:var(--shadow);text-decoration:none;color:inherit;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.eb2-stat:hover,.eb2-stat:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,.10);border-color:var(--g);outline:none}
.eb2-stat-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--warm);color:var(--g)}
.eb2-stat-ic svg{width:22px;height:22px}
.eb2-stat-food .eb2-stat-ic{color:#E07C0A;background:var(--tint-food)} .eb2-stat-doctor .eb2-stat-ic{color:#2F7AD6;background:var(--tint-doc)}
.eb2-stat-car .eb2-stat-ic{color:#2FA35A;background:var(--tint-car)} .eb2-stat-home .eb2-stat-ic{color:#7C4DD0;background:var(--tint-prop)}
.eb2-stat-tools .eb2-stat-ic{color:#E07C0A;background:var(--tint-svc)} .eb2-stat-bag .eb2-stat-ic{color:var(--g);background:#E8F4EE}
.eb2-stat-body{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.eb2-stat-body b{font-size:22px;font-weight:800}
.eb2-stat-body span{font-size:13px;font-weight:700}
.eb2-stat-body small{font-size:11px;color:var(--muted)}

/* ── Content grid ─────────────────────────────────────────────────────────── */
/* auto-fit so absent sections (e.g. no Fresh Listings) don't leave an empty
   column/gap — present sections flex to fill the row evenly. */
.eb2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px;margin-bottom:44px;align-items:start}
/* min-width:0 lets a grid/flex track shrink below its content so the inner
   horizontal-scroll rows (food/doctors) scroll instead of stretching the page. */
.eb2-col{background:#fff;border:1px solid #ececec;border-radius:var(--r-card);padding:16px;box-shadow:0 3px 14px rgba(16,40,30,.055);min-width:0}
.eb2-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.eb2-sec-head h2{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.eb2-sec-head a{font-size:12.5px;color:var(--g);font-weight:700;white-space:nowrap}
.eb2-sec-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;flex:none}
.eb2-sec-ic svg{width:16px;height:16px}
.eb2-sec-ic.sec-food{color:#E07C0A;background:var(--tint-food)} .eb2-sec-ic.sec-doc{color:#2F7AD6;background:var(--tint-doc)}
.eb2-sec-ic.sec-car{color:#2FA35A;background:var(--tint-car)} .eb2-sec-ic.sec-prop{color:#7C4DD0;background:var(--tint-prop)}
.eb2-sec-head-mt{margin-top:16px;padding-top:14px;border-top:1px solid #f0eee8}

/* Food dish cards (2-up) — image-first, title · kitchen · price + real rating. */
.eb2-dish-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.eb2-dish{display:flex;flex-direction:column;gap:2px}
.eb2-dish-img{position:relative;aspect-ratio:16/11;border-radius:12px;background:#f0ece3 center/cover no-repeat;display:block;margin-bottom:5px;overflow:hidden}
.eb2-dish-state{position:absolute;left:7px;bottom:7px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.eb2-dish-name{font-size:13.5px;font-weight:700;line-height:1.22;min-height:2.44em}
.eb2-dish-vendor{font-size:11.5px;color:var(--muted);line-height:1.3}
.eb2-vchk{color:#1c6fd6;font-weight:900;font-size:10px}
.eb2-dish-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px}

/* Doctor cards (list) — photo left, name(+verified) · specialty · locality right. */
.eb2-doc-list{display:flex;flex-direction:column;gap:10px}
.eb2-doc2{display:flex;gap:12px;align-items:center;background:var(--tint-doc);border:1px solid #e4eefb;border-radius:14px;padding:12px}
.eb2-doc2-av{width:56px;height:56px;flex:none;border-radius:50%;background:linear-gradient(140deg,#e7f0fc,#c7dbf6) center/cover no-repeat;display:grid;place-items:center;font-weight:800;color:#2b6cb8;font-size:21px;box-shadow:0 2px 7px rgba(43,108,184,.16);border:2px solid #fff}
.eb2-doc2-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.eb2-doc2-name{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;line-height:1.2;min-width:0}
.eb2-doc2-spec{font-size:12px;color:#4b5a53;font-weight:600}

/* Compact listing cards (Fresh / Cars / Property) — image-left, badge inline. */
.eb2-lc-list{display:flex;flex-direction:column;gap:10px}
.eb2-lc{display:flex;gap:11px;align-items:stretch}
.eb2-lc-img{width:56px;flex:none;align-self:stretch;min-height:56px;border-radius:10px;background:linear-gradient(135deg,#f2efe6,#e7e2d6) center/cover no-repeat;display:grid;place-items:center;font-size:22px;border:1px solid #eceae2}
.eb2-lc-lg .eb2-lc-img{width:88px}
.eb2-lc-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.eb2-lc-title{font-size:13px;font-weight:700;line-height:1.25}
.eb2-lc-meta{font-size:11.5px}
.eb2-lc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:1px}

/* ── Shared homepage card UI (badges · rating · meta · price · clamps) ─────────
   Reusable primitives so all five modules read as one system. Only rendered when
   the backing data is real — the markup gates each on a truthy field. */
.eb2-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:2px 8px;line-height:1.5;white-space:nowrap}
.eb2-badge svg{width:11px;height:11px}
.eb2-badge-verified{color:#1c6fd6;background:#e8f1fd}   /* blue — verified doctor */
.eb2-badge-seller{color:#1f8a4c;background:#e6f5ec}      /* green — verified seller */
.eb2-badge-featured{color:#b4560a;background:#fbe9d6}    /* amber — featured */
.eb2-badge-status{color:#3a6b52;background:#eaf3ee}      /* soft — On Call / status */
.eb2-badge-avail{color:#1f8a4c;background:#e6f5ec}       /* green — available today */
.eb2-badge-open{color:#fff;background:var(--g)} .eb2-badge-closed{color:#fff;background:#9aa0a6}
/* Twitter-style verified seal (blue badge + white check) — professional mark. */
.eb2-seal{display:inline-flex;align-items:center;flex:none;vertical-align:-3px}
.eb2-seal svg{width:16px;height:16px;display:block}
.eb2-seal-sm svg{width:13px;height:13px}
.eb2-rating{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;color:#1c1c1c;white-space:nowrap}
.eb2-rating .star{color:#F6A000;font-size:12.5px;line-height:1}
.eb2-rating small{color:var(--muted);font-weight:600}
.eb2-meta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);line-height:1.3;min-width:0}
.eb2-meta svg{width:12px;height:12px;flex:none;opacity:.85}
.eb2-price{font-size:14px;font-weight:800;color:var(--g);line-height:1.2}
.eb2-price small{font-size:11px;font-weight:600;color:var(--muted)}
.eb2-clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eb2-clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Secondary categories ─────────────────────────────────────────────────── */
.eb2-cats{margin-bottom:36px}
.eb2-cats .eb2-sec-head h2{font-size:18px}
.eb2-cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.eb2-cat-chip{background:#fff;border:1px solid var(--bd);border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:600;color:#2c3a34;box-shadow:var(--shadow);transition:border-color .15s,color .15s}
.eb2-cat-chip:hover{border-color:var(--g);color:var(--g)}

/* ── Business CTA ─────────────────────────────────────────────────────────── */
.eb2-biz-wrap{margin-bottom:36px}
.eb2-biz{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--g);color:#fff;border-radius:18px;padding:22px 26px}
.eb2-biz-lead{display:flex;align-items:center;gap:14px;flex:1 1 320px}
.eb2-biz-ic{color:var(--amber);display:inline-flex;flex:none}
.eb2-biz-ic svg{width:32px;height:32px}
.eb2-biz-perks li{display:flex;align-items:center;gap:8px}
.eb2-biz-perks svg{width:18px;height:18px;flex:none;opacity:.92}
.eb2-biz-lead strong{font-size:18px;font-weight:800}
.eb2-biz-lead p{margin:2px 0 0;font-size:13.5px;opacity:.9}
.eb2-biz-perks{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap;font-size:13px;font-weight:600}
.eb2-biz-perks li{max-width:150px;line-height:1.3}
.eb2-biz-btn{flex:none;background:var(--amber);color:#3a2600;font-weight:800;font-size:14.5px;padding:13px 22px;border-radius:var(--r-btn);transition:filter .15s}
.eb2-biz-btn:hover{filter:brightness(1.06)}

/* ── Trust strip ──────────────────────────────────────────────────────────── */
.eb2-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:40px}
.eb2-trust-i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.eb2-trust-i span{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;margin-bottom:4px}
.eb2-trust-i span svg{width:24px;height:24px}
.eb2-trust-i .t-verified{color:#2FA35A;background:#E8F4EE} .eb2-trust-i .t-secure{color:#E07C0A;background:var(--tint-food)}
.eb2-trust-i .t-community{color:#7C4DD0;background:var(--tint-prop)} .eb2-trust-i .t-connect{color:#2F7AD6;background:var(--tint-doc)}
.eb2-trust-i b{font-size:14px;font-weight:800}
.eb2-trust-i small{font-size:12px;color:var(--muted)}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1199px){
  /* .eb2-grid handles itself via auto-fit */
  .eb2-now-row{grid-template-columns:repeat(3,1fr)}
  .eb2-journeys{grid-template-columns:repeat(3,1fr)}
}
/* ── Phones (≤767px): scroll strips, stacked search, full-width Services ──── */
@media (max-width:767px){
  .eb2-wrap{padding:0 16px}
  /* Hero: shallow image block, headline first, stronger bottom fade */
  .eb2-hero{margin-bottom:44px}
  .eb2-hero-photo{background-image:var(--hero-m);background-position:center top}
  /* Strong top fade so the headline sits on near-solid warm (readable), image
     only peeks lower where the solid green community box + white search live. */
  .eb2-hero-photo::after{background:linear-gradient(180deg,rgba(255,251,246,.72) 0%,rgba(255,251,246,.42) 32%,rgba(255,251,246,.15) 62%,rgba(255,251,246,.04) 100%)}
  /* Block flow (not flex) so the copy fills 100% and its children can shrink;
     otherwise the community-chips box sizes to its max-content and overflows. */
  /* Keep the 16px side gutter (was 0 → hero copy ran edge-to-edge and the
     headline filled the full width on one line, clipping "You."). */
  .eb2-hero-inner{display:block;min-height:auto;padding:22px 16px 14px}
  .eb2-hero-copy{max-width:none;min-width:0}
  /* Punchy 2-line headline ("Everything" / "Around You.") like the mockup — with
     the side gutter restored above it now wraps here instead of clipping. */
  .eb2-hero-h1{font-size:clamp(36px,10.5vw,46px);line-height:1.04}
  .eb2-hero-sub{font-size:15px;max-width:none}
  /* Stack the community box + search (they're a row on desktop). */
  .eb2-hero-bottom{display:block;margin-top:0}
  .eb2-comm-wrap{width:auto;margin:0}
  .eb2-comm-chips{flex-wrap:wrap}
  .eb2-comm-chips::-webkit-scrollbar{display:none}
  /* Search → 2-row card, stacked under the community pills. */
  .eb2-search{flex-direction:column;gap:10px;padding:12px;width:auto;margin:12px 0 0}
  .eb2-search-area{border-right:0;border-bottom:1px solid var(--bd);width:100%;padding:8px 6px 12px}
  .eb2-search-area-txt select{max-width:none}
  .eb2-search-in{width:100%;padding:6px 4px}
  .eb2-search-go{width:100%;height:46px}
  /* Journeys: 2-col, Local Services spans full width */
  .eb2-journeys{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}
  .eb2r-head{flex-wrap:wrap;margin-top:20px}
  .eb2-journey{min-height:104px}
  .eb2-journey.is-svc{grid-column:1 / -1;min-height:auto}
  /* Near You Now: horizontal scroll (~2.5–3 cards visible) */
  .eb2-now{margin-bottom:30px}
  .eb2-now-row{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .eb2-now-row::-webkit-scrollbar{display:none}
  .eb2-stat{flex:0 0 auto;width:150px;scroll-snap-align:start}
  /* Content grid → single column, in spec order */
  .eb2-grid{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  /* Food + Doctors → horizontal carousels (spec); Fresh/Cars/Property stay lists. */
  .eb2-dish-row,.eb2-doc-list{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .eb2-dish-row::-webkit-scrollbar,.eb2-doc-list::-webkit-scrollbar{display:none}
  .eb2-dish{flex:0 0 auto;width:152px;scroll-snap-align:start}
  .eb2-doc2{flex:0 0 auto;width:250px;scroll-snap-align:start}
  /* Business CTA + trust */
  .eb2-biz{flex-direction:column;align-items:flex-start}
  .eb2-biz-btn{align-self:stretch;text-align:center}
  .eb2-trust{grid-template-columns:1fr 1fr;gap:16px}
}
@media (max-width:380px){
  .eb2-journeys{grid-template-columns:1fr}
  .eb2-journey.is-svc{grid-column:auto}
}

/* ══ Category rails (home middle, v5 redesign) ══════════════════════════════
   One horizontal rail per vertical. Cards are equal-height (flex row = stretch);
   the price + CTA sit in .eb2r-foot with margin-top:auto so they align on every
   card regardless of title length. Light-only, matching this file. */
.eb2r-rail{margin:0 auto 34px}
.eb2r-head{display:flex;align-items:center;gap:9px;margin:0 0 14px;min-width:0;flex-wrap:wrap}
.eb2r-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;box-shadow:0 3px 8px -3px rgba(20,40,30,.25)}
.eb2r-ic svg{width:19px;height:19px}
.eb2r-ic.ic-food{background:#e58943}.eb2r-ic.ic-doc{background:#3f86d6}.eb2r-ic.ic-fresh{background:#7c8a83}.eb2r-ic.ic-car{background:#3ea35c}.eb2r-ic.ic-prop{background:#7c4dd0}.eb2r-ic.ic-guide{background:#2f8f83}
/* Guides rail's filter-chip row: same .guide-chip look as the real /guides page
   (bazaar.css), just tightened to the rail's compact vertical rhythm. */
.eb2r-guide-chips{margin:2px 0 16px}
.eb2r-head h2{margin:0;font-size:1.14rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.eb2r-cnt{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap}
.eb2r-dot{width:8px;height:8px;border-radius:50%;background:#28a745;display:inline-block;animation:eb2rpulse 2s infinite}
@keyframes eb2rpulse{0%{box-shadow:0 0 0 0 rgba(40,167,69,.45)}70%{box-shadow:0 0 0 7px rgba(40,167,69,0)}100%{box-shadow:0 0 0 0 rgba(40,167,69,0)}}
.eb2r-act{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.eb2r-sell{font-size:.75rem;font-weight:700;color:var(--g);text-decoration:none;background:#e7f2ed;border:1px solid #cfe3d9;padding:5px 11px;border-radius:999px;white-space:nowrap}
.eb2r-sell:hover{background:#dcece4}
.eb2r-all{font-size:.82rem;font-weight:700;color:var(--g);text-decoration:none;white-space:nowrap}
.eb2r-all:hover{text-decoration:underline}
/* Locked to the page grid: the rails use the SAME fixed columns + breakpoints as
   the journeys row above (5 → 3 → 2 → 1), so a rail card sits directly under a
   journey card and the section shares the page's exact left/right rhythm — not a
   bespoke auto-fill grid that drifted to its own column count at some widths. The
   "view all" tile spans the full row as a bar (grid-column:1/-1). */
.eb2r-track{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:6px 0 10px;align-items:stretch}
/* Responsive columns — MUST come after the base rule above or the base (repeat(5))
   overrides them at every width (that shipped the 5-col squish on phones). */
@media (max-width:1199px){.eb2r-track{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.eb2r-track{grid-template-columns:repeat(2,1fr);gap:12px}}
.eb2r-cd{background:#fff;border:1px solid rgba(15,107,79,.09);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(16,40,32,.05),0 8px 20px -12px rgba(16,40,32,.14);transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s}
.eb2r-cd:hover{transform:translateY(-5px);box-shadow:0 18px 34px -18px rgba(15,107,79,.34)}
.eb2r-media{aspect-ratio:16/11;background:#f0ece3 center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#c9c2b4}
.eb2r-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 42%)}
.eb2r-badge{position:absolute;left:8px;top:8px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:7px}
.eb2r-badge-open{background:var(--g);color:#fff;box-shadow:0 2px 6px -1px rgba(15,107,79,.5)}
.eb2r-badge-closed{background:#9aa0a6;color:#fff}
.eb2r-badge-feat{background:#fbe6b0;color:#7a5200}
.eb2r-bd{padding:10px 11px 12px;display:flex;flex-direction:column;flex:1;min-width:0}
.eb2r-nm{font-weight:800;font-size:.87rem;line-height:1.25;height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eb2r-meta{font-size:.72rem;color:var(--muted);height:1.35em;display:flex;align-items:center;gap:3px;margin-top:2px;overflow:hidden}
.eb2r-meta svg{width:12px;height:12px;flex:none}
.eb2r-chips{display:flex;gap:5px;height:22px;margin-top:6px;overflow:hidden}
.eb2r-chip{font-size:.64rem;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;line-height:1.6}
.eb2r-chip-info{background:#eef2f0;color:#4b5a53}
.eb2r-chip-ver{background:#e7f2ed;color:#0a4a36}
.eb2r-chip-rate{background:#fff5e6;color:#96631a}
.eb2r-chip small{font-weight:600;opacity:.8}
.eb2r-foot{margin-top:auto;padding-top:9px}
.eb2r-pr{display:block;font-weight:800;font-size:1rem;color:var(--g);white-space:nowrap;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.eb2r-pr small{font-weight:600;font-size:.7rem;color:var(--muted)}
.eb2r-pr.warm{color:#d9622a}
.eb2r-cta{margin-top:8px;min-height:42px;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--g);color:#fff;font-weight:800;font-size:.8rem;border-radius:10px;transition:filter .18s}
.eb2r-cd:hover .eb2r-cta{filter:brightness(1.09)}
.eb2r-cta-soft{background:#e7f2ed;color:#0a4a36}
.eb2r-cd:hover .eb2r-cta-soft{background:#dcece4;filter:none}
.eb2r-arw{font-weight:800;transition:transform .2s}.eb2r-cd:hover .eb2r-arw{transform:translateX(3px)}
.eb2r-seal{display:inline-flex;flex:none}.eb2r-seal svg{width:15px;height:15px;vertical-align:-2px}
.eb2r-cd.eb2r-doc{text-align:center}
.eb2r-av{width:64px;height:64px;border-radius:50%;background:#dbe7f4 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.35rem;color:#2b5a86;margin:14px auto 0;box-shadow:0 4px 12px -5px rgba(43,90,134,.5)}
.eb2r-doc .eb2r-bd{align-items:center;padding-top:8px}
.eb2r-doc .eb2r-nm{height:auto;max-height:1.4em;-webkit-line-clamp:1;display:flex;align-items:center;justify-content:center;gap:4px}
.eb2r-doc .eb2r-meta{justify-content:center}
.eb2r-doc .eb2r-foot{align-self:stretch}
@media (prefers-reduced-motion:reduce){.eb2r-dot{animation:none}.eb2r-cd,.eb2r-cta,.eb2r-arw{transition:none}}