/* Inter, served from the site (OFL, assets/fonts/ofl-license.txt). Until it
   arrives, Arial scaled to Inter's metrics takes its place, so the swap does
   not move the page (QA UX-01: CLS up to 0.5 with the Google font). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; }

/* TubHotels design tokens & base styles (v4, modern compact pass) */
:root {
  --gold: #F1B302;          /* the button colour (Bosko, 26 Sep; was #F1A502) */
  --gold-dark: #d9a102;
  --cta-text: #16181A;
  /* gold for text on white or cream: 5.9:1 (the #d99502 above is 2.5:1, QA A11Y-02) */
  --gold-text: #8a5a00;
  --black: #111111;
  --text: #1f2430;
  --muted: #5f6673;
  --bg: #ffffff;
  --bg-alt: #F6F5F2;
  --border: #e6e8ec;
  --border-strong: #d6d9de;
  --radius-card: 16px;
  --radius-btn: 10px;
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* set by /_review/fonts.html once a family is picked */
  --shadow-card: 0 1px 2px rgba(17,17,17,.04), 0 2px 8px rgba(17,17,17,.05);
  --shadow-hover: 0 4px 10px rgba(17,17,17,.08), 0 12px 28px rgba(17,17,17,.10);
  --maxw: 1120px;
  /* type scale — 7 steps, used through var(); no raw px sizes */
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 16.5px;
  --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 32px; --fs-3xl: 42px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Header / nav
   Wide screens: two rows. Top: logo, a long search with its own button, and
   the short links (Map, Blog, FAQs, Guides). Below: the three destination
   menus. The grid puts the two lists of the one <nav> into those rows. */
.site-header { border-bottom: 1px solid var(--border); background: #fff; position: sticky; top: 0; z-index: 50; }
.site-header .container { display: grid; align-items: center; column-gap: 28px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo search util" "primary primary primary"; }
.logo { grid-area: logo; font-weight: 700; font-size: var(--fs-lg); text-decoration: none; letter-spacing: -.005em; }
.logo span { color: var(--gold); }
.site-header .site-search { grid-area: search; width: 100%; max-width: 620px; margin: 10px 0; }
.mainnav { display: contents; }
.nav-primary { grid-area: primary; margin: -4px 0 0 -10px !important; padding-bottom: 6px !important; }
.nav-util { grid-area: util; margin-right: -10px !important; }
/* ---- main navigation ---- */
.navtoggle, .navburger { display: none; }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mainnav ul > li > a,
.mainnav summary { display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-weight: 500; font-size: var(--fs-base); list-style: none; padding: 7px 10px; border-radius: 8px;
  text-decoration: none; color: var(--text); white-space: nowrap; transition: background .15s, color .15s; }
.nav-primary { gap: 6px !important; }
.mainnav ul > li > a:hover, .mainnav summary:hover { background: var(--bg-alt); color: var(--text); }
.mainnav summary::-webkit-details-marker { display: none; }
/* a small filled triangle, the way a select box says "there is more here" */
.caret { width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-top: 6px solid currentColor; opacity: .6; transition: transform .15s; }
.mainnav details[open] > summary { background: var(--bg-alt); }
.mainnav details[open] > summary .caret { transform: rotate(180deg); }
.nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,.10); z-index: 60; }
.nav-panel-inner { max-width: var(--maxw); margin: 0 auto; padding: 20px 24px 24px; }
.nav-panel-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.nav-head { font-weight: 700; font-size: var(--fs-sm); text-decoration: none; color: var(--text); }
a.nav-head:hover { color: var(--gold-text); }
.nav-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1px 22px; max-height: 62vh; overflow: auto; }
.nav-cols-2 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.nav-cols a { text-decoration: none; font-size: var(--fs-sm); padding: 6px 0; color: var(--muted); }
.nav-cols a:hover { color: var(--gold-text); }
.nav-cols a.nav-all { color: var(--text); font-weight: 600; }
/* cabins: a state (or country) heading, its towns and areas under it */
.nav-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px 22px; }
.ng { display: flex; flex-direction: column; min-width: 0; }
.ng-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text); text-decoration: none; padding: 5px 0; }
a.ng-head:hover { color: var(--gold-text); }
.ng a:not(.ng-head) { font-size: var(--fs-sm); color: var(--muted); text-decoration: none;
  padding: 4px 0 4px 10px; border-left: 1px solid var(--border); }
.ng a:not(.ng-head):hover { color: var(--gold-text); border-left-color: var(--gold); }
.pane-note { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

@media (max-width: 900px) {
  .site-header .container { grid-template-columns: 1fr auto; column-gap: 12px;
    grid-template-areas: "logo burger" "search search" "nav nav"; position: relative; }
  .logo { padding: 14px 0; }
  .navburger { grid-area: burger; display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 12px 6px; }
  .navburger span { display: block; width: 21px; height: 2px; background: var(--text); border-radius: 2px; }
  .site-header .site-search { max-width: none; margin: 0 0 10px; }
  .mainnav { display: none; grid-area: nav; padding-bottom: 12px; }
  .navtoggle:checked ~ .mainnav { display: block; }
  .mainnav ul, .nav-primary, .nav-util { flex-direction: column; align-items: stretch; gap: 0 !important;
    margin: 0 !important; padding: 0 !important; }
  .mainnav ul > li { border-top: 1px solid var(--border); }
  .mainnav summary, .mainnav ul > li > a { justify-content: space-between; padding: 12px 2px; border-radius: 0;
    font-size: var(--fs-base); font-weight: 600; }
  .nav-panel { position: static; border: none; box-shadow: none; background: var(--bg-alt); border-radius: 10px; }
  .nav-panel-inner { padding: 12px 14px; }
  .nav-cols { max-height: 44vh; }
  .nav-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---- site search (header + hero) ----
   One component, two sizes. The dropdown is an ARIA combobox listbox: rows are
   grouped by kind, the active row is always highlighted, and the list is capped
   so it never grows its own scrollbar. */
.site-search { position: relative; flex: 0 0 auto; width: 244px; }
.search-field { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 3px 0 14px; height: 40px;
  transition: border-color .15s, box-shadow .15s; }
.search-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(241,179,2,.18); }
.search-icon { color: var(--muted); flex: 0 0 auto; }
.search-input { border: 0; outline: 0; background: transparent; font: inherit;
  font-size: var(--fs-sm); color: var(--text); width: 100%; padding: 0; min-width: 0; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { display: none; }
.search-clear { border: 0; background: transparent; color: var(--muted); font-size: 19px;
  line-height: 1; cursor: pointer; padding: 0 1px; }
.search-clear:hover { color: var(--text); }
.search-go { flex: 0 0 auto; border: 0; cursor: pointer; background: var(--gold); color: #111;
  font: inherit; font-weight: 600; font-size: var(--fs-sm); border-radius: 999px;
  height: 32px; padding: 0 16px; transition: background .15s; }
.search-go:hover { background: var(--gold-dark); }

.search-results { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-hover); overflow: hidden; text-align: left; }
.search-group { font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase; padding: 9px 14px 5px;
  background: var(--bg-alt); border-top: 1px solid var(--border); }
.search-results > .search-group:first-child { border-top: 0; }
.search-opt { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  text-decoration: none; color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
.search-opt .so-ico { flex: 0 0 18px; color: var(--muted); display: grid; place-items: center; }
.search-opt .so-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the part the user has NOT typed is what carries the suggestion, so that is
   what gets the weight (Baymard: emphasise the predictive portion) */
.search-opt b { font-weight: 600; }
.search-opt .so-sub { color: var(--muted); font-weight: 400; }
.search-opt .so-n { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.search-opt.is-active, .search-opt:hover { background: #fff7e6; }
.search-opt.is-active .so-ico, .search-opt:hover .so-ico { color: var(--gold-text); }
.search-note { padding: 14px; color: var(--muted); font-size: var(--fs-sm); }
.search-note strong { color: var(--text); font-weight: 600; }

/* big variant — hero */
.search-big { width: 100%; max-width: 620px; }
/* Stats bar: the strip between the hero and the first section. Built like a
   small dashboard row (label, stat, divider, stat) so it reads as a designed
   element and not as two numbers left in the middle of the page. */
.band.band-counts { padding: 22px 0; }
.stats { display: flex; align-items: center; justify-content: center; gap: 0 34px; }
.stats-head { margin: 0; padding-right: 34px; border-right: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; line-height: 1.35; white-space: nowrap;
  align-self: stretch; display: flex; align-items: center; }
.stat { display: flex; align-items: center; gap: 13px; }
.stat-ico { flex: 0 0 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: #fff6e0; color: var(--gold-text); }
.stat-body { display: flex; flex-direction: column; align-items: flex-start; }
.count { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  color: var(--text);
  /* every digit the same width, so a counting number does not jitter */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.stat-lbl { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; margin-top: 2px;
  white-space: nowrap; }
.stat-sep { width: 1px; align-self: stretch; background: var(--border); }
.search-big .search-field { height: 52px; border-radius: 999px; padding: 0 5px 0 18px; gap: 11px;
  border-color: #e4e2dc; box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 6px 18px rgba(17,17,17,.05); }
.search-big .search-input { font-size: var(--fs-md); }
.search-big .search-go { height: 42px; padding: 0 22px; font-size: var(--fs-base); }
.search-big .search-results { border-radius: 14px; }
.search-geo { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  min-height: 28px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.search-geo svg { width: 15px; height: 15px; }
.search-geo:hover { color: var(--gold-text); }
.search-geo[disabled] { opacity: .6; cursor: default; text-decoration: none; }

@media (max-width: 900px) {
  .site-search { width: 100%; }
  /* the homepage hero already shows one; see site.js */
  .site-header .search-hideable { display: none; }
  .site-header .search-hideable.search-revealed { display: block; }
  .site-header .container { row-gap: 0; padding-bottom: 0; }
  .search-results { position: fixed; left: 8px; right: 8px; top: auto; width: auto;
    max-height: 62vh; overflow: auto; -webkit-overflow-scrolling: touch; }
}

/* Head: breadcrumbs, h1, facts, intro */
.breadcrumbs { font-size: var(--fs-xs); color: var(--muted); padding: 14px 0 0; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs span { color: var(--text); }
.page-head { padding: 12px 0 4px; }
h1 { font-size: clamp(22px, 2.7vw, 30px); line-height: 1.18; margin: 0; letter-spacing: -.005em; }
.page-facts { font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 12px; }
.page-facts strong { color: var(--text); font-weight: 600; }
.intro { font-size: var(--fs-base); line-height: 1.6; color: #3a4150; max-width: 720px; margin: 0 0 4px; }
.intro p { margin: 0 0 8px; }

/* Sections */
.section { padding: 20px 0; }
h2 { font-size: clamp(18px, 2.1vw, 22px); letter-spacing: 0; margin: 0 0 6px; }
.section-lead { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 14px; max-width: 720px; }

/* Comparison / category table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
table.cat-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 720px; }
.cat-table th { text-align: left; background: var(--bg-alt); padding: 11px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cat-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cat-table tr:last-child td { border-bottom: none; }
.cat-table tr:hover td { background: #fffdf6; }
.cat-table .cat { font-weight: 600; white-space: nowrap; }
.cat-table .hotel-name { font-weight: 600; }
.cat-table .room { color: var(--muted); font-size: var(--fs-xs); display: block; margin: 2px 0 0; }
.cat-table a.rate-link { display: inline-block; margin-top: 6px; color: var(--gold-text);
  font-weight: 500; text-decoration: none; font-size: var(--fs-xs); white-space: nowrap; }
.cat-table a.rate-link:hover { text-decoration: underline; }
.verify-table td:first-child { white-space: nowrap; font-weight: 600; }
.table-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; }

/* Listing toolbar — sticky under header */
.listing { padding-top: 8px; }
.listing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; top: 58px; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px); padding: 10px 0; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.filters { position: relative; }
.filters summary { list-style: none; cursor: pointer; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary.has-active { box-shadow: 0 0 0 3px rgba(241,179,2,.28); }
.filter-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-hover); padding: 18px 20px; width: min(780px, 92vw); display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 18px 26px; }
.fgroup h4 { margin: 0 0 9px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.fgroup-amen { grid-column: 1 / -1; }
.fopts { display: flex; flex-direction: column; gap: 7px; }
.fgroup-amen .fopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 7px 18px; }
.fopts-stars { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.fopt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; line-height: 1.3; }
.fopt input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; margin: 0; }
.fopts-stars .fopt span { color: var(--gold); letter-spacing: 1px; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input { width: 100%; min-width: 0; font: inherit; font-size: var(--fs-sm); padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 9px; }
.price-inputs input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(241,179,2,.18); }
.price-inputs span { color: var(--muted); }
.filter-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; }
.f-reset { background: none; border: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0; }
.f-reset:hover { color: var(--text); }
.f-count { font-size: var(--fs-sm); font-weight: 700; }
.no-results { text-align: center; padding: 28px 0; color: var(--muted); font-size: var(--fs-base); }
.f-reset-inline { background: none; border: none; font: inherit; font-weight: 600; color: var(--gold-text); cursor: pointer; text-decoration: underline; padding: 0; }
.card[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--border-strong); background: #fff; border-radius: 999px; padding: 6px 13px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: all .12s; }
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--black); color: #fff; border-color: var(--black); }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.sort select { font: inherit; font-weight: 500; color: var(--text); padding: 7px 30px 7px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center; -webkit-appearance: none; appearance: none; cursor: pointer; }
.listing-count { font-size: var(--fs-sm); color: var(--muted); margin: 12px 0 14px; }
.listing-count strong { color: var(--text); }

/* Hotel cards */
.cards { display: grid; gap: 16px; }
.card { display: grid; grid-template-columns: 260px 1fr; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); transition: box-shadow .18s, transform .18s, border-color .18s; }
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: var(--border-strong); }
.card-img { position: relative; min-height: 210px; background: var(--bg-alt); }
.card-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 38%); pointer-events: none; }
.badges { position: absolute; top: 9px; left: 9px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 2; max-width: calc(100% - 18px); }
.badge { background: rgba(255,255,255,.96); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; padding: 4px 9px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.badge.citylabel { background: var(--gold); color: #111; }
.placement-label { position: absolute; left: 10px; bottom: 9px; z-index: 2; color: #fff; font-size: var(--fs-xs); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.card h3 { margin: 0; font-size: var(--fs-md); line-height: 1.25; letter-spacing: 0; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--gold-text); }
.addr { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.addr .stars { color: var(--gold); letter-spacing: 1px; }
.score { text-align: right; white-space: nowrap; flex-shrink: 0; }
.score .val { display: inline-block; background: var(--gold); color: #111; font-weight: 600; border-radius: 8px; padding: 3px 9px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.score .rev { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.room-line { font-size: var(--fs-sm); font-weight: 600; margin-top: 2px; }
.room-meta { font-size: var(--fs-xs); color: var(--muted); }
.card-desc { font-size: var(--fs-sm); line-height: 1.5; margin: 3px 0; color: #3a4150; }
.amenities { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0; }
.amenity-chip { display: inline-block; border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); background: var(--bg-alt); }
.amenity-chip.more { background: none; border: none; align-self: center; }
.card-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.price { font-size: var(--fs-sm); color: var(--muted); }
.price strong { font-size: var(--fs-lg); color: var(--text); font-weight: 700; }
.price span { color: var(--muted); font-size: var(--fs-xs); }
.cta-group { display: flex; gap: 10px; align-items: center; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; border-radius: 999px; padding: 10px 22px; font-size: var(--fs-sm); cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--gold); color: #111; }
.btn-primary:hover { background: var(--gold-dark); }
.btn-gold { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn-gold:hover { border-color: var(--gold); color: var(--gold-text); }
/* the one filled call to action, used sparingly */
.btn-cta { background: var(--gold); color: #111; border-color: var(--gold); font-weight: 600; }
.btn-cta:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.details-link { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--muted); }
.details-link:hover { color: var(--text); }

/* Greater-area section */
.greater { border-top: 1px solid var(--border); margin-top: 4px; }
.greater > h2 { color: var(--text); }
.greater .section-lead { max-width: 760px; }

/* Prose / FAQ */
.prose { max-width: 760px; font-size: var(--fs-base); line-height: 1.65; }
.prose p { margin: 0 0 10px; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.prose th { background: var(--bg-alt); }
.faq details { border: 1px solid var(--border); border-radius: 12px; padding: 0; margin-bottom: 8px; background: #fff; transition: border-color .12s; }
.faq details[open] { border-color: var(--border-strong); }
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--fs-base); padding: 14px 44px 14px 16px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 16px; top: 12px; font-size: var(--fs-md); color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: '\2013'; }
.faq .answer { padding: 0 16px 14px; font-size: var(--fs-sm); line-height: 1.6; color: #3a4150; }

/* Nearby cities grid */
.nearby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 14px; }
.nearby-tile { position: relative; display: block; border-radius: 14px; overflow: hidden; min-height: 158px; background: var(--bg-alt); text-decoration: none; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s; }
.nearby-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.nearby-tile img { width: 100%; height: 158px; object-fit: cover; filter: brightness(.68); transition: transform .3s; }
.nearby-tile:hover img { transform: scale(1.04); }
.nearby-tile .dist { position: absolute; top: 9px; right: 9px; background: rgba(17,17,17,.72); color: #fff; font-size: var(--fs-xs); font-weight: 600; border-radius: 999px; padding: 3px 11px; }
.nearby-tile .tile-title { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fff; font-weight: 700; font-size: var(--fs-base); line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.see-all { text-align: center; margin-top: 20px; }
.crosslinks { display: flex; flex-wrap: wrap; gap: 8px; }
.crosslinks a { border: 1px solid var(--border-strong); padding: 7px 14px; border-radius: 999px; font-size: var(--fs-sm); text-decoration: none; }
.crosslinks a:hover { border-color: var(--gold); color: var(--gold-text); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt);
  margin-top: 44px; padding: 40px 0 26px; font-size: var(--fs-sm); color: var(--muted); }
.foot-top { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 34px 48px; align-items: start; }
.foot-brand .logo { font-size: var(--fs-md); }
.foot-brand p { margin: 10px 0 0; line-height: 1.6; }
.foot-partners { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 16px; }
.foot-partners-head { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  width: 100%; margin-bottom: 1px; }
.foot-partners span:not(.foot-partners-head) { border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 3px 8px; font-size: var(--fs-xs); background: #fff; color: var(--text); }
.site-footer .cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 22px; }
.site-footer h4 { font-size: var(--fs-sm); color: var(--text); margin: 0 0 9px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 5px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--gold-text); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
  justify-content: space-between; margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--border); }
.foot-bottom p { margin: 0; font-size: var(--fs-xs); max-width: 70ch; }
.foot-social { display: flex; gap: 8px; }
.foot-social a { display: grid; place-items: center; width: 34px; height: 34px; background: #fff;
  border: 1px solid var(--border); border-radius: 9px; color: var(--muted); }
.foot-social a:hover { color: var(--gold-text); border-color: var(--gold); }

@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: 26px; }
  .site-footer .cols { grid-template-columns: repeat(2, 1fr); gap: 22px 20px; }
}
@media (max-width: 400px) {
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .card { grid-template-columns: 1fr; }
  .card-img { min-height: 200px; position: relative; }
  .card-img img { position: relative; height: 200px; }
  .listing-toolbar { top: 56px; }
  h1 { font-size: var(--fs-xl); }
}

/* ---- glossary / content pages ---- */
.term-city-list { list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 18px; }
.term-city-list li { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.term-city-list a { font-weight: 500; text-decoration: none; }
.term-city-list a:hover { text-decoration: underline; }
.term-city-list span { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.cat-table td.cat { white-space: normal; max-width: 150px; }
/* give the hotel column room so the affiliate link stays on one line */
.cat-table th:nth-child(2), .cat-table td:nth-child(2) { min-width: 250px; }
.cat-table th:nth-child(3), .cat-table td:nth-child(3),
.cat-table th:nth-child(4), .cat-table td:nth-child(4) { white-space: nowrap; }
@media (max-width: 640px) { .cat-table a.rate-link { white-space: normal; } }

/* ---- homepage hero ----
   Flat white, centred, one job: get people searching. No gradient and no photo
   collage; the weight is carried by the type and the space around it. The facts
   sit in their own band underneath so the fold itself stays quiet. */
.home-hero { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 56px 0 48px; text-align: left; }
.hero-copy { max-width: 720px; margin: 0; }
.home-hero h1 { font-size: var(--fs-3xl); line-height: 1.1; margin: 0 0 14px; max-width: 700px;
  font-weight: 700; letter-spacing: -.03em; color: #111; }
.hero-sub { font-size: var(--fs-md); color: #3b3f47; margin: 0 0 24px; line-height: 1.55; }
.site-search.search-big { margin: 0; max-width: 620px; }
.hero-pop { font-size: var(--fs-sm); color: var(--muted); margin: 22px 0 0; display: flex;
  flex-wrap: wrap; gap: 8px 9px; align-items: center; justify-content: center; }
.hero-pop a { display: inline-block; padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; text-decoration: none; font-weight: 500;
  font-size: var(--fs-sm); color: var(--text); transition: border-color .15s, color .15s; }
.hero-pop a:hover { border-color: var(--border-strong); color: var(--gold-text); }


@media (max-width: 760px) {
  .band { padding: 44px 0; }
  .home-hero + .band:not(.band-counts) { padding-top: 40px; }
  .band-counts + .band { padding-top: 40px; }
  .home-hero { padding: 32px 0 30px; }
  .home-hero h1 { font-size: 30px; max-width: none; letter-spacing: -.025em; margin-bottom: 12px; }
  .hero-sub { font-size: var(--fs-base); margin-bottom: 20px; }
  .search-big .search-field { height: 48px; padding-left: 14px; gap: 9px; }
  .search-big .search-input { font-size: var(--fs-base); }
  .search-big .search-go { height: 38px; padding: 0 16px; font-size: var(--fs-sm); }
  .band.band-counts { padding: 18px 0 20px; }
  .stats { flex-wrap: wrap; gap: 12px 20px; }
  .stats-head { flex: 0 0 100%; justify-content: center; padding: 0; border: 0; }
  .stat { gap: 10px; }
  .stat-ico { flex-basis: 36px; height: 36px; border-radius: 10px; }
  .stat-ico svg { width: 18px; height: 18px; }
  .count { font-size: var(--fs-lg); }
  .stat-sep { align-self: center; height: 32px; }
}

.home-city-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 14px; }
.home-city { display: block; border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; background: #fff; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.home-city:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.home-city img { width: 100%; height: 124px; object-fit: cover; display: block; background: var(--bg-alt); }
.hc-body { display: block; padding: 11px 13px 13px; }
.hc-name { display: block; font-weight: 700; font-size: var(--fs-base); }
.hc-count { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }

.state-grid { display: grid; gap: 4px 16px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.state-grid a { padding: 7px 0; border-bottom: 1px solid var(--border); text-decoration: none;
  font-size: var(--fs-sm); display: flex; justify-content: space-between; }
.state-grid a span { color: var(--muted); }
.state-grid a:hover { color: var(--gold-text); }

.steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps li { display: flex; gap: 13px; align-items: flex-start; }
.step-n { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff;
  font-weight: 700; display: grid; place-items: center; font-size: var(--fs-sm); }
.steps h3 { margin: 2px 0 5px; font-size: var(--fs-base); }
.steps p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }


.stat-row { display: flex; flex-wrap: wrap; gap: 14px 46px; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--border); }
.stat-row strong { display: block; font-size: var(--fs-xl); color: var(--gold-text); line-height: 1.1; }
.stat-row span { color: var(--muted); font-size: var(--fs-xs); }

.quote-row { display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.quote { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 17px; background: #fff; }
.quote blockquote { margin: 0 0 11px; font-size: var(--fs-sm); line-height: 1.6; }
.quote figcaption { font-size: var(--fs-xs); font-weight: 600; }
.quote figcaption span { display: block; font-weight: 400; color: var(--muted); }

.home-cta { text-align: center; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 30px 20px; }
.home-cta h2 { margin-top: 0; }
.home-cta p { color: var(--muted); margin: 0 0 16px; }
.disclaimer { margin-top: 26px; }

@media (max-width: 600px) {
  .stat-row { gap: 12px 28px; }
  .stat-row strong { font-size: var(--fs-lg); }
}
.verify-more { margin: 14px 0 0; }
.verify-more .btn { font-size: var(--fs-sm); padding: 9px 16px; }

/* ---- blog ---- */
.container-narrow { max-width: 760px; }
.post .page-head h1 { font-size: var(--fs-2xl); line-height: 1.2; }
.post-byline { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.post-body { font-size: var(--fs-md); line-height: 1.7; }
.post-body h2 { font-size: var(--fs-lg); margin: 34px 0 12px; }
.post-body h3 { font-size: var(--fs-md); margin: 26px 0 8px; }
.post-body h4 { font-size: var(--fs-base); margin: 22px 0 6px; }
.post-body p { margin: 0 0 16px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin-bottom: 7px; }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 18px 0; }
.post-body a { color: var(--gold-text); }
.post-body blockquote { margin: 20px 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--gold); color: var(--muted); }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 18px 0; }
.post-body th, .post-body td { padding: 9px 11px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top; }

.post-cta { margin: 34px 0 0; padding: 22px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--bg-alt); }
.post-cta h3 { margin: 0 0 7px; font-size: var(--fs-md); }
.post-cta p { margin: 0 0 14px; color: var(--muted); font-size: var(--fs-sm); }
.post-related { grid-template-columns: 1fr; }
.post-related li { display: block; }

.post-grid { display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.post-card { border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 18px; background: #fff; transition: transform .15s, box-shadow .15s; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.post-card h2 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 7px; line-height: 1.35; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { color: var(--gold-text); }
.post-card-meta { color: var(--muted); font-size: var(--fs-xs); margin: 0 0 9px; }
.post-card-excerpt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }

@media (max-width: 600px) {
  .post .page-head h1 { font-size: var(--fs-xl); }
  .post-body { font-size: var(--fs-md); }
  .post-body h2 { font-size: var(--fs-lg); }
}

/* ---- cards without a photo (Spanish pages have no image URLs) ---- */
.card.card-noimg { grid-template-columns: 1fr; }
.card.card-noimg .card-body { padding: 16px 18px; }
.card.card-noimg .card-top { align-items: flex-start; }
.card.card-noimg .addr { margin-top: 2px; }
.card.card-noimg .card-cta { margin-top: 10px; }

/* ===== homepage: section bands, eyebrows, centered headers ===== */
/* Section rhythm. One rule a visitor can see: surfaces alternate, top to
   bottom, from the hero to the footer (grey, white, grey, white...). The tint
   is assigned by position in build2.py, never by hand. A hairline sits on
   every boundary as well, so the edge stays crisp on low-contrast screens.
   Space does the rest: 64px around a section, 28px inside it. */
.band { padding: 64px 0; }
.band-alt { background: var(--bg-alt); }
.band + .band { border-top: 1px solid var(--border); }
/* the facts band already closes the fold; the next one does not need a full gap */
.home-hero + .band:not(.band-counts) { padding-top: 56px; }
.band-counts + .band { padding-top: 56px; }
.band > .container > .section { margin: 0; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.sec-head h2 { font-size: var(--fs-xl); line-height: 1.22; margin: 0 0 9px; letter-spacing: -.005em; }
.sec-head p { color: var(--muted); font-size: var(--fs-base); line-height: 1.6; margin: 0; }

/* tiles with the caption under the image, like the original */
.tile-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
@media (max-width: 620px) {
  /* two up, always: a single full-width tile pushes the rest off the screen */
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .tile-cap { padding: 10px 11px 12px; font-size: var(--fs-sm); }
  .tile-count { top: 7px; right: 7px; padding: 2px 7px; }
}
.tile { display: block; border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; background: #fff; text-decoration: none; box-shadow: var(--shadow-card);
  transition: transform .16s, box-shadow .16s, border-color .16s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.tile-img { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--bg-alt); overflow: hidden; }
.tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-count { position: absolute; top: 10px; right: 10px; background: rgba(17,17,17,.78); color: #fff;
  font-size: var(--fs-xs); font-weight: 500; padding: 4px 9px; border-radius: 999px; }
.tile-cap { display: block; padding: 13px 15px 15px; font-weight: 600; font-size: var(--fs-base);
  line-height: 1.35; color: var(--text); }
.tile-sub { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }

/* how it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.steps li { display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border: 1px solid var(--border); border-top: 3px solid var(--gold);
  border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); }
.step-n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #fffaf0; color: var(--gold-text);
  border: 1px solid #f6e0ac; font-weight: 600; display: grid; place-items: center; font-size: var(--fs-sm); }

/* why us */

/* stats */
.stat-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 26px 0 0; padding: 0; border: none; }
.stat-row > div { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 22px 16px; text-align: center; box-shadow: var(--shadow-card); }
.stat-row strong { display: block; font-size: var(--fs-2xl); color: var(--gold-text); line-height: 1.05; letter-spacing: -.005em; }
.stat-row span { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; display: block; }

/* testimonials */
.quote-row { display: grid; gap: 16px; grid-auto-flow: column; grid-auto-columns: minmax(266px, 1fr);
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
.quote-row > * { scroll-snap-align: start; }
@media (max-width: 900px) { .quote-row { grid-auto-columns: minmax(250px, 86%); } }
.quote { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 20px; background: #fff; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 14px; font-size: var(--fs-sm); line-height: 1.65; font-style: italic; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 11px; font-size: var(--fs-xs); font-weight: 500;
  padding-top: 13px; border-top: 1px solid var(--border); }
.quote figcaption > span:last-child { display: block; font-weight: 600; color: var(--text); }
.quote figcaption > span:last-child span { display: block; font-weight: 400; color: var(--muted); margin-top: 1px; }
.qavatar { display: grid !important; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; place-items: center;
  color: #fff; font-size: var(--fs-xs); font-weight: 600; }
.qavatar.reddit { background: #ff4500; }
.qavatar.web { background: #1877f2; }

.home-cta { text-align: center; }
.home-cta h2 { font-size: var(--fs-xl); margin: 0 0 8px; }
.home-cta p { color: var(--muted); margin: 0 0 18px; font-size: var(--fs-base); }

@media (max-width: 600px) {
  .band { padding: 38px 0; }
  .sec-head h2 { font-size: var(--fs-lg); }
  .stat-row strong { font-size: var(--fs-xl); }
}
.faq-bare { margin-top: 0; max-width: 860px; margin-left: auto; margin-right: auto; }
.band > .container > .prose { font-size: var(--fs-base); line-height: 1.7; }

/* ---- card: what the room line is, and what we verified ---- */
.room-block { margin: 9px 0 2px; padding: 9px 11px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 10px; }
.room-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 3px; }
.room-block-unknown .room-kicker { color: var(--muted); }
.room-block .room-line { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.room-block .room-meta { margin-top: 2px; }
.placement-label { display: inline-flex; align-items: center; gap: 5px;
  background: rgba(17,17,17,.62); border-radius: 999px; padding: 4px 10px 4px 7px;
  text-shadow: none; backdrop-filter: blur(2px); }
.verified-tick { display: grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: #16a34a; color: #fff; flex: 0 0 15px; }
.verified-tick svg { display: block; }

/* ---- card photo slider ---- */
.slider { position: absolute; inset: 0; overflow: hidden; }
.slider-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
  scroll-snap-align: center; position: static; }
.snav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #111; font-size: 17px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .15s; padding: 0 0 2px; }
.snav.prev { left: 8px; } .snav.next { right: 8px; }
.card:hover .snav, .slider:focus-within .snav { opacity: 1; }
/* the arrows wrap around, so neither is ever disabled; the photo counter and
   the dots are gone because they collided with the city pill and the badge */
@media (max-width: 700px) { .snav { opacity: 1; } }

/* ---- destinations mega menu: state rail + city pane ---- */
.mega { display: grid; grid-template-columns: 228px 1fr; gap: 0; min-height: 300px; }
.mega-rail { max-height: 58vh; overflow-y: auto; padding-right: 10px;
  border-right: 1px solid var(--border); scrollbar-width: thin; }
.rail-item { display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 11px; border: none; background: none; cursor: pointer;
  border-radius: 8px; font: inherit; font-size: var(--fs-sm); color: var(--text);
  text-align: left; transition: background .12s, color .12s; }
.rail-item .n { color: var(--muted); font-size: var(--fs-xs); }
.rail-item:hover { background: var(--bg-alt); }
.rail-item.is-on { background: #fffaf0; color: var(--gold-text); font-weight: 600; }
.rail-item.is-on .n { color: var(--gold-text); }
.rail-intl { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding-top: 11px; }
.mega-panes { padding-left: 22px; max-height: 58vh; overflow-y: auto; scrollbar-width: thin; }
.mega-pane { display: none; }
.mega-pane.is-on { display: block; }
.pane-all { display: inline-block; margin-bottom: 12px; font-weight: 600;
  font-size: var(--fs-sm); color: var(--gold-text); text-decoration: none; }
.pane-all:hover { text-decoration: underline; }
.pane-sub { margin: 14px 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; }
.pane-sub:first-of-type { margin-top: 0; }
.pane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 0 20px; }
.pane-grid a { display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 6px 0; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.pane-grid a:hover { color: var(--gold-text); }
.pane-grid .n { font-size: var(--fs-xs); opacity: .65; }

@media (max-width: 900px) {
  .mega { grid-template-columns: 1fr; min-height: 0; }
  .mega-rail { max-height: 34vh; border-right: none; border-bottom: 1px solid var(--border);
    padding: 0 0 8px; margin-bottom: 10px; }
  .mega-panes { padding-left: 0; max-height: 40vh; }
}

/* ---- tap targets ----
   WCAG 2.2 (2.5.8) asks for at least 24x24 CSS px on anything you have to hit.
   These were 14 to 22px tall: the height of the text and nothing more. Padding
   rather than bigger type, so nothing about the design changes. A link inside a
   sentence is exempt and is left alone. */
.breadcrumbs a { padding: 5px 0; display: inline-block; }
.fopt { min-height: 26px; padding: 3px 0; }
.f-reset, .f-reset-inline { padding: 4px 2px; min-height: 26px; }
.card h3 a { display: inline-block; padding: 3px 0; }
.cat-table a.rate-link { padding: 4px 0; }
.site-footer .cols a { display: inline-block; padding: 4px 0; }
.site-footer li { margin-bottom: 0; }
.foot-brand .logo { display: inline-block; padding: 3px 0; }
.post-card h2 a, .post-list h2 a { display: inline-block; padding: 3px 0; }

/* ---- author pages ---- */
.author-head { display: flex; align-items: center; gap: 22px; margin: 18px 0 18px; }
.author-photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex: 0 0 112px;
  background: var(--bg-alt); border: 1px solid var(--border); }
.author-initial { display: grid; place-items: center; font-size: var(--fs-2xl); font-weight: 600;
  color: var(--gold-text); background: #fff6e0; }
.author-head h1 { margin: 0; font-size: var(--fs-2xl); line-height: 1.15; }
.author-role { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-base); }
.author-site { margin: 6px 0 0; font-size: var(--fs-sm); }
.author-site a { color: var(--gold-text); text-decoration: none; display: inline-block; padding: 3px 0; }
.author-site a:hover { text-decoration: underline; }
.author-bio { margin-bottom: 8px; }
.byline-author { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong);
  text-underline-offset: 3px; }
.byline-author:hover { color: var(--gold-text); }
@media (max-width: 600px) {
  .author-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .author-photo { width: 88px; height: 88px; flex-basis: 88px; }
  .author-head h1 { font-size: var(--fs-xl); }
}

/* ---- hotel detail page (23.09 design) ----
   Name and rating first, then the photos, a row of section tabs that stays
   under the header, and a booking card that follows down the right side. */
.card-details { font-size: var(--fs-sm); font-weight: 600; color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; padding: 10px 4px; margin-right: 6px; white-space: nowrap; }
.card-details:hover { color: var(--gold-text); }
.hotel-page { padding-bottom: 8px; }
.hotel-page-main { padding-bottom: 56px; }
.hotel-page .breadcrumbs { padding-bottom: 6px; }
.hp-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 6px 0 14px; }
.hp-title h1 { font-size: var(--fs-2xl); line-height: 1.15; margin: 0 0 8px; letter-spacing: -.02em; }
.hp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-sm); }
.hp-meta .rev { color: var(--text); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 3px 0; }
.hp-addr { color: var(--muted); }
.hp-addr::before { content: '\00b7'; margin-right: 8px; color: var(--border-strong); }
.hp-actions { display: flex; gap: 8px; flex-shrink: 0; }
.act-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--border-strong); background: #fff; border-radius: 999px; padding: 7px 14px; cursor: pointer; color: var(--text); min-height: 36px; }
.act-btn:hover { border-color: #111; }
.act-btn svg path { fill: none; stroke: currentColor; stroke-width: 2; }
.act-btn[aria-pressed="true"] svg path { fill: #e2557a; stroke: #e2557a; }
.act-btn svg { width: 15px; height: 15px; }
.share-wrap { position: relative; }
.share-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-hover); padding: 6px; min-width: 180px; display: flex; flex-direction: column; }
.share-menu[hidden] { display: none; }
.share-menu a, .share-menu button { text-align: left; font: inherit; font-size: var(--fs-sm); padding: 9px 12px; border-radius: 8px;
  text-decoration: none; color: var(--text); background: none; border: 0; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: var(--bg-alt); }
.share-copy.is-done { color: #16a34a; font-weight: 600; }

.hotel-gallery { position: relative; display: grid; gap: 6px; border-radius: 16px; overflow: hidden;
  grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 400px; background: var(--bg-alt); }
.g-tile { border: 0; padding: 0; margin: 0; cursor: zoom-in; background: var(--bg-alt); overflow: hidden; }
.g-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.g-tile:hover img { transform: scale(1.03); }
.g-0 { grid-row: 1 / 3; }
.g-n1 { grid-template-columns: 1fr; } .g-n1 .g-0 { grid-row: auto; }
.g-n2 { grid-template-columns: 2fr 1fr; } .g-n2 .g-1 { grid-row: 1 / 3; }
.g-n3 { grid-template-columns: 2fr 1fr; }
.g-n4 { grid-template-columns: 2fr 1fr 1fr; } .g-n4 .g-3 { grid-column: 2 / 4; }
.tub-pill { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(17,17,17,.82);
  color: #fff; font-size: var(--fs-xs); font-weight: 600; border-radius: 8px; padding: 5px 10px; pointer-events: none; }
.tub-pill i, .tag-tub i, .nc-pl i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }
.g-all { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; border: 0;
  border-radius: 999px; background: #fff; color: #111; font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 8px 14px;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.g-all:hover { background: var(--bg-alt); }

/* section tabs, under the sticky header */
.hp-tabs { position: sticky; top: var(--hdr-h, 100px); z-index: 30; background: #fff; border-bottom: 1px solid var(--border); margin-top: 18px; }
.hp-tabs-in { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.hp-tabs-in::-webkit-scrollbar { display: none; }
.hp-tabs a { flex: 0 0 auto; padding: 13px 0 11px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; }
.hp-tabs a:hover { color: var(--text); }
.hp-tabs a[aria-current="true"] { color: var(--text); border-bottom-color: #111; }
.hotel-page [id] { scroll-margin-top: calc(var(--hdr-h, 100px) + 60px); }

.hotel-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.hotel-main { min-width: 0; }
.hp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hp-tags .tag { background: var(--bg-alt); box-shadow: none; }
.tag-tub { display: inline-flex; align-items: center; gap: 5px; background: #fff3d6 !important; }
.h-sec { margin-top: 36px; }
.h-sec:first-child { margin-top: 0; }
.h-sec h2, .hotel-near h2 { font-size: var(--fs-xl); margin: 0 0 10px; letter-spacing: -.015em; }
.h-sec p { margin: 0 0 10px; line-height: 1.7; color: #3b3f47; }
.h-sec p.muted, .muted { color: var(--muted); font-size: var(--fs-sm); }
.h-sec p.muted a { color: var(--text); font-weight: 600; }

.room-card { margin-top: 28px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.room-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; }
.room-kick { font-size: 11px; color: var(--gold-text); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.room-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: var(--fs-sm); white-space: nowrap; }
.room-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; padding: 12px 18px; background: var(--bg-alt); border-top: 1px solid var(--border); }
.room-facts dt { font-size: var(--fs-xs); color: var(--muted); }
.room-facts dd { margin: 1px 0 0; font-weight: 600; font-size: var(--fs-sm); }

.am-part { padding: 14px 0 16px; border-bottom: 1px solid var(--border); }
.am-part:last-child { border-bottom: 0; }
.am-part h3 { font-size: var(--fs-base); margin: 0 0 10px; }
.check-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-grid li { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); min-width: 0; }
.ck { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-alt); display: grid; place-items: center; color: #4a4f58; }
.more-list { margin-top: 10px; }
.more-list summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.more-list summary::-webkit-details-marker { display: none; }
.more-list[open] summary .ico { transform: rotate(180deg); }
.more-list .check-grid { margin-top: 10px; }

/* price position: gold up to this hotel, grey after; the average above, this hotel below */
.price-box { background: var(--bg-alt); border-radius: 14px; padding: 42px 22px 16px; }
.pscale { position: relative; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0 var(--fill, 0%), #dcd9d2 var(--fill, 0%) 100%); }
.pmark { position: absolute; top: 50%; left: var(--p); width: 14px; height: 14px; margin-left: -7px; transform: translateY(-50%); border-radius: 50%; }
.pmark.me { background: #111; border: 2px solid #fff; z-index: 2; box-shadow: 0 0 0 1px #111; }
.pmark.avg { background: #fff; border: 2px solid var(--gold-dark); }
.plabel { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; }
.plabel.up { bottom: calc(100% + 7px); color: var(--text); }
.plabel.down { top: calc(100% + 8px); background: #111; color: #fff; border-radius: 6px; padding: 3px 8px; }
.pmark.l-start .plabel { left: -4px; transform: none; }
.pmark.l-end .plabel { left: auto; right: -4px; transform: none; }
.pends { display: flex; justify-content: space-between; margin-top: 40px; font-size: var(--fs-xs); color: var(--muted); }

.loc-map { position: relative; height: 220px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background-color: #eceee6; background-image: linear-gradient(#dde1d6 1px, transparent 1px), linear-gradient(90deg, #dde1d6 1px, transparent 1px);
  background-size: 36px 36px; background-position: center; }
.loc-pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); color: #111; }
.loc-pin .ico { fill: var(--gold); }
.loc-addr { position: absolute; left: 12px; bottom: 12px; background: #fff; border-radius: 8px; padding: 7px 11px; font-size: var(--fs-sm);
  font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.15); max-width: calc(100% - 24px); z-index: 500; }
.loc-btns { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; z-index: 500; }
.loc-show, .loc-gm { font: inherit; font-size: var(--fs-sm); font-weight: 600; border-radius: 999px; padding: 8px 14px; cursor: pointer; text-decoration: none; }
.loc-show { background: #fff; color: #111; border: 1px solid var(--border-strong); }
.loc-gm { background: #111; color: #fff; border: 0; }
.loc-map.is-live .loc-pin, .loc-map.is-live .loc-show { display: none; }
.loc-canvas { position: absolute; inset: 0; }
.where-cols { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
.where-cols h3 { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 0; padding-bottom: 7px; border-bottom: 2px solid #111; }
.dist-list { list-style: none; padding: 0; margin: 0; }
.dist-list li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.dist-list .dn { flex: 1; min-width: 0; }
.dist-list .d { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hotel-main .faq { margin-top: 36px; }
.hotel-main .faq h2 { font-size: var(--fs-xl); }

/* booking card */
.hotel-book { border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: #fff; box-shadow: var(--shadow-card); }
.book-from { font-size: var(--fs-sm); color: var(--muted); }
.book-price { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.book-price span { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.book-score { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); margin: 6px 0 14px; }
.book-btn { width: 100%; justify-content: center; }
.book-note { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin: 8px 0 0; }
.book-room { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.book-room-name { font-weight: 600; font-size: var(--fs-sm); line-height: 1.35; }
.book-room-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; }
.side-verified { margin: 12px 0 0; }
.book-bar { display: none; }

/* nearby hotels */
.hotel-near { margin-top: 48px; }
.near-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.near-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-content: start; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .15s, border-color .15s; }
.near-card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.nc-img { position: relative; background: var(--bg-alt); min-height: 110px; }
.nc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nc-pl { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(17,17,17,.82); color: #fff; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 8px; }
.nc-rt { position: absolute; right: 8px; top: 8px; background: #111; color: #fff; font-size: var(--fs-xs); font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.nc-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; min-width: 0; }
.nc-name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; }
.near-card:hover .nc-name { color: var(--gold-text); }
.nc-addr { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 10px; }
.nc-dist { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); color: var(--text);
  font-size: var(--fs-xs); font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.nc-price { font-size: var(--fs-xs); color: var(--muted); }
.nc-price strong { font-size: var(--fs-md); color: var(--text); }

.hotel-cta { margin-top: 44px; background: var(--bg-alt); border-radius: 16px; padding: 28px 30px; display: flex;
  justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; }
.hotel-cta h2 { font-size: var(--fs-xl); margin: 0 0 4px; }
.hotel-cta p { margin: 0; color: #4a4f58; }
.cta-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta-link { font-weight: 600; font-size: var(--fs-sm); color: var(--text); display: inline-block; padding: 3px 0; }

/* all photos */
.lightbox { width: min(1100px, 96vw); max-height: 92vh; padding: 0; border: 0; border-radius: 14px; background: #111; overflow: hidden; }
.lightbox::backdrop { background: rgba(0,0,0,.8); }
.lightbox .slider { position: relative; height: min(76vh, 720px); }
.lightbox .slider-track img { object-fit: contain; background: #111; }
.lightbox .snav { opacity: 1; width: 40px; height: 40px; }
.lb-close { position: absolute; top: 10px; right: 10px; z-index: 5; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.92); font-size: 22px; line-height: 1; cursor: pointer; }

@media (max-width: 759px) {
  .hp-top { flex-direction: column; align-items: stretch; }
  .hp-title h1 { font-size: var(--fs-xl); }
  .hotel-gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 260px; border-radius: 12px; }
  .hotel-gallery .g-tile:not(.g-0) { display: none; }
  .g-0 { grid-row: auto; }
  .hotel-layout { display: flex; flex-direction: column; }
  .hotel-main { display: contents; }
  .hotel-side { order: -1; }
  .room-top { flex-direction: column; align-items: flex-start; }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-btns { left: 12px; right: 12px; justify-content: flex-end; }
  .hotel-cta { flex-direction: column; align-items: stretch; padding: 22px 18px; }
  .cta-side { align-items: stretch; }
  .cta-side .btn { justify-content: center; }
  /* the booking card scrolled away: a slim bar at the bottom takes over */
  .book-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.08); transform: translateY(110%); transition: transform .2s; }
  .book-bar.is-on { transform: none; }
  .book-bar > div { flex: 1 0 auto; white-space: nowrap; line-height: 1.25; }
  .book-bar strong { font-size: var(--fs-lg); }
  .book-bar span { font-size: var(--fs-xs); color: var(--muted); }
  .bb-score { display: block; color: var(--text) !important; font-weight: 600; }
  .hp-addr { flex-basis: 100%; }
  .hp-addr::before { display: none; }
  .book-bar .btn { min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; }
}
@media (min-width: 760px) {
  .hotel-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
  .hotel-side { position: sticky; top: calc(var(--hdr-h, 100px) + 64px); }
  .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .where-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .near-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .near-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .nc-img { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .book-bar { transition: none; } }

/* ---- homepage: state list (22.09 design) ----
   A plain index, five columns on a wide screen: name, gold chevron, hairline.
   Row by row A to Z, so the eye reads it like a list, not a tag cloud. */
.state-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 24px;
  grid-template-columns: repeat(5, minmax(0, 1fr)); }
.state-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border); text-decoration: none;
  color: var(--text); font-weight: 500; font-size: var(--fs-base); transition: color .15s; }
.state-list .chev { color: var(--gold-text); font-size: 17px; line-height: 1; font-weight: 600; transition: transform .15s; }
.state-list a:hover { color: var(--gold-text); }
.state-list a:hover .chev { transform: translateX(2px); }
@media (max-width: 1000px) { .state-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .state-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .state-list a { font-size: var(--fs-sm); } }

/* ---- homepage: panel cards (verification, closing call to action) ---- */
.panel-card { border-radius: 16px; padding: 32px 36px; }
.panel-card h2 { font-size: var(--fs-xl); line-height: 1.22; letter-spacing: -.005em; margin: 0 0 8px; }
.panel-lead { font-size: var(--fs-base); color: var(--muted); line-height: 1.6; margin: 0 0 22px; max-width: 700px; }
.verify-card { background: var(--bg-alt); }
.checkrow { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.checkrow li { display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; align-items: start; align-content: start; }
.chk-n { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--gold);
  color: #111; font-size: var(--fs-xs); font-weight: 700; display: grid; place-items: center; margin-top: -1px; }
.chk-t { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.chk-d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.checkrow-more { margin: 24px 0 0; font-size: var(--fs-sm); }
.checkrow-more a { color: var(--text); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.checkrow-more a:hover { color: var(--gold-text); }
.cta-card { background: #FBF6EA; border: 1px solid #F1E6C8; margin-top: 48px; }
.cta-card .panel-lead { margin-bottom: 20px; }
.btn-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px;
  border-radius: 999px; font-size: var(--fs-base); font-weight: 600; text-decoration: none; }
.cta-disclaimer { margin: 22px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.65; max-width: 820px; }
@media (max-width: 900px) { .checkrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .panel-card { padding: 24px 18px; border-radius: 14px; }
  .panel-card h2 { font-size: var(--fs-lg); }
  .checkrow { grid-template-columns: 1fr; gap: 16px; }
  .cta-card { margin-top: 40px; }
  .btn-pill { width: 100%; justify-content: center; }
}

/* ======================================================================
   Listing pages (23.09): head with a verified pill, "Our pick" beside a map
   preview, filters in a left column (a sheet on smaller screens), sort as
   three buttons, numbered cards with a rating scale and a save heart. The
   content width stays the site container.
   ====================================================================== */
.breadcrumbs a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
.page-head h1 { letter-spacing: -.02em; }
.page-facts:has(.verified-pill) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 18px; }
.verified-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff3d6; color: #6b4a00;
  font-weight: 600; font-size: var(--fs-xs); border-radius: 999px; padding: 4px 11px; }
.verified-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.pick-row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 10px; }
.pick-box { border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; background: #fff; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; }
.pick-lead { font-size: var(--fs-md); font-weight: 600; line-height: 1.45; margin: 0 0 8px; }
.pick-rest { font-size: var(--fs-sm); color: #4a4f58; line-height: 1.6; max-width: none; }
.pick-rest p { margin: 0 0 6px; }
.pick-rest p:last-child { margin-bottom: 0; }
.map-box { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); min-height: 170px;
  background-color: #eceee6; background-image: linear-gradient(#dde1d6 1px, transparent 1px), linear-gradient(90deg, #dde1d6 1px, transparent 1px);
  background-size: 36px 36px; background-position: center; }
@media (max-width: 759px) { .map-box { min-height: 140px; } }
.map-preview { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-dots circle { fill: var(--gold); stroke: #fff; stroke-width: 2; }
.map-cap { position: absolute; top: 10px; left: 12px; font-size: var(--fs-xs); font-weight: 600; color: #3b3f47;
  background: rgba(255,255,255,.88); border-radius: 6px; padding: 2px 8px; }
.map-open { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0 auto; width: max-content; background: #111; color: #fff; white-space: nowrap; }
/* centred with margins, not a transform: .btn:active scales, which would drop the centring and make it jump */
.map-open:hover { background: #333; }
.map-dialog { width: min(1000px, 96vw); height: min(80vh, 720px); padding: 0; border: 0; border-radius: 14px; overflow: hidden; }
.map-dialog[open] { display: flex; flex-direction: column; }
.map-dialog::backdrop { background: rgba(0,0,0,.6); }
.map-dhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px 8px 18px; border-bottom: 1px solid var(--border); }
.map-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-alt); font-size: 22px; line-height: 1; cursor: pointer; }
.map-canvas { flex: 1; min-height: 0; }
.leaflet-div-icon.map-pin, .map-pin { background: none; border: 0; }
.map-pin span { display: inline-block; transform: translate(-50%, -100%); background: #111; color: #fff;
  font: 700 12px/1 var(--font); padding: 6px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.map-fail { padding: 24px; color: var(--muted); }
@media (min-width: 760px) { .pick-row.has-map { grid-template-columns: minmax(0, 1fr) 270px; } }

/* list and filters */
.listing { padding-top: 14px; }
.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.listing-main { min-width: 0; }
.listing-toolbar { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border); padding: 0 0 12px; margin: 0 0 16px; }
.listing-toolbar .listing-count { margin: 0; }
.listing-count strong { color: var(--text); }
.tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sort-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sort-pills button, .filters-open { font: inherit; font-size: var(--fs-sm); font-weight: 500; border: 1px solid var(--border-strong);
  background: #fff; color: var(--text); border-radius: 999px; padding: 7px 14px; cursor: pointer; min-height: 36px; }
.sort-pills button:hover, .filters-open:hover { border-color: #111; }
.sort-pills button[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.filters-open { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.filters-open.has-active { border-color: #111; box-shadow: inset 0 0 0 1px #111; }

.filter-panel { position: static; width: auto; box-shadow: none; border: 0; border-radius: 0; padding: 0; display: block; background: none; }
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.fp-head h2 { font-size: var(--fs-md); margin: 0; }
.fp-head .f-reset { margin-left: auto; color: var(--text); font-size: var(--fs-xs); }
.fp-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-alt); font-size: 22px; line-height: 1; cursor: pointer; }
.fgroup { border: 0; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.fgroup legend { float: left; width: 100%; font-size: var(--fs-sm); font-weight: 600; padding: 0; margin: 0 0 8px; }
.fgroup legend + * { clear: both; }
.fopts, .fgroup-amen .fopts { display: flex; flex-direction: column; gap: 2px; }
.fopt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); cursor: pointer; }
.fradio input, .fcheck input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 18px;
  border: 1.5px solid #b9bcc3; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.fradio input { border-radius: 50%; }
.fradio input:checked { border: 5.5px solid #111; }
.fcheck input { border-radius: 4px; }
.fcheck input:checked { border-color: #111; background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fopt input:focus-visible, .fchip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.fopt:hover .fradio input, .fradio:hover input, .fcheck:hover input { border-color: #111; }
.fn { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { position: relative; cursor: pointer; }
.fchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fchip span { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 12px;
  font-size: var(--fs-xs); letter-spacing: 1px; color: #111; background: #fff; }
.fchip input:checked + span { background: #111; border-color: #111; color: #fff; }
.price-inputs { display: flex; gap: 8px; }
.price-inputs label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.price-inputs label span { font-size: var(--fs-xs); color: var(--muted); }
.fmore { margin-top: 4px; }
.fmore summary { font-size: var(--fs-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 6px 0; list-style: none; }
.fmore summary::-webkit-details-marker { display: none; }
.fp-foot { display: none; }

@media (min-width: 1100px) {
  .listing-layout { grid-template-columns: 220px minmax(0, 1fr); }
  /* the rule under "Filters" and the rule under the sort buttons sit on one
     line, and the first filter starts level with the first card */
  .fp-head, .listing-toolbar { box-sizing: border-box; height: 52px; padding: 0 0 8px; margin: 0; align-items: flex-end; }
  .listing-toolbar { flex-wrap: nowrap; margin-bottom: 16px; }
  .fp-head + .fgroup { padding-top: 16px; }
  .listing-layout.no-filters { grid-template-columns: minmax(0, 1fr); }
  .filter-side { position: sticky; top: 116px; align-self: start; max-height: calc(100vh - 132px); overflow-y: auto;
    scrollbar-width: thin; padding-right: 4px; }
  .filters-open, .fp-close { display: none; }
}
@media (max-width: 1099px) {
  .filter-side { position: fixed; inset: 0; z-index: 90; background: #fff; overflow-y: auto; padding: 14px 18px 0;
    transform: translateY(100%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  .filter-side.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .filter-panel { max-width: 560px; margin: 0 auto; }
  .fp-foot { display: block; position: sticky; bottom: 0; background: #fff; padding: 12px 0 18px; border-top: 1px solid var(--border); }
  .fp-done { width: 100%; justify-content: center; gap: 5px; }
  html.sheet-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .filter-side { transition: none !important; } }

/* hotel card */
.card { grid-template-columns: 290px minmax(0, 1fr); }
.save-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.95); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .12s; }
.save-btn:hover { transform: scale(1.07); }
.save-btn svg path { fill: none; stroke: #111; stroke-width: 2; }
.save-btn[aria-pressed="true"] svg path { fill: #e2557a; stroke: #e2557a; }
.card-body { gap: 3px; padding: 13px 18px 14px; }
.card-tags { position: absolute; top: 10px; left: 10px; right: 56px; z-index: 2; display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 600; background: rgba(255,255,255,.95); border-radius: 6px; padding: 3px 8px; color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.card-rating .badge.citylabel, .card-body > .badge.citylabel { align-self: flex-start; font-size: 11px; padding: 2px 8px; box-shadow: none; }
.card h3 { font-size: var(--fs-md); margin-top: 2px; }
.card-rank { font-weight: 700; }
.card-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
.rchip { background: #111; color: #fff; font-weight: 700; border-radius: 6px; padding: 2px 7px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rword { font-weight: 600; }
.rbars { display: inline-flex; gap: 3px; }
.rbars i { width: 14px; height: 5px; border-radius: 3px; background: #e4e1da; }
.rbars i.on { background: var(--gold); }
.card-rating .rev { color: var(--muted); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 4px 0; }
.card .addr { margin-top: 0; }
.card .addr .stars::before { content: '\00b7'; color: var(--muted); margin: 0 5px 0 2px; letter-spacing: 0; }
.card .room-block { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 7px 0 0; margin: 5px 0 0; }
.card .card-cta .btn { padding-top: 9px; padding-bottom: 9px; }
.card .room-line .room-meta { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.card .room-line .room-meta::before { content: ' \00b7  '; }
.card-cta { padding-top: 6px; }
@media (max-width: 1099px) and (min-width: 761px) { .card { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .card { grid-template-columns: minmax(0, 1fr); }
  .listing-toolbar { flex-direction: column; align-items: stretch; }
  .tb-right { justify-content: space-between; }
}

/* how we verify, as a card */
.checkrow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.verify-sources { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; margin: 22px 0 0; max-width: 860px; }
@media (max-width: 900px) { .checkrow-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .checkrow-3 { grid-template-columns: minmax(0, 1fr); } }

/* nearby cities: a row you can swipe */
.city-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 184px; gap: 14px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: thin; }
.city-tile { scroll-snap-align: start; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.ct-img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bg-alt); margin-bottom: 4px; }
.ct-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.city-tile:hover .ct-img img { transform: scale(1.04); }
.ct-name { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.city-tile:hover .ct-name { color: var(--gold-text); }
.ct-dist { font-size: var(--fs-xs); color: var(--muted); }
.see-all-link { margin: 12px 0 0; }
.see-all-link a { font-weight: 600; font-size: var(--fs-sm); color: var(--text); text-underline-offset: 3px; display: inline-block; padding: 4px 0; }

/* FAQ: a plain list with rules between the questions */
.faq details { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; background: none; }
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary { padding: 16px 40px 16px 0; font-size: var(--fs-base); }
.faq summary::after { right: 6px; top: 13px; color: var(--text); font-size: var(--fs-lg); }
.faq .answer { padding: 0 0 16px; font-size: var(--fs-base); }
.faq h2 { margin-bottom: 10px; }

/* saved hotels */
.nav-saved a { gap: 6px; }
.nav-saved svg { color: #e2557a; }
.saved-n { background: var(--gold); color: #111; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.saved-list { display: grid; gap: 12px; margin: 18px 0; }
.saved-card { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.sv-img { align-self: stretch; min-height: 96px; background: var(--bg-alt); display: block; }
.sv-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; min-width: 0; }
.sv-name { font-weight: 700; text-decoration: none; }
.sv-name:hover { color: var(--gold-text); }
.sv-addr { font-size: var(--fs-xs); color: var(--muted); }
.sv-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); margin-top: 2px; }
.sv-price strong { font-size: var(--fs-base); }
.sv-remove { margin-right: 16px; border: 1px solid var(--border-strong); background: #fff; border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.sv-remove:hover { border-color: #111; }
.saved-empty[hidden] { display: none; }
.saved-empty { padding: 12px 0 48px; }
@media (max-width: 600px) {
  .saved-card { grid-template-columns: 96px minmax(0, 1fr); }
  .sv-remove { grid-column: 2; justify-self: start; margin: 0 0 12px; }
}

/* Spanish pages still use the dropdown filter panel inside a <details> */
details.filters .filter-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; background: #fff;
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-hover); padding: 18px 20px;
  width: min(780px, 92vw); display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 18px 26px; }
details.filters .fgroup-amen .fopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 7px 18px; }
details.filters + .sort, .listing-toolbar:has(details.filters) { display: flex; justify-content: space-between; align-items: center; }

/* Our pick: the numbers under the sentence use the card's own chips */
.pick-lead { font-weight: 400; font-size: var(--fs-base); line-height: 1.6; color: #3b3f47; }
.pick-lead strong { display: block; font-size: var(--fs-md); color: var(--text); margin-bottom: 2px; }
.pick-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--fs-sm); margin: 2px 0 10px; }
.pick-stats a { font-weight: 600; color: var(--text); display: inline-block; padding: 3px 0; }
.pick-method { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.pick-method a { color: var(--muted); display: inline-block; padding: 3px 0; }
.pick-flag { align-self: flex-start; background: var(--gold); color: #111; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 5px; padding: 2px 8px; margin-bottom: 2px; }
.pick-row.map-only { grid-template-columns: minmax(0, 1fr); }
.pick-row.map-only .map-box { min-height: 150px; }

/* ---- hub links: a hub page hands the reader down, an area page sideways ---- */
.area-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 20px; }
.al-label { font-size: var(--fs-sm); font-weight: 600; margin-right: 4px; }
.area-links a { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong);
  background: #fff; border-radius: 999px; padding: 7px 14px; min-height: 36px; font-size: var(--fs-sm);
  font-weight: 500; color: var(--text); text-decoration: none; transition: border-color .15s, color .15s; }
.area-links a:hover { border-color: var(--gold); color: var(--gold-text); }
.area-links .n { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.more-areas .al-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- hub pages (cabins, stadiums, map) ---- */
.hub-lead { max-width: 68ch; color: var(--text); margin: 0 0 24px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.hub-card { border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px; }
.hub-name { font-weight: 700; font-size: var(--fs-lg); color: var(--text); text-decoration: none; }
a.hub-name:hover { color: var(--gold-text); }
.hub-meta { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.hub-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hub-sub a { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 12px; min-height: 32px; font-size: var(--fs-sm); color: var(--text);
  text-decoration: none; }
.hub-sub a:hover { border-color: var(--gold); color: var(--gold-text); }
.hub-sub .n { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.map-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.map-tools label { font-weight: 600; font-size: var(--fs-sm); }
.map-tools select { font: inherit; font-size: var(--fs-sm); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 8px 12px; min-height: 40px; background: #fff; max-width: 100%; }
.map-full { height: min(70vh, 640px); min-height: 380px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-alt); display: grid; place-items: center; }
.map-full-canvas { width: 100%; height: 100%; align-self: stretch; justify-self: stretch; }
.map-wait, .map-full .map-fail { color: var(--muted); font-size: var(--fs-sm); padding: 20px; text-align: center; }
.hub-page .page-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.nav-groups-wrap { max-height: min(66vh, 620px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 900px) { .nav-groups-wrap { max-height: none; } }

/* ---- hotel videos ---- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.yt, .yt-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
  border-radius: 12px; overflow: hidden; background: #111; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .15s; }
.yt:hover img, .yt:focus-visible img { opacity: 1; }
.yt:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; margin: -22px 0 0 -32px;
  border-radius: 12px; background: rgba(17,17,17,.82); }
.yt-play::after { content: ""; position: absolute; left: 26px; top: 13px; border-left: 16px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.yt:hover .yt-play { background: var(--gold); }
.yt-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; text-align: left;
  font-size: var(--fs-sm); font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.75));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- blog photos ---- */
.post-hero { margin: 8px 0 24px; }
.post-hero img, .post-body img { display: block; width: 100%; height: auto; border-radius: 14px; }
.post-hero img { aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-alt); }
.post-body img { margin: 20px 0; }

/* ---- language switch (EN / ES) ---- */
.nav-lang a { font-weight: 600; font-size: var(--fs-sm); letter-spacing: .04em; border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 4px 10px !important; min-height: 32px; }
.nav-lang a:hover { border-color: var(--gold); }
@media (max-width: 900px) { .nav-lang a { border: 0; padding: 12px 2px !important; } }
/* ---- Spanish section ---- */
.site-header-es .container { grid-template-areas: "logo util" "primary primary"; grid-template-columns: auto 1fr; }
.site-header-es .nav-util { justify-self: end; margin: 10px -10px 10px 0 !important; }
.site-header-es .logo { padding: 14px 0 10px; }
@media (max-width: 900px) { .site-header-es .container { grid-template-areas: "logo burger" "nav nav"; grid-template-columns: 1fr auto; } }
.es-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.es-hub-grid .city-tile { width: auto; }
.es-group .cards { margin-bottom: 8px; }
.es-full-head { margin: 36px 0 4px; }

/* ---- contact form ---- */
.contact-form { max-width: 560px; margin: 28px 0 8px; display: flex; flex-direction: column; gap: 14px; }
.contact-form h2 { margin: 0 0 4px; }
.cf-row { display: flex; flex-direction: column; gap: 6px; }
.cf-row label { font-weight: 600; font-size: var(--fs-sm); }
.cf-row input, .cf-row textarea { font: inherit; font-size: 16px; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px; background: #fff; color: var(--text); }
.cf-row input:focus, .cf-row textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(241,179,2,.18); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { align-self: flex-start; min-height: 44px; }
.cf-status { margin: 0; font-size: var(--fs-sm); min-height: 1.2em; }
.cf-status.is-ok { color: #1e7d3a; font-weight: 600; }
.cf-status.is-err { color: #b3261e; font-weight: 600; }
.cf-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); }

/* hotel page: class and size under the description */
.hp-kv { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.hp-tags .tag .ico { vertical-align: -2px; color: var(--rose, #c2185b); }
@media (min-width: 1100px) {
  .where-cols.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* Leaflet stacks its panes at z-index 400 to 1000. Each map gets its own
   stacking context, so the header menus and the sticky tabs stay on top. */
.map-full, .loc-map, .map-canvas { position: relative; isolation: isolate; z-index: 0; }

/* homepage: the way to the map under the state list, and to the FAQ page */
.home-map-link { text-align: center; margin: 14px 0 0; font-size: var(--fs-sm); font-weight: 600; }
.home-map-link a { color: var(--text); }

/* ==== 23.09 evening: phone menu, header search, sort, ratings, saved ==== */

/* ---- guest rating colours: 13 steps, deep red below 3, through orange and
   amber, to deep green at 9.5 and up. White text on every step (24 Sep); each
   step is dark enough for 4.6:1 or better against it. ---- */
.rs-1  { background: #900e26 !important; color: #fff !important; }
.rs-2  { background: #a50d1c !important; color: #fff !important; }
.rs-3  { background: #ba0d01 !important; color: #fff !important; }
.rs-4  { background: #bb3703 !important; color: #fff !important; }
.rs-5  { background: #bd4d00 !important; color: #fff !important; }
.rs-6  { background: #b45c03 !important; color: #fff !important; }
.rs-7  { background: #aa6302 !important; color: #fff !important; }
.rs-8  { background: #9b6b06 !important; color: #fff !important; }
.rs-9  { background: #767a04 !important; color: #fff !important; }
.rs-10 { background: #598101 !important; color: #fff !important; }
.rs-11 { background: #32851b !important; color: #fff !important; }
.rs-12 { background: #0c7830 !important; color: #fff !important; }
.rs-13 { background: #026337 !important; color: #fff !important; }
.mp-r { display: inline-block; font-weight: 700; border-radius: 5px; padding: 1px 6px; background: #111; color: #fff; }
.bb-score .rchip { font-size: var(--fs-xs); margin-right: 3px; }
.cat-table .rchip { font-size: var(--fs-xs); }

/* ---- nearby hotels: the photo stays clear, the tub goes under the name ---- */
.nc-body .nc-pl { position: static; background: none; color: var(--muted); padding: 0; border-radius: 0;
  font-size: var(--fs-xs); font-weight: 500; gap: 6px; }

/* ---- sort: one dropdown, the same size as the Filters button ---- */
.sort { position: relative; display: inline-flex; align-items: center; }
.sort-ico { position: absolute; left: 13px; pointer-events: none; color: var(--text); }
.sort select { -webkit-appearance: none; appearance: none; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 13px center;
  border: 1px solid var(--border-strong); border-radius: 999px; min-height: 36px; padding: 7px 32px 7px 36px; cursor: pointer; }
.sort select:hover { border-color: #111; }
.sort select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 760px) {
  .tb-right { flex-wrap: nowrap; }
  .tb-right .filters-open, .tb-right .sort { flex: 1 1 0; justify-content: center; }
  .tb-right .sort select { width: 100%; }
}

/* ---- header: Saved heart on every screen ---- */
.hdr-saved { grid-area: saved; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--text); text-decoration: none; }
.hdr-saved:hover { background: var(--bg-alt); }
.hdr-saved svg path { fill: none; stroke: currentColor; stroke-width: 2; }
.hdr-saved.has-saved svg path { fill: #e2557a; stroke: #e2557a; }
.hdr-saved .saved-n { position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #e2557a; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; box-shadow: 0 0 0 2px #fff; }
.hdr-saved.bump { animation: th-bump .5s ease; }
@keyframes th-bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.save-btn.pop svg, .act-btn.pop svg { animation: th-pop .45s ease; }
@keyframes th-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.fly-heart { position: fixed; z-index: 200; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; color: #e2557a; }
.fly-heart svg { width: 22px; height: 22px; }
.fly-heart path { fill: currentColor; }
.th-toast { position: fixed; left: 50%; bottom: 22px; z-index: 150; transform: translate(-50%, 16px); opacity: 0;
  background: #111; color: #fff; border-radius: 12px; padding: 12px 16px; font-size: var(--fs-sm); box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); transition: opacity .2s, transform .25s; }
.th-toast.show { opacity: 1; transform: translate(-50%, 0); }
.th-toast a { color: #f7c95c; font-weight: 600; white-space: nowrap; }
.has-book-bar .th-toast { bottom: 90px; }

/* ---- back to top ---- */
.to-top { position: fixed; right: 16px; bottom: 20px; z-index: 55; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: #fff; color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.14);
  display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s, transform .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: #111; }
@media (max-width: 759px) { .has-book-bar .to-top { bottom: 86px; } }

/* ---- header layout with the new pieces ---- */
.search-trigger { display: none; }
.pane-back { display: none; }
@media (min-width: 901px) {
  .site-header .container { grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo search util saved" "primary primary primary primary"; }
  .hdr-saved { margin-right: -8px; }
}
@media (max-width: 900px) {
  .site-header .container { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 8px;
    grid-template-areas: "logo trigger saved burger" "search search search search" "nav nav nav nav"; }
  .logo { padding: 12px 0; }
  /* a small field between the logo and the menu; tapping it drops the real one down */
  .search-trigger { grid-area: trigger; display: flex; align-items: center; gap: 8px; justify-self: stretch;
    height: 38px; min-width: 0; padding: 0 12px; margin-left: 6px; border: 1px solid var(--border-strong);
    border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: var(--fs-sm);
    cursor: text; transition: opacity .2s; }
  .search-trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-header.hero-search-visible .search-trigger { visibility: hidden; }
  .site-header .site-search { grid-area: search; display: block !important; max-height: 0; opacity: 0; overflow: hidden;
    transform: translateY(-10px); margin: 0; transition: max-height .3s ease, opacity .22s ease, transform .3s ease, margin .3s ease; }
  .site-header.search-open .site-search { max-height: 72px; opacity: 1; transform: none; margin: 2px 0 12px; overflow: visible; }
  .site-header.search-open .search-trigger { opacity: 0; pointer-events: none; }
  .navburger { padding: 12px 4px 12px 6px; }

  /* the open menu is its own scroll area, with a visible bar and a fade while there is more below */
  .navtoggle:checked ~ .mainnav { max-height: calc(100dvh - 66px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #bdb6a8 transparent; }
  .mainnav::-webkit-scrollbar { width: 5px; }
  .mainnav::-webkit-scrollbar-thumb { background: #bdb6a8; border-radius: 3px; }
  .mainnav.more-below::after { content: ''; position: sticky; bottom: 0; display: block; height: 36px; margin-top: -36px;
    background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }

  /* destinations on a phone: the states, then a state's cities in their place */
  .has-mega .nav-panel-head { display: none; }
  .mega-rail { max-height: none; overflow: visible; border: 0; padding: 0; margin: 0; }
  .mega-panes { display: none; max-height: none; overflow: visible; padding: 0; }
  .mega.drill .mega-rail { display: none; }
  .mega.drill .mega-panes { display: block; }
  .rail-item { padding: 12px 4px; font-size: var(--fs-base); border-radius: 0; border-bottom: 1px solid var(--border); }
  .rail-item:last-child { border-bottom: 0; }
  .rail-item.is-on { background: none; color: var(--text); font-weight: 400; }
  .rail-item.is-on .n { color: var(--muted); }
  .rail-item::after { content: '\203A'; margin-left: 10px; color: var(--muted); font-size: 18px; line-height: 1; }
  .rail-item .n { margin-left: auto; }
  .rail-intl { margin-top: 0; border-top: 0; padding-top: 12px; }
  .pane-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit;
    font-size: var(--fs-sm); font-weight: 600; color: var(--text); padding: 8px 0 10px; cursor: pointer; }
  .pane-back::before { content: '\2039'; font-size: 22px; line-height: 1; margin-top: -2px; }
  .mega-pane .pane-all { display: block; }
  .pane-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .pane-grid a { padding: 9px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-search, .to-top, .th-toast { transition: none !important; }
  .hdr-saved.bump, .save-btn.pop svg, .act-btn.pop svg { animation: none !important; }
}
.th-toast span, .th-toast a { white-space: nowrap; }
/* the Spanish header has no search or Saved heart: keep its own two-column grid */
@media (min-width: 901px) {
  .site-header.site-header-es .container { grid-template-areas: "logo util" "primary primary"; grid-template-columns: auto 1fr; }
}
@media (max-width: 900px) {
  .site-header.site-header-es .container { grid-template-areas: "logo burger" "nav nav"; grid-template-columns: 1fr auto; }
}

/* ---- menu scroll areas: a scrollbar you can see before you scroll ----
   macOS hides scrollbars until you scroll, and Chrome (121+) and Safari keep
   hiding them whenever scrollbar-width or scrollbar-color is set. So those two
   stay unset here (Firefox gets them below) and the bar is drawn with the
   ::-webkit-scrollbar parts, which are always visible. A fade at the bottom
   says there is more below until you reach the end. */
.mega-rail, .mega-panes, .nav-cols, .nav-groups-wrap, .mainnav { scrollbar-width: auto; scrollbar-color: auto; }
.mega-rail::-webkit-scrollbar, .mega-panes::-webkit-scrollbar, .nav-cols::-webkit-scrollbar,
.nav-groups-wrap::-webkit-scrollbar, .mainnav::-webkit-scrollbar { width: 8px; }
.mega-rail::-webkit-scrollbar-track, .mega-panes::-webkit-scrollbar-track, .nav-cols::-webkit-scrollbar-track,
.nav-groups-wrap::-webkit-scrollbar-track, .mainnav::-webkit-scrollbar-track { background: #f1eee8; border-radius: 4px; }
.mega-rail::-webkit-scrollbar-thumb, .mega-panes::-webkit-scrollbar-thumb, .nav-cols::-webkit-scrollbar-thumb,
.nav-groups-wrap::-webkit-scrollbar-thumb, .mainnav::-webkit-scrollbar-thumb { background: #c4bcad; border-radius: 4px; border: 2px solid #f1eee8; }
.mega-rail::-webkit-scrollbar-thumb:hover, .mega-panes::-webkit-scrollbar-thumb:hover { background: #9e9585; }
@supports (-moz-appearance: none) {
  .mega-rail, .mega-panes, .nav-cols, .nav-groups-wrap, .mainnav { scrollbar-width: thin; scrollbar-color: #c4bcad #f1eee8; }
}
.mega-rail.more-below::after, .mega-panes.more-below::after, .nav-groups-wrap.more-below::after {
  content: ''; position: sticky; bottom: 0; display: block; height: 34px; margin-top: -34px;
  background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
.navtoggle:checked ~ .mainnav { scrollbar-width: auto; scrollbar-color: auto; }
@supports (-moz-appearance: none) { .navtoggle:checked ~ .mainnav { scrollbar-width: thin; scrollbar-color: #c4bcad #f1eee8; } }

/* Our pick: a compact booking button right after the price, on every screen */
.pick-stats .pick-cta { display: inline-flex; align-items: center; width: auto; min-height: 32px; padding: 0 14px;
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; color: #111; white-space: nowrap; margin-left: 2px; }
.pick-stats .pick-cta:hover { color: #111; }

/* verified: a gold seal with a check, the label in bold, the month after it */
.verified-badge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text); line-height: 1.3; }
.verified-badge .seal { flex: 0 0 18px; }
.verified-badge strong { font-weight: 700; }
.verified-badge .vb-when { color: var(--muted); }
.page-facts:has(.verified-badge) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 18px; }
.side-verified { display: flex; margin: 14px 0 0; }

/* ---- state, province and country hubs ----
   The top: what the area holds, in a few sentences, next to its map. Then the
   places as photo tiles, the best hotel in each place as a table, the best in
   the whole area by category, and the hotels that live on the hub itself. */
.hub-summary .hub-lead { margin: 0 0 12px; max-width: none; line-height: 1.6; color: #3b3f47; }
.hub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hub-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border-strong); font-size: var(--fs-sm); font-weight: 500; color: var(--text); text-decoration: none; }
.hub-jump a:hover { border-color: var(--gold); color: var(--gold-text); }
.hub-tiles { margin-bottom: 18px; }
.hub-state .area-links { margin: 0 0 12px; }
.hub-state .section { scroll-margin-top: calc(var(--hdr-h, 72px) + 12px); }
table.hub-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hub-table th, .hub-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.hub-table thead th { background: var(--bg-alt); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.hub-table tbody th { font-weight: 600; white-space: nowrap; }
.hub-table tbody th a { color: var(--text); }
.hub-table tr:last-child th, .hub-table tr:last-child td { border-bottom: none; }
.hub-table .hotel-name { font-weight: 600; color: var(--text); }
.hub-table .hotel-name:hover, .hub-table tbody th a:hover { color: var(--gold-text); }
.hub-table .room { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.hub-table .rchip { font-size: var(--fs-xs); }
.hub-table .ht-rev { color: var(--muted); font-size: var(--fs-xs); margin-left: 6px; white-space: nowrap; }
.hub-table td[data-l="From"] { white-space: nowrap; font-weight: 600; }
.hub-more { margin-top: 10px; }
.hub-more > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: #fff; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; list-style: none; }
.hub-more > summary::-webkit-details-marker { display: none; }
.hub-more > summary:hover { border-color: var(--gold); }
.hub-more[open] > summary { margin-bottom: 10px; }
.cat-table td .room + .room { margin-top: 0; }
.cat-table a.hotel-name { color: var(--text); }
.cat-table a.hotel-name:hover { color: var(--gold-text); }
.own-head { margin: 34px 0 6px; }
.own-head + .section-lead { margin-bottom: 0; }
/* a phone reads the per-place table as a stack of small cards, no sideways scroll */
@media (max-width: 640px) {
  .hub-table-wrap { border: 0; overflow: visible; }
  .hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hub-table, .hub-table tbody, .hub-table tr, .hub-table th, .hub-table td { display: block; }
  .hub-table tr { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
  .hub-table tbody th, .hub-table td { border: 0; padding: 0; }
  .hub-table tbody th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
  .hub-table tbody th a { color: var(--muted); }
  .hub-table td[data-l="Hotel"] { margin-bottom: 8px; }
  .hub-table td[data-l="Rating"], .hub-table td[data-l="From"], .hub-table td[data-l="Jacuzzi"] { display: inline-flex; align-items: center;
    margin-right: 12px; font-size: var(--fs-xs); }
  .hub-table td[data-l="From"]::before { content: 'from '; font-weight: 400; color: var(--muted); margin-right: 3px; }
  .hub-table td[data-l="Jacuzzi"] { color: var(--muted); }
}
/* a link to a hotel's card on its city page lands on the card, below the header */
.card { scroll-margin-top: calc(var(--hdr-h, 72px) + 16px); }
.card:target { box-shadow: 0 0 0 3px var(--gold); }
@media (max-width: 640px) {
  table.hub-cat { min-width: 0; }
  .hub-cat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hub-cat, .hub-cat tbody, .hub-cat tr, .hub-cat td { display: block; }
  .hub-cat tr { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
  .hub-cat td { border: 0; padding: 0; }
  .hub-cat tr:hover td { background: none; }
  .hub-cat td.cat { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gold-text); max-width: none; margin-bottom: 3px; }
  .hub-cat td[data-l="Hotel"] { min-width: 0; margin-bottom: 8px; }
  .hub-cat td[data-l="Rating"], .hub-cat td[data-l="From"] { display: inline-flex; align-items: center; margin-right: 12px; font-size: var(--fs-xs); }
  .hub-cat td[data-l="From"]::before { content: 'from '; color: var(--muted); margin-right: 3px; }
  .hub-cat td[data-l="From"] { font-weight: 600; }
  .hub-cat td[data-l="Why"] { margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
}

/* ---- a city page's hotels outside the city limits (24.09) ---- */
.scope-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff8e6; border: 1px solid #f3dfae;
  color: #5c4300; font-size: var(--fs-sm); line-height: 1.5; max-width: 760px; }
.card .away { font-size: var(--fs-xs); color: #5c4300; font-weight: 600; margin: 2px 0 4px; }
.greater .area-links { margin-bottom: 4px; }
#nearby-hotels { padding-top: 0; }
.cat-table tr.near-row td.cat { color: var(--muted); }

/* ---- the page's intro, under the heading and the facts line (24 Sep):
   it used to sit at the bottom of the Our pick box ---- */
.lede { font-size: var(--fs-base); line-height: 1.6; color: #3a4150; max-width: 760px; margin: 0 0 16px; }
.lede p { margin: 0 0 8px; }
.lede p:last-child { margin-bottom: 0; }

/* ---- the filter column on a wide screen scrolls on its own when it is
   taller than the window. macOS hides scrollbars until you scroll, so the
   filters below the fold (Amenities) looked missing. Same answer as the
   menus: a drawn bar that is always there, and a fade at the bottom while
   there is more below (site.js sets .more-below). ---- */
@media (min-width: 1100px) {
  .filter-side { scrollbar-width: auto; scrollbar-color: auto; }
  .filter-side::-webkit-scrollbar { width: 8px; }
  .filter-side::-webkit-scrollbar-track { background: #f1eee8; border-radius: 4px; }
  .filter-side::-webkit-scrollbar-thumb { background: #c4bcad; border-radius: 4px; border: 2px solid #f1eee8; }
  .filter-side::-webkit-scrollbar-thumb:hover { background: #9e9585; }
  .filter-side.more-below::after { content: ''; position: sticky; bottom: 0; display: block; height: 40px;
    margin-top: -40px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
}
@supports (-moz-appearance: none) {
  @media (min-width: 1100px) { .filter-side { scrollbar-width: thin; scrollbar-color: #c4bcad #f1eee8; } }
}

/* ---- card title: the rank and the hotel's name stay on one line; a long
   name wraps under itself, not under the number (24 Sep) ---- */
.card h3 { display: flex; align-items: baseline; gap: 0 .3em; }
.card h3 .card-rank { flex: none; }
.card h3 a { display: block; min-width: 0; }

/* ---- Our pick: the numbers on one row, the booking button and "How we
   pick" together on the next, the same at every width (24 Sep) ---- */
.pick-stats { margin: 4px 0 12px; }
.pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.pick-actions .pick-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; color: #111; white-space: nowrap; margin: 0; }
.pick-actions .pick-cta:hover { color: #111; }
.pick-actions .pick-method { margin: 0; font-size: var(--fs-xs); }
.pick-actions .pick-method a { color: var(--muted); padding: 6px 0; }

/* ---- the map shows the nearby hotels too (24 Sep): the city's own in the
   usual dark pin and gold dot, the nearby ones in white with a dark outline,
   and a legend in the map's header ---- */
.mp-dots circle.nb { fill: #fff; stroke: #8a6a1f; stroke-width: 1.5; }
.map-pin.map-pin-nb span { background: #fff; color: #111; border: 1.5px solid #111; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.map-legend { display: inline-flex; gap: 14px; margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend span::before { content: ''; width: 10px; height: 10px; border-radius: 50%; }
.map-legend .lg-in::before { background: #111; }
.map-legend .lg-nb::before { background: #fff; border: 1.5px solid #111; }
.mp-town { color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { .map-dhead { flex-wrap: wrap; } .map-legend { order: 3; width: 100%; margin: 0 0 2px; } }

/* ---- How we verify on list pages: the page's own numbers, a few lines,
   and the way to the full method (24 Sep) ---- */
.verify-short { padding: 26px 30px; }
.verify-facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; max-width: 820px; }
.verify-facts li { position: relative; padding-left: 28px; line-height: 1.55; color: #3b3f47; }
.verify-facts li::before { content: ''; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.verify-short .checkrow-more { margin-top: 18px; }
@media (max-width: 640px) { .verify-short { padding: 22px 18px; } }

/* ---- Our pick, design of 24 Sep: a dark bar on top, the score and the
   name, a short reason, where the tub is; the price and the button on the
   right when the box is wide, under it on a phone ---- */
.pick-box.pick-v2 { padding: 0; overflow: hidden; border-radius: 16px; container-type: inline-size; }
.pick-v2 .pick-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #1b1b1d; color: #fff; padding: 12px 20px; font-size: var(--fs-sm); }
.pick-v2 .pick-head b { color: var(--gold); font-weight: 700; }
.pick-v2 .ph-r { color: #c9c9c9; white-space: nowrap; }
.pick-v2 .pick-body { padding: 18px 20px 20px; }
.pick-v2 .pick-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.pick-v2 .pick-score { flex: none; font-size: 24px; font-weight: 700; line-height: 1; padding: 11px 12px;
  border-radius: 10px; min-width: 60px; text-align: center; }
.pick-v2 .pick-idn { min-width: 0; }
.pick-v2 .pick-name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--text); }
.pick-v2 .pick-sub { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.pick-v2 .pick-sub strong { color: var(--text); }
.pick-v2 .pick-why { margin: 0 0 12px; font-size: var(--fs-base); line-height: 1.6; color: #3b3f47; }
.pick-v2 .pick-tub { display: inline-flex; align-items: center; gap: 8px; background: #fdf1d6; color: #111;
  font-size: var(--fs-sm); font-weight: 700; padding: 5px 12px; border-radius: 8px; }
.pick-v2 .pick-tub i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pick-v2 .pick-side { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.pick-v2 .pick-price { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--muted); }
.pick-v2 .pick-price strong { font-size: 28px; color: var(--text); letter-spacing: -.01em; margin: 0 2px; }
.pick-v2 .pick-cta { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 50px;
  border-radius: 999px; font-size: var(--fs-md); font-weight: 700; color: #111; margin: 0; }
.pick-v2 .pick-cta:hover { color: #111; }
.pick-v2 .pick-method { display: block; text-align: center; margin: 10px 0 0; font-size: var(--fs-sm); }
.pick-v2 .pick-method a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
@container (max-width: 480px) { .pick-v2 .po-long { display: none; } }
@container (min-width: 620px) {
  .pick-v2 .pick-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 26px; align-items: center; }
  .pick-v2 .pick-side { border-top: 0; margin-top: 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--border); }
  .pick-v2 .pick-name { font-size: var(--fs-xl); }
}

/* ---- Our pick, sized to the page (24 Sep, afternoon): the name sits
   between a card's title and the H1, the tub's spot joins the line under
   the name, "How we pick" closes the text, and on a phone the price and the
   button share one row ---- */
.pick-v2 .pick-head { padding: 8px 16px; font-size: var(--fs-xs); }
.pick-v2 .pick-body { padding: 14px 16px 16px; }
.pick-v2 .pick-top { gap: 12px; margin-bottom: 8px; align-items: center; }
.pick-v2 .pick-score { font-size: 18px; padding: 9px 8px; min-width: 46px; border-radius: 8px; }
.pick-v2 .pick-name { font-size: 18px; line-height: 1.25; }
.pick-v2 .pick-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 3px; }
.pick-v2 .pick-sub > span + span::before { content: '\00B7'; margin: 0 6px; color: var(--muted); }
.pick-v2 .ps-tub { display: inline-flex; align-items: center; color: var(--text); font-weight: 600; }
.pick-v2 .ps-tub i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 5px; }
.pick-v2 .pick-why { font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.pick-v2 .pick-why .pick-method { display: inline; margin: 0; font-size: inherit; text-align: left; }
.pick-v2 .pick-why .pick-method a { color: var(--text); font-weight: 400; padding: 0; white-space: nowrap; }
.pick-v2 .pick-side { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; }
.pick-v2 .pick-price { margin: 0; white-space: nowrap; }
.pick-v2 .pick-price strong { font-size: 22px; }
.pick-v2 .pick-cta { width: auto; min-height: 42px; padding: 0 18px; font-size: var(--fs-sm); white-space: nowrap; }
@container (max-width: 480px) { .pick-v2 .ps-word { display: none; } .pick-v2 .pick-sub > .ps-word + span::before { content: none; } }
@container (max-width: 340px) { .pick-v2 .pick-side { flex-wrap: wrap; } .pick-v2 .pick-cta { width: 100%; } }
@container (min-width: 620px) {
  .pick-v2 .pick-body { grid-template-columns: minmax(0, 1fr) 210px; gap: 0 22px; padding: 16px 20px; }
  .pick-v2 .pick-name { font-size: 20px; }
  .pick-v2 .pick-side { display: block; margin-top: 0; padding: 2px 0 2px 22px; }
  .pick-v2 .pick-price { margin-bottom: 10px; }
  .pick-v2 .pick-cta { width: 100%; }
}

/* ---- section headings on a phone: 20px, one step under the H1 (22px) and
   above a hotel's name in Our pick (18px); "More jacuzzi hotels near X"
   read smaller than the list it opens (24 Sep) ---- */
@media (max-width: 760px) {
  main h2 { font-size: 20px; line-height: 1.25; }
  main .fp-head h2, main .filter-panel h2 { font-size: var(--fs-md); }
}

/* Also a short drive from X: thin city pages list the closest hotels that
   live on other pages, one row each, linking to the hotel's own card */
.drive-rows { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); }
.drive-rows li + li { border-top: 1px solid var(--border); }
.drive-rows a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; min-height: 56px; }
.drive-rows a:hover .dr-name { text-decoration: underline; }
.dr-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dr-name { font-weight: 600; color: var(--text); line-height: 1.35; }
.dr-where { font-size: var(--fs-sm); color: var(--muted); }
.dr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dr-rt { font-size: var(--fs-xs); font-weight: 700; border-radius: 6px; padding: 2px 7px; background: #111; color: #fff; }
.dr-price { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
@media (min-width: 700px) {
  .dr-side { flex-direction: row; align-items: center; gap: 12px; }
}
.dr-per { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
@media (min-width: 700px) { .drive-rows { max-width: 760px; } }

/* ---- /hot-tub-types/: where each placement is most common ---- */
.leader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; margin-top: 18px; }
.leader-block h3 { font-size: var(--fs-md); margin: 0 0 6px; }
.leader-sub { margin: 12px 0 0; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.leader-list { margin-top: 4px; grid-template-columns: 1fr; gap: 0; }
.leader-share { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.leader-share a { font-weight: 500; }

/* ---- the original logo (25 Sep) ---- */
.logo-img { display: block; height: 32px; width: auto; max-width: 180px; }
.foot-brand .logo-img { height: 30px; }
@media (max-width: 640px) { .site-header .logo-img { height: 28px; } }
.map-note { margin: 0; padding: 6px 18px; font-size: var(--fs-xs); color: var(--muted); border-bottom: 1px solid var(--border); }
/* the city's legal boundary on the maps (25 Sep) */
.map-preview .mp-limits { fill: rgba(241, 179, 2, .10); fill-rule: evenodd; stroke: #111; stroke-opacity: .45; stroke-width: .8; stroke-dasharray: 3 2; }
.map-legend .lg-lim::before { border-radius: 2px; width: 14px; height: 9px; background: rgba(241, 179, 2, .18); border: 1.5px dashed rgba(17, 17, 17, .6); }

/* affiliate disclosure under the H1 (head_pass.py) */
.aff-note { font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); margin: 6px 0 0; max-width: 72ch; }
.aff-note a { color: inherit; text-decoration: underline; }

/* ---- hotel page, 26 Sep design (Bosko's phone screenshots): photo first with
   round Save/Share on it, the trail between home and the hotel, rating, tags,
   price and the button in the head; tabs Room first; the room card with short
   facts; the verified line; "About" with Read more (on a computer too); nearby
   hotels as a slider. A computer keeps its layout, except Read more. ---- */
.hp-mbook, .hp-verified-m, .room-sub, .t-sh { display: none; }
.breadcrumbs .bc-sep { color: inherit; }
.about-body > :last-child { margin-bottom: 0; }
.about-body.is-clamped { max-height: calc(1.7em * 6); overflow: hidden; }
.read-more { display: inline-block; background: none; border: 0; padding: 8px 0 2px; margin: 4px 0 0; font: inherit;
  font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.read-more[hidden] { display: none; }
@media (max-width: 759px) {
  .t-lg { display: none; }
  .t-sh { display: inline; }
  .hp-head-wrap { display: flex; flex-direction: column; position: relative; }
  .hp-head-wrap .hotel-gallery { order: -1; margin: 0 -16px; height: auto; aspect-ratio: 11 / 8; border-radius: 0; }
  .hp-head-wrap .g-all svg, .hp-head-wrap .g-all .ico { display: none; }
  .hp-head-wrap .breadcrumbs { padding: 16px 0 4px; font-size: 14px; }
  .hp-head-wrap .bc-end { display: none; }
  .hp-top { margin: 2px 0 0; }
  .hp-title h1 { font-size: 27px; margin-bottom: 10px; }
  .hp-meta { font-size: var(--fs-base); gap: 6px 10px; }
  .hp-meta .rbars { display: none; }
  .hp-meta .rchip { font-size: var(--fs-base); }
  .hp-meta .rword { font-weight: 700; }
  .hp-addr { font-size: var(--fs-base); margin-top: 2px; }
  .hp-actions { position: absolute; top: 14px; right: 12px; z-index: 4; gap: 10px; }
  .hp-actions .act-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%;
    border: 0; background: #fff; box-shadow: 0 1px 6px rgba(17,17,17,.18); }
  .hp-actions .act-btn > span { display: none; }
  .hp-actions .act-btn svg { width: 20px; height: 20px; }
  .hp-actions .share-wrap { order: -1; }
  .hp-tabs { border-top: 1px solid var(--border); }
  .hp-mbook { display: block; margin-top: 14px; }
  .hp-mtags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
  .hp-mtags .tag { font-size: var(--fs-sm); font-weight: 600; background: #efede8; box-shadow: none; padding: 4px 10px; border-radius: 7px; }
  .hp-mbook .book-from { font-size: var(--fs-md); }
  .hp-mbook .book-price { font-size: 36px; }
  .hp-mbook .book-price span { font-size: var(--fs-md); }
  .hp-mbook .book-btn { display: flex; margin-top: 12px; min-height: 50px; font-size: var(--fs-md); font-weight: 700; }
  .hp-mbook .book-notes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-top: 10px; }
  .hp-mbook .book-note { font-size: 12px; margin: 0; text-align: left; }
  .hp-mbook .aff-disc { margin-left: auto; font-size: 12px; }
  .hp-mbook .aff-disc > summary { gap: 5px; }
  .hp-mbook .aff-disc .ico-info { width: 15px; height: 15px; flex-basis: 15px; }
  .hotel-side { display: none; }
  .hp-tabs a[href="#jacuzzi-room"] { order: -1; }
  .hp-tabs a { font-size: var(--fs-base); }
  .hotel-layout > #jacuzzi-room, .hotel-main > #jacuzzi-room { order: -2; margin-top: 0; border-radius: 18px; }
  .hp-verified-m { display: flex; order: -1; margin: -8px 0 0; }
  .hotel-main > #overview { margin-top: 16px; }
  .hp-tags-about { display: none; }
  .room-top { padding: 18px 18px 16px; }
  .room-kick { font-size: 12px; margin-bottom: 4px; }
  .room-title { font-size: 20px; line-height: 1.3; }
  .room-sub { display: block; color: var(--muted); font-size: var(--fs-base); margin-top: 4px; }
  .room-top .room-cta { display: none; }
  .room-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; }
  .room-facts.n1 { grid-template-columns: minmax(0, 1fr); }
  .room-facts.n2, .room-facts.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-facts > div { padding: 12px 14px 14px; border-left: 1px solid var(--border); min-width: 0; }
  .room-facts > div:first-child, .room-facts.n4 > div:nth-child(3) { border-left: 0; }
  .room-facts.n4 > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .room-facts dt { font-size: var(--fs-sm); }
  .room-facts dd { font-size: var(--fs-md); font-weight: 700; margin-top: 2px; }
  .about-body.is-clamped { max-height: calc(1.7em * 5); }
  /* nearby hotels: one row that slides sideways, the next card peeking in */
  .near-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -16px 0;
    padding: 2px 16px 10px; scroll-padding-left: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .near-grid::-webkit-scrollbar { display: none; }
  .near-card { flex: 0 0 78%; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .near-card .nc-img { aspect-ratio: 16 / 10; min-height: 0; }
}

/* ---- affiliate disclosure: one "Affiliate disclosure" link that opens the
   text on a click (Bosko, 26 Sep). A list: at the end of its facts row (on a
   phone under it, on the right); a hotel page: by the note under the booking
   button. ---- */
.aff-disc { position: relative; display: inline-block; font-size: var(--fs-sm); line-height: 1.4; }
.aff-disc > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--muted); padding: 5px 0; white-space: nowrap; }
.aff-disc > summary::-webkit-details-marker { display: none; }
.aff-disc > summary span { text-decoration: underline; text-underline-offset: 2px; }
.aff-disc > summary:hover, .aff-disc[open] > summary { color: var(--text); }
.aff-disc .ico-info { flex: 0 0 16px; }
.aff-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: min(400px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-hover);
  padding: 16px 44px 16px 18px; text-align: left; white-space: normal; }
.aff-pop .aff-note { margin: 0; max-width: none; font-size: var(--fs-base); line-height: 1.6; color: var(--text); }
.aff-pop .aff-note a { color: var(--text); font-weight: 600; text-decoration: underline; }
.aff-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.aff-x:hover { background: var(--bg-alt); color: var(--text); }
.facts-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; margin: 4px 0 18px; }
.facts-row > .page-facts { margin: 0 !important; }
.facts-row > .aff-disc { margin-left: auto; }
.aff-row { display: flex; justify-content: flex-end; margin: 2px 0 6px; }
.hotel-book .book-notes { text-align: center; }
.hotel-book .aff-disc { margin-top: 4px; }
.hotel-book .aff-pop { right: auto; left: 50%; transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); }

/* ---- buttons: #F1B302, bold, #16181A text (Bosko, 26 Sep) ---- */
.btn-cta, .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--cta-text); font-weight: 700; }
.btn-cta:hover, .btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--cta-text); }

/* ---- hotel cards, 26 Sep design (Bosko's screenshot): the elements where
   the screenshot has them, at the card's earlier sizes (27 Sep: "positions,
   not sizes"). Rating row with the reviews and the class in words, the
   address, the verified room on a cream panel, amenities in two rows at most,
   a footer line with "from" over the price and "View Deal ->". ---- */
.card .card-body { padding-bottom: 0; }
.card .card-rating .rchip { margin-right: 8px; }
.card .card-rating { gap: 4px 0; }
.card .card-rating .rev, .card .card-rating .card-class { font-size: var(--fs-xs); color: var(--text); }
.card .card-rating .rev { text-decoration: underline; text-underline-offset: 2px; }
.card .card-rating .rev::before, .card .card-rating .card-class::before { content: '\00b7'; display: inline-block;
  color: var(--muted); margin: 0 7px; text-decoration: none; }
.card .card-rating > .card-class:first-child::before { display: none; }
.card .card-rating .badge.citylabel { margin-left: 8px; }
.card .room-block { background: #f6f6f6; border: 0; border-radius: 10px; padding: 7px 11px; margin: 6px 0 2px; }
.card .room-block-unknown { background: var(--bg-alt); }
.card .room-line .room-meta { display: block; margin-top: 1px; }
.card .room-line .room-meta::before { content: none; }
.card .amenities { max-height: 53px; overflow: hidden; }
.card .amenities.is-fit { max-height: none; }
.card .amenity-chip { border: 0; background: #f1f0ec; line-height: 18px; }
.card .amenity-chip.more { background: none; padding-left: 2px; padding-right: 2px; font-weight: 600; }
.amenity-chip[hidden] { display: none !important; }
.card .card-cta { margin: 8px -18px 0; padding: 9px 18px 11px; border-top: 1px solid var(--border); flex-wrap: nowrap; }
.card .card-cta .price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; line-height: 1.15; }
.card .card-cta .price .p-from { flex: 0 0 100%; }
.card .cta-group { flex: 1 1 auto; justify-content: flex-end; }
.card .card-cta .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 0 22px; border-radius: 10px; flex: 1 1 auto; max-width: 220px; }
.card .card-cta .btn-primary .arr { font-size: 1.15em; line-height: 1; }
.card .sdots { position: absolute; right: 12px; bottom: 13px; z-index: 3; display: flex; gap: 5px; pointer-events: none; }
.card .sdots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.6); transition: width .2s; }
.card .sdots i.on { width: 16px; background: #fff; }
@media (max-width: 700px) {
  .card .snav { display: none; }
  .card .card-cta .btn-primary { max-width: none; min-height: 44px; }
}
/* a computer has the width: the room facts and "from" stay on their line, so
   the card keeps its earlier height */
@media (min-width: 701px) {
  .card .room-line .room-meta { display: inline; margin-top: 0; }
  .card .room-line .room-meta::before { content: ' \00b7  '; }
  .card .card-cta .price .p-from { flex: 0 0 auto; }
  .card .room-block { padding: 6px 10px; margin-top: 5px; }
  .card .card-cta { margin-top: 6px; padding: 8px 18px 10px; }
}

/* a list's facts row on a phone (Bosko, 27 Sep): the count, the lowest price
   and "Verified · Sep 2026" on one line; the town and the nearby count or the
   number of cities on a second */
@media (max-width: 759px) {
  .facts-row .page-facts { column-gap: 12px; }
}
/* the head of a list (Bosko's phone screenshots, 27 Sep): H1, the intro, the
   facts between two lines with dots between them, then "+ N more nearby" (or
   the number of cities) on the left and the disclosure on the right */
.facts-more { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
@media (max-width: 759px) {
  .list-head { display: flex; flex-direction: column; }
  .list-head > .lede, .list-head > .prose.intro { order: 1; }
  .list-head > .facts-row { order: 2; }
  .list-head > .scope-note { order: 3; }
  .facts-row { row-gap: 0; margin: 4px 0 16px; }
  .facts-row > .page-facts { flex: 0 0 100%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 9px 0; column-gap: 0 !important; }
  .facts-row > .page-facts > span + span::before { content: '\00b7'; color: var(--border-strong); margin: 0 5px; font-weight: 400; }
  .facts-row > .page-facts > .verified-badge::before { margin-right: 0; }
  .facts-row > .facts-more { margin-top: 8px; }
  .facts-row > .aff-disc { margin: 6px 0 0 auto; }
}
/* narrower phones: the facts row a little smaller, so it stays on one line
   (all 560 English lists fit at 360 px and up) */
@media (max-width: 389px) { .facts-row > .page-facts, .facts-row > .page-facts .verified-badge { font-size: 12.5px; } }
@media (max-width: 369px) { .facts-row > .page-facts, .facts-row > .page-facts .verified-badge { font-size: 12px; } }