/* =====================================================================
   KOHWAN — phones & tablets (below 1100px).

   Loaded last in partials/head, so it settles every earlier sheet. Every
   visible rule sits inside the max-width: 1099px block: at 1100px and up —
   the desktop, in both its layouts — nothing here applies.

     HEADER   one white bar: menu button, logo, Support, "Design my trip".
              The navy "Pay Online" strip above it is gone; Pay Online rides
              the homepage's category row instead.
     HOME     categories, a rotating banner with words over each picture and
              a search pill over its foot (partials/home-mobile-hero), in
              place of the desktop photo clusters and headline.
   ===================================================================== */

/* Desktop-hidden parts. Only ever shown by the block below. */
.kmob,
.ghead__logo-plain { display: none; }

@media (max-width: 1099px) {

  /* ============================== HEADER ============================== */
  /* Only pages that carry this header (the ski landing page has its own). */
  :root:has(.site-header.ghead) { --header-h: 64px; }

  /* The strip is gone, so nothing sits above the bar and nothing below it
     reserves the strip's 44px any more. */
  .topbar { display: none !important; }
  .site-header.ghead,
  body.inner-page .site-header.ghead,
  body:has(.site-header.is-scrolled) .site-header.ghead {
    top: 0 !important;
    height: var(--header-h) !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E8EDF0 !important;
    box-shadow: none;
    transition: box-shadow .25s ease;
  }
  .site-header.ghead.is-scrolled { box-shadow: 0 6px 18px rgba(31, 52, 65, .08) !important; }
  body.inner-page:has(.site-header.ghead) { padding-top: var(--header-h); }
  .kshow { --ks-top: var(--header-h) !important; }

  .ghead .ghead__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--header-h);
    padding: 0 16px;
  }
  /* The actions' wrapper steps aside so the menu button can lead the row. */
  .ghead .ghead__actions { display: contents; }

  /* ---- menu button, first ---- */
  .ghead .nav-toggle {
    order: -1;
    display: block;
    flex: none;
    width: 26px;
    height: 20px;
    margin: 0 2px 0 0;
  }
  .ghead .nav-toggle span { height: 2px; background: #1f3441 !important; }
  .ghead .nav-toggle span:nth-child(1) { top: 1px; }
  .ghead .nav-toggle span:nth-child(2) { top: 9px; width: 78%; }
  .ghead .nav-toggle span:nth-child(3) { top: 17px; }

  /* ---- logo, straight on the white ---- */
  .ghead .ghead__brand,
  .ghead .ghead__brand--split {
    order: 0;
    flex: none;
    margin-right: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .ghead .ghead__brand .ghead__logo { display: block; width: auto; height: 44px; max-width: none; }
  /* The home page's two-tone logo has a white lower half; the plain one
     stands in for it here. */
  .ghead .ghead__brand--split .ghead__logo--split { display: none; }
  .ghead .ghead__brand--split .ghead__logo-plain { display: block; width: auto; height: 44px; }

  /* ---- off the bar: Corporate, weather, profile, layout switch ---- */
  .ghead .gtop__corp,
  .ghead .gwx,
  .ghead .ghead__actions > a.gstack,
  .ghead .navmode-btn { display: none !important; }

  /* ---- Support: an icon, like the reference's language globe ---- */
  .ghead .tooltip-wrapper { order: 1; flex: none; }
  /* Taken off the bar altogether: the logo and "Design my trip" only.
     (Support is still in the menu drawer and the footer.) */
  .ghead .ghead__bar > .tooltip-wrapper,
  .ghead .ghead__actions > .tooltip-wrapper { display: none !important; }
  .ghead .tooltip-wrapper .nav-link > .tooltip-tab {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1f3441;
    font-size: 0;
    letter-spacing: 0;
  }
  .ghead .tooltip-wrapper .nav-link > .tooltip-tab svg {
    width: 25px;
    height: 25px;
    margin: 0;
    fill: none;
    stroke: currentColor;
  }
  .ghead .tooltip-wrapper .nav-link:hover > .tooltip-tab,
  .ghead .tooltip-wrapper .nav-link.is-open > .tooltip-tab { background: #F1F4F6; transform: none; }

  /* ---- Design my trip: the reference's solid pill ---- */
  .ghead .gtix.gdmt {
    order: 2;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #2e4755;
    box-shadow: 0 4px 12px rgba(46, 71, 85, .22);
    color: #FFFFFF !important;
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
  }
  .ghead .gtix.gdmt span { display: inline; }
  .ghead .gtix.gdmt::after {
    content: "";
    width: 15px;
    height: 15px;
    margin-left: 7px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .ghead .gtix.gdmt:hover { background: #1f3441; }
  /* No keyline and no ring round it (css/trip-designer.css draws both). */
  .ghead .gtix.gdmt,
  :root[data-nav="top"] .ghead .gtix.gdmt {
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
  }
  .ghead .gtix.gdmt:focus-visible { outline: 2px solid #BD830D; outline-offset: 2px; }

  /* ============================== HOME ==============================
     The desktop banner's section stays — it carries the trip search card —
     but its photo clusters and headline give way to the phone banner. */
  .kmos {
    padding: var(--header-h) 0 20px !important;
    min-height: 0 !important;
  }
  .kmos::before {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #FAF8F3 100%) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .kmos__stage { display: none !important; }
  .kmos__find { width: calc(100% - 32px) !important; margin: 22px auto 0 !important; }

  .kmob {
    display: block;
    color: #1f3441;
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  }
  .kmob__sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* ---- categories ---- */
  .kmob__cats {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 14px 10px 10px;
    border-bottom: 1px solid #E8EDF0;
  }
  .kmob__cats::-webkit-scrollbar { display: none; }
  .kmob__cat {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 80px;
    padding: 0 0 10px;
    border: 0;
    background: none;
    color: #5f7380;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  .kmob__ic {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #F2F5F7;
    color: #2e4755;
    transition: background-color .35s ease, transform .35s ease;
  }
  .kmob__ic svg { width: 30px; height: 30px; }
  .kmob__ic .a { stroke: #BD830D; }
  /* The live one: its slide is on screen. */
  .kmob__cat::after {
    content: "";
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: #BD830D;
    transform: scaleX(0);
    transition: transform .35s ease;
  }
  .kmob__cat.is-on { color: #1f3441; font-weight: 600; }
  .kmob__cat.is-on .kmob__ic { background: #FBF0D9; transform: translateY(-2px); }
  /* The icons stand on the white with no tile behind them. */
  .kmob__ic,
  .kmob__cat.is-on .kmob__ic,
  .kmob__cat.is-open .kmob__ic { width: 44px; height: 44px; background: transparent !important; }
  .kmob__ic svg { width: 32px; height: 32px; }

  /* ---- a category's dropdown ---- */
  .kmob { position: relative; }
  .kmob__lbl { display: inline-flex; align-items: center; gap: 3px; }
  .kmob__chev { width: 12px; height: 12px; flex: none; transition: transform .25s ease; }
  .kmob__cat.is-open { color: #1f3441; font-weight: 600; }
  .kmob__cat.is-open .kmob__chev { transform: rotate(180deg); }
  .kmob__cat.is-open::after { transform: scaleX(1); }
  /* While a list is open, only its own category is marked. */
  .kmob__cats:has(.is-open) .kmob__cat.is-on:not(.is-open) { color: #5f7380; font-weight: 500; }
  .kmob__cats:has(.is-open) .kmob__cat.is-on:not(.is-open)::after { transform: scaleX(0); }
  .kmob__cats:has(.is-open) .kmob__cat.is-on:not(.is-open) .kmob__ic { transform: none; }

  .kmob__drop {
    --kmob-caret: 50%;
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 20;
    padding: 8px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 18px 40px rgba(31, 52, 65, .2), 0 0 0 1px rgba(46, 71, 85, .06);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .kmob__drop.is-open { opacity: 1; transform: none; }
  .kmob__drop[hidden] { display: none; }
  /* The pointer up to the category that opened it. */
  .kmob__drop::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--kmob-caret);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 2px;
    background: #FFFFFF;
    box-shadow: -1px -1px 0 rgba(46, 71, 85, .06);
    transform: rotate(45deg);
  }
  .kmob__droplist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kmob__dropitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    color: #1f3441;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .kmob__dropitem:hover,
  .kmob__dropitem:focus-visible { background: #F4F6F8; outline: none; }
  .kmob__dropimg {
    flex: none;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 10px;
    background: #EEF2F4;
  }
  .kmob__dropimg img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Every menu's thumbnails are round on phones and tablets: the home
     category dropdowns, the menu drawer, and the header mega menus of the
     main site and the ski pages. A thin ring keeps a pale photo from
     melting into the white. */
  .kmob__dropimg,
  .mdraw__thumbimg,
  .skl-mega__img,
  .gmega__img {
    border-radius: 50% !important;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(46, 71, 85, .1), 0 2px 6px rgba(46, 71, 85, .1);
  }
  .kmob__dropimg img,
  .mdraw__thumbimg img,
  .skl-mega__img img,
  .gmega__img img { border-radius: 50% !important; }

  /* The icon above a category label is the page link; the label and its
     arrow open the dropdown (js/home-mobile-menu.js). */
  .kmob__cat--menu .kmob__ic { cursor: pointer; }
  .kmob__droptxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .kmob__droptxt b {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .kmob__droptxt small {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    color: #6B7C87;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .kmob__droparr { flex: none; width: 16px; height: 16px; color: #BD830D; }
  .kmob__dropall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 0;
    padding: 12px;
    border-radius: 12px;
    background: #2e4755;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
  }
  .kmob__dropall svg { width: 16px; height: 16px; }
  .kmob__dropall:hover { background: #1f3441; }
  .kmob__cat.is-on::after { transform: scaleX(1); }
  .kmob__cat:focus-visible { outline: 2px solid #BD830D; outline-offset: 2px; border-radius: 12px; }

  /* ---- the banner ---- */
  .kmob__stage {
    position: relative;
    isolation: isolate;
    margin: 18px 16px 0;
    aspect-ratio: 16 / 11;
    min-height: 236px;
    overflow: hidden;
    border-radius: 20px;
    background: #2e4755;
    box-shadow: 0 14px 34px rgba(31, 52, 65, .18);
  }
  .kmob__slide {
    position: absolute;
    inset: 0;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s;
  }
  .kmob__slide.is-on {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity .9s ease, visibility 0s;
  }
  /* A slow push-in while each picture is up. */
  .kmob__slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 6.5s ease-out;
  }
  .kmob__slide.is-on img { transform: scale(1); }
  .kmob__shade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(16, 30, 40, .78) 0%, rgba(16, 30, 40, .45) 48%, rgba(16, 30, 40, 0) 82%),
      linear-gradient(0deg, rgba(16, 30, 40, .55) 0%, rgba(16, 30, 40, 0) 55%);
  }
  .kmob__copy {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 46px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  /* The words rise in just after their picture. */
  .kmob__copy > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .kmob__slide.is-on .kmob__copy > * { opacity: 1; transform: none; }
  .kmob__slide.is-on .kmob__copy > :nth-child(1) { transition-delay: .25s; }
  .kmob__slide.is-on .kmob__copy > :nth-child(2) { transition-delay: .35s; }
  .kmob__slide.is-on .kmob__copy > :nth-child(3) { transition-delay: .45s; }
  .kmob__slide.is-on .kmob__copy > :nth-child(4) { transition-delay: .55s; }

  .kmob__tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: #BD830D;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .kmob__title {
    max-width: 13ch;
    font-size: clamp(22px, 6.6vw, 40px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  }
  .kmob__sub {
    max-width: 30ch;
    font-size: 13px;
    line-height: 1.4;
    opacity: .92;
  }
  .kmob__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1f3441;
    font-size: 12.5px;
    font-weight: 600;
  }
  .kmob__cta svg { width: 14px; height: 14px; }
  .kmob__slide:focus-visible { outline: 3px solid #BD830D; outline-offset: -3px; border-radius: 20px; }

  .kmob__dots {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    gap: 6px;
  }
  .kmob__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .35s ease, background-color .35s ease;
  }
  .kmob__dot.is-on { width: 22px; background: #FFFFFF; }
  /* A bigger target than the dot itself. */
  .kmob__dot { position: relative; }
  .kmob__dot::before { content: ""; position: absolute; inset: -10px -3px; }

  /* ---- search pill, over the banner's foot ---- */
  .kmob__search {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 58px;
    margin: -29px 30px 0;
    padding: 0 6px 0 22px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(31, 52, 65, .16), 0 0 0 1px rgba(46, 71, 85, .05);
  }
  .kmob__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    color: #1f3441;
    font: inherit;
    /* 16px keeps iOS from zooming in on focus. */
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
            appearance: none;
  }
  .kmob__search input::placeholder { color: #8796A0; }
  .kmob__search input::-webkit-search-cancel-button { display: none; }
  .kmob__search button {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #2e4755;
    color: #FFFFFF;
    cursor: pointer;
  }
  .kmob__search button svg { width: 21px; height: 21px; }
  .kmob__search:focus-within { box-shadow: 0 12px 30px rgba(31, 52, 65, .16), 0 0 0 2px #BD830D; }

  /* ---- dark theme: the header and banner stay light, as on the ski pages'
     search card, so their navy type keeps its contrast. ---- */
  :root[data-theme="dark"] .kmob__cats { background: #FFFFFF; }
}

/* ---- tablets ---- */
@media (min-width: 700px) and (max-width: 1099px) {
  .ghead .ghead__bar { padding: 0 24px; }
  .kmob__cats { justify-content: center; gap: 10px; padding-top: 16px; }
  .kmob__cat { width: 88px; font-size: 13px; }
  /* A tablet's dropdown: two columns, centred under the row. */
  .kmob__drop { left: 24px; right: 24px; max-width: 760px; margin-inline: auto; padding: 10px; }
  .kmob__droplist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .kmob__stage { margin: 22px 24px 0; aspect-ratio: 21 / 9; min-height: 300px; border-radius: 24px; }
  .kmob__copy { left: 32px; bottom: 58px; gap: 10px; }
  .kmob__title { font-size: clamp(30px, 4.6vw, 44px); }
  .kmob__sub { font-size: 15px; }
  .kmob__cta { padding: 10px 18px; font-size: 14px; }
  .kmob__search { max-width: 620px; margin: -30px auto 0; height: 60px; }
  .kmos__find { width: calc(100% - 48px) !important; }
}

/* ---- phones: a tighter bar, and a taller banner so its words fit ---- */
@media (max-width: 699px) {
  .ghead .ghead__bar { gap: 10px; padding: 0 14px; }
  .ghead .gtix.gdmt { height: 40px; padding: 0 15px; font-size: 12.5px; }
  .ghead .gtix.gdmt::after { display: none; }
  .ghead .ghead__brand .ghead__logo,
  .ghead .ghead__brand--split .ghead__logo-plain { height: 40px; }

  .kmob__stage { aspect-ratio: 4 / 3; min-height: 246px; }
  .kmob__copy { left: 16px; right: 16px; bottom: 44px; gap: 6px; }
  .kmob__title { max-width: 18ch; font-size: clamp(20px, 6vw, 28px); }
  .kmob__sub { font-size: 12.5px; }
}
/* ---- small phones: the Support icon steps aside to keep the bar on one line ---- */
@media (max-width: 389px) {
  .ghead .ghead__bar { padding: 0 12px; }
  .ghead .tooltip-wrapper { display: none; }
  .ghead .gtix.gdmt { padding: 0 13px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .kmob__slide, .kmob__slide.is-on { transition: opacity .2s linear, visibility 0s; }
  .kmob__slide img, .kmob__slide.is-on img { transform: none; transition: none; }
  .kmob__copy > *, .kmob__slide.is-on .kmob__copy > * { transition: none; transition-delay: 0s !important; }
}

/* =====================================================================
   MENU DRAWER — phones & tablets (partials/mobile-drawer).
   The desktop sidebar (.sidenav) is the same button's target at 1100px and
   up and is untouched; below that it steps aside for this.
   ===================================================================== */
.mdraw { display: none; }

@media (max-width: 1099px) {
  .sidenav { display: none !important; }

  /* The page behind: dimmed and softly blurred. */
  .sidenav-backdrop {
    background: rgba(18, 32, 42, .46);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }

  .mdraw {
    --md-navy: #2e4755;
    --md-ink: #1f3441;
    --md-muted: #6a7d88;
    --md-gold: #BD830D;
    --md-line: #E8EDF0;
    --md-soft: #F4F6F8;
    --md-ease: cubic-bezier(.22, .61, .36, 1);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(88vw, 400px);
    background: #FFFFFF;
    color: var(--md-ink);
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    border-radius: 0 24px 24px 0;
    box-shadow: none;
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform .45s var(--md-ease), visibility 0s linear .45s, box-shadow .45s var(--md-ease);
  }
  body.sidenav-open .mdraw {
    transform: none;
    visibility: visible;
    box-shadow: 24px 0 60px rgba(18, 32, 42, .22);
    transition: transform .45s var(--md-ease), visibility 0s, box-shadow .45s var(--md-ease);
  }
  .mdraw svg { display: block; }

  /* ------------------------------ head ------------------------------ */
  .mdraw__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px 20px;
  }
  .mdraw__brand { display: block; line-height: 0; }
  .mdraw__brand img { width: auto; height: 46px; }
  .mdraw__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--md-soft);
    color: var(--md-ink);
    cursor: pointer;
    transition: background-color .2s ease, transform .3s var(--md-ease);
  }
  .mdraw__close svg { width: 20px; height: 20px; }
  .mdraw__close:hover { background: #E9EEF1; transform: rotate(90deg); }
  .mdraw__close:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }

  /* ------------------------------ switch ------------------------------ */
  .mdraw__switch {
    position: relative;
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 4px 16px 6px;
    padding: 5px;
    border-radius: 16px;
    background: var(--md-soft);
    box-shadow: inset 0 0 0 1px var(--md-line);
  }
  .mdraw__thumb {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc(50% - 5px);
    border-radius: 12px;
    background: var(--md-navy);
    box-shadow: 0 6px 16px rgba(46, 71, 85, .28);
    transition: transform .42s var(--md-ease), background-color .42s var(--md-ease);
  }
  .mdraw__switch.is-ski .mdraw__thumb { transform: translateX(100%); background: #245A7A; }
  .mdraw__switch button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--md-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color .3s ease;
  }
  .mdraw__switch button svg { width: 18px; height: 18px; }
  .mdraw__switch button[aria-selected="true"] { color: #FFFFFF; }
  .mdraw__switch button:focus-visible { outline: 2px solid var(--md-gold); outline-offset: -2px; border-radius: 12px; }

  /* ------------------------------ body ------------------------------ */
  .mdraw__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 16px 18px;
    scrollbar-width: thin;
    scrollbar-color: #D5DEE3 transparent;
  }
  .mdraw__pane[hidden] { display: none; }
  .mdraw__pane.is-in { animation: mdraw-in .42s var(--md-ease); }
  .mdraw__pane.is-in.from-left { animation-name: mdraw-in-l; }
  @keyframes mdraw-in   { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes mdraw-in-l { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

  .mdraw__label {
    margin: 20px 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--md-muted);
  }

  /* ---- quick links ----
     One row that slides sideways: a plain line icon over its name, no tile
     and no box behind the icon. The page you are on is marked in gold. The
     row runs to the drawer's edges and fades at the right, so it plainly has
     more to swipe to. */
  .mdraw__quick {
    display: flex;
    gap: 4px;
    margin: 6px -16px 0;
    padding: 2px 16px 6px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .mdraw__quick::-webkit-scrollbar { display: none; }
  .mdraw__quick > li { flex: none; scroll-snap-align: start; }
  .mdraw__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 74px;
    padding: 8px 6px 7px;
    background: none;
    color: var(--md-ink);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
  }
  .mdraw__tile-ic {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--md-navy);
    transition: color .2s ease, transform .2s ease;
  }
  .mdraw__tile-ic svg { width: 24px; height: 24px; }
  .mdraw__tile:active { transform: scale(.95); }
  /* the page you are on: gold icon, bold name, a short gold rule beneath */
  .mdraw__tile.is-on { position: relative; font-weight: 600; }
  .mdraw__tile.is-on .mdraw__tile-ic { color: var(--md-gold); }
  .mdraw__tile.is-on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--md-gold);
    transform: translateX(-50%);
  }

  /* ---- sections ---- */
  .mdraw__sec {
    margin-bottom: 8px;
    border: 1px solid var(--md-line);
    border-radius: 16px;
    background: #FFFFFF;
    transition: box-shadow .3s ease, border-color .3s ease;
  }
  .mdraw__sec.is-open { border-color: #DCE4E8; box-shadow: 0 8px 24px rgba(31, 52, 65, .07); }
  .mdraw__sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 12px 12px 12px;
    border: 0;
    background: none;
    color: var(--md-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .mdraw__sec-head:focus-visible { outline: 2px solid var(--md-gold); outline-offset: -2px; border-radius: 16px; }
  .mdraw__sec-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--md-soft);
    color: var(--md-navy);
    transition: background-color .3s ease, color .3s ease;
  }
  .mdraw__sec-ic svg { width: 21px; height: 21px; }
  .mdraw__sec.is-open .mdraw__sec-ic { background: var(--md-navy); color: #FFFFFF; }
  .mdraw__sec-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mdraw__sec-txt b { font-size: 15px; font-weight: 600; }
  .mdraw__sec-txt small { font-size: 11.5px; color: var(--md-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mdraw__sec-chev {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--md-muted);
    transition: transform .35s var(--md-ease), background-color .3s ease;
  }
  .mdraw__sec-chev svg { width: 16px; height: 16px; }
  .mdraw__sec.is-open .mdraw__sec-chev { transform: rotate(180deg); background: var(--md-soft); color: var(--md-ink); }

  .mdraw__sec-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .38s var(--md-ease);
  }
  .mdraw__sec.is-open .mdraw__sec-body { grid-template-rows: 1fr; }
  .mdraw__sec-in { min-height: 0; overflow: hidden; }
  .mdraw__sec.is-open .mdraw__sec-in { padding-bottom: 12px; }

  .mdraw__chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 12px 10px;
  }
  .mdraw__chips::-webkit-scrollbar { display: none; }
  .mdraw__chip {
    flex: none;
    padding: 7px 13px;
    border: 1px solid var(--md-line);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--md-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .mdraw__chip.is-on { background: var(--md-ink); border-color: var(--md-ink); color: #FFFFFF; }

  .mdraw__group[hidden] { display: none; }
  .mdraw__items { margin: 0; padding: 0 6px; list-style: none; }
  .mdraw__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-radius: 12px;
    color: var(--md-ink);
    text-decoration: none;
    transition: background-color .2s ease;
  }
  .mdraw__item:hover,
  .mdraw__item:active { background: var(--md-soft); }
  .mdraw__thumbimg {
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--md-soft);
  }
  .mdraw__thumbimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .mdraw__thumbimg--ic { display: grid; place-items: center; color: var(--md-navy); }
  .mdraw__thumbimg--ic svg { width: 22px; height: 22px; }
  .mdraw__item-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .mdraw__item-txt b {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mdraw__item-txt small { font-size: 11.5px; color: var(--md-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mdraw__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0 12px;
    color: var(--md-gold);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .mdraw__all svg { width: 15px; height: 15px; transition: transform .2s ease; }
  .mdraw__all:hover svg { transform: translateX(3px); }

  /* ---- skiing: the hero card ---- */
  .mdraw__hero {
    position: relative;
    display: block;
    height: 150px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 18px;
    background: #245A7A;
    color: #FFFFFF;
    text-decoration: none;
  }
  .mdraw__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--md-ease); }
  .mdraw__hero:hover img { transform: scale(1.05); }
  .mdraw__hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 30, 42, .82) 0%, rgba(14, 30, 42, .2) 70%); }
  .mdraw__hero-copy { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
  .mdraw__hero-copy small { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
  .mdraw__hero-copy b { font-size: 20px; font-weight: 700; line-height: 1.15; }
  .mdraw__hero-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #F2C46B; }
  .mdraw__hero-cta svg { width: 14px; height: 14px; }

  /* ---- skiing: live conditions ---- */
  .mdraw__live {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .mdraw__live-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #EEF5F9;
  }
  .mdraw__live-cell--wide { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .mdraw__live-cell small { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--md-muted); }
  .mdraw__live-cell--wide small { flex-basis: 100%; }
  .mdraw__live-cell > b { font-size: 20px; font-weight: 700; color: var(--md-ink); line-height: 1.2; }
  .mdraw__live-cell > span { font-size: 11.5px; color: var(--md-muted); }
  .mdraw__dot { width: 7px; height: 7px; border-radius: 50%; background: #22A35A; box-shadow: 0 0 0 0 rgba(34, 163, 90, .5); animation: mdraw-pulse 2s infinite; }
  @keyframes mdraw-pulse { 70% { box-shadow: 0 0 0 7px rgba(34, 163, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 163, 90, 0); } }
  .mdraw__gondola { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
  .mdraw__gondola em { font-style: normal; color: var(--md-ink); }
  .mdraw__gondola b { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: #DDF3E6; color: #1B7A45; }
  .mdraw__gondola b.is-closed { background: #FBE3E3; color: #B42C2C; }
  .mdraw__gondola b.is-on-hold { background: #FDF0D5; color: #946106; }

  /* ------------------------------ foot ------------------------------ */
  .mdraw__foot {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--md-line);
    background: #FFFFFF;
    border-radius: 0 0 24px 0;
  }
  .mdraw__util { display: flex; align-items: center; gap: 8px; }
  .mdraw__pill {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    border-radius: 12px;
    background: var(--md-soft);
    color: var(--md-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .mdraw__pill svg { width: 17px; height: 17px; }
  .mdraw__theme {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--md-soft);
    color: var(--md-ink);
    cursor: pointer;
  }
  .mdraw__theme[hidden] { display: none; }
  .mdraw__theme svg { width: 18px; height: 18px; }
  .mdraw__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    border-radius: 14px;
    background: var(--md-gold);
    box-shadow: 0 10px 22px rgba(189, 131, 13, .3);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
  }
  .mdraw__cta svg { width: 18px; height: 18px; transition: transform .2s ease; }
  .mdraw__cta:hover { background: #a8740b; }
  .mdraw__cta:hover svg { transform: translateX(3px); }
  .mdraw__cta:active { transform: scale(.98); }

  .mdraw a:focus-visible,
  .mdraw button:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; }
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .mdraw, body.sidenav-open .mdraw { transition: visibility 0s; }
  .mdraw__pane.is-in { animation: none; }
  .mdraw__sec-body, .mdraw__thumb { transition: none; }
  .mdraw__dot { animation: none; }
}

/* While the drawer is open the page's floating buttons (chat, WhatsApp, the
   ski trip cart) step out of its way; the drawer carries its own contacts. */
@media (max-width: 1099px) {
  body.sidenav-open #kz-chat,
  body.sidenav-open .wa-float,
  body.sidenav-open .skc {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
}

/* The drawer's theme button keeps the drawer's own look over the site-wide
   .theme-toggle rules (body.inner-page and the dark theme both restyle it). */
@media (max-width: 1099px) {
  .mdraw .mdraw__theme.theme-toggle {
    width: 42px;
    height: 42px;
    border: 0 !important;
    border-radius: 12px;
    background: #F4F6F8 !important;
    color: #1f3441 !important;
  }
  .mdraw .mdraw__theme.theme-toggle[hidden] { display: none; }
  .mdraw .mdraw__theme.theme-toggle:hover { background: #E9EEF1 !important; }
}