/* ══ THE SEARCH PAGE ═════════════════════════════════════════════════════
   Design handoff of 14 Oct 2026 (handoff-search, BUILD-search.md). Loaded
   only on /search/, in place of search.css. Everything is under .phs so
   nothing here reaches the site header or footer, and the theme's own
   button and heading styles are reset inside it. Colours come from the
   token file; the gradient, the type colours, the heading tints and the
   dietary colours are the design's own. The design's breakpoints were
   container widths of 1100px, 900px and 600px. Every tap target is at
   least 44px, or sits inside a row that is. */

.phs {
	--phs-pink: var(--pink, #e8568a); --phs-pinkp: var(--pink-press, #c9376e); --phs-pinks: var(--pink-soft, #fdeef4);
	--phs-ink: var(--ink, #16181f); --phs-ink2: var(--ink-2, #5b6070); --phs-ink3: var(--ink-3, #8f95a6);
	--phs-surface: var(--surface, #f6f7f9); --phs-line: var(--line, #e4e6ec); --phs-line2: var(--line-2, #d3d7e0);
	--phs-open: var(--open, #1f7a4d); --phs-soon: #a56a12; --phs-navy: #1b2a4a;
	--phs-e2: 0 4px 16px rgba(22, 24, 31, .10);
	--phs-top: 150px;
	font-family: var(--font, 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif);
	color: var(--phs-ink); font-size: 16px; line-height: normal; -webkit-font-smoothing: antialiased;
	display: flow-root;
}
.phs *, .phs *::before, .phs *::after { box-sizing: border-box; }
.phs h1, .phs h3, .phs p { margin: 0; padding: 0; font-family: inherit; line-height: normal; }
.phs button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; line-height: normal; }
.phs button:disabled { cursor: default; }
.phs a { text-decoration: none; }
.phs svg { display: block; flex-shrink: 0; }
.phs [hidden] { display: none !important; }
.phs button:focus-visible, .phs a:focus-visible, .phs input:focus-visible, .phs select:focus-visible, .phs summary:focus-visible { outline: 2.5px solid var(--phs-pink); outline-offset: 2px; }
html.phs-locked, html.phs-locked body { overflow: hidden; }
.phs-in { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.phs .phs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; }
.phs .phs-btn--pink { background: var(--phs-pink); color: #fff; }
.phs .phs-btn--pink:hover { background: var(--phs-pinkp); color: #fff; }
.phs .phs-btn--ghost { border: 1.5px solid var(--phs-line2); color: var(--phs-ink); background: #fff; }
.phs .phs-btn--ghost:hover { border-color: var(--phs-ink); }
.phs .phs-btn--white { background: #fff; color: var(--phs-pinkp); }
.phs .phs-btn--glass { background: rgba(255, 255, 255, .18); color: #fff; }
.phs .phs-btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* 1. The search bar: sticky, between the site header and the results. */
.phs-bar { background: linear-gradient(150deg, #a62a62, #c9376e 45%, #dc5a6a); position: -webkit-sticky; position: sticky; top: 0; z-index: 40; box-shadow: 0 6px 18px rgba(22, 24, 31, .10); }
body.admin-bar .phs-bar { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .phs-bar { top: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar .phs-bar { top: 0; } }
.phs-bar__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 14px; position: relative; }
/* v3 (deijm, shared controls): the one search field, 46px, a pill with a
   1px border and a pink ring on focus; its place chip 34px inside it. */
.phs-q { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--phs-line2); border-radius: 999px; padding: 0 6px 0 18px; height: 46px; min-height: 46px; margin: 0; }
.phs-q:focus-within { border-color: var(--phs-ink3); box-shadow: 0 0 0 3px rgba(232, 86, 138, .22); }
.phs-q__ic { width: 17px; height: 17px; flex: none; color: var(--phs-ink); }
.phs .phs-q__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--phs-ink); padding: 0; margin: 0; min-height: 36px; height: auto; border-radius: 0; }
.phs-q__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.phs .phs-q__loc { flex: none; display: flex; align-items: center; gap: 5px; height: 34px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--phs-surface); font-size: 13.5px; font-weight: 700; color: var(--phs-ink); white-space: nowrap; cursor: pointer; }
.phs .phs-q__loc[hidden] { display: none; }
.phs-q__loc i { font-style: normal; font-size: 9px; color: var(--phs-ink2); }

.phs-types { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 12px; }
.phs-types::-webkit-scrollbar { display: none; }
.phs .phs-ty { display: flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap; border-radius: 999px; padding: 6px 13px 6px 8px; min-height: 34px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 800; transition: background .14s; }
.phs .phs-ty:hover { background: rgba(255, 255, 255, .24); }
.phs-ty__ic { width: 22px; height: 22px; border-radius: 7px; background: var(--tc); display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 1.5px #fff; }
.phs-ty__ic svg { width: 13px; height: 13px; }
.phs .phs-ty.is-on { background: #fff; color: var(--phs-ink); box-shadow: 0 4px 14px rgba(22, 24, 31, .18); }
.phs-ty.is-on .phs-ty__ic { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--tc); }
.phs-edge { display: none; }

/* 2. The page: the filters column and the results. */
.phs-res { background: var(--phs-surface); }
.phs-page { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 30px; padding-top: 28px; padding-bottom: 64px; }
.phs-rail { position: -webkit-sticky; position: sticky; top: calc(var(--phs-top) + 16px); align-self: start; display: grid; gap: 10px; max-height: calc(100vh - var(--phs-top) - 32px); overflow-y: auto; scrollbar-width: thin; padding: 2px; margin: -2px; overscroll-behavior: contain; }
.phs-shh, .phs-shf { display: none; }

.phs-view { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--phs-line); border-radius: 16px; padding: 4px; gap: 4px; }
.phs .phs-view button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border-radius: 12px; font-size: 12.5px; font-weight: 800; color: var(--phs-ink2); }
.phs-view svg { width: 14px; height: 14px; }
.phs .phs-view button:hover { background: var(--phs-surface); }
.phs .phs-view button.is-on { background: var(--phs-ink); color: #fff; }
.phs .phs-view button:disabled { opacity: .4; background: none; }

.phs .phs-tg { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--phs-line); border-radius: 16px; padding: 8px 14px; min-height: 48px; font-size: 13.5px; font-weight: 700; color: var(--phs-ink); }
.phs-tg small { display: block; font-size: 11.5px; font-weight: 600; color: var(--phs-ink3); margin-top: 1px; }
.phs-sw { width: 36px; height: 22px; border-radius: 999px; background: var(--phs-line2); position: relative; transition: background .15s; flex-shrink: 0; }
.phs-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.phs-tg.is-on .phs-sw { background: var(--phs-open); }
.phs-tg.is-on .phs-sw::after { transform: translateX(14px); }

.phs-srt { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--phs-line); border-radius: 16px; padding: 0 10px 0 14px; min-height: 48px; margin: 0; }
.phs-srt span { font-size: 13.5px; font-weight: 700; }
.phs .phs-srt select { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--phs-ink); border: 1.5px solid var(--phs-line2); border-radius: 999px; padding: 0 30px 0 12px; height: 32px; min-height: 32px; margin: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f95a6' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; cursor: pointer; max-width: 62%; box-shadow: none; }

/* The filter groups. Every heading is the same 40px, whatever is under it
   and whatever count it carries: DG, 14 Oct 2026, "I just don't want the
   height of that filter per filter to get tall, for example price or
   dietary". Height is fixed rather than a minimum, the title cannot wrap,
   and the count badge is a fixed 18px, so nothing inside can push it. */
.phs-fs { background: #fff; border: 1px solid var(--phs-line); border-radius: 16px; overflow: hidden; }
.phs-g { border-bottom: 1px solid var(--phs-line); margin: 0; padding: 0; }
.phs-g:last-child { border-bottom: 0; }
.phs .phs-g__h { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 38px; min-height: 38px; max-height: 38px; padding: 0 14px; margin: 0; background: var(--hb, #fff); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--phs-ink); white-space: nowrap; overflow: hidden; }
.phs-g__h::-webkit-details-marker { display: none; }
.phs-g__h::marker { content: ''; }
.phs-g__t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* v3 value pill: the group's current setting, cut short rather than
   wrapped, so the heading stays the same height whatever is picked. */
.phs .phs-g__pv { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; height: 32px; min-width: 0; max-width: 62%; margin-left: auto; padding: 0 12px; border: 1.5px solid var(--phs-line2); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--phs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phs .phs-g__pv.is-on { border-color: var(--phs-pink); background: var(--phs-pinks); color: var(--phs-pinkp); }
.phs-g__h::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--phs-ink3); border-bottom: 2px solid var(--phs-ink3); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.phs-g[open] > .phs-g__h { border-bottom: 1px solid var(--phs-line); }
.phs-g[open] > .phs-g__h::after { transform: rotate(-135deg) translateY(-2px); }
.phs-g__b { padding-top: 12px; }

.phs-fb { padding: 0 14px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.phs .phs-fc { display: inline-flex; align-items: center; gap: var(--pill-gap, 6px); min-height: var(--pill-h, 32px); padding: var(--pill-pad, 0 11px); border-radius: 999px; border: 1.5px solid var(--phs-line2); background: #fff; font-size: var(--pill-fs, 12.5px); font-weight: var(--pill-fw, 700); color: var(--phs-ink2); white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.phs .phs-fc:hover:not(:disabled) { border-color: var(--phs-ink3); }
.phs-fc svg { width: 14px; height: 14px; }
.phs .phs-fc.is-on { background: var(--phs-ink); border-color: var(--phs-ink); color: #fff; }
.phs .phs-fc:disabled { opacity: .4; }
.phs .phs-fc.is-hid, .phs .phs-fc.is-na { display: none; }
.phs-fc--dt svg { color: var(--mc); }
.phs .phs-fc--dt.is-on { background: var(--mc); border-color: var(--mc); color: #fff; }
.phs-fc--dt.is-on svg { color: #fff; }
.phs .phs-fc--pr { min-width: 48px; justify-content: center; font-size: 13px; font-weight: 800; }
.phs .phs-fc--dark { background: var(--phs-ink); border-color: var(--phs-ink); color: #fff; }
.phs-hint { font-size: 12px; color: var(--phs-ink3); padding: 0 14px 12px; margin-top: -4px !important; }

.phs-fsrch { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; border: 1.5px solid var(--phs-line2); border-radius: 999px; padding: 0 12px; height: 34px; background: #fff; }
.phs-fsrch svg { width: 15px; height: 15px; color: var(--phs-ink3); }
.phs .phs-fsrch input { border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: 12.5px; flex: 1; min-width: 0; padding: 0; margin: 0; height: 30px; min-height: 0; color: var(--phs-ink); }
.phs-fsub { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--phs-ink3); padding: 4px 14px 6px !important; }

.phs-fx { display: grid; gap: 6px; padding: 0 10px 12px; }
.phs-fgp { border: 1px solid var(--phs-line); border-radius: 12px; overflow: hidden; }
.phs .phs-fgp__h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 12px; min-height: 40px; font-size: 13px; font-weight: 700; text-align: left; color: var(--phs-ink); }
.phs-fgp__ic { width: 24px; height: 24px; border-radius: 8px; background: var(--gs); color: var(--gc); display: grid; place-items: center; flex-shrink: 0; }
.phs-fgp__ic svg { width: 15px; height: 15px; }
.phs-fgp__t { flex: 1; min-width: 0; }
.phs-fgp__h em { font-style: normal; font-size: 11px; font-weight: 800; background: var(--phs-pink); color: #fff; border-radius: 999px; padding: 1px 7px; }
.phs-fgp__h::after { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--phs-ink3); border-bottom: 2px solid var(--phs-ink3); transform: rotate(45deg) translateY(-2px); margin-left: 6px; transition: transform .2s; }
.phs-fgp.is-open .phs-fgp__h::after { transform: rotate(-135deg); }
.phs-fgp .phs-fb { display: none; padding: 2px 10px 12px; }
.phs-fgp.is-open .phs-fb { display: flex; }

.phs-tw { display: grid; padding: 0 14px 6px; }
.phs .phs-tw select { font: inherit; font-size: 13px; font-weight: 700; color: var(--phs-ink); border: 1.5px solid var(--phs-line2); border-radius: 12px; height: 38px; padding: 0 12px; margin: 0 0 6px; background: #fff; box-shadow: none; width: 100%; }
.phs-tw__row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; font-weight: 600; cursor: pointer; margin: 0; }
.phs-tw__row input { width: 18px; height: 18px; margin: 0; accent-color: var(--phs-pink); flex-shrink: 0; }
.phs-tw__row span { flex: 1; min-width: 0; }
.phs-tw__row.is-na { display: none; }
.phs .phs-tw__chev { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; color: var(--phs-ink3); border-radius: 8px; transition: transform .2s; }
.phs .phs-tw__chev:hover { background: var(--phs-surface); }
.phs-tw__chev svg { width: 16px; height: 16px; }
.phs-tw__chev.is-open { transform: rotate(90deg); }
.phs-tw__sub { padding-left: 28px; display: grid; }

/* 3. Results. */
.phs-rh { position: relative; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.phs .phs-title { font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: var(--phs-ink); min-height: 28px; }
.phs-title span { color: var(--phs-ink3); font-weight: 700; }
.phs-act { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.phs-act:empty { display: none; }
.phs .phs-act button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--phs-pinks); color: var(--phs-pinkp); font-size: 12px; font-weight: 800; }
.phs-act button b { width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 11px; }
.phs .phs-act .phs-act__clr { background: none; color: var(--phs-ink2); padding: 0 8px; text-decoration: underline; }
.phs-mbar { display: none; }
.phs-cu { position: relative; margin-bottom: 18px; }
.phs-cu__row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-right: 40px; }
.phs-cu__row::-webkit-scrollbar { display: none; }
.phs-cu::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, rgba(246, 247, 249, 0), var(--phs-surface)); pointer-events: none; }
.phs-cu .phs-fc { flex-shrink: 0; }

.phs-list { display: grid; gap: 16px; }
.phs-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); background: #fff; border: 1px solid #eceef2; border-radius: 18px; overflow: visible; transition: box-shadow .15s, border-color .15s; grid-template-rows: 1fr auto; box-shadow: 0 2px 12px rgba(22, 24, 31, .07); }
.phs-card:hover, .phs-card.is-hl { box-shadow: 0 6px 22px rgba(22, 24, 31, .11); border-color: var(--phs-line2); }
.phs-ph { position: relative; display: block; background: linear-gradient(140deg, var(--tc), #2b2440); min-height: 180px; border-radius: 18px 0 0 0; }
.phs-ph > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px 0 0 0; }
.phs-ph__init { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .85); font-size: 44px; font-weight: 800; }
.phs-lg { position: absolute; left: 12px; bottom: -20px; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 3px solid #fff; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); z-index: 3; }
.phs-pin { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--phs-ink); font-size: 12.5px; font-weight: 800; display: none; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.phs-main.is-map .phs-pin { display: grid; }
.phs-kind { position: absolute; left: 12px; top: 12px; background: #fff; color: var(--phs-ink); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.phs-cb { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.phs-ct { display: flex; align-items: center; gap: 8px; }
.phs .phs-ct h3 { font-size: 16px; font-weight: 800; letter-spacing: -.2px; flex: 1; min-width: 0; line-height: 1.25; padding-top: 0; }
.phs-ct h3 a { color: var(--phs-ink); }
.phs-ct h3 a:hover { color: var(--phs-pinkp); }
.phs-draft { font-style: normal; font-size: 11px; font-weight: 800; color: var(--phs-soon); background: #fbf2e2; border-radius: 999px; padding: 2px 8px; vertical-align: 2px; }
.phs .phs-ib { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--phs-line2); display: grid; place-items: center; flex-shrink: 0; color: var(--phs-ink2); background: #fff; }
.phs-ib svg, .phs-ib [data-ph-save-icon] svg { width: 15px; height: 15px; }
.phs .phs-ib.is-saved, .phs .phs-ib.is-added { border-color: var(--phs-pink); background: var(--phs-pink); color: #fff; }
.phs-o { display: inline-flex; align-items: center; gap: 6px; }
.phs-o::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.phs-o--open { color: var(--phs-open); }
.phs-o--soon { color: var(--phs-soon); }
.phs-o--shut { color: var(--phs-ink3); }
.phs-rt { color: var(--phs-ink2); }
.phs-rt b { color: #e0a638; }
.phs-desc { font-size: 13px; color: var(--phs-ink2); line-height: 1.55 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phs-mt { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: var(--phs-ink); }
.phs-mt span { display: inline-flex; align-items: center; gap: 6px; }
.phs-mt svg { width: 14px; height: 14px; color: var(--phs-ink3); }
.phs-facts { display: flex; gap: 6px; flex-wrap: wrap; }
.phs-facts span { font-size: 12px; font-weight: 700; background: var(--phs-surface); border-radius: 999px; padding: 4px 10px; color: var(--phs-ink2); }
.phs-dp { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.phs-dp span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px 2px 6px; background: var(--ms); color: var(--mc); }
.phs-mt__pr svg { color: var(--phs-pink); }
/* The grey bar along the foot of the card: the area, the open status and
   Show on map. The logo sits over the photo and this bar (round 4). */
.phs-cf { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; background: #f6f7f9; border-top: 1px solid #eceef2; border-radius: 0 0 18px 18px; padding: 0 20px 0 82px; min-height: 42px; font-size: 12.5px; }
.phs-cf__a { font-weight: 800; color: var(--phs-ink); }
/* No logo over the bar, so no room kept for one. */
.phs-card--nologo .phs-cf { padding-left: 20px; }
.phs-cf .phs-o { font-weight: 700; }
.phs .phs-smap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--phs-pink); font-weight: 800; min-height: 40px; }
.phs-smap svg { width: 16px; height: 16px; }
.phs-main.is-map .phs-smap { display: none; }
.phs-dp svg { width: 12px; height: 12px; }

/* The Heavy One card, after the third result: dark navy, because white
   was lost among white listing cards. */
.phs-h1r { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--phs-navy); color: #fff; border-radius: 18px; padding: 16px 18px; }
.phs-h1r__mk { width: 46px; height: 46px; border-radius: 16px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
.phs-h1r__mk img { width: 26px; height: 26px; }
.phs-h1r__k { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ff9ec0; }
.phs .phs-h1r h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; margin-top: 2px; color: #fff; }
.phs .phs-h1r p { font-size: 13px; color: rgba(255, 255, 255, .75); margin-top: 3px; line-height: 1.5; }
.phs-h1r__ch { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.phs-h1r__ch span { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px 10px; color: #fff; }

.phs-none { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--phs-line); border-radius: 18px; padding: 18px 20px; }
.phs .phs-none h3 { font-size: 18px; font-weight: 800; }
.phs .phs-none p { font-size: 14px; color: var(--phs-ink2); margin-top: 3px; }
.phs-else { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.phs-more { display: flex; justify-content: center; padding-top: 18px; }
.phs-more:empty { display: none; }
.phs-noscript { font-size: 14px; color: var(--phs-ink2); padding: 16px 0; }

/* 4. The map, above the list. */
/* Its own stacking context: Leaflet's layers and the key sit at z-index
   400 to 1000, which put them over the sticky search bar on scroll. */
.phs-map { position: relative; z-index: 0; isolation: isolate; height: 360px; border-radius: 18px; overflow: hidden; border: 1px solid var(--phs-line); background: #e8edf1; margin-bottom: 14px; }
.phs-map__c { position: absolute; inset: 0; z-index: 0; }
.phs-mpw { background: none; border: 0; }
.phs-mp { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.phs-mp b { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: var(--tc); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(22, 24, 31, .3); border: 2px solid #fff; transition: transform .15s; font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif); }
.phs-mp::after { content: ''; width: 2px; height: 8px; background: #fff; }
.phs-mp.is-shut b { background: #fff; color: var(--phs-ink3); border-color: var(--phs-line2); }
.phs-mp.is-hl b { background: var(--phs-pink); color: #fff; border-color: #fff; transform: scale(1.18); }
.phs-here { position: absolute; right: 12px; top: 12px; z-index: 500; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 0 14px; min-height: 44px; font-size: 13px; font-weight: 800; box-shadow: var(--phs-e2); margin: 0; cursor: pointer; }
.phs-here input { width: 18px; height: 18px; margin: 0; accent-color: var(--phs-pink); }
.phs-lgd { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; gap: 10px; background: #fff; border-radius: 999px; padding: 0 14px; min-height: 34px; align-items: center; font-size: 12px; font-weight: 700; box-shadow: var(--phs-e2); }
.phs-lgd i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.phs-lgd i.is-shut { background: #fff; border: 1.5px solid var(--phs-line2); }
.phs .phs-cmap { display: none; position: absolute; left: 12px; top: 12px; z-index: 500; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 0 14px; min-height: 44px; font-size: 13px; font-weight: 800; box-shadow: var(--phs-e2); }

/* The card on the map (handoff-media-wall, section 3): 268px, above the
   pin with an arrow on it, or below it, always inside the map. */
.phs-mpc-host { position: absolute; inset: 0; z-index: 600; pointer-events: none; }
.phs-mpc { position: absolute; left: 0; top: 0; pointer-events: auto; width: 268px; background: #fff; color: var(--phs-ink); border-radius: 16px; box-shadow: 0 14px 34px rgba(22, 24, 31, .28); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 10px; animation: phs-fade .18s cubic-bezier(.2, .8, .2, 1); }
.phs-mpc.is-arw::after { content: ''; position: absolute; left: var(--ax); bottom: -7px; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.phs-mpc.is-arw.is-up::after { top: -7px; bottom: auto; }
.phs-mpt { grid-row: 1 / 3; position: relative; width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(140deg, var(--tc, #e8568a), #2b2440); display: grid; place-items: center; color: #fff; font-weight: 800; }
.phs-mpt > img:first-child { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.phs-mpt__lg { position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #fff; object-fit: cover; }
.phs-mpb { display: grid; gap: 3px; min-width: 0; padding-right: 20px; align-content: start; }
.phs-mpb b { font-size: 14.5px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phs-mpb .phs-o { font-size: 12px; font-weight: 700; }
.phs-mpm { font-size: 12px; color: var(--phs-ink2); }
.phs-mpd { display: flex; gap: 4px; }
.phs-mpd i { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--phs-line); display: grid; place-items: center; color: var(--mc); }
.phs-mpd svg { width: 12px; height: 12px; }
.phs-mpa { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 6px; }
.phs .phs-mpa .phs-btn { flex: 1; min-height: 36px; font-size: 12.5px; padding: 0 12px; }
.phs .phs-mpa__b { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--phs-line2); display: grid; place-items: center; color: var(--phs-ink2); flex-shrink: 0; }
.phs-mpa__b svg, .phs-mpa__b [data-ph-save-icon] svg { width: 15px; height: 15px; }
.phs .phs-mpa__b.is-saved, .phs .phs-mpa__b.is-added { background: var(--phs-pink); border-color: var(--phs-pink); color: #fff; }
.phs .phs-mpx { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; color: var(--phs-ink3); }
.phs .phs-mpx:hover { background: var(--phs-surface); }
.phs-mp.is-sel b { background: var(--phs-pink); color: #fff; border-color: #fff; transform: scale(1.18); }
/* The full card for the pin, directly under the map. */
.phs-selw:empty { display: none; }
.phs-list .phs-card.is-picked { display: none; }
/* Google's pins are HTML overlays placed by their own top and left. */
.phs-mpw--g { position: absolute; width: 34px; height: 42px; cursor: pointer; }
.phs-selw { margin: -2px 0 18px; animation: phs-fade .2s; }
.phs-selh { display: flex; align-items: center; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--phs-pinkp); }
.phs .phs-selh button { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--phs-ink2); text-decoration: underline; min-height: 32px; }
.phs-selw .phs-card { border-color: var(--phs-pink); box-shadow: 0 0 0 3px var(--phs-pinks), 0 6px 22px rgba(22, 24, 31, .1); }

/* 5. Videos: the player and Up next, from the same results. */
.phs-vw { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
/* On desktop the player stays put under the search bar while Up next
   scrolls beside it (DG, 14 Oct 2026). Sticky is also a containing block,
   so everything laid over the video stays where it is. */
.phs-pl { position: -webkit-sticky; position: sticky; top: calc(var(--phs-top) + 16px); aspect-ratio: 9 / 16; max-height: calc(100vh - var(--phs-top) - 60px); border-radius: 22px; overflow: hidden; background: #16181f; color: #fff; box-shadow: 0 -8px 40px rgba(22, 24, 31, .18); }
.phs-pl__stage { position: absolute; inset: 0; }
.phs-pl__poster, .phs-pl__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.phs-pl::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75)); pointer-events: none; }
.phs-pl__bar { position: absolute; top: 0; left: 0; width: 0; height: 3px; background: #fff; z-index: 2; }
.phs .phs-pl__snd { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--phs-ink); border-radius: 999px; padding: 0 12px; min-height: 44px; display: flex; align-items: center; font-size: 12px; font-weight: 800; z-index: 3; white-space: nowrap; }
.phs-pl__dots { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; align-items: center; }
.phs-pl__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.phs-pl__dots i.is-on { background: #fff; width: 18px; border-radius: 4px; }
/* Higher on the video, clear of the venue name and the credit. */
.phs-pl__nx { position: absolute; right: 10px; top: 22%; display: grid; gap: 8px; z-index: 3; }
.phs .phs-pl__nx button { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--phs-ink); font-weight: 800; display: grid; place-items: center; }
.phs .phs-pl__nx button:disabled { opacity: .35; }
/* Everything over the video stays inside it: one minmax(0,1fr) column, so
   a long name, area or creator line ends in "…" instead of widening it,
   and 46px kept clear on the right for the arrows (handoff-tablet 1.4). */
.phs-pl__inf { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.phs-pl__by { font-size: 12.5px; font-weight: 700; opacity: .85; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 46px; }
.phs-pl__vn { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: 46px; }
.phs-pl__vn > div { min-width: 0; }
.phs-pl__vn > img, .phs-pl__vn > span { width: 40px; height: 40px; border-radius: 50%; background: var(--phs-pink); border: 2px solid #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; object-fit: cover; }
.phs-pl__vn b { font-size: 17px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phs-pl__vn small { font-size: 12.5px; opacity: .9; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phs-pl__o { font-style: normal; color: #7ee2a8; }
.phs-pl__o--soon { color: #ffd38a; }
.phs-pl__o--shut { color: #cfd3dc; }
.phs-pl__bt { display: flex; gap: 8px; }
.phs-pl__bt .phs-btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 10px; font-size: 14px; }
.phs-pl__cap { position: absolute; inset: 0; display: grid; align-content: center; gap: 12px; padding: 24px; text-align: center; background: linear-gradient(160deg, #a62a62, #1b2a4a); z-index: 4; }
.phs-pl__cap b { font-size: 20px; }
.phs .phs-pl__cap p { font-size: 14px; line-height: 1.5; opacity: .9; }
.phs .phs-un h3 { font-size: 16px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.phs-un h3 span { font-size: 13px; color: var(--phs-ink3); font-weight: 700; }
.phs-un__fs { font-size: 13px; font-weight: 800; color: var(--phs-pinkp); margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
.phs-ul { display: grid; gap: 8px; margin-top: 8px; }
.phs .phs-ui { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border: 1.5px solid var(--phs-line); border-radius: 14px; padding: 8px; text-align: left; width: 100%; }
.phs .phs-ui:hover { border-color: var(--phs-line2); }
.phs .phs-ui.is-on { border-color: var(--phs-pink); box-shadow: 0 0 0 3px var(--phs-pinks); }
.phs-ui__th { width: 64px; height: 86px; border-radius: 10px; background: linear-gradient(160deg, #c9376e, #1b2a4a); position: relative; display: grid; place-items: center; color: #fff; font-size: 12px; overflow: hidden; }
.phs-ui__th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phs-ui__th i { position: relative; font-style: normal; }
.phs-ui__b b { font-size: 14.5px; display: block; }
.phs-ui__b small { font-size: 12.5px; color: var(--phs-ink3); display: block; margin-top: 2px; }
.phs-ui__b .phs-o { font-size: 12px; font-weight: 800; margin-top: 2px; }
.phs-ui__now { font-size: 11px; font-weight: 800; color: #fff; background: var(--phs-pink); border-radius: 999px; padding: 3px 8px; }

/* The phone's sheet and Map button, off until the breakpoints. */
.phs-shd { position: fixed; inset: 0; background: rgba(22, 24, 31, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 9990; animation: phs-fade .25s ease; }
.phs-fabw { display: none; }

@media (max-width: 1100px) {
	.phs-card { grid-template-columns: 190px minmax(0, 1fr); }
	.phs-page { grid-template-columns: 244px minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.phs-page { grid-template-columns: minmax(0, 1fr); }
	.phs-rail { display: none; }
	.phs-rail.is-sheet { display: grid; position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 82vh; max-height: 82dvh; margin: 0; overflow-y: auto; background: var(--phs-surface); border-radius: 24px 24px 0 0; padding: 10px 16px 0; z-index: 9991; box-shadow: 0 -12px 40px rgba(22, 24, 31, .25); animation: phs-up .32s cubic-bezier(.2, .8, .2, 1); }
	/* Closing has keyframes of its own: the opening ones played in reverse
	   never ran, because a browser does not restart an animation whose name
	   has not changed, so the sheet simply vanished (DG, 14 Oct 2026). */
	.phs-rail.is-sheet.is-closing { animation: phs-down .22s cubic-bezier(.4, 0, 1, 1) forwards; }
	.phs-shd.is-closing { animation: phs-out .22s ease forwards; }
	.phs-rail.is-sheet .phs-shh { display: flex; align-items: center; gap: 10px; position: -webkit-sticky; position: sticky; top: -10px; background: var(--phs-surface); padding: 16px 0 8px; z-index: 2; }
	.phs-shh::before { content: ''; position: absolute; top: 5px; left: 50%; width: 40px; height: 5px; border-radius: 3px; background: var(--phs-line2); transform: translateX(-50%); }
	.phs-shh b { font-size: 18px; flex: 1; }
	.phs-rail.is-sheet .phs-shf { display: flex; position: -webkit-sticky; position: sticky; bottom: 0; background: var(--phs-surface); padding: 10px 0 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); gap: 10px; border-top: 1px solid var(--phs-line); }
	/* Slim, as buttons in a bar are (DG, 20 Oct 2026: "slim these"). */
	.phs-shf .phs-btn { flex: 1; min-height: 40px; padding: 0 16px; font-size: 13.5px; }
	.phs-mbar { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
	.phs-mbar::-webkit-scrollbar { display: none; }
	.phs-mbar .phs-fc { flex-shrink: 0; min-height: var(--pill-h, 32px); }
	.phs-vw { grid-template-columns: minmax(0, 1fr); }
	.phs-pl { position: relative; top: auto; max-height: none; max-width: 420px; width: 100%; margin: 0 auto; }
	.phs-ul { grid-auto-flow: column; grid-auto-columns: minmax(220px, 70%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.phs .phs-ui { scroll-snap-align: start; }

	/* The Filters handle (v3, dsx; from 900px down, so a tablet has one
	   too): a 14px dark tab on the left edge, held at 46% of the screen's
	   height, inside the page's 16px margin so it covers nothing. A
	   filter icon and, with filters on, a tiny pink count; a taller unseen
	   target that stays within 14px of the edge (v3, lmidwcs.zip), so it
	   does not catch taps meant for the results; a little fainter while
	   the page scrolls. It opens the filter sheet. */
	.phs-edge { display: block; position: fixed; left: 0; top: 46%; height: 0; z-index: 35; }
	.phs .phs-mbg { position: absolute; left: 0; top: 0; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 14px; min-width: 0; min-height: 0; padding: 14px 0; border-radius: 0 10px 10px 0; background: var(--phs-ink); color: #fff; box-shadow: 0 3px 10px rgba(22, 24, 31, .2); transition: opacity .2s; }
	.phs .phs-mbg::before { content: ""; position: absolute; left: 0; top: -18px; bottom: -18px; width: 14px; }
	.phs-edge.is-scr .phs-mbg { opacity: .7; }
	.phs-mbg svg { width: 11px; height: 11px; }
	.phs-mbg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.phs-mbg b { width: 12px; height: 12px; min-width: 0; padding: 0; border: 0; border-radius: 999px; background: var(--phs-pink); color: #fff; font-size: 8px; line-height: 12px; display: grid; place-items: center; }


	/* The floating Map button, on phones and tablets; hidden above 900px. */
	.phs-fabw { display: block; position: -webkit-sticky; position: sticky; bottom: 18px; height: 0; z-index: 30; }
	.phs .phs-fab { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--phs-ink); color: #fff; border-radius: 999px; padding: 0 22px; min-height: 48px; font-size: 14.5px; font-weight: 800; box-shadow: 0 8px 24px rgba(22, 24, 31, .35); white-space: nowrap; }
	.phs-fab svg { width: 17px; height: 17px; }

	.phs .phs-cmap { display: flex; }
	/* Close map takes the top left corner here, so Leaflet's zoom buttons sit under it. */
	.phs-map .leaflet-top.leaflet-left { top: 52px; }

}

@media (max-width: 600px) {
	.phs-in { padding-left: 16px; padding-right: 16px; }
	.phs-page { padding-top: 16px; }
	.phs-bar__in { padding-top: 12px; gap: 10px; }
	.phs-types { gap: 6px; padding-bottom: 12px; padding-right: 30px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
	.phs .phs-ty { padding: 6px 12px 6px 8px; }

	/* Filter pills a size up again on a phone, so they are easy to tap;
	   16px text in the boxes so iOS does not zoom. The card stacks:
	   photo on top, the logo inside its corner. */
	.phs .phs-fc { min-height: var(--pill-h, 32px); }
	.phs .phs-fsrch input { font-size: 16px; }
	.phs .phs-q__input { font-size: 16px; }
	.phs-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
	.phs-ph { min-height: 170px; border-radius: 18px 18px 0 0; }
	.phs-ph > img:first-child { border-radius: 18px 18px 0 0; }
	.phs-lg { bottom: 12px; width: 48px; height: 48px; }
	.phs-cb { padding: 16px 14px 14px; }
	.phs-cf { padding: 0 14px; flex-wrap: wrap; }
	.phs-h1r { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
	.phs-h1r__mk { width: 44px; height: 44px; }
	.phs-h1r .phs-btn { grid-column: 1 / -1; }
	.phs-none { grid-template-columns: minmax(0, 1fr); }

	.phs-map { height: 240px; border-radius: 0; border-left: 0; border-right: 0; margin-left: -16px; margin-right: -16px; }
	/* No "Search as I move the map" on a phone (handoff-media-wall 3.3). */
	.phs-here { display: none !important; }
	.phs-lgd { display: none; }
	.phs-pl { max-width: none; }
	.phs .phs-mpc { left: 10px !important; right: 10px; top: auto !important; bottom: 10px; width: auto; }

}

/* TABLET, 601 to 900px (handoff-tablet, 14 Oct 2026). The filters sheet
   comes up centred, at most 640px wide with 20px clear either side, its
   left edge set in CSS (no translateX: the slide-up animation owns the
   transform). The box is bigger; what is in it is NOT: DG, 14 Oct 2026,
   "keep the same dimensions but just make the filter box overall larger".
   The headings, pills, switches and buttons are the phone's sizes. The
   Map button is bigger.
   Videos: the player on the left sized from its height, Up next in one
   column beside it. The Heavy One button goes under its words. */
@media (min-width: 601px) and (max-width: 900px) {
	.phs-rail.is-sheet { width: min(640px, calc(100vw - 40px)); left: calc((100vw - min(640px, calc(100vw - 40px))) / 2); right: auto; max-height: 86vh; max-height: 86dvh; padding: 12px 26px 0; border-radius: 28px 28px 0 0; }
	.phs-fabw { bottom: 24px; }
	.phs .phs-fab { gap: 9px; padding: 0 26px; min-height: 54px; font-size: 16px; box-shadow: 0 10px 26px rgba(22, 24, 31, .3); }
	.phs-fab svg { width: 19px; height: 19px; }
	.phs-vw { grid-template-columns: auto minmax(0, 1fr); gap: 18px; }
	.phs-pl { height: min(560px, calc(100vh - 200px)); width: auto; max-width: none; max-height: none; aspect-ratio: 9 / 16; margin: 0; }
	.phs-ul { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
	.phs-h1r { grid-template-columns: 46px minmax(0, 1fr); }
	.phs-h1r .phs-btn { grid-column: 2; justify-self: start; }
	.phs-cf { padding-left: 76px; }
}

@keyframes phs-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes phs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes phs-down { from { transform: none; } to { transform: translateY(100%); } }
@keyframes phs-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.phs-rail.is-sheet, .phs-shd, .phs-rail.is-sheet.is-closing, .phs-shd.is-closing { animation: none; }
	.phs * { transition: none !important; }
}

/* ── v3 (20 Oct 2026) ──────────────────────────────────────────────
   Filter groups read like Sort by: each its own white card, the name on
   the left in sentence case, its current value in a pill on the right,
   the chevron at the end. Every heading is the same 48px, fixed rather
   than a minimum, so a long pick can never make one taller (DG, 14 Oct). */
.phs .phs-fs { background: none; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 10px; }
.phs .phs-fs .phs-g { background: #fff; border: 1px solid var(--phs-line); border-radius: 16px; overflow: hidden; }
.phs .phs-fs .phs-g:last-child { border-bottom: 1px solid var(--phs-line); }
.phs .phs-fs .phs-g[open] { border-color: var(--phs-ink); }
.phs .phs-fs .phs-g__h { height: 48px; min-height: 48px; max-height: 48px; padding: 0 12px 0 14px; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; gap: 10px; }
.phs .phs-fs .phs-g__t { flex: none; }
.phs .phs-fs .phs-g__h::after { margin-left: 0; }
.phs .phs-fs .phs-g__b { padding-top: 4px; }
/* The line under Price and Style sits inside the card's rounded corners,
   not across them (DG, 20 Oct 2026). */
.phs .phs-fs .phs-hint { margin: 0 !important; padding: 4px 16px 16px; line-height: 1.45; }

/* The Filters button beside the result count, on a computer only: phones
   and tablets have the tab on the right edge. */
.phs-rfb { display: none; }
.phs .phs-rfb__b { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--phs-ink); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; }
.phs .phs-rfb__b:hover { background: #000; color: #fff; }
.phs-rfb__b svg { width: 18px; height: 18px; flex: none; }
.phs-rfb__b b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--phs-pink); color: #fff; font-size: 11.5px; display: grid; place-items: center; }

@media (min-width: 901px) {
	.phs-rfb { display: block; flex: none; }
	.phs .phs-rh { align-items: center; }
	/* Every filter in a sheet that rises from the bottom, centred, as it
	   does on a tablet, so the Filters button opens the same thing in the
	   same place at every size (DG, 20 Oct 2026). Its top stays clear of
	   the admin bar. The results keep their column behind it. */
	.phs-rail.is-sheet { display: grid; align-content: start; position: fixed; top: auto; bottom: 0; right: auto; width: min(680px, calc(100vw - 80px)); left: calc((100vw - min(680px, calc(100vw - 80px))) / 2); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); margin: 0; padding: 12px 28px 0; overflow-y: auto; background: var(--phs-surface); border-radius: 28px 28px 0 0; z-index: 9991; box-shadow: 0 -12px 40px rgba(22, 24, 31, .25); animation: phs-up .32s cubic-bezier(.2, .8, .2, 1); }
	.phs-rail.is-sheet.is-closing { animation: phs-down .22s cubic-bezier(.4, 0, 1, 1) forwards; }
	.phs-rail.is-sheet .phs-shh { display: flex; align-items: center; gap: 10px; position: -webkit-sticky; position: sticky; top: -12px; background: var(--phs-surface); padding: 18px 0 12px; z-index: 2; }
	.phs-rail.is-sheet .phs-shh b { font-size: 20px; flex: 1; }
	.phs-rail.is-sheet .phs-shf { display: flex; gap: 10px; position: -webkit-sticky; position: sticky; bottom: 0; background: var(--phs-surface); padding: 12px 0 14px; margin-top: 6px; border-top: 1px solid var(--phs-line); }
	.phs-rail.is-sheet .phs-shf .phs-btn { flex: 1; min-height: 40px; padding: 0 16px; font-size: 13.5px; }
	.phs-rail.is-sheet .phs-fs .phs-g__h { height: 56px; min-height: 56px; max-height: 56px; font-size: 15px; }
	.phs-page:has(.phs-rail.is-sheet) > .phs-main { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.phs-rail.is-sheet, .phs-rail.is-sheet.is-closing { animation: none; }
}

/* ── v3 (ewd, 20 Oct 2026) ─────────────────────────────────────────
   The place in the title is a button that opens the location picker. */
.phs .phs-locb { display: inline-flex; align-items: baseline; gap: 4px; padding: 0; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline dotted #c3c7d1 2px; text-underline-offset: 5px; transition: color .15s, text-decoration-color .15s; }
.phs-locb svg { width: .7em; height: .7em; align-self: center; transition: transform .2s; }
.phs .phs-locb:hover, .phs .phs-locb[aria-expanded="true"] { color: var(--phs-ink); text-decoration-color: var(--phs-pink); text-decoration-style: solid; }
.phs-locb[aria-expanded="true"] svg { transform: rotate(180deg); }
.phs-lp { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 32px)); padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(22, 24, 31, .18), 0 0 0 1px var(--phs-line); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.32, .72, .28, 1); }
.phs-lp.is-on { opacity: 1; transform: none; pointer-events: auto; }
.phs-lp__gr { display: none; }
.phs-lp__q { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1.5px solid var(--phs-line2); border-radius: 12px; }
.phs-lp__q:focus-within { border-color: var(--phs-ink); }
.phs-lp__q svg { width: 16px; height: 16px; flex: none; color: var(--phs-ink3); }
.phs .phs-lp__q input { flex: 1; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none; background: none; font: inherit; font-size: 14.5px; font-weight: 600; }
.phs .phs-lp__near { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 10px; border-radius: 12px; background: none; font-size: 14px; font-weight: 700; color: #1d6f9c; }
.phs .phs-lp__near:hover { background: #e6f0f8; }
.phs-lp__near svg { width: 18px; height: 18px; }
.phs-lp__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 4px 6px; font-size: 12px; font-weight: 700; color: var(--phs-ink3); }
.phs .phs-lp__crumb button { padding: 2px 4px; border-radius: 6px; background: none; font: inherit; color: var(--phs-ink2); }
.phs .phs-lp__crumb button:hover { color: var(--phs-ink); background: var(--phs-surface); }
.phs-lp__crumb b { padding: 2px 4px; color: var(--phs-ink); }
.phs-lp__ll { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; margin: 8px -4px 0; padding: 0 4px; }
.phs .phs-lp__li { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 12px; background: none; font-size: 14.5px; font-weight: 700; color: var(--phs-ink); text-align: left; }
.phs .phs-lp__li:hover, .phs .phs-lp__li.is-kb { background: var(--phs-surface); }
.phs .phs-lp__li.is-on { background: var(--phs-pinks); color: var(--phs-pinkp); }
.phs-lp__li small { font-size: 12.5px; font-weight: 600; color: var(--phs-ink3); }
.phs-lp__n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--phs-ink3); }
.phs-lp__dr { width: 30px; height: 30px; margin-right: -6px; border-radius: 8px; display: grid; place-items: center; color: var(--phs-ink3); }
.phs-lp__n + .phs-lp__dr { margin-left: 0; }
.phs-lp__li > span:first-child + .phs-lp__dr { margin-left: auto; }
.phs-lp__dr:hover { background: #fff; color: var(--phs-ink); }
.phs-lp__dr svg { width: 16px; height: 16px; }
.phs-lp__em { padding: 14px 10px; font-size: 13.5px; color: var(--phs-ink3); }
.phs-lp__shd { display: none; }
/* v3 (dsx): the phone sheet's own heading, Close, back a level and the
   places picked lately; Popular cities under the list at every size. */
.phs-lp__hd, .phs-lp__bk, .phs-lp__rec { display: none; }
.phs-lp__pop { margin-top: 8px; padding: 12px 2px 2px; border-top: 1px solid var(--phs-line); }
.phs-lp__pop > span, .phs-lp__rec > span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--phs-ink3); }
.phs-lp__pop > div, .phs-lp__rec > div { display: flex; flex-wrap: wrap; gap: 6px; }
.phs .phs-lp__pc { flex: none; display: inline-flex; align-items: center; height: var(--pill-h, 32px); padding: var(--pill-pad, 0 11px); border: 1.5px solid var(--phs-line2); border-radius: 999px; background: #fff; font-size: var(--pill-fs, 12.5px); font-weight: var(--pill-fw, 700); color: var(--phs-ink); }
.phs .phs-lp__pc:hover { border-color: var(--phs-ink3); }
.phs .phs-lp__pc.is-on { background: var(--phs-ink); border-color: var(--phs-ink); color: #fff; }
@media (max-width: 600px) {
	/* On a phone the picker is a sheet from the bottom. */
	.phs-lp { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto; width: auto; max-height: 80vh; display: flex; flex-direction: column; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; transform: translateY(100%); z-index: 9992; }
	.phs-lp.is-on { transform: none; }
	.phs-lp__gr { display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 99px; background: var(--phs-line2); }
	.phs-lp__ll { max-height: none; flex: 1; }
	.phs-lp__shd { display: block; position: fixed; inset: 0; z-index: 9991; background: rgba(22, 24, 31, .4); opacity: 0; pointer-events: none; transition: opacity .2s; }
	.phs-lp__shd.is-on { opacity: 1; pointer-events: auto; }
	.phs-lp__hd { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 10px; }
	.phs-lp__hd b { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
	.phs .phs-lp__hd button { height: 34px; padding: 0 14px; border: 1.5px solid var(--phs-line2); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }
	.phs .phs-lp__bk { display: inline-flex; align-items: center; align-self: flex-start; height: 32px; margin-bottom: 10px; padding: 0 12px; border-radius: 999px; background: var(--phs-surface); font-size: 13px; font-weight: 700; color: var(--phs-ink); }
	.phs-lp__rec { display: block; padding-top: 12px; }
	.phs-lp__rec > div, .phs-lp__pop > div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.phs-lp__crumb { display: none; }
	.phs .phs-lp__li + .phs-lp__li { box-shadow: inset 0 1px 0 var(--phs-line); }
	.phs .phs-lp__li.is-on { box-shadow: none; }
}
/* On a computer the Filters button, the title and the cuisine pills stick
   under the search bar, on the page's own background, with a soft shadow
   once stuck. Phones and tablets keep their tab and Map button. */
@media (min-width: 901px) {
	.phs-rsk { position: -webkit-sticky; position: sticky; top: var(--phs-rsk-top, 0px); z-index: 20; margin: -22px -14px 0; padding: 22px 14px 2px; background: var(--phs-surface); transition: box-shadow .2s; }
	.phs-rsk.is-stuck { box-shadow: 0 10px 18px -12px rgba(22, 24, 31, .22); border-radius: 0 0 16px 16px; }
	.phs-rsk .phs-cu { margin-bottom: 12px; }
}

/* v3 (ewds, 20 Oct 2026): Describe it, at the top of the filters. A
   sentence sets them; what was read shows as pink chips with Undo. Sized
   like the panel's other search boxes, 13px words (DG: "too big"); a
   touch screen still gets 16px from ph-touch.css so iOS does not zoom. */
.phs-nlq { display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; padding: 0 4px 0 12px; height: 38px; background: #fff; border: 1.5px solid var(--phs-line2); border-radius: 999px; transition: border-color .15s, box-shadow .15s; }
.phs-nlq:focus-within { border-color: var(--phs-pink); box-shadow: 0 0 0 3px var(--phs-pinks); }
.phs-nlq > svg { flex: none; width: 15px; height: 15px; color: var(--phs-pink); }
.phs .phs-nlq input { flex: 1; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--phs-ink); }
.phs .phs-nlq input::placeholder { color: var(--phs-ink3); font-weight: 500; }
.phs .phs-nlq button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--phs-ink); color: #fff; font-size: 12.5px; font-weight: 800; }
.phs-nlr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 14px 12px; padding: 2px 4px; }
.phs-nlr[hidden] { display: none; }
.phs-nlr > span { flex: 1 0 100%; font-size: 12px; font-weight: 700; color: var(--phs-ink3); }
.phs-nlr b { padding: 5px 10px; border-radius: 999px; background: var(--phs-pinks); color: var(--phs-pinkp); font-size: 12.5px; font-weight: 700; }
.phs .phs-nlr button { padding: 5px 4px; font-size: 12.5px; font-weight: 700; color: var(--phs-ink2); text-decoration: underline; }
.phs-nlr small { flex: 1 0 100%; font-size: 12px; font-weight: 700; color: var(--phs-ink2); }