/* ==========================================================================
   Windhorse Tours – "Where to stay" page (template-parts/places/hotel.php).
   Everything is scoped to .whs so it cannot clash with the theme.
   Brand: #791e30 maroon, #eebc1d gold, #712822 deep red. Headings Miller
   Display (Libre Caslon Text as the web fallback), body Merriweather Sans.
   ========================================================================== */

@font-face { font-family: "Miller Display"; src: url('../fonts/MillerDisplay-Roman.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Miller Display"; src: url('../fonts/MillerDisplay-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }

.whs {
  --bg: #ffffff; --stone: #f5f0f0; --panel: #ffffff; --ink: #2b1a1e; --muted: #6c5b5f; --line: #e5d9da; --line2: #f0e8e8;
  --brand: #791e30; --brand-text: #791e30; --brand-deep: #712822; --gold: #eebc1d; --gold-text: #7d5f00; --on-brand: #ffffff;
  --green: #2f6b4f; --green-bg: rgba(47,107,79,.12); --red: #b3311f; --red-bg: rgba(179,49,31,.1); --gold-bg: rgba(238,188,29,.2);
  --serif: "Miller Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans: "Merriweather Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --shadow: 0 1px 2px rgba(43,26,30,.07), 0 6px 18px rgba(43,26,30,.05);
  background: var(--wh-page-bg, var(--bg)); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6;
  padding-bottom: 48px; overflow-x: clip;
}
.whs *, .whs *::before, .whs *::after { box-sizing: border-box; }
.whs h1, .whs h2, .whs h3, .whs h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; color: var(--ink); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.whs p { margin: 0 0 1em; }
.whs a { color: var(--brand-text); }
.whs img { max-width: 100%; height: auto; display: block; }
.whs ul, .whs ol, .whs dl { margin: 0; padding: 0; }
.whs button, .whs input, .whs select, .whs textarea { font: inherit; color: inherit; }
.whs :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.whs [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .whs * { transition: none !important; scroll-behavior: auto !important; } }
.whs-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
@media (max-width: 480px) { .whs-wrap { padding-inline: 16px; } }
.whs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* breadcrumbs */
.whs-crumbs { font-size: 13.5px; color: var(--muted); padding-block: 16px 12px; }
.whs-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.whs-crumbs li + li::before { content: "/"; margin: 0 6px; opacity: .6; }
.whs-crumbs a { color: var(--muted); text-decoration: none; }
.whs-crumbs a:hover { text-decoration: underline; }

/* shared bits */
.whs .whs-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); border-radius: 7px; padding: 9px 16px; font-weight: 700; cursor: pointer; text-decoration: none; font-size: 14.5px; line-height: 1.4; }
.whs .whs-btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); }
.whs .whs-btn.ghost { background: var(--panel); color: var(--brand-text); border-color: var(--line); }
.whs .whs-btn.ghost:hover { background: var(--stone); }
.whs .whs-btn:disabled { opacity: .5; cursor: default; }
.whs-hint { font-size: 13px; color: var(--muted); }
.whs-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.whs-rec { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: #2b1a1e; font-size: 12.5px; font-weight: 700; border-radius: 5px; padding: 2px 9px; white-space: nowrap; }
.whs-rec::before { content: ""; width: 9px; height: 9px; background: #2b1a1e; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.whs-rating { font-size: 12.5px; color: var(--gold-text); border: 1px solid currentColor; border-radius: 5px; padding: 1px 8px; white-space: nowrap; }
.whs-lvl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.whs-lvl .dots { display: inline-flex; gap: 3px; }
.whs-lvl .dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--brand-text); }
.whs-lvl .dots i.on { background: var(--brand-text); }
.whs-stars { color: var(--gold-text); letter-spacing: 1px; }
.whs-stars .off { color: var(--line); }
.whs-pill { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; border-radius: 5px; padding: 2px 9px; white-space: nowrap; background: var(--green-bg); color: var(--green); }

/* heading block */
.whs-head { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 32px; align-items: start; padding-bottom: 28px; }
.whs-head.no-photos { grid-template-columns: minmax(0,1fr); }
@media (max-width: 880px) { .whs-head { grid-template-columns: minmax(0,1fr); } }
.whs-head h1 { font-size: clamp(34px, 5.6vw, 58px); }
.whs-kind { color: var(--muted); margin: 6px 0 12px !important; }
.whs-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.whs-revjump { display: inline-flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--muted) !important; text-decoration: none; margin-bottom: 14px; }
.whs-revjump b { color: var(--ink); font-size: 16px; }
.whs-why { font-size: 15px; background: var(--gold-bg); border-radius: 8px; padding: 10px 14px; max-width: 62ch; }
.whs-lead { font-size: 17.5px; max-width: 62ch; }
.whs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.whs-checked { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--muted); margin-top: 12px !important; }

.whs-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; }
.whs-gallery.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.whs-gallery.n2 { grid-template-rows: 1fr; }
.whs-gallery button { display: block; min-height: 0; position: relative; padding: 0; border: 0; background: var(--stone); cursor: zoom-in; }
.whs-gallery.n3 button:first-child { grid-row: 1 / 3; }
.whs-gallery img { width: 100%; height: 100%; object-fit: cover; }
.whs-gallery .more { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; border-radius: 5px; padding: 3px 9px; }

/* body */
.whs-body { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; align-items: start; }
@media (max-width: 980px) { .whs-body { grid-template-columns: minmax(0,1fr); } }
.whs-sect { padding-block: 26px; border-top: 1px solid var(--line); }
.whs-sect:first-child { border-top: 0; padding-top: 0; }
/* The theme boxes #reviews on trip pages; not here. */
.whs #reviews { border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0; margin-top: 0; padding: 26px 0; }
.whs-sect-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.whs-sect-h h2 { font-size: 26px; }
.whs-sect-h .stamp { font-size: 12.5px; color: var(--muted); }
.whs-prose { max-width: 66ch; }
.whs-h3 { font-family: var(--sans) !important; font-size: 14px; margin-top: 18px !important; }

.whs-tbl { overflow-x: auto; }
.whs table.whs-rooms { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; margin: 0; border: 0; }
.whs-rooms th, .whs-rooms td { border: 0; background: none; }
.whs-rooms thead th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.whs-rooms tbody th { text-align: left; font-weight: 600; padding: 9px 8px; border-bottom: 1px solid var(--line2); }
.whs-rooms tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.whs-rooms td { padding: 9px 8px; border-bottom: 1px solid var(--line2); }
.whs-rooms td.num { font-variant-numeric: tabular-nums; }
.whs-rooms + .whs-hint, .whs-tbl + .whs-hint { margin-top: 8px; }

.whs-facgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
@media (max-width: 700px) { .whs-facgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .whs-facgrid { grid-template-columns: 1fr; } }
.whs-facgrid h3 { font-family: var(--sans); font-size: 13.5px; margin-bottom: 6px; }
.whs-facgrid ul { list-style: none; font-size: 14.5px; }
.whs-facgrid li { padding: 2px 0; display: flex; gap: 8px; align-items: baseline; }
.whs-facgrid li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; transform: translateY(-2px); }
.whs-facgrid li.no { color: var(--muted); text-decoration: line-through; }
.whs-facgrid li.no::before { background: var(--line); }
.whs-facgrid + .whs-hint { margin-top: 10px; }
.whs-diet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; list-style: none; }

.whs-months { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 3px; margin: 0 0 12px !important; list-style: none; }
.whs-months li { text-align: center; font-size: 11.5px; padding: 7px 0; border-radius: 4px; background: var(--green-bg); color: var(--green); font-weight: 700; }
.whs-months li.closed { background: var(--line2); color: var(--muted); text-decoration: line-through; font-weight: 400; }
.whs-months li.flag { box-shadow: inset 0 -3px 0 var(--gold); }
@media (max-width: 480px) { .whs-months li { font-size: 10px; } }
.whs-snotes div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; font-size: 14.5px; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.whs-snotes.wide div { grid-template-columns: 150px minmax(0,1fr); }
@media (max-width: 480px) { .whs-snotes.wide div { grid-template-columns: 1fr; gap: 0; } }
.whs-snotes dt { font-size: 13px; color: var(--gold-text); font-weight: 700; }
.whs-snotes dd { margin: 0; }
.whs-snotes + .whs-hint { margin-top: 12px; }

.whs-near { list-style: none; columns: 2 260px; column-gap: 32px; }
.whs-near li { break-inside: avoid; padding: 5px 0 5px 16px; position: relative; }
.whs-near li::before { content: ""; position: absolute; left: 0; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-text); }
.whs-near a { font-weight: 700; text-decoration: none; }
.whs-near a:hover { text-decoration: underline; }
.whs-near .d { color: var(--muted); font-size: 13px; margin-left: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.whs-near .k { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin-left: 6px; }

.whs-trips { list-style: none; }
.whs-trips li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.whs-trips a { font-weight: 700; text-decoration: none; }
.whs-trips a:hover { text-decoration: underline; }
.whs-trips .n { font-size: 13.5px; color: var(--muted); }

/* at a glance */
.whs-glance { position: sticky; top: 16px; }
@media (max-width: 980px) { .whs-glance { position: static; } }
.whs-glance h2 { font-size: 20px; padding: 16px 18px 0; }
.whs-glance .body { padding: 10px 18px 16px; }
.whs-glance dl { display: grid; grid-template-columns: auto minmax(0,1fr); }
.whs-glance dt, .whs-glance dd { padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 14px; }
.whs-glance dt { color: var(--muted); padding-right: 14px; }
.whs-glance dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.whs-glance .mapwrap { padding: 0 18px 16px; }
.whs-glance .update { padding: 12px 18px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.whs-map { width: 100%; aspect-ratio: 16/11; background: var(--stone); border-radius: 6px; z-index: 0; }
.whs-map-note { font-size: 12px; color: var(--muted); margin: 6px 0 0 !important; }
.whs .leaflet-container { font-family: var(--sans); }
.whs-pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #791e30; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.whs-pin span { transform: rotate(45deg); color: #fff; font-size: 12px; font-weight: 700; font-family: var(--sans); }
.whs-pin.rec { background: #eebc1d; }
.whs-pin.rec span { color: #2b1a1e; }
.whs-dot { width: 12px; height: 12px; border-radius: 50%; background: #791e30; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* reviews */
.whs-revsum { display: grid; grid-template-columns: 170px minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: center; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .whs-revsum { grid-template-columns: 1fr; } }
.whs-revsum .avg { font-family: var(--serif); font-size: 60px; line-height: 1; }
.whs-revsum .cnt { font-size: 14px; color: var(--muted); }
.whs-bars h3 { font-family: var(--sans); font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.whs-bars div { display: grid; grid-template-columns: 82px minmax(0,1fr) 32px; gap: 10px; align-items: center; font-size: 13px; margin: 3px 0; }
.whs-bars .t { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.whs-bars .t span { display: block; height: 100%; background: var(--gold); }
.whs-bars div > span:last-child { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.whs-revtools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 0; }
.whs-revtools label { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; margin: 0; }
.whs-revtools select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--panel); height: auto; }
.whs input[type=checkbox] { accent-color: var(--brand); width: 17px; height: 17px; margin: 0; }
.whs-rev { padding: 18px 0; border-bottom: 1px solid var(--line); max-width: 760px; }
.whs-rev header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.whs-rev header b { font-size: 16px; }
.whs-rev header span { font-size: 13px; color: var(--muted); }
.whs-rev header .wh { font-size: 12px; color: var(--green); border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; }
.whs-rev .subs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.whs-rev > p { margin: 8px 0 12px; }
.whs-votes { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.whs-votes button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 11px; cursor: pointer; font-size: 13px; line-height: 1.5; }
.whs-votes button[aria-pressed="true"] { border-color: var(--brand-text); color: var(--brand-text); font-weight: 700; }
.whs-votes .report { border: 0; background: none; text-decoration: underline; padding: 3px 4px; color: var(--muted); }
.whs-votes .report:disabled { text-decoration: none; cursor: default; }
.whs-reply { margin: 14px 0 0; padding: 12px 16px; background: var(--stone); border-radius: 6px; font-size: 15px; }
.whs-reply b { display: block; font-size: 13px; color: var(--brand-text); }
.whs-reply p { margin: 4px 0 0; }
#rNone { margin-top: 12px; }
#rMore { margin-top: 16px; }

/* review form */
.whs-rform { max-width: 760px; margin-top: 30px; padding: 22px; }
.whs-rform h3 { font-size: 24px; margin-bottom: 4px; }
.whs-rform > .whs-hint { margin: 0; }
.whs-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 18px; margin-top: 14px; }
@media (max-width: 640px) { .whs-grid2 { grid-template-columns: 1fr; } .whs-rform { padding: 16px; } }
.whs-fld { display: flex; flex-direction: column; gap: 4px; font-size: 14px; min-width: 0; }
.whs-fld > label, .whs-lbl { font-weight: 600; font-size: 14px; margin: 0; }
.whs-fld input, .whs-fld select, .whs-fld textarea { border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; background: var(--bg); font-size: 15px; width: 100%; min-width: 0; height: auto; box-shadow: none; }
.whs-fld textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.whs-textfld { margin-top: 14px; }
.whs-check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 14px; }
.whs-rate-wrap { margin-top: 14px; }
.whs-rate { display: flex; gap: 2px; }
.whs-rate button { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--line); padding: 0 2px; }
.whs-rate button.on { color: var(--gold); }
.whs-rate.sm button { font-size: 20px; }
.whs-subrate { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 18px; margin-top: 8px; font-size: 13px; }
@media (max-width: 640px) { .whs-subrate { grid-template-columns: 1fr 1fr; } }
.whs-counter { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.whs-counter .over { color: var(--red); font-weight: 700; }
.whs-checks { list-style: none; margin: 12px 0 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 13px; }
@media (max-width: 560px) { .whs-checks { grid-template-columns: 1fr; } }
.whs-checks li { display: flex; gap: 7px; color: var(--muted); }
.whs-checks li::before { content: "○"; width: 14px; flex: none; }
.whs-checks li.ok { color: var(--green); }
.whs-checks li.ok::before { content: "✓"; }
.whs-checks li.bad { color: var(--red); font-weight: 600; }
.whs-checks li.bad::before { content: "✕"; }
.whs-rules { font-size: 13px; color: var(--muted); margin: 12px 0 14px !important; }
.whs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.whs-msg { margin: 14px 0; padding: 12px 14px; border-radius: 6px; font-size: 14px; }
.whs-msg.err { background: var(--red-bg); color: var(--red); }
.whs-msg.good { background: var(--green-bg); color: var(--green); }

/* lightbox */
.whs-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: grid; place-items: center; z-index: 100000; padding: 16px; }
.whs-lightbox figure { margin: 0; max-width: 1100px; width: 100%; }
.whs-lightbox img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.whs-lightbox figcaption { color: #eee; font-size: 14px; margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.whs-lightbox .nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.whs-lightbox button { background: none; border: 1px solid #aaa; color: #fff; border-radius: 6px; padding: 4px 12px; cursor: pointer; }

/* ==========================================================================
   A town's "Where to stay" list (template-parts/places/stay-list.php)
   ========================================================================== */
.whs-townhead { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: end; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid var(--brand-text); }
.whs-townhead h1 { font-size: clamp(32px, 5vw, 52px); }
.whs-intro { max-width: 70ch; color: var(--muted); margin: 16px 0 0; font-size: 16px; }
.whs-intro p:last-child { margin-bottom: 0; }
.whs-groups { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.whs .whs-chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 13px; font-size: 14px; cursor: pointer; line-height: 1.4; color: var(--ink); }
.whs .whs-chip[aria-pressed="true"] { border-color: var(--brand-text); box-shadow: inset 0 0 0 1px var(--brand-text); font-weight: 600; color: var(--brand-text); }
.whs-chip .n { color: var(--muted); font-size: 12px; margin-left: 4px; font-weight: 400; }
.whs-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); }
.whs-filters label { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; margin: 0; }
.whs-filters select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--panel); height: auto; }
.whs-filters .count { margin-left: auto; font-size: 13.5px; color: var(--muted); }
@media (max-width: 560px) { .whs-filters .count { margin-left: 0; } }

.whs-directory { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 32px; align-items: start; }
.whs-directory.no-map { grid-template-columns: minmax(0,1fr); }
@media (max-width: 980px) { .whs-directory { grid-template-columns: minmax(0,1fr); } .whs-directory .side { order: -1; } }
.whs-directory .side { position: sticky; top: 16px; padding-top: 18px; }
@media (max-width: 980px) { .whs-directory .side { position: static; } .whs-directory .whs-map { aspect-ratio: 16/10; } }
.whs-slist { list-style: none; }
.whs-srow { display: grid; grid-template-columns: 160px minmax(0,1fr); gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.whs-srow .ph { display: block; aspect-ratio: 4/3; border-radius: 5px; overflow: hidden; background: var(--stone); position: relative; }
.whs-srow .ph img { width: 100%; height: 100%; object-fit: cover; }
.whs-srow .nophoto { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 34px; color: var(--line); }
.whs-srow .num { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.whs-srow .tline { font-size: 13px; color: var(--muted); }
.whs-srow h2 { font-size: 22px; margin: 2px 0 6px; }
.whs-srow h2 a { color: var(--ink); text-decoration: none; }
.whs-srow h2 a:hover { color: var(--brand-text); text-decoration: underline; }
.whs-srow p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; max-width: 62ch; }
.whs-srow .tags { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.whs-srow .score { font-size: 13px; color: var(--muted); }
.whs-srow.sel { background: linear-gradient(90deg, var(--stone), transparent); }
.whs .cmpchk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; margin: 0 0 0 auto; }
.whs .cmpchk input { width: 16px; height: 16px; }
@media (max-width: 560px) { .whs-srow { grid-template-columns: 100px minmax(0,1fr); gap: 12px; } .whs-srow h2 { font-size: 19px; } }
.whs-empty { padding: 26px 0; color: var(--muted); }
.whs-pin.sel { outline: 3px solid #eebc1d; outline-offset: 1px; }

.whs-cmpbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(43,26,30,.1); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.whs-cmpbar .in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.whs-cmpbar .names { font-size: 14px; flex: 1; min-width: 0; }
.whs .whs-btn.sm { padding: 5px 11px; font-size: 13px; font-weight: 600; }
.whs-cmppanel { margin: 16px 0; padding: 16px 18px; }
.whs-cmppanel h2 { font-size: 22px; }
.whs-cmppanel .top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.whs .whs-linkbtn { border: 0; background: none; color: var(--brand-text); text-decoration: underline; cursor: pointer; padding: 0; font-size: 14px; }
.whs table.whs-cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; margin: 10px 0 0; border: 0; }
.whs-cmp th, .whs-cmp td { text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line2); vertical-align: top; background: none; }
.whs-cmp thead th { font-family: var(--serif); font-size: 17px; }
.whs-cmp thead th a { color: var(--ink); }
.whs-cmp tbody th { font-size: 12.5px; color: var(--muted); font-weight: 600; width: 150px; }

.whs-other { margin-top: 30px; }
.whs-other h2 { font-size: 22px; margin-bottom: 8px; }
.whs-other ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.whs-other a { font-weight: 700; text-decoration: none; }
.whs-other a:hover { text-decoration: underline; }

/* Review form: Fluent Forms form 4 inside .whs-rform, styled as the mock's "Write a review" card. */
.whs .whs-rev .whs-rev-title { margin: 8px 0 -4px; font-size: 15.5px; }
.whs .whs-ff .fluentform { font-family: var(--sans); color: var(--ink); }
.whs .whs-ff form > fieldset { display: grid !important; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px 18px; margin-top: 10px !important; }
.whs .whs-ff fieldset > * { grid-column: 1 / -1; margin: 0 !important; }
.whs .whs-ff .ff-el-group:has(.ff-el-ratings):not(:has([name="rating_overall"])) { grid-column: span 2; }
.whs .whs-ff .ff-el-group:has(.ff-el-ratings):not(:has([name="rating_overall"])) .ff-el-input--label label { font-weight: 400; font-size: 13px; }
.whs .whs-ff .ff-custom_html p { font-size: 13px; color: var(--muted); margin: 0; }
.whs .whs-ff .ff-el-input--label { margin-bottom: 4px; }
.whs .whs-ff .ff-el-input--label label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0; }
.whs .whs-ff .ff-el-is-required.asterisk-right label::after { color: var(--red); }
.whs .whs-ff .whs-ff-hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; font-weight: 400; }
.whs .whs-ff .ff-el-form-control { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--bg); color: var(--ink); width: 100%; min-width: 0; font: inherit; font-size: 15px; line-height: 1.5; height: auto; box-shadow: none; }
.whs .whs-ff .ff-el-form-control:focus { border-color: var(--brand-text); outline: 0; box-shadow: 0 0 0 3px var(--gold-bg); }
.whs .whs-ff textarea.ff-el-form-control { min-height: 130px; resize: vertical; }
.whs .whs-ff .ff-el-form-control::placeholder { color: var(--muted); opacity: .8; }
.whs .whs-ff .ff-t-container { display: flex; gap: 14px 18px; }
.whs .whs-ff .ff-t-cell { min-width: 0; padding: 0 !important; }
.whs .whs-ff .ff-t-cell .ff-el-group { margin: 0 !important; }
/* Sections: small headings as in the mock ("Scores for optional"). */
.whs .whs-ff .ff-el-section-break { padding: 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 8px !important; }
.whs .whs-ff .ff-el-section-break hr { display: none; }
.whs .whs-ff .ff-el-section-break::before, .whs .whs-ff .ff-el-section-break::after { display: none; }
.whs .whs-ff .ff-el-section-title { font-family: var(--serif); font-size: 19px; margin: 0 !important; padding: 0 !important; }
.whs .whs-ff .ff-section_break_desk { font-size: 12.5px; color: var(--muted); }
/* Stars: gold on the line colour; the overall one larger. */
.whs .whs-ff .ff-el-ratings { --ff-rating-inactive-color: var(--line) !important; --ff-rating-active-color: var(--gold) !important; line-height: 1; gap: 2px; }
.whs .whs-ff .ff-el-ratings label { margin: 0; padding: 0 2px; }
.whs .whs-ff .ff-el-ratings label .ff-rating-icon-svg { width: 20px; height: 20px; }
.whs .whs-ff .ff-el-group:has([name="rating_overall"]) .ff-el-ratings label .ff-rating-icon-svg { width: 28px; height: 28px; }
.whs .whs-ff .ff-el-ratings label:focus-within { box-shadow: 0 0 0 3px var(--gold-bg); }
/* Single-choice answers as chips. */
.whs .whs-ff .ff_list_inline .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 8px; }
.whs .whs-ff .ff_list_inline .ff-el-form-check { margin: 0 !important; }
.whs .whs-ff .ff_list_inline .ff-el-form-check-label { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 13px; font-size: 14px; cursor: pointer; margin: 0; }
.whs .whs-ff .ff_list_inline .ff-el-form-check-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.whs .whs-ff .ff_list_inline .ff-el-form-check-label:has(input:checked) { border-color: var(--brand-text); box-shadow: inset 0 0 0 1px var(--brand-text); color: var(--brand-text); font-weight: 600; }
.whs .whs-ff .ff_list_inline .ff-el-form-check-label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Consent tick box. */
.whs .whs-ff .ff_tc_label { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.whs .whs-ff .ff_tc_label input { margin-top: 4px; accent-color: var(--brand); width: 16px; height: 16px; }
.whs .whs-ff .ff_t_c { padding: 0; }
.whs .whs-ff .ff_submit_btn_wrapper { margin-top: 4px !important; }
.whs .whs-ff .ff-btn-submit { background: var(--brand) !important; color: var(--on-brand) !important; border: 1px solid var(--brand) !important; border-radius: 7px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.whs .whs-ff .ff-btn-submit:hover { background: var(--brand-deep) !important; border-color: var(--brand-deep) !important; opacity: 1; }
/* Word counter under the review box (stay.js). */
.whs .whs-ff .whs-counter { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.whs .whs-ff .whs-counter .over { color: var(--red); font-weight: 700; }
/* Errors and the thank-you message. */
.whs .whs-ff .ff-el-is-error .ff-el-form-control { border-color: var(--red); }
.whs .whs-ff .error.text-danger { color: var(--red); font-size: 12.5px; margin-top: 4px; }
.whs .whs-ff .ff-message-success { background: var(--green-bg); color: var(--green); border: 0; border-radius: 6px; padding: 12px 14px; font-size: 14px; box-shadow: none; margin-top: 14px; }
.whs .whs-ff .ff-errors-in-stack { color: var(--red); font-size: 14px; }
@media (max-width: 700px) {
  .whs .whs-ff .ff-el-group:has(.ff-el-ratings):not(:has([name="rating_overall"])) { grid-column: span 3; }
  .whs .whs-ff .ff-t-container { flex-direction: column; }
}