/*
 * The rules that reach every page: the one typeface, the Elementor footer's type sized the way Vrbo and Airbnb size
 * theirs (phase 11b of the booking journey plan, rule 26, Ian's answers of 2026-10-05), and the phone header, menu and
 * buttons carried over from the old Custom Code 37274.
 *
 * Everything here outweighs Elementor's own rules for the header templates (2830 on the front page, 117 everywhere
 * else) and the footer template (135) by specificity alone, two ids in front, so the templates can stay as they
 * are in the editor. The one exception is the front page's header script (an HTML widget in template 2830), which
 * writes its menu colours with !important; the two rules that answer it say !important too.
 *
 * Remove a rule by rebuilding that template on the ts- classes. Remove the file when none is left.
 */

/* ── 1. One typeface ──────────────────────────────────────────────────────────────────────────────────────────────
 * The website's face is Figtree (design system, 2026-10-04). Elementor Site Settings carry it for every widget that
 * follows the global fonts. Most widgets do not: "Montserrat" was typed into them one at a time. This rule brings
 * those along. Icon fonts are left alone: they sit on <i> elements, on eicon and Font Awesome class names, or on a
 * ::before that this selector cannot reach. The WordPress toolbar keeps its own font. */
html:not(#ts):not(#ts) body :where(*:not(i, [class*="eicon"], [class*="fa-"], .dashicons, code, pre, kbd, samp, #wpadminbar, #wpadminbar *)) {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ── 2. Header ────────────────────────────────────────────────────────────────────────────────────────────────────
 * Redrawn with Ian on 2026-10-07 (prototypes/header-footer in the vault, rows F-216, F-217 and F-222), sized between
 * the old header and Vrbo and Airbnb: a bar 80 high, the logo at 180 on the page's content edge (the 1200 column with
 * its 24 gutter, x 144 at 1440, where every section starts), the words 16/500 in ink-800 32 apart, bold (600) on hover, the
 * page you are on bold in ink-900 over a 2px line (teal until 0.3.57), "Search resorts" as it was, an ink-200 line under the bar and shadow-sm once the page moves. On a
 * phone (section 4): a bar 64 high, the logo at 140, the menu as it was. Focus is a 2px teal ring (white over the home
 * photo) and everything that changes colour does it in 160 ms, the system's fast step.
 *
 * Elements by id: bar 5a91f1b, logo 62cc35d and 5df423f, menu 47d6559, button fd31f1d on header 117 (every page but the
 * front page); bar 856c61c (.headerSection), logo afe8a92, menu 0605f04, button 06f2072 on header 2830. The front page's
 * header writes its colours, line, shadow and 0.4 s fades with !important from its HTML widget; the rules that answer it
 * say !important too. The first redraw (0.3.7, Vrbo's and Airbnb's exact sizes) is commit 353169a; Ian asked for that
 * one back. */
/* Every width: the ink-200 line under the bar, shadow-sm once the page moves (ts-scrolled: assets/js/ts-sitewide.js; the
   front page's own stickyHeader), and 160 ms fades in place of the front page's 0.4 s. */
html:not(#ts):not(#ts) body .elementor-location-header .elementor-element-5a91f1b {
  border-bottom: 1px solid #D7DBE0;
  transition: background-color 160ms cubic-bezier(.2,0,0,1), border-color 160ms cubic-bezier(.2,0,0,1), box-shadow 160ms cubic-bezier(.2,0,0,1);
}
html:not(#ts):not(#ts).ts-scrolled body .elementor-location-header .elementor-element-5a91f1b { box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10); }
html:not(#ts):not(#ts) body .elementor-location-header .headerSection {
  transition: background-color 160ms cubic-bezier(.2,0,0,1), border-color 160ms cubic-bezier(.2,0,0,1), box-shadow 160ms cubic-bezier(.2,0,0,1) !important;
}
html:not(#ts):not(#ts) body .elementor-location-header .headerSection.stickyHeader { border-bottom: 1px solid #D7DBE0 !important; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10) !important; }
html:not(#ts):not(#ts) body .elementor-location-header .header-logo-wrap img { transition: opacity 160ms cubic-bezier(.2,0,0,1); }
/* the logo widgets' own padding (4 on the front page's, on a phone) would move the logo off the content edge */
html:not(#ts):not(#ts) body .elementor-location-header :is(.elementor-element-5df423f, .elementor-element-afe8a92) > .elementor-widget-container { padding: 0; margin: 0; }

@media (min-width: 768px) {
  html:not(#ts):not(#ts) body .elementor-location-header :is(.elementor-element-5a91f1b, .elementor-element-856c61c) {
    min-height: 80px; padding: 0; box-sizing: border-box;
  }
  html:not(#ts):not(#ts) body .elementor-location-header :is(.elementor-element-5a91f1b, .elementor-element-856c61c) > .e-con-inner {
    box-sizing: border-box; max-width: 1200px; min-height: 79px; padding: 0 24px; margin-inline: auto;
    flex-wrap: nowrap; align-items: center; gap: 32px;
  }
  /* the logo, 180 wide, its own height (57) */
  html:not(#ts):not(#ts) body .elementor-location-header :is(.elementor-element-62cc35d, .elementor-element-5df423f, .elementor-element-afe8a92) {
    width: auto; max-width: none; flex: 0 0 auto; padding: 0; margin: 0;
  }
  html:not(#ts):not(#ts) body .elementor-location-header :is(.elementor-element-5df423f, .elementor-element-afe8a92) img {
    display: block; width: 180px; max-width: none; height: auto;
  }
  /* the words, pushed right, the button after them */
  html:not(#ts):not(#ts) body .elementor-location-header :is(.elementor-element-47d6559, .elementor-element-0605f04) {
    width: auto; flex: 0 1 auto; margin-left: auto; padding: 0;
  }
  html:not(#ts):not(#ts) body .elementor-location-header :is(.elementor-element-fd31f1d, .elementor-element-06f2072) {
    width: auto; flex: 0 0 auto; margin: 0;
  }
}
/* Laptop: the five words. Below 1025 Elementor folds them into the menu button (both menus are "dropdown: tablet"). */
@media (min-width: 1025px) {
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu { gap: 32px; }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > li { margin: 0; }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main .elementor-item {
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 79px; margin: 0; padding: 0;
    font-size: 16px; font-weight: 500; line-height: 24px; color: #1F2A37;
    transition: color 160ms cubic-bezier(.2,0,0,1), font-weight 240ms cubic-bezier(.2,0,0,1);
  }
  /* No teal (Ian, 2026-10-08: "Instead of blue ... it actually becomes bold, but it's very smooth"): a hovered word and the
     page you are on are 600 (700 in 0.3.58 and 0.3.59; Ian, 2026-10-08, back to 600: "too bold"), the hovered word in its own colour and the page you are on in ink-900. Figtree loads as one 300
     to 900 file, so the weight moves through the steps between in 240 ms. Each word holds the width of its bold self, from a
     hidden bold copy of its own words (data-ts-label, set by assets/js/ts-sitewide.js), so the words beside it never move;
     the word sits in the middle of that width. The menus use Elementor's "pointer: none", so ::before is free. */
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main .elementor-item[data-ts-label]::before {
    content: attr(data-ts-label); content: attr(data-ts-label) / ""; position: static; display: block; height: 0; overflow: hidden; visibility: hidden;
    font-weight: 600; opacity: 0; transform: none; pointer-events: none; user-select: none;
  }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main .elementor-item:hover { color: #1F2A37; font-weight: 600; }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #111927; font-weight: 600; }
  /* the page you are on: a 2px ink-900 line on the bar's bottom line (Elementor marks it; a resort page marks none). It was teal. */
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #111927; opacity: 1; transform: none;
  }
  /* the front page: white words over the photo, ink-800 once the bar turns white. Its header script turned a hovered word pale
     teal over the photo; it stays white. */
  html:not(#ts):not(#ts) body .elementor-location-header .headerSection .elementor-nav-menu--main .elementor-item { transition: color 160ms cubic-bezier(.2,0,0,1), font-weight 240ms cubic-bezier(.2,0,0,1) !important; }
  html:not(#ts):not(#ts) body .elementor-location-header .headerSection:not(.stickyHeader) .elementor-nav-menu--main .elementor-item:hover { color: #FFFFFF !important; }
  html:not(#ts):not(#ts) body .elementor-location-header .headerSection.stickyHeader .elementor-nav-menu--main .elementor-item { color: #1F2A37 !important; }
  html:not(#ts):not(#ts) body .elementor-location-header .headerSection.stickyHeader .elementor-nav-menu--main .elementor-item:hover { color: #1F2A37 !important; }
}
/* The menu that drops on a tablet and a phone: no teal either. The page you are on is 600 in ink-900, as in the bar; a touched or hovered row
   keeps ink-900 (both were teal). */
html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:is(:hover, :focus, .elementor-item-active) { color: #111927 !important; }
html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--main .elementor-item { transition-duration: 0.01ms !important; }
}
/* Tablet: the menu card hangs 8 under the 80 bar at the right, under its button (a full-width sheet until 2026-10-11). */
@media (min-width: 768px) and (max-width: 1024px) {
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container:not(#ts-menu) {
    position: fixed !important; top: 88px !important; left: auto !important; right: 16px !important;
    width: 360px !important; max-width: calc(100vw - 32px) !important; margin-top: 0 !important; transform: none !important;
  }
}
/* The phone and tablet menu is a card, as Airbnb's menus are (Ian, 2026-10-11, research/phone-menu-2026-10-11/today-vs-proposed.png):
   12 in from the sides 8 under the 64 bar on a phone, 360 wide at the right 8 under the 80 bar on a tablet, radius 16, shadow lg.
   Rows sit left with the search list's 40 icon tile (brand-600 on ink-50) and a chevron, 56 high, 16/600 ink-900, no lines;
   a tapped row and the page you are on go brand-50. assets/js/ts-sitewide.js adds the icons and the scrim that dims the page. */
@media (max-width: 1024px) {
  /* The padding and shadow only while it is open: Elementor closes the menu by squeezing it to no height, and 8 of padding
     left a 16-high white bar under the header on every phone page (0.3.70, Ian's screenshot 2026-10-11). */
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container:not(#ts-menu) {
    padding: 0 !important; border-radius: 16px !important; background: #FFFFFF !important; overflow: hidden !important; box-shadow: none !important;
  }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container:not(#ts-menu) {
    padding: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 0 2px rgba(16,24,40,.12) !important;
  }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown li { border: 0 !important; margin: 0 !important; }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
    min-height: 56px !important; padding: 8px !important; border: 0 !important; border-radius: 12px !important; background: none !important;
    text-align: left !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #111927 !important;
  }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item:is(:active, .elementor-item-active) { background: #ECF9F9 !important; }
  html:not(#ts):not(#ts) body .ts-menu__ic { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: #F5F6F7; color: #006C84; }
  html:not(#ts):not(#ts) body .ts-menu__chev { display: grid; margin-left: auto; color: #8A929C; }
  html:not(#ts):not(#ts) body .ts-menu-scrim { position: fixed; inset: 64px 0 0; z-index: 9990; background: rgba(17,25,39,.32); }
}
@media (min-width: 768px) and (max-width: 1024px) { html:not(#ts):not(#ts) body .ts-menu-scrim { top: 80px; } }
@media (max-width: 1024px) {
  html:not(#ts):not(#ts) body .elementor-location-header .headerSection .elementor-menu-toggle,
  html:not(#ts):not(#ts) body .elementor-location-header .headerSection .elementor-menu-toggle svg path { transition: color 160ms cubic-bezier(.2,0,0,1), fill 160ms cubic-bezier(.2,0,0,1) !important; }
}
/* The request form and "Booking request sent" (body class ts-logo-only, includes/class-ts-site-footer.php): the logo alone,
   still linking home, at the bar's own sizes, 80 high with the logo at 180 and 64 with 140 on a phone. The words (nav-menu
   95291fd, the phone's menu button with them) and "Search resorts" (fd31f1d) lead away from the form, so they go on this
   page only (Ian, 2026-10-07, F-205; web-booking.md step 6). */
html:not(#ts):not(#ts) body.ts-logo-only .elementor-location-header :is(.elementor-element-95291fd, .elementor-element-fd31f1d, .elementor-widget-nav-menu, .elementor-widget-button) { display: none; }

/* Focus, header and footer: the system's 2px teal ring; white over the home photo and on the dark sign-up band */
html:not(#ts):not(#ts) body .elementor-location-header :is(a, button, [role="button"]):focus-visible,
html:not(#ts):not(#ts) body .elementor-location-footer :is(a, button, input, summary, [role="button"]):focus-visible {
  outline: 2px solid #006C84; outline-offset: 2px; box-shadow: none;
}
html:not(#ts):not(#ts) body .elementor-location-header .headerSection:not(.stickyHeader):not(.ts-menu-open) > .e-con-inner > * :is(a, [role="button"]):focus-visible,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form :is(input, button):focus-visible {
  outline-color: #FFFFFF;
}

/* ── 3. Footer (F-133, F-152, the disclaimer) ─────────────────────────────────────────────────────────────────────
 * Targets: headings 14/500/18 (both sites), links 14/400/18 at a 36 pitch (Airbnb; Vrbo 12/400/16), legal 14/400/18.
 * The "Get first dibs" band above keeps its own heading. */
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-heading .elementor-heading-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #111927;
}
/* The band's heading at the site's section size, 24/600 (20 on a phone), as Airbnb and Vrbo size a section heading (22 to
 * 26), balanced (Ian, 2026-10-08: 32 was too big, 20 "too small-looking"). */
html:not(#ts):not(#ts) body .elementor-location-footer .e-con:has(> .e-con-inner > .elementor-widget-form) .elementor-widget-heading .elementor-heading-title,
html:not(#ts):not(#ts) body .elementor-location-footer .e-con:has(> .elementor-widget-form) .elementor-widget-heading .elementor-heading-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #FFFFFF;
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 767px) {
  html:not(#ts):not(#ts) body .elementor-location-footer .e-con:has(> .e-con-inner > .elementor-widget-form) .elementor-widget-heading .elementor-heading-title,
  html:not(#ts):not(#ts) body .elementor-location-footer .e-con:has(> .elementor-widget-form) .elementor-widget-heading .elementor-heading-title {
    font-size: 20px;
    line-height: 1.3;
  }
}
/* The sign-up band's email field and Subscribe at 56, as every other field on the site since 0.3.11 (F-142: Airbnb 56,
 * Vrbo 60). Elementor drew them 47 and 48 (F-194, Ian's pick A, 2026-10-06). */
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-field-group .elementor-field-textual {
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
}
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button {
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  padding-block: 0;
}
/* Every orange button keeps its dark label and reacts the same on hover: the darker orange, the text still ink. The
 * header's "Search resorts" and the footer's Subscribe are Elementor widgets whose colors live in Elementor; Subscribe
 * turned its text near-white on hover while the site's own orange buttons stayed dark (Ian, 2026-10-06: "make that
 * uniform", then "Just go back to black"). These match .ts-btn--accent in travelscowt-web.css. */
html:not(#ts):not(#ts) body .elementor-location-header .elementor-widget-button .elementor-button,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button {
  background-color: #FFAE42;
  color: #111927;
}
html:not(#ts):not(#ts) body .elementor-location-header .elementor-widget-button .elementor-button:hover,
html:not(#ts):not(#ts) body .elementor-location-header .elementor-widget-button .elementor-button:focus,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button:hover,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button:focus {
  background-color: #F49B30;
  color: #111927;
}
html:not(#ts):not(#ts) body .elementor-location-header .elementor-widget-button .elementor-button *,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button * {
  color: inherit;
  fill: currentColor;
}
/* The orange is the backpack orange, #FFAE42, hover #F49B30 (Ian, 2026-10-07). Elementor's kit (post 11) still holds the
 * old one: its global Accent is #FF692E, the fill of every Elementor button, and every Elementor button hovers #E85517.
 * These two rules hold the kit to the design system without a Site Settings save, which resets the logo and icon
 * (docs/site-settings.md, 2026-10-04). body.elementor-kit-11 outranks the kit's own .elementor-kit-11 selectors and still
 * yields to a widget's own colours, so a button set to another colour in Elementor keeps it. */
body.elementor-kit-11 {
  --e-global-color-accent: #FFAE42;
}
body.elementor-kit-11 button:hover, body.elementor-kit-11 button:focus,
body.elementor-kit-11 input[type="button"]:hover, body.elementor-kit-11 input[type="button"]:focus,
body.elementor-kit-11 input[type="submit"]:hover, body.elementor-kit-11 input[type="submit"]:focus,
body.elementor-kit-11 .elementor-button:hover, body.elementor-kit-11 .elementor-button:focus {
  background-color: #F49B30;
}
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-nav-menu--main .elementor-item,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-nav-menu--dropdown .elementor-item,
html:not(#ts):not(#ts) body .elementor-location-footer .e-loop-item .elementor-heading-title,
html:not(#ts):not(#ts) body .elementor-location-footer .e-loop-item .elementor-heading-title a {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #111927;
}
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-nav-menu--main .elementor-item {
  padding-top: 9px;
  padding-bottom: 9px;
}
/* bold and ink-900 on hover, as the plugin's footer links (.ts-foot) and the header's words, no teal (Ian, 2026-10-08) */
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-nav-menu--main .elementor-item:hover,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-nav-menu--main .elementor-item:focus-visible,
html:not(#ts):not(#ts) body .elementor-location-footer .e-loop-item .elementor-heading-title a:hover {
  color: #111927; font-weight: 600;
}
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-text-editor,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-text-editor p {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #384250;
}

/* The sign-up band, stacked and centered at every width since 2026-10-08, as a Mailchimp band (Ian: "make an exception for
 * the footer size for the banner. Stack: 1. Get first dibs on timeshare offers and deals 2. email address and Subscribe
 * button"): the heading on top (24, section 3), the email field and Subscribe 24 under it, side by side from a tablet up with
 * the field 360 wide, stacked full width on a phone. 48 above and below, 32 on a phone, a section's own spacing, inside the
 * page's 1200 column and its gutter. It was one row on a laptop from 2026-10-07 (F-219), the heading left and the form right. Containers: 37aa60d (the
 * band), 8fb8f48 (heading aceda18 and form eb794ca). The Elementor form is kept, so subscriptions keep their route. The
 * design system's own band, .ts-signup in travelscowt-web.css, is drawn the same way. */
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-37aa60d { padding: 0; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-8fb8f48 {
  box-sizing: border-box; width: 100%; max-width: 1200px; margin-inline: auto; padding: 48px 24px;
  flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 24px;
}
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-aceda18 { width: 100%; flex: 0 0 auto; margin: 0; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca { width: 100%; flex: 0 0 auto; margin: 0; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca .elementor-form-fields-wrapper { flex-wrap: nowrap; justify-content: center; gap: 12px; margin: 0; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca .elementor-field-group { width: auto; max-width: none; margin: 0; padding: 0; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca .elementor-field-type-email { flex: 0 1 360px; min-width: 0; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca .e-form__buttons { flex: 0 0 auto; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca .elementor-button { width: auto; padding-inline: 24px; }
@media (max-width: 767px) {
  html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-8fb8f48 { padding: 32px 16px; align-items: stretch; }
  html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca .elementor-form-fields-wrapper { flex-direction: column; }
  html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca :is(.elementor-field-type-email, .e-form__buttons) { flex: 0 0 auto; width: 100%; }
  html:not(#ts):not(#ts) body .elementor-location-footer .elementor-element-eb794ca .elementor-button { width: 100%; }
}
/* The footer under the band is the plugin's (includes/class-ts-site-footer.php), which stops Elementor printing the two
 * containers it replaces. Should Elementor print them anyway, they are hidden here so the footer never shows twice. */
html:not(#ts):not(#ts) body .elementor-location-footer:has(.ts-footer--top) .elementor-element-e76389d,
html:not(#ts):not(#ts) body .elementor-location-footer:has(.ts-footer--main) .elementor-element-b748dde,
html:not(#ts):not(#ts) body .elementor-location-footer:has(.ts-footer--slim) :is(.elementor-element-b5b746e, .elementor-element-e76389d) { display: none; }

/* The not-affiliated disclaimer, a Text Editor widget with the CSS class ts-foot__not above the copyright row,
 * as the prototype's footer draws it: 13px small print over a line. The words are Ian's, approved 2026-10-05. */
html:not(#ts):not(#ts) body .elementor-location-footer .ts-foot__not,
html:not(#ts):not(#ts) body .elementor-location-footer .ts-foot__not p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #384250;
}
html:not(#ts):not(#ts) body .elementor-location-footer .ts-foot__not {
  padding-top: 24px;
  border-top: 1px solid #D7DBE0;
}
/* the request form's slim footer starts with the disclaimer: no line over it, the footer's own 24 above (.ts-foot--slim) */
html:not(#ts):not(#ts) body .elementor-location-footer .ts-foot--slim .ts-foot__not { padding-top: 0; border-top: 0; }
html:not(#ts):not(#ts) body .elementor-location-footer .ts-foot__not b,
html:not(#ts):not(#ts) body .elementor-location-footer .ts-foot__not strong {
  font-weight: 600;
  color: #111927;
}

/* ── 4. The phone header, menu and buttons (from Custom Code 37274, 2026-10-06) ───────────────────────────────────
 * Custom Code 37274 "Mobile booking UX" drew the header as the site shows it on a phone since 2026-10-02. In the phase
 * 11b cleanup each of its rules was switched off in place on 29 page types at 320, 390 and 1440 (evals/qa/
 * snippet-rules.js, rules-after-3.json); the ones below still changed something on a live page and carry over with
 * their values and their !important, so the snippet can go to Draft with nothing moving. The rest matched nothing,
 * or only the old pages kept for Ian's word (/homepage/ and the like), and stay in the snippet's saved copy in the vault
 * (assets/rollback/custom-code-2026-10-06/37274-mobile-booking-ux.html).
 *
 * One header on a phone: a 140 logo and the 44 menu button on the 16 gutter, a bar 64 tall (the header and footer redraw,
 * Ian, 2026-10-07; it was a 160 logo, the button 8 from the right and a bar 68 tall). The menu under it is unchanged. Elements by
 * id: 856c61c (bar), afe8a92 (logo), 0605f04 (menu) on the front page's header 2830; 5a91f1b, 5df423f, 62cc35d,
 * 47d6559 on header 117 everywhere else. */
@media (max-width: 767px) {
  /* Never let anything push the page wider than the phone (iOS would zoom out and leave a blank strip) */
  html:not(#ts):not(#ts), html:not(#ts):not(#ts) body { overflow-x: hidden; }

  html:not(#ts):not(#ts) body .elementor-element.elementor-element-856c61c {
    flex-wrap: nowrap !important; justify-content: space-between !important; width: 100% !important; max-width: 100vw !important;
  }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-856c61c,
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-5a91f1b {
    min-height: 64px !important; padding: 0 16px !important; box-sizing: border-box !important; align-items: center !important;
    transition: background-color 160ms cubic-bezier(.2,0,0,1), border-color 160ms cubic-bezier(.2,0,0,1), box-shadow 160ms cubic-bezier(.2,0,0,1) !important;
  }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-856c61c > .e-con-inner,
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-5a91f1b > .e-con-inner {
    flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important;
  }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-afe8a92 { flex: 0 1 auto !important; }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-afe8a92,
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-5df423f { max-width: 140px !important; width: 140px !important; }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-afe8a92 img,
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-5df423f img { width: 140px !important; max-width: 140px !important; height: auto !important; }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-62cc35d { padding: 0 !important; width: auto !important; flex: 0 1 auto !important; }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-47d6559,
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-0605f04 {
    width: auto !important; flex: 0 0 auto !important; margin-left: auto !important; justify-content: flex-end !important; padding: 0 !important;
  }
  html:not(#ts):not(#ts) body .elementor-menu-toggle {
    width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }

  /* The menu card hangs 8 under the 64 bar, 12 in from each side (Ian, 2026-10-11; a full-width sheet flush with the bar before). While it is open on
     the front page, the bar turns white with the dark logo: assets/js/ts-sitewide.js sets ts-menu-open here and the header's own stickyHeader. */
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container:not(#ts-menu) {
    position: fixed !important; top: 72px !important; left: 12px !important; right: 12px !important;
    width: auto !important; max-width: none !important; margin-top: 0 !important; transform: none !important;
  }
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-856c61c.ts-menu-open { background-color: #FFFFFF !important; }

  /* Elementor buttons: one size, a 48 pill at 16/600 with 28 sides (design system button md). Live on the search
     results and the /accommodation/ archive (template 420) */
  html:not(#ts):not(#ts) body .elementor-widget-button .elementor-button,
  html:not(#ts):not(#ts) body .elementor-cta__button.elementor-button {
    min-height: 48px !important; min-width: 145px; padding: 0 28px !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; border-radius: 38px !important;
  }
  /* Resort cards (loop item 178, on the search results and the archive): no blurb on a phone (Ian, 2026-10-02) */
  html:not(#ts):not(#ts) body .elementor-element.elementor-element-1dec696 { display: none !important; }
}

/* ── 6. The logo's wink ──────────────────────────────────────────────────────────────────────────────────────────────
 * After Mailchimp's Freddie (Ian, 2026-10-08, prototypes/logo-wink/logo-wink-mockup.html version 8, approved: wink once,
 * lift on). When a mouse arrives on the logo, in the header or the footer, the cow lifts 3% of the logo's height (1.7 px at
 * 180) with 3 degrees of chin-up from the neckerchief, winks at the top and settles, 800 ms; the word Travelscowt stays still.
 * No wink on a phone (a tap goes home) and none on the request form and "Booking request sent" (ts-logo-only).
 * assets/js/ts-sitewide.js wraps each logo picture in .ts-wink: the picture itself masked to the word (x 380 of 1578 on), and
 * a copy of it, same file, size and place, masked to the cow, with the redrawn eye (assets/img/logo-wink-eye.png, 52 by 50 at
 * x 149, y 116 of 1578 by 498, the same patch for the dark and white logos). At rest the two halves are the logo exactly.
 * The lift and tilt are registered properties, so the browser paints every frame rather than snapping a layer to whole
 * pixels. Reduced motion keeps the wink and drops the lift. */
@property --ts-lift { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
@property --ts-tilt { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html:not(#ts):not(#ts) body .ts-wink { position: relative; display: block; width: fit-content; line-height: 0; }
html:not(#ts):not(#ts) body .ts-wink > .ts-wink__base {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(380 / 1578 * 100%), #000 calc(380 / 1578 * 100%));
  mask-image: linear-gradient(90deg, transparent calc(380 / 1578 * 100%), #000 calc(380 / 1578 * 100%));
}
html:not(#ts):not(#ts) body .ts-wink > .ts-wink__cow {
  position: absolute; inset: 0; display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(380 / 1578 * 100%), transparent calc(380 / 1578 * 100%));
  mask-image: linear-gradient(90deg, #000 calc(380 / 1578 * 100%), transparent calc(380 / 1578 * 100%));
  transform-origin: calc(190 / 1578 * 100%) 66%; transform: translateY(var(--ts-lift)) rotate(var(--ts-tilt));
}
html:not(#ts):not(#ts) body .ts-wink > .ts-wink__cow > img {
  display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important;
  position: static !important; opacity: 1 !important; transition: none !important;
}
html:not(#ts):not(#ts) body .ts-wink__eye {
  position: absolute; display: block; left: calc(149 / 1578 * 100%); top: calc(116 / 498 * 100%);
  width: calc(52 / 1578 * 100%); height: calc(50 / 498 * 100%); opacity: 0;
  background: url(../img/logo-wink-eye.png) 0 0 / 100% 100% no-repeat;
}
html:not(#ts):not(#ts) body .ts-wink.is-playing > .ts-wink__cow { animation: ts-hop 800ms linear 1 both; }
html:not(#ts):not(#ts) body .ts-wink.is-playing .ts-wink__eye { animation: ts-wink 800ms linear 1 both; }
/* the front page's header: the white logo and the dark one it fades to once scrolled, each in its own .ts-wink */
html:not(#ts):not(#ts) body .header-logo-wrap .ts-wink { transition: opacity 160ms cubic-bezier(.2,0,0,1); }
html:not(#ts):not(#ts) body .header-logo-wrap .ts-wink.logo-secondary { position: absolute; top: 0; left: 0; width: 100%; }
/* shut from 300 to 560 ms, at the top of the lift */
@keyframes ts-wink { 0%, 37% { opacity: 0; } 40%, 68% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes ts-hop {
  0%   { --ts-lift: 0%; --ts-tilt: 0deg; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  42%  { --ts-lift: -3%; --ts-tilt: 3deg; animation-timing-function: linear; }
  50%  { --ts-lift: -3%; --ts-tilt: 3deg; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76%  { --ts-lift: 0.6%; --ts-tilt: 0deg; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  100% { --ts-lift: 0%; --ts-tilt: 0deg; }
}
@media (prefers-reduced-motion: reduce) { html:not(#ts):not(#ts) body .ts-wink.is-playing > .ts-wink__cow { animation: none; } }

/* ── 7. The easter egg on the map drawing ────────────────────────────────────────────────────────────────────────────
 * Home and /resorts/, the owners picture (art:scout-map; includes/class-ts-site-home.php, owners_picture). Ian approved
 * mockup version 10 on 2026-10-08. A pointer coming onto the picture, or a tap anywhere on it (the whole picture since
 * 0.3.69, Donald's ask; a spot over the head before), plays the logo's hey much smaller:
 * about 1 px up and 1.5 degrees of chin-up from the bottom of the neck, the redrawn eye shut at the top, 800 ms. Every layer
 * is an image of the drawing's own size and crop (the picture's class, so the same 16:9 cover crop), so they register with
 * the drawing at every width: the fill of what is behind the head (scout-map-egg-fill), on only while the head moves; the
 * head, a second copy of the drawing masked to the head's own outline (scout-map-egg-mask, the mask cropped the same way);
 * the eye (scout-map-egg-eye). Placements are in the drawing's 1600 by 895 and shifted for the cover crop (the drawing is
 * 0.56% wider than 16:9). At rest the copy is pixel for pixel the drawing and the fill is hidden. Reduced motion keeps the
 * wink and drops the hey.
 * The birds move with it (0.3.71, Ian, 2026-10-11, "a touch more", 2.4 s; a sliding cloud was tried and dropped). Under the
 * head's layers, .ts-egg__life holds a fill of what is behind both birds, painted in from the pixels around them
 * (scout-map-egg-behind, on only while they move, so the still bird underneath never shows through), and a plate of
 * each bird, the drawing's own pixels inside its outline (scout-map-egg-bird1, -bird2). While .is-alive, the top bird
 * dips 0.9% of the picture's height and the right bird lifts as much, each drifting 0.4% of its width forward, and both
 * settle back; the hill under the right bird's tail is cut from its plate, so it stays put. Reduced motion drops it. */
html:not(#ts):not(#ts) body .ts-egg { position: relative; min-width: 0; }
html:not(#ts):not(#ts) body .ts-egg > .ts-owners__art:first-child { display: block; }
html:not(#ts):not(#ts) body .ts-egg__fill { position: absolute; top: 0; left: 0; display: block; opacity: 0; pointer-events: none; }
html:not(#ts):not(#ts) body .ts-egg__head {
  position: absolute; inset: 0; display: block; pointer-events: none;
  -webkit-mask-image: var(--ts-egg-mask); mask-image: var(--ts-egg-mask);
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transform-origin: 46.983% 34.19%; transform: translateY(var(--ts-lift)) rotate(var(--ts-tilt));
}
html:not(#ts):not(#ts) body .ts-egg__head > .ts-owners__art { display: block; }
html:not(#ts):not(#ts) body .ts-egg__eye { position: absolute; top: 0; left: 0; opacity: 0; }
html:not(#ts):not(#ts) body .ts-egg { -webkit-tap-highlight-color: transparent; }
html:not(#ts):not(#ts) body .ts-egg.is-playing .ts-egg__fill { opacity: 1; }
html:not(#ts):not(#ts) body .ts-egg.is-playing .ts-egg__head { animation: ts-hey 800ms linear 1 both; }
html:not(#ts):not(#ts) body .ts-egg.is-playing .ts-egg__eye { animation: ts-wink 800ms linear 1 both; }
@keyframes ts-hey {
  0%   { --ts-lift: 0%; --ts-tilt: 0deg; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  42%  { --ts-lift: -0.35%; --ts-tilt: 1.5deg; animation-timing-function: linear; }
  50%  { --ts-lift: -0.35%; --ts-tilt: 1.5deg; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76%  { --ts-lift: 0.07%; --ts-tilt: 0deg; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  100% { --ts-lift: 0%; --ts-tilt: 0deg; }
}
html:not(#ts):not(#ts) body .ts-egg__life { position: absolute; inset: 0; display: block; pointer-events: none; }
html:not(#ts):not(#ts) body .ts-egg__life > .ts-owners__art { position: absolute; top: 0; left: 0; display: block; }
html:not(#ts):not(#ts) body .ts-egg__behind { opacity: 0; }
html:not(#ts):not(#ts) body .ts-egg.is-alive .ts-egg__behind { opacity: 1; }
html:not(#ts):not(#ts) body .ts-egg.is-alive .ts-egg__bird1 { animation: ts-bird1 2400ms cubic-bezier(.45, 0, .55, 1) 1 both; }
html:not(#ts):not(#ts) body .ts-egg.is-alive .ts-egg__bird2 { animation: ts-bird2 2400ms cubic-bezier(.45, 0, .55, 1) 1 both; }
@keyframes ts-bird1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0.4%, 0.9%); } }
@keyframes ts-bird2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0.4%, -0.9%); } }
@media (prefers-reduced-motion: reduce) {
  html:not(#ts):not(#ts) body .ts-egg.is-playing .ts-egg__head { animation: none; }
  html:not(#ts):not(#ts) body .ts-egg.is-alive .ts-egg__life > .ts-owners__art { animation: none; opacity: 0; }
}

/* ── 8. The press and open pass (0.3.72, Ian, 2026-10-13) ─────────────────────────────────────────────────────────────
 * The Elementor buttons press in to 0.96 for 100ms like the site's own (travelscowt-web.css, the same pass): the header's
 * "Search resorts", the footer's Subscribe and the menu button. The phone and tablet menu card and its scrim arrive with
 * the system's fade-up and fade-in, 240ms (ts-sitewide.js sets ts-menu-in on the card while it is open). Subscribe shows
 * the three sending dots while its form posts (ts-sitewide.js sets aria-busy). */
html:not(#ts):not(#ts) body .elementor-location-header .elementor-widget-button .elementor-button,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button,
html:not(#ts):not(#ts) body .elementor-location-header .elementor-menu-toggle { transition: background-color 160ms cubic-bezier(.2,0,0,1), color 160ms cubic-bezier(.2,0,0,1), transform 100ms cubic-bezier(.2,0,0,1); }
html:not(#ts):not(#ts) body .elementor-location-header .elementor-widget-button .elementor-button:active,
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button:active:not([aria-busy="true"]),
html:not(#ts):not(#ts) body .elementor-location-header .elementor-menu-toggle:active { transform: scale(0.96); }
html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown.ts-menu-in { animation: ts-fade-up 240ms cubic-bezier(.2,0,0,1) 1 both; }
html:not(#ts):not(#ts) body .ts-menu-scrim:not([hidden]) { animation: ts-fade-in 240ms cubic-bezier(.2,0,0,1) 1 both; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button[aria-busy="true"] { position: relative; color: transparent !important; cursor: progress; }
html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button[aria-busy="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  --ts-dot: #111927; --ts-dot-dim: rgba(17, 25, 39, 0.3);
  background: var(--ts-dot-dim); box-shadow: -12px 0 0 var(--ts-dot), 12px 0 0 var(--ts-dot-dim);
  animation: ts-dots 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-widget-button .elementor-button:active,
  html:not(#ts):not(#ts) body .elementor-location-footer .elementor-widget-form .elementor-button:active,
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-menu-toggle:active { transform: none; }
  html:not(#ts):not(#ts) body .elementor-location-header .elementor-nav-menu--dropdown.ts-menu-in, html:not(#ts):not(#ts) body .ts-menu-scrim:not([hidden]) { animation: none; }
}