/* feed page (real mode). Scoped to .fd; uses theme.css tokens so light and dark both work. */
.fd{--gut:40px}
.fd.webp{padding-bottom:48px}

/* ---- sticky filter bar ---- */
.fd-sentinel{height:1px;margin-bottom:-1px}
.fd-bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.fd-bar.stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(0,0,0,.45)}
.fd.webp .fd-bar{padding:16px var(--gut) 14px}

/* cuisine carousel: photo discs, condensed to photo chips once the bar sticks */
.fd-cats-wrap{position:relative}
.fd-cats{display:flex;gap:4px;padding:4px 2px}
.fd-cats-wrap.fl .fd-cats{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px);mask-image:linear-gradient(90deg,transparent,#000 72px)}
.fd-cats-wrap.fr .fd-cats{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
.fd-cats-wrap.fl.fr .fd-cats{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent)}
.fd-arrow{position:absolute;top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .2s var(--spring)}
.fd-arrow:hover{transform:scale(1.08)}.fd-arrow[hidden]{display:none}
.fd-arrow.l{left:-6px}.fd-arrow.r{right:-6px}
.fd-cat{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:78px;padding:2px 6px;border-radius:99px;color:var(--ink2);transition:opacity .2s,background-color .2s}
.fd-ci{width:60px;height:60px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--soft);color:var(--ink);font-size:20px;transition:transform .35s var(--spring),box-shadow .2s,width .25s var(--ease),height .25s var(--ease)}
.fd-ci img{width:100%;height:100%;object-fit:cover;display:block}
.fd-cl{font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap}
.fd-cat:hover .fd-ci{transform:scale(1.07)}
.fd-cat.on .fd-ci{box-shadow:0 0 0 2.5px var(--paper),0 0 0 5px var(--hl)}
.fd-cat.on .fd-cl{color:var(--ink);font-weight:600}
.fd-bar.has-cat .fd-cat:not(.on){opacity:.5}.fd-bar.has-cat .fd-cat:not(.on):hover{opacity:1}
.fd-bar.stuck .fd-cats{gap:6px}
.fd-bar.stuck .fd-cat{flex-direction:row;gap:8px;min-width:0;padding:3px 14px 3px 3px;background:var(--soft);opacity:1}
.fd-bar.stuck .fd-ci{width:30px;height:30px;font-size:13px}
.fd-bar.stuck .fd-ci .ic{width:15px;height:15px}
.fd-bar.stuck .fd-cat.on{background:var(--ink)}
.fd-bar.stuck .fd-cat.on .fd-cl{color:var(--paper)}
.fd-bar.stuck .fd-cat.on .fd-ci{box-shadow:none}

/* pills + sort + view */
.fd-tools{display:flex;align-items:center;gap:10px;margin-top:12px}
.fd-pills{display:flex;align-items:center;gap:8px}
.fd-sep{width:1px;height:20px;background:var(--line);margin:0 4px;flex:none}
.fd .pill{height:36px;padding:0 15px;flex:none}
.fd .pill:hover:not(.on){background:color-mix(in srgb,var(--soft),var(--ink) 7%)}
.fd .pill .ic{width:15px;height:15px}
.fd .pill.on .ic{fill:currentColor}
.fd-dot{width:7px;height:7px;border-radius:50%;background:var(--save);flex:none}
.fd-reset{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.fd-reset:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fd-seg{display:inline-flex;padding:3px;border-radius:99px;background:var(--soft);flex:none}
.fd-seg a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:99px;font-size:13.5px;font-weight:600;line-height:1.25;color:var(--muted);white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.fd-seg a:hover{color:var(--ink)}
.fd-seg a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06)}
:root[data-theme=dark] .fd-seg a.on{background:var(--line)}
.fd-seg .ic{width:15px;height:15px}

/* results line */
.fd-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:24px var(--gut) 0}
.fd-count{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.3;text-wrap:balance}
.fd-note{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);line-height:1.35}
.fd-note .ic{width:14px;height:14px}
.fd-credit{font-size:12.5px;color:var(--faint);line-height:1.4}

/* ---- cards ---- */
.fd.webp .fd-body{padding:16px var(--gut) 0}
.fd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
@media (max-width:1260px){.fd.webp:not(.fd-mapview) .fd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1680px){.fd.webp:not(.fd-mapview) .fd-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fd-card{display:block;min-width:0;color:inherit;border-radius:16px}
.fd-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.fd-ph{position:relative;aspect-ratio:3/2;border-radius:16px;transition:box-shadow .25s var(--ease)}
.fd-ph>img,.fd-ph>div[role=img]{position:absolute;inset:0;height:100%!important}
.fd-card:hover .fd-ph,.fd-card.hl .fd-ph{box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.fd-card.hl .fd-ph{box-shadow:0 0 0 3px var(--hl),0 14px 30px -16px rgba(0,0,0,.45)}
.fd-badges{position:absolute;left:10px;top:10px;display:flex;gap:6px;pointer-events:none}
.fd-badges .chip{height:26px}
.fd-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.fd-badge i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.fd-badge.open i{background:var(--save)}
.fd-ph .heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .25s var(--spring)}
.fd-ph .heart:hover{transform:scale(1.1)}
.fd-ph .heart .ic{width:17px;height:17px}
.fd-ex{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:99px;background:rgba(14,15,18,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11px;font-weight:500;line-height:1.3;color:#fff;pointer-events:none}   /* sits on a photo, so one scrim works in both themes */
.fd-name{display:block;margin-top:12px;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-meta{margin:2px 0 10px;font-size:13.5px;color:var(--muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:72px 20px;text-align:center}
.fd-empty b{font-size:20px;line-height:1.3}.fd-empty span{color:var(--muted);line-height:1.4}.fd-empty .btn{margin-top:12px}
.fd-more{text-align:center;padding:34px 0 8px}

/* ---- map split (desktop) ---- */
.fd-mapview .fd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,42%);gap:28px;align-items:start}
.fd-mapview .fd-body{padding-top:20px}
.fd-mapview .fd-head{padding:4px 0 16px}
.fd-mapview .fd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fd-mapview .fd-foot{padding:22px 0 0}
@media (min-width:1760px){.fd-mapview .fd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fd-map{position:sticky;top:calc(var(--fdtop,140px) + 16px);height:calc(100vh - var(--fdtop,140px) - 36px);min-height:420px;border-radius:20px;overflow:clip;border:1px solid var(--line);background:var(--soft)}
.fd-mapbox{width:100%;height:100%;background:var(--soft)}
.fd-mapbox:not(.ready){background:linear-gradient(100deg,var(--soft) 30%,var(--line) 50%,var(--soft) 70%) 0 0/300% 100%;animation:fdShim 1.4s linear infinite}   /* loading shimmer until the first frame */
@keyframes fdShim{to{background-position:-150% 0}}
.fd-mapfail{display:grid;place-items:center;height:100%;padding:24px;text-align:center;font-size:14px;line-height:1.45;color:var(--muted)}
.fd-map .maplibregl-canvas{outline:0}
.fd-map .maplibregl-ctrl-group{border-radius:12px;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.18);overflow:clip}
.fd-map .maplibregl-ctrl-group button{width:34px;height:34px}
.fd-map .maplibregl-ctrl-group button+button{border-top:1px solid var(--line)}
:root[data-theme=dark] .fd-map .maplibregl-ctrl-icon{filter:invert(1)}
.fd-map .maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--card) 85%,transparent);color:var(--muted);font-size:11px;line-height:1.4}
.fd-map .maplibregl-ctrl-attrib a{color:var(--ink2)}
:root[data-theme=dark] .fd-map .maplibregl-ctrl-attrib-button{filter:invert(1)}
/* 2D/3D + recenter */
.fd-mapctl{position:absolute;left:14px;top:14px;z-index:2;display:flex;gap:6px}
.fd-mapctl button{height:34px;min-width:34px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--card);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1.3;box-shadow:0 4px 16px rgba(0,0,0,.18);transition:transform .2s var(--spring)}
.fd-mapctl button:hover{transform:translateY(-1px)}
.fd-mapctl button:first-child{background:var(--inv);color:var(--hl)}
.fd-mapctl .ic{width:16px;height:16px}
/* photo pins: a round photo on a stem; yellow ring = real prices captured; hover/card-hover lifts it */
.fd-pin3{display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));transition:transform .25s var(--spring);transform-origin:50% 100%}
.fd-pin3>span{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;border:3px solid var(--card);background:var(--t0);color:var(--ink2);font-size:12px;font-weight:700;line-height:1.25}
.fd-pin3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd-pin3:after{content:"";width:3px;height:10px;margin-top:-1px;border-radius:0 0 2px 2px;background:var(--card)}
.fd-pin3.pr>span{border-color:var(--hl)}.fd-pin3.pr:after{background:var(--hl)}
.fd-pin3:hover,.fd-pin3.on{transform:translateY(-6px) scale(1.18);z-index:3}
.fd-pin3.on>span{border-color:var(--hl)}
/* your address */
.fd-you3{position:relative;width:34px;height:34px}
.fd-you3 b{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--inv);color:var(--hl);border:2.5px solid var(--hl);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.fd-you3 .ic{width:15px;height:15px;stroke-width:2.4}
.fd-you3 i{position:absolute;inset:-10px;border-radius:50%;background:rgba(255,212,59,.35);animation:fdPulse 2.4s ease-out infinite}
@keyframes fdPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.fd-you3 i,.fd-mapbox:not(.ready){animation:none}}
/* popup */
.fd-pop3 .maplibregl-popup-content{padding:0;border-radius:16px;overflow:clip;background:var(--card);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.3);font-size:13px;line-height:1.35}
.fd-pop3.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--card)}
.fd-pop3.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--card)}
.fd-pop3.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--card)}
.fd-pop3.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--card)}
.fd-popcard{display:block;color:var(--ink)!important}
.fd-popimg{position:relative;display:block;height:116px}
.fd-popimg>img{display:block}
.fd-popbody{display:flex;flex-direction:column;gap:3px;padding:11px 14px 13px}
.fd-popbody b{font-size:15px;line-height:1.3}
.fd-popmeta{color:var(--muted);line-height:1.35}
.fd-popbody .pcs{margin-top:5px}
.fd-popgo{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:600}
.fd-popgo .ic{width:14px;height:14px;transition:transform .25s var(--ease)}
.fd-popcard:hover .fd-popgo .ic{transform:translateX(3px)}

/* ---- phone ---- */
.fd-phone .fd-bar{padding:12px 0 10px;margin-top:6px}
.fd-phone .fd-cats{padding:4px 16px}
.fd-phone .fd-cat{min-width:70px;padding:2px 4px}
.fd-phone .fd-ci{width:54px;height:54px}
.fd-phone .fd-pills{padding:0 20px 2px;margin-top:10px}
.fd-phone .fd-bar.stuck .fd-cats{padding-top:2px}
.fd-phone .fd-head{padding:16px 20px 0}
.fd-phone .fd-count{font-size:18px}
.fd-phone .fd-sub{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 20px 0}
.fd-phone .fd-sub .fd-note{flex-basis:100%}
.fd-phone .fd-grid{grid-template-columns:1fr;gap:28px;padding:18px 20px 0}
.fd-phone .fd-ph{aspect-ratio:16/10}
.fd-phone .fd-name{font-size:17px}
.fd-foot{display:block;text-align:center;padding:18px 20px 0}

/* pin names: shown under each pin once zoomed in (.near), always for the lit one */
.fd-pin3 em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;max-width:150px;padding:3px 8px;border-radius:8px;background:var(--card);color:var(--ink);font-style:normal;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 10px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s}
.fd-mapbox.near .fd-pin3 em,.fd-pin3.on em{opacity:1}
/* phone map: the 3D city fills the screen under the filters; a snapped card strip floats at the bottom */
.fd-phone .fd-sub .fd-seg+.fd-seg{margin-left:8px}
.fd-pmap{position:relative;height:calc(100svh - 330px);min-height:420px;margin:4px 0 -84px}   /* runs under the tab bar */
.fd-pmap .fd-mapbox{border-radius:0}
.fd-pmap .fd-mapctl{left:12px;top:12px}
.fd-strip{position:fixed;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:10px;padding:4px 16px 8px;scroll-snap-type:x mandatory;scroll-padding:0 16px}
.fd-mini{scroll-snap-align:center;flex:none;display:flex;gap:10px;align-items:center;width:min(290px,78vw);padding:8px;border-radius:16px;background:var(--card);color:var(--ink);box-shadow:0 10px 28px rgba(0,0,0,.28);border:2px solid transparent;transition:border-color .2s}
.fd-mini.hl{border-color:var(--hl)}
.fd-mini img,.fd-mini-t{width:64px;height:64px;border-radius:11px;object-fit:cover;flex:none;display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1.25;color:var(--ink2)}
.fd-mini>div{flex:1;min-width:0}
.fd-mini b{display:block;font-size:14.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-mini>div>span{display:block;margin:1px 0 5px;font-size:12px;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-mini em{font-style:normal;font-weight:600}.fd-mini em.o{color:var(--save)}
.fd-mini.empty{width:calc(100vw - 32px);display:block}