/* TravelKon Shop Megamenu
   Scoped to .tkmm-* so nothing here can leak into Astra's styles. */

.tkmm-panel{
  /* Production TravelKon palette (travelkon.com.au). */
  --tkmm-orange:#FFA016;
  --tkmm-orange-deep:#F26522;
  --tkmm-orange-text:#D85A20;
  --tkmm-ink:#282827;
  --tkmm-ink-60:#63625f;
  --tkmm-ink-40:#918f8b;
  --tkmm-cream:#FFF0D0;
  --tkmm-cream-deep:#FFE0A3;
  --tkmm-cream-line:#F2C47C;
  --tkmm-line:#E8E1D8;
  --tkmm-white:#FFFEFC;
}

.tkmm-item{position:relative}

/* ---------- panel shell ---------- */
.tkmm-panel{
  position:fixed;top:0;left:0;
  width:min(1080px,calc(100vw - 40px));
  max-height:calc(100vh - 96px);
  overflow:hidden auto;
  background:var(--tkmm-white);
  color:var(--tkmm-ink);
  border:1px solid var(--tkmm-cream-line);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(40,40,39,.12);
  z-index:99999;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  font-size:16px;line-height:1.5;
  text-align:left;
}
.tkmm-panel[hidden]{display:none}
.tkmm-panel.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.tkmm-panel *,.tkmm-panel *::before,.tkmm-panel *::after{box-sizing:border-box}

/* bridges the gap between trigger and panel so the pointer can travel */
.tkmm-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}

.tkmm-deco{position:absolute;top:6px;right:44px;width:150px;opacity:.85;pointer-events:none;z-index:0}
.tkmm-deco svg{display:block;width:100%;height:auto}
.tkmm-inner{position:relative;z-index:1}

/* ---------- tabs ---------- */
.tkmm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 30px 0}
.tkmm-tabs{display:inline-flex;gap:2px;background:var(--tkmm-cream);padding:5px;border-radius:12px}
.tkmm-tab{
  font:inherit;font-size:15px;font-weight:500;color:var(--tkmm-ink-60);
  background:none;border:0;cursor:pointer;padding:11px 26px;border-radius:9px;
  transition:background .16s ease,color .16s ease;
}
.tkmm-tab:hover{color:var(--tkmm-ink)}
.tkmm-tab:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:1px}
.tkmm-tab[aria-selected="true"]{
  background:var(--tkmm-orange);color:#fff;font-weight:600;
  box-shadow:0 2px 6px rgba(242,101,34,.35);
}
.tkmm-close{display:none}

/* ---------- lead ---------- */
.tkmm-lead{padding:18px 30px 0}
.tkmm-lead-title{margin:0;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--tkmm-ink)}
.tkmm-lead-sub{margin:8px 0 0;font-size:15.5px;color:var(--tkmm-ink-60);line-height:1.5}

/* ---------- search ---------- */
.tkmm-panel .tkmm-search{
  position:relative;display:block;width:100% !important;max-width:none !important;min-width:0;
  flex:0 0 100% !important;padding:20px 30px 0;
}
.tkmm-panel .tkmm-field{position:relative;display:block;width:100% !important;max-width:none !important;min-width:0}
.tkmm-panel .tkmm-field > .tkmm-search-icon{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--tkmm-ink);pointer-events:none;z-index:1;
}
.tkmm-panel input.tkmm-input{
  display:block;width:100% !important;max-width:none !important;min-width:0;font:inherit;font-size:16px;color:var(--tkmm-ink);
  padding:18px 52px 18px 52px !important;background:#fff;
  border:1.5px solid var(--tkmm-orange);border-radius:10px;
  transition:box-shadow .15s ease;
  -webkit-appearance:none;appearance:none;
}
.tkmm-input::placeholder{color:var(--tkmm-ink-60);opacity:1}
.tkmm-input:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:2px}
.tkmm-input:focus{box-shadow:0 0 0 4px rgba(246,155,30,.2)}
.tkmm-input::-webkit-search-cancel-button{-webkit-appearance:none}

/* our own clear control, since the native one is suppressed */
.tkmm-clear{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;flex:0 0 32px;
  width:32px !important;min-width:32px;max-width:32px;
  height:32px !important;min-height:32px;max-height:32px;
  aspect-ratio:1 / 1;box-sizing:border-box;padding:0 !important;line-height:1;
  border:0;border-radius:50% !important;cursor:pointer;
  background:var(--tkmm-cream);color:var(--tkmm-ink-60);
}
.tkmm-clear[hidden]{display:none}
.tkmm-clear:hover{background:var(--tkmm-cream-deep);color:var(--tkmm-ink)}
.tkmm-clear:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:2px}
.tkmm-clear svg{width:14px;height:14px}

.tkmm-results{
  margin-top:16px;border:1px solid var(--tkmm-cream-line);border-radius:12px;
  overflow:hidden auto;background:#fff;max-height:320px;
}
.tkmm-results[hidden]{display:none}
.tkmm-result{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;text-decoration:none;color:var(--tkmm-ink);font-size:15.5px;
  border-bottom:1px solid var(--tkmm-cream-line);
}
.tkmm-result:last-child{border-bottom:0}
.tkmm-result:hover,.tkmm-result.is-active{background:var(--tkmm-cream);color:var(--tkmm-ink)}
/* Flex here spaces the name from the "eSIM only" badge. The name itself must
   stay one inline run: a bare text node either side of <mark> would become its
   own anonymous flex item and the gap would land between the letters, breaking
   "Afghanistan" into "Af gha nistan" while typing. So the name gets its own
   element and the highlight stays in normal inline flow inside it. */
.tkmm-result-name{display:flex;align-items:center;gap:10px;min-width:0}
.tkmm-result-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Marks a result the current tab does not stock. Quiet: it is a note about
   where the link goes, not a warning. */
.tkmm-result-note{
  flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--tkmm-ink);background:var(--tkmm-cream);
  border:1px solid var(--tkmm-cream-line);border-radius:999px;padding:3px 9px;
}
.tkmm-result:hover .tkmm-result-note,
.tkmm-result.is-active .tkmm-result-note{background:#fff}
/* No horizontal padding: it would push the rest of the word sideways as the
   match grows on each keystroke. Vertical padding is negative-margined so the
   tint still has some height without changing the line box. */
.tkmm-result mark{
  background:rgba(246,155,30,.35);color:inherit;border-radius:3px;
  padding:2px 0;margin:-2px 0;
}
.tkmm-go{
  width:7px;height:7px;flex:none;
  border-right:2px solid var(--tkmm-orange);border-bottom:2px solid var(--tkmm-orange);
  transform:rotate(-45deg);opacity:.6;
}
.tkmm-result:hover .tkmm-go,.tkmm-result.is-active .tkmm-go{opacity:1}
.tkmm-empty{margin:0;padding:18px;font-size:15px;color:var(--tkmm-ink-60)}

/* ---------- buttons ---------- */
.tkmm-actions{display:flex;flex-wrap:wrap;gap:14px;padding:18px 30px 0}
.tkmm-btn{
  display:inline-flex;align-items:center;gap:12px;
  font:inherit;font-size:15px;font-weight:600;text-decoration:none;
  padding:15px 26px;border-radius:8px;border:1.5px solid transparent;
  transition:filter .15s ease,background .15s ease;
}
.tkmm-btn svg{width:17px;height:17px;flex:none}
.tkmm-btn-primary{background:var(--tkmm-orange);color:#fff}
.tkmm-btn-primary:hover{filter:brightness(1.06);color:#fff}
.tkmm-btn-quiet{background:transparent;color:var(--tkmm-ink);border-color:#DBD4C7}
.tkmm-btn-quiet:hover{background:#F6F2EA;border-color:#C7BFAF;color:var(--tkmm-ink)}
.tkmm-btn:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:2px}

/* ---------- columns ---------- */
/* Popular sits full width above the region explorer, so its links run across
   the panel in columns instead of down one narrow rail. */
.tkmm-cols{display:block;padding:28px 30px 0}
.tkmm-col-popular{margin:0 0 24px}
.tkmm-col-popular .tkmm-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 30px}
.tkmm-col-head{
  font:inherit;width:100%;text-align:left;background:none;border:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px 10px;margin:0;pointer-events:none;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tkmm-ink-60);
}
.tkmm-col-head:focus-visible,.tkmm-strip a:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:-2px}
.tkmm-chev{display:none}
.tkmm-links{list-style:none;margin:0;padding:0}
.tkmm-links li{margin:0}
.tkmm-links a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 2px;font-size:15.5px;color:var(--tkmm-ink);text-decoration:none;
  border-top:1px solid var(--tkmm-line);
}
.tkmm-links a:hover{color:var(--tkmm-orange-text)}
.tkmm-links a:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:-2px}
.tkmm-row-arrow{
  width:16px;height:16px;flex:none;color:var(--tkmm-orange);
  opacity:0;transform:translateX(-5px);
  transition:transform .16s ease,opacity .16s ease;
}
.tkmm-links a:hover .tkmm-row-arrow,
.tkmm-links a:focus-visible .tkmm-row-arrow{opacity:1;transform:translateX(0)}

/* Flagged rows use a fixed first column, so a destination with no flag keeps
   its label on the same line as every other one. */
.tkmm-links-flagged a{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:0 12px}
.tkmm-flag{
  display:grid;place-items:center;width:22px;height:14.67px;
  font-size:17px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
}
.tkmm-flag.is-empty{font-size:0}

/* ---------- footer strip ---------- */
.tkmm-strip{display:flex;align-items:stretch;margin-top:26px;background:var(--tkmm-cream-deep);border-top:1px solid var(--tkmm-cream-line)}
.tkmm-strip a{
  flex:1;display:flex;align-items:center;gap:14px;padding:20px 28px;
  text-decoration:none;color:var(--tkmm-ink);font-size:15.5px;font-weight:500;
}
.tkmm-strip a + a{border-left:1px solid rgba(246,155,30,.35)}
.tkmm-strip a:hover{background:rgba(246,155,30,.16);color:var(--tkmm-ink)}
.tkmm-strip-icon{width:22px;height:22px;flex:none;color:var(--tkmm-orange)}
.tkmm-strip-label{flex:1;text-align:center}
.tkmm-strip-arrow{width:16px;height:16px;flex:none;color:var(--tkmm-orange)}

/* ---------- all destinations ----------
   The initial DOM contains only a compact loading shell. The full directory is
   inserted after an explicit user interaction. */
.tkmm-all[hidden]{display:none}
/* the popup is a sibling of the tab views and takes the whole panel over */
.tkmm-panel.is-all .tkmm-view{display:none}

.tkmm-all{padding:22px 30px 30px}
.tkmm-all-head{display:flex;align-items:center;gap:14px;padding-bottom:16px}
.tkmm-all-state{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;color:var(--tkmm-ink-60)}
.tkmm-all-state p{max-width:440px;margin:0;font-size:15px;line-height:1.55}
.tkmm-all-state.is-error{color:var(--tkmm-ink)}
.tkmm-all-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
.tkmm-spinner{width:30px;height:30px;border:3px solid var(--tkmm-cream-line);border-top-color:var(--tkmm-orange);border-radius:50%;animation:tkmm-spin .75s linear infinite}
@keyframes tkmm-spin{to{transform:rotate(360deg)}}
.tkmm-back{
  font:inherit;font-size:14px;font-weight:500;color:var(--tkmm-ink);
  background:none;border:0;cursor:pointer;padding:8px 12px 8px 8px;border-radius:8px;
  display:inline-flex;align-items:center;gap:8px;flex:none;
}
.tkmm-back:hover{background:var(--tkmm-cream)}
.tkmm-back:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:2px}
.tkmm-back-icon{
  width:8px;height:8px;
  border-left:2px solid var(--tkmm-orange);border-bottom:2px solid var(--tkmm-orange);
  transform:rotate(45deg) translate(1px,-1px);
}
.tkmm-all-title{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;flex:1;color:var(--tkmm-ink)}
.tkmm-all-count{font-size:12px;font-weight:600;color:var(--tkmm-orange-text);background:rgba(246,155,30,.18);border-radius:999px;padding:4px 11px;flex:none;font-variant-numeric:tabular-nums}
.tkmm-section-label{margin:0 0 9px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tkmm-ink-60)}
.tkmm-col-regions .tkmm-region-set{margin-top:2px}
.tkmm-region-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.tkmm-region-set[hidden]{display:none}
.tkmm-region-column{display:flex;min-width:0;flex-direction:column;gap:9px}
.tkmm-region{display:block;margin:0;border:1px solid var(--tkmm-cream-line);border-radius:9px;background:#fff;overflow:hidden}
.tkmm-region summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;font-size:14px;font-weight:650;cursor:pointer;list-style:none}
/* A region with nothing under it is a link, not a disclosure. */
.tkmm-region-flat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;font-size:14px;font-weight:650;color:var(--tkmm-ink);text-decoration:none}
.tkmm-region-flat:hover{background:var(--tkmm-cream);color:var(--tkmm-ink)}
.tkmm-region-arrow{width:14px;height:14px;flex:none;color:var(--tkmm-orange-text);opacity:.55}
/* The count turns each closed region from a gamble into a priced choice. */
.tkmm-region-count{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--tkmm-ink-60);font-variant-numeric:tabular-nums}
.tkmm-region summary::-webkit-details-marker{display:none}
.tkmm-region summary:hover{background:var(--tkmm-cream)}
.tkmm-region-chev{width:7px;height:7px;border-right:2px solid var(--tkmm-orange);border-bottom:2px solid var(--tkmm-orange);transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;flex:none}
.tkmm-region[open] .tkmm-region-chev{transform:rotate(-135deg) translate(-1px,1px)}
.tkmm-region-body{padding:0 13px 12px;border-top:1px solid var(--tkmm-cream-line)}
.tkmm-region-all{display:block;margin-top:7px;padding:10px 0 0;border-top:1px solid var(--tkmm-line);font-size:13px;font-weight:500;color:var(--tkmm-ink-60);text-decoration:none}
.tkmm-region-all:hover{color:var(--tkmm-ink);text-decoration:underline}
.tkmm-region-body ul{list-style:none;margin:0;padding:0}
.tkmm-region-body li a{display:block;padding:5px 0;font-size:13px;color:var(--tkmm-ink-60);text-decoration:none}
.tkmm-region-body li a:hover{color:var(--tkmm-orange-text)}
.tkmm-region a:focus-visible,.tkmm-region summary:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:-2px}
/* The filter reuses the panel's field styling, at popup scale. */
.tkmm-all-filter{margin:0 0 18px}
.tkmm-all-filter .tkmm-field{position:relative}
.tkmm-all-filter .tkmm-input{
  display:block;width:100%;font:inherit;font-size:15.5px;color:var(--tkmm-ink);
  padding:13px 44px 13px 44px;background:#fff;
  border:1.5px solid var(--tkmm-cream-line);border-radius:10px;
  -webkit-appearance:none;appearance:none;
}
.tkmm-all-filter .tkmm-input:focus{border-color:var(--tkmm-orange);box-shadow:0 0 0 4px rgba(246,155,30,.2)}
.tkmm-all-filter .tkmm-input:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:2px}
.tkmm-all-filter .tkmm-search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--tkmm-ink-60);pointer-events:none}
.tkmm-all-filter .tkmm-clear{right:8px}
.tkmm-all-empty{margin:0 0 18px;font-size:15px;color:var(--tkmm-ink-60)}
.tkmm-all-empty[hidden]{display:none}
.tkmm-az-label{margin-top:0}
.tkmm-all-grid{columns:5 170px;column-gap:30px}
.tkmm-group{break-inside:avoid;page-break-inside:avoid;margin:0 0 22px}
.tkmm-group[hidden],.tkmm-group-list li[hidden]{display:none}
.tkmm-group-title{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tkmm-ink)}
.tkmm-group-list{list-style:none;margin:0;padding:0}
.tkmm-group-list li{margin:0}
.tkmm-group-list a{display:block;padding:7px 2px;font-size:14.5px;color:var(--tkmm-ink);text-decoration:none;border-radius:4px}
.tkmm-group-list a:hover{color:var(--tkmm-orange-text)}
.tkmm-group-list a:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:-2px}

/* ---------- shortcode trigger ---------- */
.tkmm-standalone-trigger{
  font:inherit;font-size:15px;font-weight:500;color:inherit;
  background:none;border:0;cursor:pointer;padding:10px 14px;border-radius:8px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.tkmm-standalone-chev{
  width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
}
[aria-expanded="true"] .tkmm-standalone-chev{transform:rotate(-135deg) translate(-3px,-3px)}
.tkmm-astra-shortcode-trigger .tkmm-item.tkmm-standalone{display:contents}
.tkmm-astra-shortcode-trigger .tkmm-standalone-trigger-label{
  display:inline-flex;align-items:center;color:inherit;font:inherit;line-height:inherit;
  pointer-events:none;
}
.tkmm-astra-shortcode-trigger .tkmm-standalone-chev{display:none}

/* ---------- scroll lock while the mobile drawer is open ---------- */
html.tkmm-locked,body.tkmm-locked{overflow:hidden}

/* The destination search is injected into Astra's menu for the mobile drawer.
   Keep it out of desktop navigation; the scoped mobile rule below reveals it. */
.tkmm-mobile-tag-search{display:none}

/* Header utility group used after currency/cart are lifted out of the menu. */
body.tkmm-mobile-nav .tkmm-header-tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  margin-left:auto;
}
body.tkmm-mobile-nav .tkmm-header-tools > .menu-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 16px;
  color:#282827;
  background:#FFF7EA;
  border:0;
  border-radius:14px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  line-height:1;
}
body.tkmm-mobile-nav .tkmm-header-tools select{
  min-height:38px;
  width:100%;
  min-width:88px;
  padding:0 24px;
  color:inherit;
  background:transparent;
  border:0;
  font:inherit;
  font-size:13px;
  text-align:center;
  text-align-last:center;
  -webkit-appearance:none;
  appearance:none;
}
body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"]{
  width:40px;
  padding:0;
  font-size:0;
}
body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"] svg,
body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"] img,
body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"] .cart-icon{
  width:19px;
  height:19px;
  font-size:18px;
}
body.tkmm-mobile-nav .tkmm-header-tools > .menu-link:hover,
body.tkmm-mobile-nav .tkmm-header-tools > .menu-link:focus{
  color:#282827;
  background:#FFE8C3;
}
body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-account-tool{
  gap:8px;
  color:#282827;
  background:#F9A11B;
  box-shadow:0 8px 20px rgba(233,137,13,.24);
}
body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-account-tool:hover,
body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-account-tool:focus{
  color:#282827;
  background:#FFB84D;
}
body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-currency-tool{
  position:relative;
  min-width:72px;
  padding:0;
  background:#FFF7EA;
  box-shadow:0 5px 14px rgba(40,40,39,.07);
}
body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-currency-tool::after{
  content:"";
  position:absolute;
  right:15px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}

/* =====================================================================
   ASTRA MOBILE NAVIGATION

   Astra still owns disclosure state, keyboard behaviour and the menu DOM.
   This layer only gives its mobile drawer the same compact, product-led
   hierarchy as the megamenu. It is scoped by the body class added above so
   it cannot affect sites where the plugin is inactive.
   ===================================================================== */
@media (max-width:1264px){
  body.tkmm-mobile-nav.ast-header-break-point{
    /* Orange leads; charcoal and warm neutrals support the TravelKon brand. */
    --tkmm-nav-ink:#282827;
    --tkmm-nav-muted:#6F6A63;
    --tkmm-nav-orange:#FEA929;
    --tkmm-nav-orange-deep:#EF8F16;
    --tkmm-nav-cream:#FFF5E5;
    --tkmm-nav-cream-deep:#FFE5B8;
    --tkmm-nav-line:#EDE2D2;
    --tkmm-nav-surface:#FFFFFF;
  }

  /* Compact closed header. */
  body.tkmm-mobile-nav.ast-header-break-point .main-header-bar{
    background:var(--tkmm-nav-surface);
    border-bottom:3px solid var(--tkmm-nav-orange);
    box-shadow:0 10px 30px rgba(40,40,39,.08);
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-container{
    display:flex;
    align-items:center;
    min-height:74px;
    padding:0 18px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .site-branding{
    padding:12px 0;
  }
  body.tkmm-mobile-nav.ast-header-break-point .site-logo-img img,
  body.tkmm-mobile-nav.ast-header-break-point .custom-logo-link img{
    width:168px;
    max-width:min(46vw,168px);
    height:auto;
  }
  body.tkmm-mobile-nav.ast-header-break-point .ast-mobile-menu-buttons{
    order:3;
    margin-left:8px;
  }

  /* Currency and cart stay in the header when the drawer opens. */
  body.tkmm-mobile-nav .tkmm-header-tools{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    margin-left:auto;
    order:2;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-container:has(.tkmm-header-tools) .ast-mobile-menu-buttons{
    margin-left:8px;
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .menu-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 16px;
    color:var(--tkmm-nav-ink);
    background:var(--tkmm-nav-cream);
    border:0;
    border-radius:14px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    line-height:1;
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .menu-link:hover,
  body.tkmm-mobile-nav .tkmm-header-tools > .menu-link:focus{
    color:var(--tkmm-nav-ink);
    background:var(--tkmm-nav-cream-deep);
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-account-tool{
    gap:8px;
    color:var(--tkmm-nav-ink);
    background:#F9A11B;
    box-shadow:0 8px 20px rgba(233,137,13,.24);
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-account-tool:hover,
  body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-account-tool:focus{
    color:var(--tkmm-nav-ink);
    background:#FFB84D;
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-currency-tool{
    position:relative;
    min-width:72px;
    padding:0;
    background:#FFF7EA;
    box-shadow:0 5px 14px rgba(40,40,39,.07);
  }
  body.tkmm-mobile-nav .tkmm-header-tools select{
    min-height:38px;
    width:100%;
    min-width:88px;
    padding:0 24px;
    color:inherit;
    background:transparent;
    border:0;
    font:inherit;
    font-size:13px;
    text-align:center;
    text-align-last:center;
    -webkit-appearance:none;
    appearance:none;
  }
  body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"]{
    width:40px;
    padding:0;
    font-size:0;
  }
  body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"] svg,
  body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"] img,
  body.tkmm-mobile-nav .tkmm-header-tools a[href*="/cart"] .cart-icon{
    width:19px;
    height:19px;
    font-size:18px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle{
    display:grid;
    place-items:center;
    width:48px;
    min-width:48px;
    height:48px;
    min-height:48px;
    padding:0;
    color:var(--tkmm-nav-ink);
    background:var(--tkmm-nav-orange);
    border:1px solid var(--tkmm-nav-orange);
    border-radius:16px;
    box-shadow:0 8px 18px rgba(239,143,22,.25);
    transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .ast-icon{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon,
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon::before,
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon::after{
    display:block;
    width:21px;
    height:2px;
    border-radius:999px;
    background:currentColor;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon{
    position:relative;
    transition:background .15s ease;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon::before,
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon::after{
    content:"";
    position:absolute;
    left:0;
    transition:top .18s ease,transform .18s ease;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon::before{top:-6px}
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle .menu-toggle-icon::after{top:6px}
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle[aria-expanded="true"]{
    color:var(--tkmm-nav-orange);
    background:var(--tkmm-nav-ink);
    border-color:var(--tkmm-nav-ink);
    box-shadow:0 8px 18px rgba(40,40,39,.24);
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle[aria-expanded="true"] .menu-toggle-icon{
    background:transparent;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle[aria-expanded="true"] .menu-toggle-icon::before{
    top:0;
    transform:rotate(45deg);
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle[aria-expanded="true"] .menu-toggle-icon::after{
    top:0;
    transform:rotate(-45deg);
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle[aria-expanded="false"]:hover,
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle[aria-expanded="false"]:focus{
    color:var(--tkmm-nav-ink);
    background:#FFBC55;
    border-color:var(--tkmm-nav-orange-deep);
    box-shadow:0 10px 22px rgba(239,143,22,.3);
    outline:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle:focus-visible{
    outline:3px solid rgba(254,169,41,.5);
    outline-offset:3px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle:active{
    transform:scale(.97);
  }

  /* The open drawer becomes an intentional sheet instead of a tall table. */
  body.tkmm-mobile-nav.ast-header-break-point:has(.main-header-menu-toggle[aria-expanded="true"]){
    overflow:hidden;
  }
  body.tkmm-mobile-nav.ast-header-break-point:has(.main-header-menu-toggle[aria-expanded="true"]) #masthead{
    position:fixed;
    inset:0;
    z-index:99998;
    overflow-y:auto;
    background:rgba(24,24,23,.58);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  body.tkmm-mobile-nav.ast-header-break-point:has(.main-header-menu-toggle[aria-expanded="true"]) .ast-above-header-wrap{
    display:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point:has(.main-header-menu-toggle[aria-expanded="true"]) .main-header-bar-wrap{
    width:min(520px,calc(100vw - 36px));
    min-height:100vh;
    min-height:100dvh;
    margin-left:auto;
    background:var(--tkmm-nav-surface);
    border-radius:24px 0 0 24px;
    box-shadow:-28px 0 70px rgba(20,20,19,.3);
    overflow:hidden;
  }
  body.tkmm-mobile-nav.ast-header-break-point:has(.main-header-menu-toggle[aria-expanded="true"]) .main-header-bar{
    min-height:100vh;
    min-height:100dvh;
    border:0;
    box-shadow:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point:has(.main-header-menu-toggle[aria-expanded="true"]) .main-header-container{
    align-content:flex-start;
  }

  body.tkmm-mobile-nav.ast-header-break-point #primary-site-navigation{
    background:var(--tkmm-nav-surface);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu{
    padding:18px 18px calc(30px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 58%,var(--tkmm-nav-cream) 100%);
    border-top:1px solid var(--tkmm-nav-line);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item{
    position:relative;
    margin:2px 0;
    border:0;
    border-bottom:1px solid var(--tkmm-nav-line);
    border-radius:0;
    background:transparent;
    overflow:hidden;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item > .menu-link{
    display:flex;
    align-items:center;
    min-height:58px;
    padding:14px 14px;
    color:var(--tkmm-nav-ink);
    background:transparent;
    border:0;
    border-radius:13px;
    font-size:16.5px;
    font-weight:650;
    line-height:1.35;
    transition:background .15s ease,color .15s ease;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item > .menu-link:hover,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item > .menu-link:focus{
    color:var(--tkmm-nav-ink);
    background:var(--tkmm-nav-cream);
  }

  /* Shop is the primary task in the TravelKon mobile journey. */
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .tkmm-trigger-item,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item:has([data-tkmm-trigger]){
    margin:0 0 12px;
    background:linear-gradient(135deg,#FFBB51 0%,var(--tkmm-nav-orange) 100%);
    border:1px solid #F39A18;
    border-radius:16px;
    box-shadow:0 10px 24px rgba(239,143,22,.2);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .tkmm-trigger-item > .menu-link,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item:has([data-tkmm-trigger]) > .menu-link,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-astra-shortcode-trigger{
    display:flex;
    align-items:center;
    width:100%;
    height:64px;
    min-height:64px;
    padding:0 54px 0 16px;
    color:var(--tkmm-nav-ink);
    background:transparent;
    font-size:17px;
    font-weight:750;
    position:relative;
    z-index:1;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .tkmm-trigger-item::before,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item:has([data-tkmm-trigger])::before{
    content:"";
    position:absolute;
    right:20px;
    top:50%;
    width:9px;
    height:9px;
    border-right:2px solid var(--tkmm-nav-ink);
    border-bottom:2px solid var(--tkmm-nav-ink);
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
    z-index:2;
  }

  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-trigger-item{
    position:relative;
    margin:0;
    border:0;
    border-bottom:0;
    border-radius:16px;
    background:linear-gradient(135deg,#FFBB51 0%,var(--tkmm-nav-orange) 100%);
    overflow:visible;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-trigger-item > .menu-link:hover,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-trigger-item > .menu-link:focus,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-astra-shortcode-trigger:hover,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-astra-shortcode-trigger:focus{
    background:#FFD17C;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-trigger-item::before{
    content:"";
    position:absolute;
    right:20px;
    top:50%;
    width:9px;
    height:9px;
    border-right:2px solid var(--tkmm-nav-ink);
    border-bottom:2px solid var(--tkmm-nav-ink);
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
    z-index:2;
  }

  /*
   * Temporary shortcode menu items arrive as a button nested in Astra's
   * anchor. JavaScript promotes the anchor to the real trigger; flatten the
   * remaining wrappers so they cannot add padding, height or a second arrow.
   */
  body.tkmm-mobile-nav.ast-header-break-point .tkmm-astra-shortcode-trigger .tkmm-standalone-trigger-label{
    display:flex;
    align-items:center;
    width:100%;
    height:100%;
    color:inherit;
    font:inherit;
    line-height:inherit;
    pointer-events:none;
  }

  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item > .ast-menu-toggle{
    top:5px;
    right:6px;
    display:grid;
    place-items:center;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    color:var(--tkmm-nav-ink);
    background:transparent;
    border:0;
    border-radius:12px;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item > .ast-menu-toggle:hover,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu > .menu-item > .ast-menu-toggle:focus{
    color:var(--tkmm-nav-ink);
    background:var(--tkmm-nav-cream-deep);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .sub-menu{
    margin:0 8px 10px;
    padding:7px;
    background:var(--tkmm-nav-cream);
    border:1px solid var(--tkmm-nav-line);
    border-radius:14px;
    box-shadow:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .sub-menu .menu-item{
    border:0;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .sub-menu .menu-link{
    min-height:46px;
    padding:10px 12px;
    color:var(--tkmm-nav-muted);
    border:0;
    border-radius:8px;
    font-size:14.5px;
    font-weight:500;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .sub-menu .menu-link:hover,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .sub-menu .menu-link:focus{
    color:var(--tkmm-nav-ink);
    background:#FFFFFF;
  }

  /* Currency and cart stay compact; destination search gets a brand CTA treatment. */
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .woocommerce-multi-currency.shortcode{
    width:100%;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .wmc-select-currency-js{
    width:100%;
    min-height:44px;
    padding:0 38px 0 13px;
    color:var(--tkmm-nav-ink);
    background:#FFFFFF;
    border:1px solid var(--tkmm-nav-line);
    border-radius:9px;
    font:inherit;
    font-size:14px;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.has-tkmm-mobile-search{
    margin-top:14px;
    padding:4px 0 2px;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.has-tkmm-mobile-search > .ast-search-menu-icon,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.has-tkmm-mobile-search > .search-form{
    display:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search{
    display:block;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search{
    width:100%;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search__field{
    position:relative;
    display:flex;
    align-items:center;
    min-height:58px;
    padding:0;
    color:var(--tkmm-nav-orange-deep);
    background:#FFFFFF;
    border:1px solid #E8D7BF;
    border-radius:16px;
    box-shadow:0 9px 28px rgba(40,40,39,.1);
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search__field:focus-within{
    border-color:var(--tkmm-nav-orange);
    box-shadow:0 0 0 4px rgba(254,169,41,.18),0 12px 30px rgba(40,40,39,.1);
    transform:translateY(-1px);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-search-control__icon{
    position:absolute;
    left:18px;
    top:50%;
    z-index:2;
    width:21px;
    height:21px;
    color:var(--tkmm-nav-orange-deep);
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:translateY(-50%);
    pointer-events:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search__input{
    display:block;
    width:100% !important;
    max-width:none !important;
    min-height:56px;
    padding:0 18px 0 50px !important;
    color:var(--tkmm-nav-ink);
    background:transparent;
    border:0;
    border-radius:16px;
    font-size:16px;
    font-weight:500;
    line-height:1.2;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search__input::placeholder{
    color:#8B8278;
    font-size:15px;
    font-weight:500;
    opacity:1;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search__input:focus{
    outline:none;
    box-shadow:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search__results{
    top:calc(100% + 9px);
    max-height:min(340px,46vh);
    padding:6px;
    border:1px solid var(--tkmm-nav-line);
    border-radius:14px;
    box-shadow:0 18px 46px rgba(40,40,39,.16);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .tkmm-mobile-tag-search .tkmm-destination-search__results a{
    padding:11px 12px;
    color:var(--tkmm-nav-ink);
    border-radius:9px;
    font-size:14.5px;
    font-weight:600;
  }
  .tkmm-mobile-tag-search{display:none}
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.tkmm-native-search-fallback{
    margin-top:14px;
    padding:4px 0 2px;
    background:transparent;
    border:0;
    border-radius:0;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.tkmm-native-search-fallback > .ast-search-menu-icon{
    display:block !important;
    width:100%;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.tkmm-native-search-fallback .search-form{
    position:static !important;
    display:block !important;
    width:100% !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.tkmm-native-search-fallback .tkmm-search-control{
    position:relative;
    display:flex !important;
    align-items:center;
    min-height:58px;
    color:var(--tkmm-nav-orange-deep);
    background:#FFFFFF;
    border:1px solid #E8D7BF;
    border-radius:16px;
    box-shadow:0 9px 28px rgba(40,40,39,.1);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.tkmm-native-search-fallback .tkmm-search-control:focus-within{
    border-color:var(--tkmm-nav-orange);
    box-shadow:0 0 0 4px rgba(254,169,41,.18),0 12px 30px rgba(40,40,39,.1);
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-custom-menu-item.tkmm-native-search-fallback .ast-search-icon{
    display:none !important;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .ast-search-menu-icon,
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-form{
    width:100%;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-field{
    display:block;
    width:100%;
    min-height:56px;
    padding:0 18px 0 50px !important;
    color:var(--tkmm-nav-ink);
    background:transparent;
    border:0;
    border-radius:16px;
    font-size:16px;
    font-weight:500;
    box-shadow:none;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu .search-field:focus{
    outline:none;
    box-shadow:none;
  }
}

@media (max-width:544px){
  body.tkmm-mobile-nav.ast-header-break-point:has(.main-header-menu-toggle[aria-expanded="true"]) .main-header-bar-wrap{
    width:100%;
    border-radius:0;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-container{
    min-height:68px;
    padding:0 14px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .site-logo-img img,
  body.tkmm-mobile-nav.ast-header-break-point .custom-logo-link img{
    width:132px;
    max-width:132px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .site-branding{
    flex:0 1 132px;
    min-width:0;
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .menu-link{
    padding-right:14px;
    padding-left:14px;
  }
  body.tkmm-mobile-nav.ast-header-break-point #primary-menu{
    padding-left:12px;
    padding-right:12px;
  }
}

/* Large phones such as iPhone Pro Max are 430-440 CSS px wide. Keep the
   compact header active through that range so the fixed-width utilities do
   not force the 132px logo underneath the currency control. */
@media (max-width:480px){
  body.tkmm-mobile-nav.ast-header-break-point .main-header-container{
    padding-right:10px;
    padding-left:10px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .site-logo-img img,
  body.tkmm-mobile-nav.ast-header-break-point .custom-logo-link img{
    width:100px;
    max-width:100px;
  }
  body.tkmm-mobile-nav .tkmm-header-tools{
    gap:6px;
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .menu-link{
    min-height:44px;
    padding:0 11px;
    border-radius:12px;
    font-size:12px;
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-currency-tool{
    min-width:58px;
    padding:0;
  }
  body.tkmm-mobile-nav .tkmm-header-tools select{
    min-width:58px;
    padding:0 18px;
    font-size:12px;
  }
  body.tkmm-mobile-nav .tkmm-header-tools > .tkmm-currency-tool::after{
    right:10px;
    width:6px;
    height:6px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .ast-mobile-menu-buttons,
  body.tkmm-mobile-nav.ast-header-break-point .main-header-container:has(.tkmm-header-tools) .ast-mobile-menu-buttons{
    margin-left:5px;
  }
  body.tkmm-mobile-nav.ast-header-break-point .main-header-menu-toggle{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    border-radius:14px;
  }
}

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width:860px){
  .tkmm-panel{
    top:0;left:0;right:0;bottom:0;
    width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;
    border:0;border-radius:0;box-shadow:none;overflow:hidden;
    transform:translateY(100%);
    transition:transform .24s cubic-bezier(.2,.8,.3,1),opacity .18s ease,visibility .18s;
    display:flex;flex-direction:column;z-index:100000;
  }
  .tkmm-panel.is-open{transform:translateY(0)}
  .tkmm-panel::before{display:none}
  .tkmm-deco{top:84px;right:16px;width:68px}
  .tkmm-inner{display:flex;flex-direction:column;min-height:0;flex:1}

  .tkmm-head{
    position:sticky;top:0;z-index:5;gap:12px;
    padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
    background:var(--tkmm-white);border-bottom:1px solid var(--tkmm-cream-line);
  }
  .tkmm-tabs{flex:1;display:flex}
  .tkmm-tab{flex:1;padding:12px 10px;font-size:15px;text-align:center}
  .tkmm-close{
    display:grid;place-items:center;flex:0 0 44px;
    width:44px !important;min-width:44px;max-width:44px;
    height:44px !important;min-height:44px;max-height:44px;
    aspect-ratio:1 / 1;box-sizing:border-box;padding:0 !important;line-height:1;
    border-radius:50% !important;border:0;cursor:pointer;
    background:var(--tkmm-cream);color:var(--tkmm-ink);
  }
  .tkmm-close svg{width:17px;height:17px}
  .tkmm-close:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:2px}

  .tkmm-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

  .tkmm-lead{padding:18px 16px 0}
  .tkmm-lead-title{font-size:25px}
  .tkmm-lead-sub{font-size:14.5px;margin-top:6px}

  .tkmm-panel .tkmm-search{
    position:sticky;top:0;z-index:3;background:var(--tkmm-white);
    padding:14px 16px;border-bottom:1px solid var(--tkmm-cream-line);
  }
  .tkmm-panel input.tkmm-input{padding:15px 48px 15px 48px !important} /* 16px font stops iOS zooming on focus */
  .tkmm-panel .tkmm-field > .tkmm-search-icon{left:17px;width:18px;height:18px}
  .tkmm-results{max-height:none}

  .tkmm-actions{flex-direction:column;gap:10px;padding:14px 16px 0}
  .tkmm-btn{width:100%;justify-content:center;padding:15px 20px}

  .tkmm-cols{padding:22px 16px 0}
  .tkmm-col-popular{margin-bottom:16px}
  .tkmm-col-popular .tkmm-links{display:block}
  .tkmm-col-head{
    pointer-events:auto;cursor:pointer;
    background:var(--tkmm-cream);border-radius:9px;
    padding:15px 14px;margin-bottom:2px;
    font-size:12px;color:var(--tkmm-ink);
  }
  .tkmm-col-head:active{background:var(--tkmm-cream-deep)}
  .tkmm-col-head:focus-visible{outline:2px solid var(--tkmm-orange-deep);outline-offset:2px}
  .tkmm-chev{
    display:block;width:9px;height:9px;flex:none;margin-right:3px;
    border-right:2px solid var(--tkmm-orange);border-bottom:2px solid var(--tkmm-orange);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;
  }
  /* Both column bodies collapse: the link list, and the region explorer. */
  .tkmm-col[data-open="false"] .tkmm-links,
  .tkmm-col[data-open="false"] .tkmm-region-set{display:none}
  .tkmm-col[data-open="false"] .tkmm-chev{transform:rotate(-45deg) translate(-1px,1px)}
  .tkmm-links{padding-bottom:6px}
  .tkmm-links a{padding:15px 14px}
  .tkmm-row-arrow{display:none} /* no hover on touch, so it would never resolve */

  .tkmm-strip{flex-direction:column;margin-top:20px;padding-bottom:env(safe-area-inset-bottom)}
  .tkmm-strip a{padding:17px 18px}
  .tkmm-strip a + a{border-left:0;border-top:1px solid rgba(246,155,30,.35)}
  .tkmm-strip-label{text-align:left}

  /* while typing, results own the drawer */
  .tkmm-panel.is-searching [data-tkmm-browse]{display:none}

  .tkmm-all{padding:16px 16px calc(30px + env(safe-area-inset-bottom))}
  .tkmm-all-state{min-height:calc(100dvh - 150px);padding:28px 12px}
  .tkmm-all-state-actions{width:100%;flex-direction:column}
  .tkmm-all-state-actions .tkmm-btn{width:100%}
  .tkmm-all-head{
    position:sticky;top:0;z-index:2;
    background:var(--tkmm-white);padding:12px 0;gap:10px;
    margin:-16px 0 0;
  }
  .tkmm-all-title{font-size:17px}
  .tkmm-all-filter{margin-bottom:14px}
  .tkmm-all-filter .tkmm-input{font-size:16px;padding:15px 44px}

  .tkmm-region-set{display:block}
  .tkmm-region-column{display:block}
  .tkmm-region{margin-bottom:8px}
  .tkmm-region summary{padding:14px;font-size:15.5px}
  .tkmm-region-body{padding:0 14px 13px}
  .tkmm-region-all{margin-top:8px;padding:14px 0 12px;font-size:14px}
  .tkmm-region-body li a{padding:13px 0;font-size:15px}
  .tkmm-all-grid{columns:auto;column-gap:0}
  .tkmm-group{margin-bottom:18px}
  .tkmm-group-list a{padding:11px 2px;font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .tkmm-panel,.tkmm-row-arrow,.tkmm-chev,.tkmm-tab,.tkmm-btn,.tkmm-destination-search__field{transition:none !important}
  .tkmm-spinner{animation:none}
  .tkmm-destination-search__field:focus-within{transform:none !important}
}
