/* SHACKS BRAND THEME: the classic autumn-blue rebuild of the original
   shacks.co.uk front end (Hcsgit122/shacks, branch redesign; layout truth in
   docs/site-audit/raw/screens there). Loaded only on /brand/ pages
   (html.theme-shacks), on top of the normal stylesheet, the way concept.css
   works: every rule is an override, nothing leaks into the live look.

   Tokens are the rebuild's own (docs/redesign/MASTER-REBUILD.md rule 5):
   the October autumn-blue chrome #7B94AE, the pale wash #A4B2C0, the footer
   strip #A0B4C0 and legal bar #B6BFC0, the inner-page ground #D6D6D6, the
   mint Book a Stay button, gold kept only for stars. One typeface: Neue Haas
   Grotesk (Typekit). Square corners. */

html.theme-shacks {
  --font: "neue-haas-grotesk-display", "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #000;
  --paper: #fff;
  --stone: #D6D6D6;
  --ground: #D6D6D6;
  --line: rgba(0, 0, 0, .15);
  --muted: rgba(0, 0, 0, .7);
  --muted-2: rgba(0, 0, 0, .6);
  --faint: rgba(0, 0, 0, .45);
  --photo-bg: #c4c6c8;
  --season: #7B94AE;
  --season-ink: #000;
  --season-soft: #A4B2C0;
  --footer-strip: #A0B4C0;
  --legal-bar: #B6BFC0;
  --mint: #D8EFE7;
  --mint-deep: #C7E8DC;
  --night: #313A47;
  --graphite: #20242B;
  --sun: #EDBC33;
  --mustard: #EDBC33;
  --container: 1310px;
  --container-pad: 20px;
  --section-gap: 56px;
  --gap: 24px;
  --radius: 0;
  --text: 16px;
  --text-small: 14px;
  --text-tiny: 12px;
  --h1: 30px;
  --h2: 32px;
  --h3: 18px;
  --leading: 1.5;
}
/* The season classes Tom's chrome sets must not repaint the brand chrome. */
html.theme-shacks.season-summer, html.theme-shacks.season-autumn, html.theme-shacks.season-spring, html.theme-shacks.season-winter { --season: #7B94AE; --season-ink: #000; --season-soft: #A4B2C0; }
html.theme-shacks body { background: var(--ground); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
html.theme-shacks h1, html.theme-shacks h2, html.theme-shacks h3 { font-weight: 600; }
@media (max-width: 640px) { html.theme-shacks { --container-pad: 16px; --section-gap: 44px; --h1: 24px; --h2: 26px; } }

/* ---- header: the live site's autumn-blue bar ---- */
html.theme-shacks .site-header { position: relative; background: var(--season); color: #fff; box-shadow: none; }
html.theme-shacks .site-header__inner { min-height: 68px; padding: 0 var(--container-pad); gap: 24px; }
html.theme-shacks .site-logo img { width: 140px; }
html.theme-shacks .site-nav ul { gap: 24px; }
html.theme-shacks .site-nav a:not(.site-cta) { color: #fff; font-size: 16px; font-weight: 500; padding: 6px 0 0; text-decoration: none; }
html.theme-shacks .site-nav a:not(.site-cta):hover, html.theme-shacks .site-nav a:not(.site-cta):focus-visible, html.theme-shacks .site-nav > ul > li > a[aria-current] { color: var(--ink); text-decoration: none; }
html.theme-shacks .site-nav li.has-children > ul { background: var(--season); min-width: 15rem; padding: 6px 0 12px; box-shadow: 0 1px 0 rgba(32,36,43,.06), 0 12px 30px -24px rgba(32,36,43,.45); }
html.theme-shacks .site-nav li.has-children > ul a { padding: 12px 36px; font-size: 16px; font-weight: 500; white-space: nowrap; }
html.theme-shacks .site-nav li.has-children.depth-1 > ul { min-width: 12rem; }
html.theme-shacks .site-nav li.has-children.depth-1 > a::after { content: none; }
html.theme-shacks .site-cta { background: var(--mint); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: 8px 12px; font-size: 16px; font-weight: 500; line-height: 1; margin-left: 40px; transition: background .3s; }
html.theme-shacks .site-cta:hover, html.theme-shacks .site-cta:focus-visible { background: var(--mint-deep); color: var(--ink); }
html.theme-shacks .site-menu-toggle { border: 0; color: var(--ink); font-weight: 600; }
/* Desktop, as the live bar: the menu centred across the whole width from the
   end of the logo to the right edge, Book a Stay set apart at the right, the
   links 24px apart (5px before, 15px after each, as live). */
@media (min-width: 901px) {
  html.theme-shacks .site-header__inner { position: relative; gap: 0; }
  html.theme-shacks .site-nav { justify-content: center; }
  html.theme-shacks .site-nav > ul { gap: 4px; }
  html.theme-shacks .site-nav > ul > li > a:not(.site-cta) { padding: 6px 15px 0 5px; }
  html.theme-shacks .site-nav > .site-cta { position: absolute; right: var(--container-pad); top: 50%; transform: translateY(-50%); margin: 0; }
}
@media (max-width: 900px) {
  html.theme-shacks .js .site-nav { background: var(--season); padding: 16px 36px 32px; }
  html.theme-shacks .site-nav a:not(.site-cta) { font-size: 22px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; padding: 12px 0; }
  html.theme-shacks .site-nav li.has-children > ul { border-left-color: rgba(255,255,255,.6); }
  html.theme-shacks .site-nav li.has-children > ul a { font-size: 18px; padding: 8px 4px; text-transform: none; }
  html.theme-shacks .site-cta { margin: 16px 0 0; }
}

/* ---- footer: four columns, the WhatsApp box, the wordmark strip, the legal bar ---- */
html.theme-shacks .site-footer { background: var(--season); color: var(--ink); margin-top: 0; overflow: hidden; }
html.theme-shacks .site-footer__inner { padding: 56px var(--container-pad) 0; }
@media (min-width: 1024px) { html.theme-shacks .site-footer__inner { padding-top: 64px; } }
html.theme-shacks .site-footer__menus { gap: 40px 24px; margin-bottom: 56px; }
html.theme-shacks .site-footer__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.theme-shacks .site-footer__col li { margin: 0; }
html.theme-shacks .site-footer a { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.55; }
html.theme-shacks .site-footer__whatsapp { position: relative; display: flex; flex-direction: column; max-width: none; border: 2px solid var(--ink); padding: 10px 64px 10px 20px; margin: 0 0 24px; line-height: 1.55; }
html.theme-shacks .site-footer__whatsapp span { font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; }
html.theme-shacks .site-footer__whatsapp strong { font-size: 16px; font-weight: 400; }
html.theme-shacks .site-footer__whatsapp::after { content: ""; position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.96L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.52 0-3.01-.41-4.31-1.18l-.31-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.36c0-4.54 3.7-8.24 8.25-8.24 4.54 0 8.24 3.7 8.24 8.24 0 4.55-3.7 8.25-8.24 8.25zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.98-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.16 1.75 2.67 4.25 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z'/></svg>") center / contain no-repeat; }
html.theme-shacks .site-footer__whatsapp:hover { background: rgba(0,0,0,.05); text-decoration: none; }
/* The credit: a slim pale strip the logo sits on, then the grey legal bar,
   both edge to edge. */
html.theme-shacks .site-footer__credit { display: block; border-top: 0; padding: 0; }
html.theme-shacks .site-footer__logo { display: flex; align-items: center; height: 32px; background: var(--footer-strip); box-shadow: 0 0 0 100vmax var(--footer-strip); clip-path: inset(0 -100vmax); }
html.theme-shacks .site-footer__logo img { width: 150px; filter: none; }
html.theme-shacks .site-footer__credit p { background: var(--legal-bar); box-shadow: 0 0 0 100vmax var(--legal-bar); clip-path: inset(0 -100vmax); color: #fff; font-size: 13px; line-height: 1.6; text-align: right; padding: 8px 0; }
html.theme-shacks .site-footer__credit p a { color: #fff; font-size: 13px; font-weight: 400; }
@media (max-width: 768px) { html.theme-shacks .site-footer__credit p { text-align: left; } }

/* ---- page rhythm ---- */
html.theme-shacks .site-main > :first-child:not(.is-full) { margin-top: 24px; }
html.theme-shacks .site-main > .m-classic-crumbs + * { margin-top: 16px; }

/* ---- hero: full-bleed photograph, the seasonal banner set right ---- */
html.theme-shacks .m-hero { background: var(--night); }
html.theme-shacks .m-hero__media { filter: brightness(.8); min-height: 420px; aspect-ratio: auto; }
@media (min-width: 640px) { html.theme-shacks .m-hero__media { min-height: 520px; } }
@media (min-width: 1024px) { html.theme-shacks .m-hero__media { min-height: 620px; } }
html.theme-shacks .m-hero__content { padding: 40px 20px; }
html.theme-shacks .m-hero__inner { max-width: var(--container); }
html.theme-shacks .m-hero__headline { font-size: 48px; font-weight: 500; line-height: 1.05; color: #fff; text-shadow: none; margin: 0; }
@media (min-width: 1024px) { html.theme-shacks .m-hero__headline { font-size: 54.4px; } }
html.theme-shacks .m-hero__intro { font-size: 24px; font-weight: 400; line-height: 1.35; margin: 16px 0 0; text-shadow: none; }
html.theme-shacks .m-hero__intro p { margin: 0; }
html.theme-shacks .m-hero__cta { border-radius: 0; }
/* The home hero, as the live site sets it: the photograph is the screen less
   230px tall (less 185px on phones, never under 350px), cropped from 80% of
   the way down, unfiltered. The copy is centred on it in the header's own
   container, so the headline ends where Book a Stay does; the live copy
   carries 261px of empty lines below it, which is what lifts it above the
   centre. Short screens and small phones move it down, as live. */
html.theme-shacks .m-hero--right { display: block; }
html.theme-shacks .m-hero--right .m-hero__media { height: calc(100vh - 230px); min-height: 350px; aspect-ratio: auto; object-position: 50% 80%; filter: none; }
html.theme-shacks .m-hero--right .m-hero__content { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: block; padding: 0; }
html.theme-shacks .m-hero--right .m-hero__inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad) 261px; box-sizing: border-box; }
html.theme-shacks .m-hero--right .m-hero__headline { font-size: 60px; line-height: 1.2; }
html.theme-shacks .m-hero--right .m-hero__intro { font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0; }
@media (max-height: 680px) { html.theme-shacks .m-hero--right .m-hero__content { top: 70%; } }
@media (max-width: 600px) {
  html.theme-shacks .m-hero--right .m-hero__media { height: calc(100vh - 185px); }
  html.theme-shacks .m-hero--right .m-hero__headline { font-size: 50px; }
}
@media (max-width: 375px) { html.theme-shacks .m-hero--right .m-hero__content { top: 65%; } }

/* ---- the availability bar: four cells in the pale wash ---- */
html.theme-shacks .site-main > .m-search-form--band { margin-bottom: 0; background: transparent; }
html.theme-shacks .m-search-form--band .m-search-form__inner { max-width: none; }
html.theme-shacks .m-search-form--band .m-search-form__row { display: grid; grid-template-columns: 1fr; gap: 1px; background: #fff; }
@media (min-width: 640px) { html.theme-shacks .m-search-form--band .m-search-form__row { grid-template-columns: repeat(4, 1fr); } }
html.theme-shacks .m-search-form--band .m-search-form__field { display: flex; align-items: center; justify-content: center; background: var(--season-soft); padding: 28px 16px; border: 0; }
html.theme-shacks .m-search-form--band .m-search-form__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.theme-shacks .m-search-form--band .m-search-form__input { width: 100%; max-width: 12rem; text-align: center; text-align-last: center; font-size: 16px; font-weight: 400; color: var(--ink); background: transparent; border: 0; min-height: 0; padding: 0; -webkit-appearance: none; appearance: none; }
html.theme-shacks .m-search-form--band .m-search-form__submit { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; min-width: 0; border: 0; border-radius: 0; background: var(--season); color: var(--ink); padding: 28px 40px; font-size: 16px; font-weight: 600; }
html.theme-shacks .m-search-form--band .m-search-form__submit::after { content: ""; width: 39px; height: 28px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'><path d='M0 49 L29 0 L54 49 L54 100 L0 100 Z' fill='%231A1F27'/><path d='M29 0 L115 0 L140 49 L54 49 Z' fill='%23fff'/></svg>") center / contain no-repeat; }
html.theme-shacks .m-search-form--band .m-search-form__submit:hover, html.theme-shacks .m-search-form--band .m-search-form__submit:focus-visible { filter: brightness(1.05); background: var(--season); color: var(--ink); }
html.theme-shacks .m-search-form__ribbon span { background: var(--night); color: #fff; box-shadow: 0 1px 2px rgba(32,36,43,.04), 0 12px 32px -16px rgba(32,36,43,.22); }
html.theme-shacks .m-search-form--panel { background: #fff; border: 0; padding: 24px; }
html.theme-shacks .m-search-form--panel .m-search-form__input, html.theme-shacks .m-search-form--panel .m-search-form__submit { border-radius: 0; }

/* ---- statement and the Feefo badge, on the grey band ---- */
html.theme-shacks .site-main > .m-classic-statement { margin-bottom: 24px; }
html.theme-shacks .site-main > .m-feefo-badge { margin-bottom: 56px; }

/* ---- card grids ---- */
html.theme-shacks .m-cabin-grid__heading, html.theme-shacks .m-offers-strip__heading { font-size: 32px; font-weight: 600; line-height: 1.2; }
html.theme-shacks .m-cabin-grid__all, html.theme-shacks .m-cabin-grid__more { font-size: 14px; font-weight: 500; text-decoration: none; }
html.theme-shacks .m-cabin-grid__all:hover, html.theme-shacks .m-cabin-grid__more:hover { text-decoration: underline; text-underline-offset: 4px; }
html.theme-shacks .m-cabin-grid__head { gap: 8px 24px; margin-bottom: 24px; }
/* The home's Find your shack section opens with a white rule; listings that
   follow an intro or the stay heading row do not. */
html.theme-shacks .m-cabin-grid--two:has(.m-cabin-grid__heading) { border-top: 1px solid #fff; padding-top: 48px; }
@media (min-width: 1024px) { html.theme-shacks .m-cabin-grid--two:has(.m-cabin-grid__heading) { padding-top: 64px; } }
html.theme-shacks .m-cabin-grid--two:not(:has(.m-cabin-grid__heading)) > .m-cabin-grid__head { margin-bottom: 16px; }
html.theme-shacks [class*="__card"] { border-radius: 0; }
html.theme-shacks [class*="__btn"] { border-radius: 0; background: transparent; color: var(--ink); border: 1px solid var(--ink); font-weight: 600; }
html.theme-shacks [class*="__btn"]:hover, html.theme-shacks [class*="__btn"]:focus-visible { background: rgba(0,0,0,.05); color: var(--ink); }
/* Late availability keeps the finance widget's own card: white, black Book Now. */
html.theme-shacks .m-offers-strip__card { background: #fff; }
html.theme-shacks .m-offers-strip .m-offers-strip__btn { background: var(--ink); color: #fff; font-weight: 500; }
html.theme-shacks .m-offers-strip .m-offers-strip__btn:hover, html.theme-shacks .m-offers-strip .m-offers-strip__btn:focus-visible { background: #fff; color: var(--ink); }
html.theme-shacks .m-offers-strip__reason { font-size: 14px; line-height: 1.5; margin: 0; max-width: 14rem; }
html.theme-shacks .m-classic-day-filter + .m-offers-strip { margin-top: 24px; }

/* ---- Come rain or shine: the seasonal band, star high, shack on the edge ---- */
html.theme-shacks .m-banner, html.theme-shacks .m-banner--dark { color: var(--ink); position: relative; padding: 64px 20px; }
@media (min-width: 1024px) { html.theme-shacks .m-banner { padding: 80px 20px; } }
html.theme-shacks .m-banner__star { fill: #fff; width: 20px; height: 20px; margin-bottom: 20px; }
html.theme-shacks .m-banner__heading { font-size: 30px; font-weight: 500; margin: 0 0 16px; }
html.theme-shacks .m-banner__body { font-size: 17px; font-weight: 400; line-height: 1.6; max-width: 36rem; margin: 0 auto; }
html.theme-shacks .m-banner::after { content: ""; position: absolute; right: 10%; bottom: 0; width: 78px; height: 56px; transform: translateY(33%); background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'><path d='M0 49 L29 0 L54 49 L54 100 L0 100 Z' fill='%231A1F27'/><path d='M29 0 L115 0 L140 49 L54 49 Z' fill='%23fff'/></svg>") center / contain no-repeat; }
@media (min-width: 640px) { html.theme-shacks .m-banner::after { width: 90px; height: 64px; } }
html.theme-shacks .site-main > .m-banner { margin-bottom: 56px; }

/* ---- the press strip: white, edge to edge, just above the footer ---- */
html.theme-shacks .site-main > .m-logos { margin-bottom: 0; padding-top: 40px; padding-bottom: 40px; background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
html.theme-shacks .m-logos__list { flex-wrap: nowrap; justify-content: space-between; gap: 48px; overflow-x: auto; scrollbar-width: none; }
html.theme-shacks .m-logos__list::-webkit-scrollbar { display: none; }
html.theme-shacks .m-logos__list img { max-height: 48px; height: 40px; filter: none; opacity: 1; flex: 0 0 auto; }
@media (min-width: 640px) { html.theme-shacks .m-logos__list img { height: 48px; } }
html.theme-shacks .m-logos__list li { flex: 0 0 auto; }

/* ---- content modules (Tom's page data) in the classic register ---- */
html.theme-shacks .m-heading h1, html.theme-shacks .m-heading h2 { font-size: var(--h1); font-weight: 600; max-width: 48rem; }
html.theme-shacks .m-heading__intro { font-size: 15px; line-height: 1.65; max-width: 48rem; margin-top: 12px; }
html.theme-shacks .m-rich-text { font-size: 15px; line-height: 1.65; }
html.theme-shacks .m-rich-text p { margin: 10px 0; }
html.theme-shacks .m-rich-text h1 { font-size: var(--h1); margin: 0 0 12px; }
html.theme-shacks .m-rich-text h2 { font-size: 20px; margin: 32px 0 8px; }
html.theme-shacks .m-rich-text h3 { font-size: 18px; margin: 24px 0 4px; }
html.theme-shacks .m-rich-text h4 { font-size: 16px; margin: 20px 0 4px; }
html.theme-shacks .m-rich-text ul { margin: 12px 0; padding-left: 20px; }
html.theme-shacks .m-rich-text a { color: var(--ink); }
html.theme-shacks .m-rich-text img { max-width: 100%; height: auto; }
html.theme-shacks .m-text { font-size: 15px; line-height: 1.65; }
html.theme-shacks .m-text p { margin: 10px 0; }
html.theme-shacks .m-tiles__tile { border-radius: 0; }
html.theme-shacks .m-tiles__title { font-weight: 600; }
html.theme-shacks .m-faq__item { border-color: rgba(0,0,0,.2); }
html.theme-shacks .m-faq__q { font-weight: 600; }
html.theme-shacks .m-reviews__item { border: 0; background: #fff; }
html.theme-shacks .m-reviews__stars { color: var(--sun); }
html.theme-shacks .m-columns__col { background: transparent; }
html.theme-shacks .m-places__card { border: 0; background: #fff; }
html.theme-shacks .m-testimonial { background: var(--season-soft); border: 0; }
html.theme-shacks .m-stats__value { font-weight: 600; }
html.theme-shacks .m-buttons a, html.theme-shacks .m-booking-thanks a { border-radius: 0; }
/* Tom's gallery and image roots reset their own margin and padding, so they
   miss the page container; put them back in it. */
html.theme-shacks .site-main > .m-gallery, html.theme-shacks .site-main > .m-image { margin: 0 auto var(--section-gap); padding: 0 var(--container-pad); }
/* The live site sets imported copy in a column about 1000px wide, centred,
   with its photographs, galleries, columns and buttons in the same column. */
html.theme-shacks .site-main > .m-rich-text--reading, html.theme-shacks .site-main > .m-image, html.theme-shacks .site-main > .m-gallery, html.theme-shacks .site-main > .m-columns, html.theme-shacks .site-main > .m-buttons { max-width: calc(1000px + 2 * var(--container-pad)); }
html.theme-shacks .m-image__img { aspect-ratio: auto; height: auto; }
/* The importer splits a post into a run of slots at each photograph; inside
   such a run they sit as close as the paragraphs of the original. */
html.theme-shacks .site-main > :is(.m-rich-text, .m-image, .m-gallery, .m-columns, .m-buttons):has(+ :is(.m-rich-text, .m-image, .m-gallery, .m-columns, .m-buttons)) { margin-bottom: 16px; }
/* A journal post: the strap line, then the date over the title, as live. */
html.theme-shacks .site-main > .m-classic-strap { margin-bottom: 32px; }
html.theme-shacks .m-classic-strap + .m-heading { display: flex; flex-direction: column; }
html.theme-shacks .m-classic-strap + .m-heading .m-heading__intro { order: -1; font-size: 12px; margin: 0 0 4px; }
html.theme-shacks .m-classic-strap + .m-heading h1 { font-size: 24px; font-weight: 500; line-height: 1.35; }

/* ---- polish ---- */
/* Tom's card CSS shares the __head class with the section heading; keep the
   section's links beside the heading and push the preview chip right. */
html.theme-shacks .m-cabin-grid > .m-cabin-grid__head { justify-content: flex-start; }
html.theme-shacks .m-cabin-grid > .m-cabin-grid__head .preview-chip, html.theme-shacks .m-offers-strip .preview-chip, html.theme-shacks .m-search-results .preview-chip { margin-left: auto; }
html.theme-shacks .m-search-form--band .m-search-form__submit { white-space: nowrap; }
@media (max-width: 1023px) { html.theme-shacks .m-search-form--band .m-search-form__submit { padding: 28px 16px; } }
/* Bands that meet: the review band runs straight into the press strip. */
html.theme-shacks .site-main > .m-classic-quotes { margin-bottom: 0; }

/* The stay page: the heading row sits 40px under the bar, the catalogue 32px under it. */
html.theme-shacks .site-main > .m-classic-stay-map { margin-top: 40px; margin-bottom: 32px; }
html.theme-shacks .site-main > .m-classic-intro { margin-bottom: 24px; }

/* ---- CORRECTIONS AGAINST THE LIVE SITE (Tom, 2026-10-12, from screenshots of
   the two side by side). Kept together at the end so they win over the rules
   above and can be read as one change. Measured on www.shacks.co.uk. ---- */

/* 1. THE SEARCH BAND. The four boxes sat at three different heights with
   white showing between them: the row inherited align-items:end from the plain
   form (labels above, inputs level at the bottom), so the date box (82px), the
   two selects (80px) and the button (84px) each hung from the bottom edge, and
   the row's white background, there to draw 1px dividers, showed in the steps.
   Live: every box the full height of the row (76px), flush, with a thin grey
   line between them. */
html.theme-shacks .m-search-form--band .m-search-form__row { gap: 0; background: var(--season-soft); align-items: stretch; }
html.theme-shacks .m-search-form--band .m-search-form__field { min-height: 76px; padding: 0 20px; border-bottom: 1px solid #ccc; }
html.theme-shacks .m-search-form--band .m-search-form__submit { min-height: 76px; padding: 0 20px; }
@media (min-width: 640px) {
  html.theme-shacks .m-search-form--band .m-search-form__field { border-bottom: 0; border-right: 1px solid #ccc; }
}

/* 2. THE DROPDOWN MENUS were looser than live. Measured on both with a real
   mouse hover (forcing a menu open with a style hides the first fault):
     - the rows stood 68px apart, not 44: an open panel is a flex column, and it
       inherited the 24px gap that spaces the links along the top bar;
     - 48px a row in a 240px panel with padding above and below.
   Live: rows touching, 44px each (10px around a 24px line), no padding on the
   panel, both panels 200px wide. Wider screens only; the phone menu has its
   own sizes above. */
@media (min-width: 901px) {
  html.theme-shacks .site-nav li.has-children > ul,
  html.theme-shacks .site-nav li.has-children.depth-1 > ul { min-width: 12.5rem; padding: 0; gap: 0; }
  html.theme-shacks .site-nav li.has-children > ul a { padding: 10px; }
}

/* 3. THE MENU BUTTON on a phone is the three-bar "burger", as on the live
   site and the Landhosts page, not the word "Menu". The word stays in the
   button for screen readers; only its drawing changes. Open, it is a cross. */
html.theme-shacks .site-menu-toggle {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; font-size: 0; line-height: 0; color: var(--ink);
  background:
    linear-gradient(currentColor, currentColor) center 14px / 22px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 21px / 22px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center 28px / 22px 2px no-repeat;
}
html.theme-shacks .site-menu-toggle[aria-expanded="true"] {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) center / 20px 20px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)) center / 20px 20px no-repeat;
}
html.theme-shacks .site-menu-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 4. THE PRESS STRIP DRIFTS (web/src/modules/logos.js, scroll). The theme's
   rules for the still strip above are the more specific, so the moving one
   states its own: no gap (the spacing is padding on each logo, or the loop
   would jump by half a gap), nothing clipped on the row itself. */
html.theme-shacks .m-logos--scroll .m-logos__list { gap: 0; justify-content: flex-start; overflow: visible; }
html.theme-shacks .m-logos--scroll .m-logos__list li { padding: 0 24px; }

/* THE CABIN PAGE'S BOOKING COLUMN (web/src/modules/cabin-calendar.js inside
   classic-shack's panel). Tom, 2026-10-12: no black text on the blue panel,
   and colours as the classic calendar. The panel is white with a hairline, so
   the heading, the calendar, its key and its buttons all read as ink on white
   (the calendar's greens and grey are its own, in the module); the calendar
   drops its own padding there. Book Now stays the one solid button: the
   theme's outline-button rule above would otherwise make it transparent. */
html.theme-shacks .m-classic-shack .m-classic-shack__panel { background: var(--paper); border: 1px solid var(--line); }
html.theme-shacks .m-classic-shack__panel .m-cabin-calendar { padding: 0; margin: 20px 0 0; }
html.theme-shacks .m-cabin-calendar .m-cabin-calendar__btn { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
html.theme-shacks .m-cabin-calendar .m-cabin-calendar__btn:hover, html.theme-shacks .m-cabin-calendar .m-cabin-calendar__btn:focus-visible { background: #fff; color: var(--ink); }

/* THE CABIN PAGE'S LAYOUT AND THE PRESS STRIP AT REST (Tom, 2026-10-12, from
   his review of the cabin page). One block, appended so it wins.

   1. The top of the cabin page (his second review, the same day, at 1280
      wide). The photographs are first and flush under the menu, full width,
      with no gap above or below (modules/classic-shack-photos.js); the trail
      comes after them, small, 14px below the photographs and 10px above the
      cabin's name (pages/brand/shack.js places it; before, it sat above the
      photographs). The "On this page" bar (modules/section-nav.js) has no
      margins of its own. The name and the booking panel start on one line
      (modules/classic-shack.js). After that the page keeps the theme's one
      section gap between sections, and its section headings are one size:
      "Shacks nearby" is 24px here like "In your cabin", "Stay local", "FAQs"
      and "Guest reviews", not the 32px it has on a listing page.
   2. The press strip for anyone whose device asks for less motion (Windows
      does whenever Animation effects is off) was one long row with a scroll
      bar. It is now a wrapped, centred row with everything in view and no
      bar (modules/logos.js); the theme's own strip rules above are the more
      specific, so the still version is restated here for the theme. */
html.theme-shacks .site-main > .m-classic-shack-photos { margin-top: 0; margin-bottom: 0; }
html.theme-shacks .site-main > .m-classic-shack-photos ~ .m-classic-crumbs { padding-top: 14px; }
html.theme-shacks .site-main > .m-classic-crumbs + .m-classic-shack { margin-top: 10px; }
/* The trail moved to the foot of the cabin page (Tom, 2026-10-13), so the cabin
   now follows the photographs or the On this page bar directly and needs its
   own air above the name; and the trail, last on the page, needs some too. */
html.theme-shacks .site-main > .m-classic-shack-photos ~ .m-classic-shack { margin-top: 22px; }
html.theme-shacks .site-main > .m-classic-shack ~ .m-classic-crumbs { padding-top: 28px; padding-bottom: 12px; }
html.theme-shacks .m-classic-shack ~ .m-cabin-grid .m-cabin-grid__heading { font-size: 24px; }
/* A full-width band that is not drawn for this cabin (Lynx has nothing "In
   your cabin" yet) must not pull the next band up over the gap: the map's
   guide line was touching the reviews band. */
html.theme-shacks .site-main > .is-full[hidden] + .is-full { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  html.theme-shacks .m-logos--scroll .m-logos__viewport { overflow: visible; }
  html.theme-shacks .m-logos--scroll .m-logos__list { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 24px 0; overflow: visible; }
  html.theme-shacks .m-logos--scroll .m-logos__list li[aria-hidden] { display: none; }
}

/* ==== ERROR PAGES AND THE THANK-YOU PAGE (Tom, 2026-10-12) ====
   The 404 and 500 pages are a heading and a row of buttons, nothing after
   (web/src/errorPages.js): the buttons line up with the heading, on the page
   container rather than the 1000px reading column, with room above the
   footer. The thank-you page (/booking-thanks/) gets the same room under
   SuperControl's booking summary. */
html.theme-shacks .site-main > .m-heading:has(+ .m-buttons:last-child) { margin-bottom: 24px; }
html.theme-shacks .site-main > .m-heading + .m-buttons:last-child { max-width: var(--container); padding: 0 var(--container-pad); margin: 0 auto 96px; }
html.theme-shacks .site-main > .m-booking-thanks:last-child { margin-bottom: 72px; }

.preview-chip{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--font,Arial,sans-serif);letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:999px;vertical-align:middle;white-space:nowrap}
.preview-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.preview-chip--live{background:#e3f1e6;color:#1f6b35}
.preview-chip--offline{background:#f4ece0;color:#8a5a14}