/* ==========================================================================
   NearStay — Front page (home) styles.
   A section-for-section reproduction of the HotelsNearPOI homepage, but every
   colour is bound to the theme's --col-* Customizer variables (see
   nearstay_dynamic_css) so the whole page rebrands with the rest of the site.
   Only loaded on the front page (see functions.php).
   ========================================================================== */

.hx{
  /* Local aliases → theme tokens. Rebranding the theme rebrands the homepage. */
  --hx-navy: var(--col-primary, #0E2049);
  --hx-navy2: var(--col-primary, #0E2049);          /* hover, lightened just below */
  --hx-cream: var(--col-beige, #f8f7f3);
  --hx-ink: #111;
  --hx-gray: #f1f1f1;
  font-family: var(--font-family, "DM Sans", Helvetica, Arial, sans-serif);
  color: var(--hx-ink);
}
/* Lighten the primary for hover states where the browser supports color-mix
   (falls back to the plain primary above otherwise). */
@supports (background: color-mix(in srgb, red, blue)){
  .hx{ --hx-navy2: color-mix(in srgb, var(--col-primary, #0E2049) 84%, #fff); }
}
.hx h1,.hx h2,.hx h3{font-family:inherit;margin:0;line-height:1.2}
/* never underline homepage links, even though they are clickable */
.hx a,.hx a:hover,.hx a:focus,.hx-card b,.hx-card:hover b,.hx-split-aside h2 a,.hx-split-aside h2 a:hover,.hx-sec-link,.hx-sec-link:hover{text-decoration:none!important}
.hx-full{width:100vw;position:relative;left:50%;margin-left:-50vw}
/* Measured off the reference: the body content box runs 61px from each edge
   at a 1440 viewport, i.e. 1320px of content. */
.hx-wrap{max-width:1368px;margin:0 auto;padding:0 24px}

/* ---------- HERO ---------- */
.hx-hero{position:relative;min-height:470px;display:flex;align-items:flex-start;overflow:hidden;background:var(--hx-navy)}
.hx-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background-size:cover;background-position:center;transition:opacity .6s ease;opacity:1}
.hx-hero-bg.hx-fadeout{opacity:0}
/* The reference hero is a navy PANEL over the left of the photo that fades out
   across the middle — not an even scrim. The headline, search bar and recent
   searches all sit on solid navy, which is what makes white type readable there
   without the text-shadows the old even scrim needed. */
.hx-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,
	rgba(5,28,60,.92) 0%,rgba(5,28,60,.84) 25%,rgba(5,28,60,.34) 37%,
	rgba(5,28,60,.05) 46%,rgba(5,28,60,0) 52%)}
.hx-hero-inner{position:relative;z-index:2;width:100%;padding-top:50px;padding-bottom:66px}
/* The hero block is inset one more gutter than the sections below it. */
.hx-hero-inner .hx-wrap{padding-left:80px}
.hx-hero h1{color:#fff!important;font-weight:700;font-size:clamp(28px,3.1vw,44px);letter-spacing:-.01em;margin-bottom:24px;max-width:520px;text-shadow:0 2px 14px rgba(2,12,30,.72)}
/* Last word of the headline in the accent colour (see nearstay_hero_headline_html) */
.hx-hero-em{color:var(--brand-cta,#FE514A)}
.hx-searchbar{display:flex;align-items:stretch;background:#fff;overflow:visible;max-width:1200px;border-radius:12px;padding:7px;box-shadow:0 12px 34px rgba(2,12,30,.34);position:relative}
.hx-searchbar .hx-cell{display:flex;align-items:center;gap:11px;padding:10px 20px;border-right:1px solid #e5e7ee;background:transparent}
.hx-searchbar .hx-cell:last-of-type{border-right:0}
.hx-cell-dest{flex:1.7;min-width:0;position:relative}
.hx-cell-date{flex:1.05}
.hx-cell-guests{flex:1.15;min-width:0}
.hx-cell > div{min-width:0}
.hx-cell svg{flex:none;color:#3c4257}
.hx-cell-label{font-size:12.5px;font-weight:600;color:#5b6178;display:block;margin-bottom:2px}
.hx-searchbar input[type=text]{border:0;outline:0;width:100%;font-size:16px;font-family:inherit;color:var(--hx-ink);background:transparent;padding:6px 0}
.hx-searchbar input[type=date]{border:0;outline:0;width:100%;font-size:15px;font-family:inherit;color:var(--hx-ink);background:transparent;padding:0}
.hx-searchbar input::placeholder{color:#8a90a3}
/* The guests picker is a real <select>; strip the control chrome so it reads as
   the plain value line the reference shows, and keep it full-width so the whole
   cell is the hit area. */
.hx-cell-guests select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:15px;color:var(--hx-ink);padding:0;margin:0;width:100%;cursor:pointer}
.hx-btn-search{flex:0 0 auto;background:var(--brand-cta,#FE514A);color:#fff;border:0;border-radius:8px;font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s;padding:0 34px;white-space:nowrap}
.hx-btn-search:hover{background:var(--brand-cta-dark,#E8443D)}
/* autocomplete suggestions */
.hx-suggest{position:absolute;top:100%;left:0;right:0;background:#fff;z-index:30;box-shadow:0 14px 30px rgba(0,0,0,.25);display:none;max-height:290px;overflow:auto}
.hx-suggest a{display:block;padding:11px 16px;text-decoration:none;color:var(--hx-ink);font-size:15px;border-bottom:1px solid #eef0f5}
.hx-suggest a small{display:block;color:#7a8095;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.hx-suggest a:hover,.hx-suggest a.hx-act{background:var(--hx-gray)}
/* Booking's tick is a filled green disc in the reference, not the browser's own
   checkbox. The input keeps its role (and its keyboard behaviour); the disc is
   drawn on the label's ::before and the box itself is only visually hidden. */
.hx-compare{display:flex;align-items:center;gap:10px;margin-top:16px;color:#fff;font-size:15px;font-weight:500;cursor:pointer;position:relative}
.hx-compare input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.hx-compare::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:transparent;
  background-position:center;background-repeat:no-repeat;background-size:12px 12px}
.hx-compare:has(input:checked)::before{background-color:#12B76A;border-color:#12B76A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.hx-compare:has(input:focus-visible)::before{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.hx-recent{margin-top:24px;display:none}
.hx-recent h2{color:#fff!important;font-size:17px;font-weight:700;background:transparent;display:block;padding:0;margin-bottom:12px}
.hx-recent-row{display:flex;gap:16px;flex-wrap:wrap}
.hx-recent-card{background:#fff;border-radius:10px;min-width:210px;max-width:290px;flex:1;padding:14px 18px;cursor:pointer;box-shadow:0 6px 18px rgba(2,12,30,.22);transition:transform .15s;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;touch-action:manipulation}
/* Pin disc, drawn on the card so the JS that fills the row stays untouched. */
.hx-recent-card::before{content:"";grid-row:1 / span 3;width:30px;height:30px;border-radius:50%;background:#eef1f6 center/15px 15px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='2'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.hx-recent-card:hover{transform:translateY(-2px)}
.hx-recent-card b{display:block;font-size:15px;margin-bottom:2px}
.hx-recent-card span{display:block;font-size:13.5px;color:#3c4257}
.hx-recent-card small{color:#7a8095;font-size:13px}
.hx-recent-card b,.hx-recent-card span,.hx-recent-card small{min-width:0;overflow-wrap:anywhere}
/* Photo credit sits straight on the image in the reference — no pill. */
.hx-hero-caption{position:absolute;left:0;bottom:14px;z-index:5;background:transparent;color:#fff!important;padding:0 24px;font-size:13.5px;font-weight:400;letter-spacing:.01em;text-decoration:none;display:block;max-width:70%;text-shadow:0 1px 8px rgba(2,12,30,.65)}
.hx-hero-caption:hover{background:transparent;color:#fff!important;text-decoration:none;opacity:.85}
.hx-hero-arrows{position:absolute;right:24px;bottom:20px;z-index:3;display:flex;gap:12px}
.hx-hero-arrows button{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(6,20,44,.28);color:#fff;font-size:19px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.hx-hero-arrows button:hover{background:rgba(6,20,44,.6)}
/* ---------- SECTIONS ---------- */
.hx-sec{padding:34px 0}
.hx-mapsec h2{font-size:24px;font-weight:600;color:var(--hx-navy);margin-bottom:28px}
.hx-mapsec .map_container{border-radius:8px;overflow:hidden}
.hx-sec-head{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-bottom:28px;flex-wrap:wrap}
.hx-sec-head h2{font-size:24px;font-weight:600;color:var(--hx-navy)}
.hx-sec-link{color:var(--hx-navy)!important;text-decoration:none}
.hx-sec-link:hover{text-decoration:underline}
/* ---------- SPLIT SECTION : heading + View all in LEFT rail, cards RIGHT ---------- */
.hx-splitsec{padding:34px 0}
.hx-split{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px 30px;align-items:start}
.hx-split-aside h2{font-size:26px;font-weight:700;color:var(--hx-navy);line-height:1.3;margin-bottom:24px}
.hx-split-aside h2 a{color:var(--hx-navy)!important;text-decoration:none}
.hx-split-aside h2 a:hover{text-decoration:underline}
@media(max-width:900px){.hx-split{grid-template-columns:1fr;gap:20px}.hx-split-aside h2{margin-bottom:14px;font-size:23px}}
/* "View all" is the one blue button on the page in the reference; every other
   CTA is coral. --brand-blue comes from brand.css. */
.hx-btn{display:inline-block;background:var(--brand-blue,#2563EB);color:#fff!important;font-size:15px;font-weight:600;padding:11px 22px;border-radius:8px;text-decoration:none;transition:background .2s}
.hx-btn:hover{background:var(--brand-blue-dark,#1D4FD7)}

/* ---------- CARD RAIL ----------
   The reference runs these sections as one horizontal row of small cards with a
   next arrow, not a 3-across grid of big ones — six fit the content column at
   desktop. Built as a scroll-snapping track rather than a JS carousel: it is
   the same interaction with the keyboard, trackpad and touch handling already
   done by the browser, and the arrow (home.js) only scrolls it by one page.
   Kept on .hx-grid3 so every caller (home rails, /best-hotels/ directory) keeps
   its markup; the directory page opts back out to a grid further down. */
/* The track stops one arrow-width short of the content edge — that reserved
   strip is where the next arrow sits in the reference, beside the last card
   rather than on top of it. */
.hx-rail{position:relative;padding-right:58px}
.hx-rail--inspiration,.hx-rail--two{padding-left:58px}
.hx-grid3{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5*20px)/6);gap:20px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.hx-grid3::-webkit-scrollbar{display:none}
.hx-grid3 > *{height:100%;scroll-snap-align:start}
.hx-rail-next,.hx-rail-prev{position:absolute;top:calc(50% - 40px);z-index:4;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--brand-border,rgba(102,112,133,.25));background:#fff;color:var(--hx-navy);
  font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(16,24,40,.14)}
.hx-rail-next{right:8px}
.hx-rail-prev{left:8px}
.hx-rail-next:hover,.hx-rail-prev:hover{background:#f4f6fa}
.hx-rail-next:focus-visible,.hx-rail-prev:focus-visible{outline:3px solid rgba(37,99,235,.34);outline-offset:3px}
.hx-rail-next:disabled,.hx-rail-prev:disabled{opacity:.38;cursor:default;box-shadow:none}
.hx-rail-next[hidden],.hx-rail-prev[hidden]{display:none}
/* "Best hotels" runs as TWO rows of six in the reference, "Inspiration" as one.
   Same track, same snapping — only the row count differs. */
.hx-rail--two .hx-grid3{grid-template-rows:repeat(2,auto);row-gap:26px}
.hx-card{text-decoration:none;color:var(--hx-ink);display:flex;flex-direction:column;min-width:0;height:100%}
.hx-card-main{display:block;color:inherit;text-decoration:none}
.hx-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:9px;border-radius:8px}
.hx-card-placeholder{display:block;aspect-ratio:4/3;margin-bottom:9px;background:#e5e7eb;border-radius:8px}
/* Two lines, so a long name cannot push one card taller than its row. */
.hx-card-main > b,.hx-card > b{font-size:13.5px;font-weight:600;color:var(--hx-navy);line-height:1.32;display:-webkit-box;min-height:2.64em;max-height:2.64em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hx-hotelcard .hx-card-main b{color:var(--hx-navy);text-decoration:none!important}
.hx-hotelcard .hx-card-main:hover b{color:var(--hx-navy);text-decoration:none!important;opacity:.72}
.hx-card-main:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px;border-radius:8px}
.hx-card small{display:block;color:#7a8095;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
/* ---------- TESTIMONIAL (image + card) ----------
   One Sky Tint panel with the photo inset INSIDE it on the left and the quote
   beside it — the reference's treatment. It used to be a full-bleed photo with
   a white card overhanging it, which read as two separate blocks. */
.hx-testiwrap{background:transparent;padding:22px 0}
.hx-testi{display:flex;align-items:stretch;gap:36px;min-height:0;background:var(--brand-sky,#EAF2FF);border-radius:16px;padding:22px}
.hx-testi-img{flex:0 0 32%;background-size:cover;background-position:center;min-height:240px;border-radius:12px;background-color:var(--hx-navy)}
.hx-testi-card{flex:1;background:transparent;box-shadow:none;padding:14px 26px 14px 0;margin:0;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
.hx-testi-card h3{color:var(--hx-navy)!important;font-size:17px;font-weight:700;margin-bottom:16px}
.hx-testi-card blockquote{margin:0;font-size:19px;line-height:1.5;font-weight:500;color:var(--hx-navy);min-height:0}
.hx-testi-card cite{display:block;margin-top:20px;font-style:normal;font-weight:700;font-size:14.5px;color:var(--hx-navy)}
.hx-testi-card cite span{display:block;font-weight:400;font-size:13px;color:#5b6178;margin-top:2px}
.hx-qdots{margin-top:18px;display:flex;gap:7px}
.hx-qdots button{width:8px;height:8px;border-radius:50%;border:0;background:#c3cfe4;cursor:pointer;padding:0}
.hx-qdots button.hx-on{background:var(--brand-blue,#2563EB)}
/* Tiles wrap into rows and share the leftover width, so a row holds four or
   five depending on how long the labels are — the reference's behaviour. */
.hx-citytiles{display:flex;flex-wrap:wrap;gap:14px}
.hx-citytiles > *{flex:1 1 190px;min-width:0}
/* ---------- BEST HOTELS IN : destination image tiles ----------
   Every white "city stamp" carries a local mark rather than the same generic
   hotel glyph: skyline, torii, acacia, temple gate, and so on. */
.hx-citytile{position:relative;display:block;text-decoration:none;overflow:hidden;background:var(--hx-navy);border-radius:12px}
/* Fixed height, free width. That pairing is what makes the row above work: the
   tiles flex to different widths and still line up, and a short last row grows
   wider instead of growing taller. A 16/9 ratio here (which is what this rule
   used to carry, silently overriding the sizing rule above it) tied height to
   width, so a two-tile last row rendered as two 280px-tall slabs. */
.hx-citytile img{width:100%;height:104px;object-fit:cover;display:block;transition:transform .45s ease}
.hx-citytile:hover img{transform:scale(1.06)}
.hx-cityicon{position:absolute;left:12px;top:12px;z-index:2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:#101828;background:#fff;box-shadow:0 2px 8px rgba(2,12,30,.22);transition:transform .24s ease,box-shadow .24s ease}
.hx-cityicon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.hx-cityicon .hx-icon-accent{stroke:var(--hx-icon-accent,#2563EB)}
.hx-cityicon--initials svg{width:24px;height:24px;opacity:.18;fill:var(--brand-sky,#EAF2FF)}
.hx-cityicon--initials b{position:absolute;font-size:9px;line-height:1;letter-spacing:.02em;color:var(--hx-navy,#101828)}
.hx-citytile:hover .hx-cityicon,.hx-citytile:focus-visible .hx-cityicon{transform:translateY(-2px) rotate(-3deg);box-shadow:0 5px 12px rgba(2,12,30,.28)}
.hx-citytile > .hx-citylabel{position:absolute;left:0;right:0;bottom:0;padding:38px 14px 12px;background:linear-gradient(transparent,rgba(2,12,30,.85));color:#fff!important;font-size:14px;font-weight:600;letter-spacing:.01em}
@media(min-width:1024px){
 .hx-rail--two .hx-card b,.hx-rail--inspiration .hx-card b{font-size:15px;line-height:1.4}
 .hx-citytile > .hx-citylabel{font-size:15.5px;padding:42px 16px 14px}
}
@media(prefers-reduced-motion:reduce){.hx-cityicon{transition:none}.hx-citytile:hover .hx-cityicon,.hx-citytile:focus-visible .hx-cityicon{transform:none}}
/* ---------- EXPERTS BAND ----------
   One rounded navy panel holding copy on the left and a tidy 4x2 grid of round
   portraits on the right — the reference. It used to be a navy card beside a
   scattered, rotated, overlapping pile of photos. */
.hx-experts{padding:22px 0;background:transparent}
.hx-exp-flex{display:flex;align-items:center;gap:28px;background:var(--hx-navy);border-radius:16px;padding:34px 40px}
.hx-exp-card{flex:1;background:transparent;color:#fff;padding:0}
.hx-exp-card h2{color:#fff!important;font-size:21px;font-weight:700;margin-bottom:10px}
.hx-exp-card p{color:#c8d2e6;line-height:1.55;margin:0 0 20px;font-size:14.5px;max-width:760px}
.hx-exp-card .hx-btn{background:var(--brand-cta,#FE514A);color:#fff!important}
.hx-exp-card .hx-btn:hover{background:var(--brand-cta-dark,#E8443D)}
.hx-exp-photos{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,auto);gap:14px;align-items:center;justify-content:end}
/* The roster JSON the shuffle reads is a child of this flex row, and the rule
   above would otherwise turn a <script> into a visible empty box. */
.hx-exp-photos > script{display:none!important;margin:0!important}
.hx-exp-photos img{width:74px;height:74px;object-fit:cover;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 4px 12px rgba(2,12,30,.3);display:block}
/* ---------- NEWSLETTER ----------
   Sky Tint panel, blue rounded-square envelope, coral Sign up — the reference.
   Was a full-bleed navy band with a white button. */
.hx-news{background:transparent;padding:14px 0 22px}
.hx-news .hx-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:var(--brand-sky,#EAF2FF);border-radius:14px;padding:22px 26px}
.hx-news .hx-wrap::before{content:"";flex:none;width:46px;height:46px;border-radius:11px;background:var(--brand-blue,#2563EB) center/24px 24px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.hx-news-txt{flex:1;min-width:260px}
.hx-news h2{font-size:16.5px;font-weight:700;color:var(--hx-navy)!important;margin-bottom:5px}
.hx-news p{color:#3c4257;margin:0;max-width:560px;font-size:13.5px;line-height:1.55}
.hx-news form{flex:0 0 auto;display:flex;gap:10px;min-height:0}
.hx-news input{padding:12px 14px;border:1px solid var(--brand-border,rgba(102,112,133,.25));font-family:inherit;font-size:14.5px;width:280px;max-width:66vw;border-radius:8px;background:#fff;color:var(--hx-ink)}
.hx-news button{border:0;cursor:pointer;font-family:inherit;background:var(--brand-cta,#FE514A);color:#fff;font-weight:700;font-size:14.5px;padding:12px 30px;border-radius:8px}
.hx-news button:hover{background:var(--brand-cta-dark,#E8443D)}
/* ---------- MOBILE ---------- */
@media(max-width:900px){
 .hx-hero{min-height:440px}
 .hx-rail{padding-right:0}
	.hx-rail--inspiration,.hx-rail--two{padding:0 46px}
 /* The desktop hero is inset an extra gutter and its headline is capped at
    520px; on a phone both of those pushed "Experts" off the right edge. */
 .hx-hero-inner .hx-wrap{padding-left:20px;padding-right:20px}
 .hx-hero h1{max-width:none;overflow-wrap:break-word}
 /* The desktop overlay is a left-hand panel that fades out by 74%. On a phone
    the copy spans the full width, so the tail of the headline and the photo
    credit sat on bare photo — coral on a bright picture. Cover the whole
    frame instead. */
	.hx-hero-shade{background:
		linear-gradient(90deg,rgba(5,28,60,.82) 0%,rgba(5,28,60,.48) 35%,rgba(5,28,60,.12) 58%,rgba(5,28,60,0) 78%)}
 .hx-hero-inner{padding-top:44px;padding-bottom:130px}
 .hx-hero h1{font-size:24px}
 .hx-searchbar{flex-wrap:wrap}
 .hx-cell-dest{flex:1 1 100%;border-bottom:1px solid #e5e7ee;border-right:0}
 .hx-cell-date{flex:1}
 .hx-cell-guests{flex:1 1 100%;border-top:1px solid #e5e7ee;border-right:0}
 .hx-btn-search{flex:1 1 100%;padding:15px}
 /* Recent searches are complete choices, not a teaser carousel. Fit every card
    inside the hero at tablet widths so a destination is never clipped at the
    viewport edge. auto-fit gives a tablet three cards when they fit and two on
    narrower portrait screens. */
 .hx-recent{min-width:0;margin-top:20px}
 .hx-recent h2{font-size:20px;margin-bottom:12px}
 .hx-recent-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;max-width:900px;overflow:visible;padding:0}
 .hx-recent-card{box-sizing:border-box;width:100%;min-width:0;max-width:none;min-height:78px;padding:12px 14px}
 /* No horizontal track on a phone. A scroll rail two rows deep put a card's
    text over its neighbour's photo whenever the track sat mid-card, and a
    swipeable rail buys nothing here — the sections become a plain two-up grid
    that scrolls with the page. */
 .hx-grid3{display:grid;grid-auto-flow:row;grid-auto-columns:auto;
   grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;overflow:visible;
   scroll-snap-type:none}
	.hx-rail--inspiration .hx-grid3,.hx-rail--two .hx-grid3{grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);
		grid-template-columns:none;gap:16px;overflow-x:auto;overflow-y:hidden;
		scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
	.hx-rail--two .hx-grid3{grid-template-rows:repeat(2,auto)}
 .hx-exp-flex{flex-direction:column;align-items:flex-start;padding:28px 24px}
 .hx-exp-photos{justify-content:start}
 .hx-exp-photos img{width:56px;height:56px}
 .hx-testi{flex-direction:column;gap:18px}
 .hx-testi-img{flex:none;width:100%}
 .hx-testi-card{margin:0;padding:0 4px 6px}
 .hx-testi-card blockquote{font-size:17px}
 .hx-news .hx-wrap{padding:20px}
 .hx-news form{flex:1 1 100%}
 .hx-news input{flex:1;width:auto}
}
@media(max-width:560px){
 .hx-grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
	.hx-rail--inspiration,.hx-rail--two{padding:0 42px}
	.hx-rail--inspiration .hx-grid3,.hx-rail--two .hx-grid3{grid-template-columns:none;grid-auto-columns:78%;gap:14px}
 .hx-sec{padding:42px 0}
 .hx-cell-date{padding:12px 14px}
 /* A phone gets one deliberate, full-width choice per row. This removes the
    half-card visible in Safari and keeps every destination/date legible without
    a sideways gesture competing with the page scroll. */
 .hx-recent-row{grid-template-columns:minmax(0,1fr);max-width:none}
}

/* "Best hotels" cards reuse .hx-card and add the place line under the name. */
.hx-card-place{display:block;color:#7a8095;font-size:13px;font-weight:500;margin-top:2px;width:max-content;max-width:100%}
.hx-card-subline{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;margin-top:4px}
.hx-card-subline .hx-card-place{margin-top:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Optional card details (Customizer: "Hotel cards — show …"). Only sizing and
   layout here — the colours already belong to the brand sheet: .hf-price coral,
   .ns-score blue, .hf-stars the fiche's star colour. Each element is absent
   from the markup when its switch is off or the hotel has no value, so none of
   these rules needs an empty state. */
.hx-card-stars{display:block;flex:0 0 auto;margin-top:4px;line-height:1}
.hx-card-subline .hx-card-stars{margin-top:0}
.hx-card-stars .hf-stars{font-size:13px;letter-spacing:1px}
.hx-card-stars .hf-star.is-empty{color:#cbd5e1}
.hx-card-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin-top:7px}
.hx-card-meta .ns-score{font-size:13.5px}
.hx-card-meta .ns-score b{font-size:14.5px;font-weight:700}
.hx-card-meta .ns-score-label{color:#7a8095;font-weight:500}
/* margin-left:auto puts the price at the far end of the row, and keeps it there
   when the score is missing. */
/* "From" sits ABOVE the amount at the right edge of the row, per the reference. */
.hx-card-price{font-size:13.5px;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;text-align:right}
.hx-card-from{color:#7a8095;font-weight:500;font-size:11.5px}

/* Dedicated /best-hotels/ directory: the same cards and ranking as the home rail. */
.ns-best-hotels-page{padding:34px 0 64px}
.ns-best-hotels-head{max-width:720px;margin-bottom:28px}
.ns-best-hotels-head h1{font-size:clamp(1.8rem,3vw,2.25rem);font-weight:700;color:var(--hx-navy);margin:0 0 10px}
.ns-best-hotels-head p{color:#3c4257;font-size:15.5px;line-height:1.6;margin:0}
.ns-best-hotels-body{padding:0}
/* The directory is a page of results, not a rail — opt back out of the scroll
   track the home sections use and keep the browsable 3-across grid. */
.ns-best-hotels-main .hx-grid3{display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible}
.ns-best-hotels-main .hx-hotelcard{background:#fff;border:1px solid var(--brand-border,#e4e7ec);border-radius:12px;box-shadow:0 2px 8px rgba(16,24,40,.08);overflow:hidden;padding-bottom:12px;transition:box-shadow .16s ease,transform .16s ease}
.ns-best-hotels-main .hx-hotelcard:hover{box-shadow:0 8px 22px rgba(16,24,40,.12);transform:translateY(-2px)}
.ns-best-hotels-main .hx-card img,
.ns-best-hotels-main .hx-card-placeholder{aspect-ratio:16/10;border-radius:0;margin-bottom:10px;box-shadow:none}
.ns-best-hotels-main .hx-card img{border-radius:0;margin-bottom:10px;box-shadow:none}
.ns-best-hotels-main .hx-card b{font-size:16px;margin-left:14px;margin-right:14px}
.ns-best-hotels-main .hx-card-subline,.ns-best-hotels-main .hx-card-meta{margin-left:14px;margin-right:14px}
.ns-best-hotels-main .hx-card-meta{min-height:32px;margin-top:6px}
@media(max-width:900px){.ns-best-hotels-main .hx-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ns-best-hotels-main .hx-grid3{grid-template-columns:1fr}}
.ns-best-hotels-filter-state{margin:0 0 24px;padding:12px 15px;background:var(--hx-gray);color:#3c4257;font-size:14px;line-height:1.5}
.ns-best-hotels-filter-state a{color:var(--hx-navy);font-weight:700;margin-left:8px}
.ns-best-hotels-empty{margin:0;color:#3c4257}