/* One place (place.html), 1 Nov 2026 redesign - the system is site.css (tokens, header, buttons, fields, status badge, cards, glass, footer). This file is the layout of the page:
   a 1 + 4 photo gallery, title + meaning line, the facts and the map on the left, a sticky enquiry box on the right (a glass bar on a phone), similar places below. */
.place { padding-block: 16px 0; display: grid; gap: 16px; min-width: 0; }
.place-page { overflow-x: clip; }

/* ---------- top row: back, position, previous / next ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager .pos { color: var(--ink-3); font-size: 15px; font-variant-numeric: tabular-nums; }
.pager .pn { display: flex; gap: 4px; margin-inline: -12px; }   /* the links' own 12px padding hangs outside, so their TEXT lines up with 'All places' and the page edge */
.pager .pn .btn, .pager .pn .btn:hover, .pager .pn .btn:active, .pager .pn .btn:focus-visible { background: transparent; border-color: transparent; box-shadow: none; transform: none; color: var(--ink-3); font-weight: 500; padding: 0 12px; text-decoration: none; }   /* Previous / Next place: the SAME quiet text link, in every state (6 Nov lane A, O14: hover no longer turns one into a pill) */
.pager .pn .btn:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.missing { padding-block: 72px; display: grid; gap: 14px; justify-items: start; }

/* ---------- title ---------- */
.topblock { display: grid; gap: 20px; min-width: 0; }
.ptitle { display: grid; gap: 6px; margin: 0; }
.ptitle h1 { font-size: clamp(2rem, 1.2rem + 2.5vw, 3.2rem); }
.addr { color: var(--ink-2); font-size: 19px; }
.smean { color: var(--ink-3); font-size: 15px; }
.pprice { display: none; }
main.place:has(> #placeBody[hidden]):has(> #missing[hidden]) { min-height: 100vh; min-height: 100dvh; align-content: start; }   /* round 8 (cold review #2): while the place loads, the footer waits below the screen instead of painting at the top and jumping down */
@media (max-width: 999px) { .pprice { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; } .pprice b { font: 700 34px var(--head); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .pprice b.ask { font-size: 26px; } .pprice span { color: var(--ink-3); } }

/* ---------- gallery: one big photo + four small ones in ONE box (no gap under the photo); "Show all photos" is a glass pill on the photos ---------- */
.gallery { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; height: clamp(340px, 34vw, 500px); border-radius: 28px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.gallery.solo { grid-template-columns: minmax(0, 1fr); }
.stage { position: relative; min-height: 0; min-width: 0; background: var(--green-wash); overflow: hidden; }
.zoom { all: unset; display: block; position: relative; width: 100%; height: 100%; cursor: zoom-in; }
.zoom img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--green-wash); }
.zoom:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.zoom:focus-visible::after, .tiles button:focus-visible::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 6px #fff; }   /* the white band keeps the green ring readable on any photo */
.tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; min-width: 0; }
.tiles button { border: 0; padding: 0; overflow: hidden; background: var(--green-wash); cursor: pointer; min-height: 0; min-width: 0; position: relative; }
.tiles img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tiles button:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.tiles.n1 button { grid-area: 1 / 1 / 3 / 3; }                      /* 1 small photo fills the column */
.tiles.n2 button { grid-column: 1 / 3; }                            /* 2: one above the other */
.tiles.n3 button:first-child { grid-column: 1 / 3; }                /* 3: one wide, two below */
.g-status { position: absolute; left: 16px; top: 16px; z-index: 2; pointer-events: none; }
.pheart { top: 12px; right: 12px; }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--ink); font: 400 30px/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0 0 4px; box-shadow: var(--shadow-md); transition: background .15s, color .15s; }
.arrow:hover { background: #fff; color: var(--green); }
.arrow.prev { left: 16px; } .arrow.next { right: 16px; }
.counter { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 6px 14px; border-radius: var(--r-pill); background: var(--glass-strong); font: 600 14px var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.showall { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--glass-strong); font: 600 16px var(--body); color: var(--ink); cursor: pointer; }
.showall:hover { background: #fff; color: var(--green); }
.gallery.nophoto .stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--green-wash), var(--aqua)); z-index: 0; }
.gallery.nophoto .counter { z-index: 2; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .tiles img, .zoom img { transition: transform .45s var(--ease); }
  .tiles button:hover img, .zoom:hover img { transform: scale(1.03); }
}
@media (min-width: 1000px) and (max-width: 1119px) { .gallery { grid-template-columns: minmax(0, 1fr); } .tiles { display: none; } }   /* the left column is narrow here: one big photo, the arrows and Show all photos */
@media (max-width: 760px) {
  .gallery { grid-template-columns: minmax(0, 1fr); height: auto; aspect-ratio: 4 / 3; border-radius: 22px; }
  .tiles { display: none; }
  .arrow { width: 44px; height: 44px; font-size: 28px; }
  .showall { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .counter { display: none; }
}

/* ---------- the two columns ---------- */
.cols { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .cols { grid-template-columns: minmax(0, 1fr) 404px; gap: 72px; align-items: start; } }
.maincol { display: grid; gap: 56px; min-width: 0; }
.block { display: grid; gap: 18px; min-width: 0; align-content: start; }
.block h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
.desc { font-size: 19px; color: var(--ink-2); max-width: 66ch; line-height: 1.65; }
.note { color: var(--ink-3); font-size: 16px; max-width: 70ch; }
ul.facts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; border-top: 1px solid var(--line); }
ul.facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); min-width: 0; }
ul.facts span { color: var(--ink-3); flex: none; }
ul.facts b { color: var(--ink); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
ul.facts li.long { grid-column: 1 / -1; display: block; }
ul.facts li.long b { display: block; text-align: left; margin-top: 4px; font-weight: 500; }
@media (max-width: 640px) { ul.facts { grid-template-columns: minmax(0, 1fr); } }
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 28px; }
.incl li { display: flex; align-items: center; gap: 12px; padding-block: 8px; color: var(--ink); }
.incl i { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.incl .yes i { background: var(--green); border-color: var(--green); }
.incl .yes i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.incl .no i { border-color: var(--red); }
.incl .no span { color: var(--ink-3); }
.trips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.trips li { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-bottom: 1px solid var(--line); min-width: 0; }   /* one row per destination; the padding is inside, so a marked row lines up with the others */
.trips li[hidden] { display: none; }
.trips li i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--green-wash); color: var(--green-hi); }
.trips li span { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.trips b { color: var(--green); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 7.2em; text-align: right; }
.trips li.pref { background: var(--green-wash); border-radius: 14px; border-bottom-color: transparent; }
.trips li.pref i { background: #fff; }
.tmore { justify-self: start; min-height: 44px; }
.duo { display: grid; gap: 56px; min-width: 0; }
@media (min-width: 1680px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; } .duo:has(> #tripsBlock[hidden]) { grid-template-columns: minmax(0, 1fr); } .duo .pmap { height: 380px; } }   /* a wide screen: Getting around and the map side by side */
.pmap { height: 420px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
@media (max-width: 720px) { .pmap { height: 320px; border-radius: 20px; } }

/* ---------- the enquiry box: sticky on a desktop, plain on a phone (the glass bar below takes you to it) ---------- */
.side { min-width: 0; }
@media (min-width: 1000px) { .side { position: sticky; top: var(--side-top, 96px); } }   /* place.js lowers --side-top when the box is taller than the screen, so it sticks by its bottom (no scrollbar inside it) */
body.place-page { background: radial-gradient(45% 40% at 92% 12%, #CFE9FB 0, transparent 70%) no-repeat, radial-gradient(35% 30% at 4% 0, #D3F1EE 0, transparent 70%) no-repeat, var(--bg); background-size: 100% 1400px; }   /* 6 Nov lane A (A6): a soft sky bloom behind the enquiry card + a faint teal one top-left (sized to the first 1400 px so a long page never stretches it) */
.contact { display: grid; gap: 10px; padding: 22px 22px 20px; border-radius: 28px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15,118,110,.06), 0 2px 6px rgba(15,118,110,.06), 0 28px 64px rgba(15,118,110,.16); }   /* 6 Nov lane A (A6): the money piece lifts - glass-strong + a white rim + a soft teal shadow (REPLACES the flat white box + --shadow-lg) */
#contact { scroll-margin-top: 96px; }
@media (min-width: 1000px) { #contact { scroll-margin-top: 168px; } }   /* round 8: on a computer the box starts near the top, so a jump to it (#contact) keeps the "All places / Previous / Next" row clear of the sticky header */
.contact h2 { font-size: 24px; letter-spacing: -.025em; }
.contact .cprice { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }   /* scoped to the enquiry box: the cards' own .cprice (site.css) must stay as on the list page */
.contact .cprice b { font: 700 38px var(--head); color: var(--ink); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.contact .cprice b.ask { font-size: 28px; }
.contact .cprice span { color: var(--ink-3); font-size: 17px; }
.contact .cprice .cmin { flex-basis: 100%; font-size: 15px; }
.cfor { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cnote { padding: 12px 16px; border-radius: 14px; background: var(--green-wash); border-left: 4px solid var(--accent); color: var(--ink); font-weight: 600; font-size: 16px; }
.cnote.warn { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn-ink); }
#cForm, .report form { display: grid; gap: 12px; }
.frow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; align-items: start; }   /* an error under one box never pushes its neighbour down */
/* 2 Nov (Roy): length of stay = 3 range buttons, number of people = 1 / 2 / 3 / 4+ buttons. Real radio buttons (one choice, arrow keys, a real disabled
   state), drawn as pills; the round dot itself is hidden but still focusable */
fieldset.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.pills legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; }   /* float = the legend sits inside the flex row like a label */
.pills label { position: relative; flex: 1 1 auto; }
#cPeople label { flex: 1 1 0; }
.pills label input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.pills label span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: 600 15px var(--body); white-space: nowrap; font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s, box-shadow .18s var(--ease); }
#cStay label { flex: 1 1 0; min-width: 0; }   /* 6 Nov lane A (O4): the 3 lengths of stay = 3 equal buttons on ONE row (was 2 + 1) */
#cStay { gap: 6px; }
#cStay label span { padding: 0 4px; font-size: 14px; }   /* 14 px: '6 to 12 months' keeps 6 px of air inside a 358 px card */
@media (max-width: 440px) { #cStay label span { min-height: 52px; padding: 4px 6px; border-radius: 18px; white-space: normal; text-align: center; line-height: 1.15; } }   /* a phone too narrow for '6 to 12 months' on one line: still 3 equal buttons on one row, each label on 2 short lines */
.pills label:hover input:enabled + span { border-color: var(--green); background: var(--green-wash); }
.pills input:checked + span { background: var(--grad-btn); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 14px rgba(3,105,161,.24); }   /* 6 Nov lane A (A4): selected = the button gradient (was flat teal) */
.pills input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.pills input:disabled { cursor: not-allowed; }
.pills input:disabled + span { color: var(--ink-3); background: var(--surface); border-color: var(--line); opacity: .7; }   /* a range this place can't take: visible but quiet (no strike-through, no dashed edge); #stayNote says why */
.pills[aria-invalid="true"] input:enabled + span { border-color: var(--red); }
.contact fieldset.pills[aria-invalid="true"] { box-shadow: none; }
.pills .pnote, .pills .ferr { flex-basis: 100%; margin: 0; }
.pnote { color: var(--ink-3); font-size: 14px; font-weight: 500; }
.frow.eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contact .field input, .contact .field select { min-height: 52px; padding-inline: 14px; font-size: 16px; min-width: 0; }
.contact .field select { padding-right: 40px; background-position: right 12px center; }
.contact input[type="date"] { padding-inline: 14px 12px; font: 500 16px var(--body); color: var(--ink); cursor: pointer; }   /* 6 Nov lane A (O15): the move-in date matches the other boxes - same font, the site's own calendar icon, muted 'dd/mm/yyyy' until a date is picked */
.contact input[type="date"]:invalid:not(:focus) { color: var(--ink-3); }
.contact input[type="date"]::-webkit-datetime-edit { padding: 0; }
.contact input[type="date"]::-webkit-calendar-picker-indicator { width: 20px; height: 20px; padding: 4px; margin: 0; border-radius: 8px; cursor: pointer; opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 20px no-repeat; }
.contact input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: var(--green-wash); }
@media (max-width: 520px) { .frow, .frow.eq { grid-template-columns: minmax(0, 1fr); } }
.ctotal { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--green-wash); margin-top: -4px; }
.ctotal b { font: 700 19px var(--head); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ctotal span { font-size: 15px; color: var(--ink-2); }
.contact [aria-invalid="true"], .contact [aria-invalid="true"]:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.err { color: var(--red-ink); font-weight: 600; font-size: 15px; }
.err:empty { display: none; }
.field .ferr { margin-top: 0; }
.send { width: 100%; justify-content: space-between; padding-left: 28px; }
.small { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.small a { color: var(--ink-3); }
.sent { display: grid; gap: 10px; padding: 20px; border-radius: 18px; background: var(--green-wash); border: 1px solid #BDE5E6; }
.sent b { font: 700 24px var(--head); color: var(--ink); letter-spacing: -.025em; }
.sent span { color: var(--ink-2); }
.sent a { color: var(--green); font-weight: 600; }
.ok { color: var(--ok-ink); font-weight: 600; }
.cgone { display: grid; gap: 16px; color: var(--ink-2); }
.cgone .btn { width: 100%; text-align: center; text-wrap: balance; height: auto; padding-block: 12px; }

/* ---------- similar places ---------- */
.similar { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--line); display: grid; gap: 28px; }
.sim-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; }
.sim-head h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
@media (min-width: 900px) { .similar .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- report ---------- */
.report { margin-top: 56px; max-width: 700px; border-top: 1px solid var(--line); margin-bottom: clamp(64px, 7vw, 112px); }   /* final Z (O3-6): the page's last section keeps clear room above the footer */
.report summary { cursor: pointer; padding: 16px 0; color: var(--ink-3); font-weight: 600; min-height: 44px; }
.report summary:hover { color: var(--green); }
.report form { padding: 4px 0 24px; max-width: 520px; }

/* ---------- phone: a glass bar with the price and Enquire until the box itself is on screen ---------- */
.cbar { display: none; }
@media (max-width: 999px) {
  .cbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 900; padding: 8px 8px 8px 22px; border-radius: var(--r-pill); background: var(--glass-text); transition: transform .25s var(--ease), visibility .25s; }
  .cbar.off { transform: translateY(150%); visibility: hidden; }
  .cbp { font-size: 16px; color: var(--ink-2); }
  .cbp b { font: 700 24px var(--head); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .cbar .btn { min-height: 48px; padding: 0 8px 0 22px; font-size: 16px; white-space: nowrap; }
  /* ONE bottom bar (review 2 Nov): the tray is not a fixed bar on this page (it sits under the enquiry box, below); the bar carries a "Compare (N)" chip (place.js) */
  .cbar .cbc { margin-left: auto; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: 600 15px var(--body); white-space: nowrap; cursor: pointer; }
  .cbar .cbc[hidden] { display: none; }
  .cbar .cbc:hover { border-color: var(--green); background: var(--green-wash); }
  .cbar .cbc:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
  .foot { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- larger photo (only after a click): dark backdrop, glass arrows ---------- */
.lightbox { position: fixed; inset: 0; z-index: 3000; background: radial-gradient(60% 60% at 50% 45%, #0F3A42 0, #082F35 60%, #061F26 100%); display: grid; place-items: center; padding: 64px 96px; }
.lightbox img { width: auto; height: auto; max-width: calc(100vw - 192px); max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); object-fit: contain; border-radius: 14px; }
.lightbox :focus-visible { outline-color: #fff; }   /* the dark backdrop needs a white ring */
.lb-count { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 6px 16px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); color: #fff; font: 600 16px var(--body); font-variant-numeric: tabular-nums; }
.lb-close { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; font: 400 30px/1 var(--body); cursor: pointer; }
.lb-close:hover { background: #fff; color: var(--green); }
.lightbox .arrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.lightbox .arrow:hover { background: #fff; color: var(--green); }
@media (max-width: 720px) { .lightbox { padding: 72px 10px; } .lightbox img { max-width: calc(100vw - 20px); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); } .lightbox .arrow { width: 44px; height: 44px; } .lightbox .arrow.prev { left: 8px; } .lightbox .arrow.next { right: 8px; } }

.leaflet-container a.pop, .leaflet-container .cluster-pop a { color: var(--ink); }   /* Leaflet's own blue link colour would win over .pop */
.leaflet-container a.pop em, .leaflet-container .cluster-pop a em { color: var(--green); }

/* ---------- the shortlist tray on this page (review 2 Nov) ---------- */
/* every width: the tray sits under the enquiry box (shortlist.js puts it in [data-tray-home]), in the page flow, so it never covers the facts, the form or anything else */
body.place-page .side .tray { position: static; transform: none; width: 100%; max-width: none; box-sizing: border-box; margin-top: 16px; gap: 10px; }
body.place-page .side .tray[hidden] { display: none; }
body.place-page .side .tray-text { flex: 1 1 auto; min-width: 0; white-space: normal; }
body.place-page .side .tray .btn { padding: 0 18px; }
/* example text in a box reads as an example, not a filled-in value */
body.place-page ::placeholder { color: #9AA9AD; opacity: 1; }
@media (max-width: 999px) { .place-page:has(#cBar:not([hidden])) .pprice { display: none; } }   /* round 8 (cold review #8): the floating bar already shows the price on tablets and phones, so the heading does not repeat it (the photo moves up); a Currently unavailable place has no bar and keeps it */
@media (max-width: 440px) { #cStay label { flex: 1 1 calc(50% - 4px); } #cStay label:last-of-type { flex-basis: 100%; } }   /* final X (F3): phone = 2 + 1, every stay pill stays on one line */