/* =====================================================================
   KOHWAN — the tour packages listing (/packages).

   One white panel lifted over the banner: the FILTERS label and the theme
   tabs across its top, the filter rail down the left and the results on a
   grey field to the right — the shape the big package listings use, in
   Kohwan's navy, gold and warm white.

   Prefix .pkl- throughout.
   ===================================================================== */
.pkl {
  --pkl-navy: #2e4755;
  --pkl-gold: #BD830D;
  --pkl-ink: #1f3441;
  --pkl-muted: #6b7c86;
  --pkl-line: #E3E9EC;
  --pkl-soft: #F5F7F8;
  --pkl-field: #F2F4F5;
  --pkl-tick: #1d7a4c;
  --pkl-ease: cubic-bezier(.22, .61, .36, 1);

  padding-bottom: clamp(40px, 6vw, 80px);
  background: #FFFFFF;
}

/* -------------------------------- banner -------------------------------- */
.pkl-banner {
  position: relative;
  min-height: clamp(190px, 22vw, 280px);
  display: flex;
  align-items: flex-start;
  background: var(--pkl-navy) center/cover no-repeat;
}
.pkl-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 33, 41, .76) 0%, rgba(20, 33, 41, .42) 50%, rgba(20, 33, 41, .1) 100%);
}
.pkl-banner__in { position: relative; padding-block: clamp(30px, 5vw, 62px) clamp(60px, 8vw, 100px); }
.pkl-banner__h {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.pkl-banner__p { margin: 5px 0 0; font-size: clamp(.85rem, 1.1vw, .98rem); color: rgba(255, 255, 255, .9); }

/* ---------------------------- the whole panel ---------------------------- */
.pkl-panel {
  position: relative;
  z-index: 2;
  margin-top: clamp(-58px, -4.4vw, -34px);
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: #FFFFFF;
  box-shadow: 0 14px 40px rgba(20, 33, 41, .13);
}

/* the FILTERS label beside the tab rail */
.pkl-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--pkl-line);
}
.pkl-panel__flab {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 24px;
  border-right: 1px solid var(--pkl-line);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pkl-navy);
}

.pkl-tabwrap { position: relative; display: flex; align-items: center; min-width: 0; padding: 0 30px; }
.pkl-tabs {
  display: flex;
  gap: clamp(16px, 2.2vw, 34px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pkl-tabs::-webkit-scrollbar { display: none; }
.pkl-tab {
  position: relative;
  flex: none;
  padding: 19px 2px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pkl-muted);
  cursor: pointer;
  transition: color .18s;
}
.pkl-tab i { font-style: normal; font-weight: 600; opacity: .75; }
.pkl-tab:hover { color: var(--pkl-navy); }
.pkl-tab.is-on { color: var(--pkl-navy); }
.pkl-tab.is-on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--pkl-gold);
}
.pkl-tabwrap__arw {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--pkl-navy);
  transform: translateY(-50%);
  cursor: pointer;
}
.pkl-tabwrap__arw svg { width: 15px; height: 15px; }
.pkl-tabwrap__arw--prev { left: 4px; }
.pkl-tabwrap__arw--next { right: 4px; }
.pkl-tabwrap__arw[hidden] { display: none; }

/* the two columns under it */
.pkl-panel__body { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); align-items: start; }

/* ------------------------------ filter rail ------------------------------ */
.pkl-side { border-right: 1px solid var(--pkl-line); background: #FFFFFF; }
.pkl-side__bar { display: none; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--pkl-line); font-weight: 700; color: var(--pkl-navy); }
.pkl-side__clear { padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: var(--pkl-gold); cursor: pointer; }
.pkl-side__clear:hover { text-decoration: underline; }
.pkl-side__scroll { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 4px 24px 24px; }
.pkl-side__scroll::-webkit-scrollbar { width: 7px; }
.pkl-side__scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: #CBD6DC; }

.pkl-fg { border-bottom: 1px solid var(--pkl-line); }
.pkl-fg:last-child { border-bottom: 0; }
.pkl-fg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 20px 0 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  color: var(--pkl-ink);
  cursor: pointer;
}
.pkl-fg__head svg { flex: none; width: 17px; height: 17px; color: var(--pkl-muted); transition: transform .2s var(--pkl-ease); }
.pkl-fg__head[aria-expanded="false"] svg { transform: rotate(180deg); }
.pkl-fg__body { padding-bottom: 20px; }
.pkl-fg__body[hidden] { display: none; }
.pkl-fg__body--chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pkl-fg__span { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: .82rem; color: var(--pkl-muted); }

/* the two-thumb nights slider */
.pkl-range { position: relative; height: 26px; }
.pkl-range__track { position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 4px; background: #DCE4E8; }
.pkl-range__fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--pkl-gold); }
.pkl-range input[type="range"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.pkl-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border: 4px solid var(--pkl-gold);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(20, 33, 41, .3);
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}
.pkl-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border: 4px solid var(--pkl-gold);
  border-radius: 50%;
  background: #FFFFFF;
  cursor: grab;
}
.pkl-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pkl-navy); outline-offset: 2px; }
.pkl-range__vals { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: .86rem; color: var(--pkl-ink); }

/* a checkbox row */
.pkl-check { display: flex; align-items: center; gap: 11px; padding: 8px 0; cursor: pointer; }
.pkl-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pkl-check__box {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.6px solid #B9C7CE;
  border-radius: 3px;
  background: #FFFFFF;
  transition: border-color .15s, background-color .15s;
}
.pkl-check__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s var(--pkl-ease);
}
.pkl-check input:checked + .pkl-check__box { border-color: var(--pkl-gold); background: var(--pkl-gold); }
.pkl-check input:checked + .pkl-check__box::after { transform: rotate(45deg) scale(1); }
.pkl-check input:focus-visible + .pkl-check__box { outline: 2px solid var(--pkl-navy); outline-offset: 2px; }
.pkl-check__t { flex: 1; min-width: 0; font-size: .93rem; color: var(--pkl-ink); }
.pkl-check__n { font-size: .84rem; color: var(--pkl-muted); }
.pkl-check[hidden] { display: none; }

/* a chip-style checkbox */
.pkl-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pkl-chip span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 14px;
  border: 1px solid var(--pkl-line);
  border-radius: 8px;
  font-size: .83rem;
  line-height: 1.3;
  color: var(--pkl-ink);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.pkl-chip span i { font-style: normal; font-size: .76rem; color: var(--pkl-muted); }
.pkl-chip span:hover { border-color: #C6D3D9; background: var(--pkl-soft); }
.pkl-chip input:checked + span { border-color: var(--pkl-gold); background: rgba(189, 131, 13, .09); color: var(--pkl-navy); font-weight: 700; }
.pkl-chip input:focus-visible + span { outline: 2px solid var(--pkl-navy); outline-offset: 2px; }

.pkl-search { position: relative; margin: 0 0 6px; }
.pkl-search input {
  width: 100%;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--pkl-line);
  border-radius: 8px;
  font: inherit;
  font-size: .88rem;
  color: var(--pkl-ink);
}
.pkl-search input:focus { outline: 2px solid var(--pkl-gold); outline-offset: -1px; }
.pkl-search svg { position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--pkl-muted); }

.pkl-more { padding: 6px 0 0; border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 700; color: var(--pkl-gold); cursor: pointer; }
.pkl-more:hover { text-decoration: underline; }

/* -------------------------------- results -------------------------------- */
.pkl-main { min-width: 0; padding: clamp(14px, 1.8vw, 22px) clamp(14px, 2vw, 26px) clamp(24px, 3vw, 40px); background: var(--pkl-soft); }

.pkl-bar { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.pkl-bar__count { margin: 0; margin-right: auto; font-size: .9rem; color: var(--pkl-muted); }
.pkl-bar__count b { color: var(--pkl-ink); }
.pkl-bar__filters {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--pkl-line);
  border-radius: 8px;
  background: #FFFFFF;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--pkl-navy);
  cursor: pointer;
}
.pkl-bar__filters svg { width: 16px; height: 16px; }
.pkl-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border: 1px solid var(--pkl-line);
  border-radius: 8px;
  background: #FFFFFF;
  font-size: .86rem;
  color: var(--pkl-ink);
}
.pkl-sort select {
  border: 0;
  background: none;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--pkl-ink);
  cursor: pointer;
}
.pkl-sort select:focus-visible { outline: 2px solid var(--pkl-gold); }

.pkl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }

/* --------------------------------- a card --------------------------------- */
.pkl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;                 /* the photo sits inside the card */
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(20, 33, 41, .09);
  transition: box-shadow .22s var(--pkl-ease);
}
.pkl-card:hover { box-shadow: 0 12px 30px rgba(20, 33, 41, .16); }
.pkl-card[hidden] { display: none; }

/* the flag that rides on the card's top edge, as the reference has it */
.pkl-card__pill {
  position: absolute;
  z-index: 3;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border: 1px solid var(--pkl-gold);
  border-radius: 20px;
  background: #FFFFFF;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pkl-gold);
}

/* the link that covers the card: the whole thing opens the package */
.pkl-card__go { position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.pkl-card__go__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pkl-card__go:focus-visible { outline: 2px solid var(--pkl-gold); outline-offset: 2px; }
/* anything a visitor can click for itself sits above that link */
.pkl-card__offer a { position: relative; z-index: 3; }

.pkl-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 9.4; border-radius: 12px; background: var(--pkl-field); }
.pkl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--pkl-ease); }
.pkl-card:hover .pkl-card__media img { transform: scale(1.04); }

.pkl-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 6px 4px; }
.pkl-card__top { display: flex; align-items: flex-start; gap: 12px; }
/* two lines' worth of room whether the name needs it or not, so every card
   below the title starts at the same height */
.pkl-card__h {
  margin: 0;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--pkl-ink);
}
.pkl-card__dur {
  flex: none;
  padding: 5px 11px;
  border: 1.5px solid var(--pkl-navy);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--pkl-navy);
}

/* one line, cut with an ellipsis — never a second, ragged line */
.pkl-card__route {
  display: flex;
  align-items: center;
  gap: 4px 9px;
  margin: 6px 0 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1rem;
  color: #6b7c86;
}
.pkl-card__route span { overflow: hidden; text-overflow: ellipsis; }
.pkl-card__route i { flex: none; color: #C6D3D9; font-style: normal; }
.pkl-card__route b { flex: none; font-weight: 600; color: var(--pkl-gold); }

.pkl-card__incl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 20px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--pkl-line);
  list-style: none;
}
/* every row is one line high, whatever it holds — nothing steps up or down */
.pkl-card__incl li {
  position: relative;
  min-height: 1.75em;
  padding-left: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .95rem;
  line-height: 1.75;
  color: #3f5059;
}
.pkl-card__incl li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #9fb0b9;
}
/* an empty row keeps its height and shows nothing */
.pkl-card__incl li.is-blank::before,
.pkl-card__ticks li.is-blank::before { display: none; }

.pkl-card__ticks { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pkl-card__ticks li {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 1.75em;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--pkl-tick);
}
.pkl-card__ticks span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pkl-card__ticks svg { flex: none; width: 15px; height: 15px; }

/* the strip sits at the foot of every card, so a row of them lines up */
.pkl-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--pkl-field);
}
.pkl-card__left { min-width: 0; font-size: .98rem; line-height: 1.4; color: #4a5a63; }
.pkl-card__left em,
.pkl-card__left b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: normal;
}
.pkl-card__left b { font-weight: 700; color: var(--pkl-ink); }
.pkl-card__price { flex: none; text-align: right; white-space: nowrap; }
.pkl-card__price b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--pkl-ink); }
.pkl-card__price i { font-style: normal; font-size: .9rem; color: #4a5a63; }
.pkl-card__price em { display: block; margin-top: 1px; font-style: normal; font-size: .92rem; color: #8b9aa3; }
.pkl-card__ask { font-size: 1rem !important; color: var(--pkl-navy) !important; }

.pkl-card__offer { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .86rem; color: var(--pkl-ink); }
.pkl-card__offer svg { flex: none; width: 16px; height: 16px; color: var(--pkl-tick); }
.pkl-card__offer--call { color: var(--pkl-muted); }
.pkl-card__offer--call svg { color: var(--pkl-gold); }
.pkl-card__offer a { font-weight: 700; color: var(--pkl-navy); }
.pkl-card__offer a:hover { color: var(--pkl-gold); }

.pkl-empty { margin: 30px 0; text-align: center; font-size: .95rem; color: var(--pkl-muted); }
.pkl-empty button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--pkl-gold); text-decoration: underline; cursor: pointer; }

/* ----------------------------- smaller screens ----------------------------- */
@media (max-width: 1080px) {
  .pkl-panel__head { grid-template-columns: minmax(0, 1fr); }
  .pkl-panel__flab { display: none; }
  .pkl-panel__body { grid-template-columns: minmax(0, 1fr); }
  .pkl-side {
    position: fixed;
    z-index: 1200;
    inset: 0 auto 0 0;
    width: min(340px, 88vw);
    border-right: 0;
    box-shadow: 0 0 40px rgba(20, 33, 41, .3);
    transform: translateX(-102%);
    transition: transform .26s var(--pkl-ease);
  }
  .pkl-side.is-open { transform: none; }
  .pkl-side__bar { display: flex; }
  .pkl-side__scroll { position: static; max-height: calc(100vh - 58px); }
  .pkl-bar__filters { display: inline-flex; }
  body.pkl-locked { overflow: hidden; }
}
@media (max-width: 720px) {
  .pkl-grid { grid-template-columns: minmax(0, 1fr); }
  .pkl-panel { margin-top: -26px; }
  .pkl-card__incl { grid-template-columns: minmax(0, 1fr); }
  .pkl-bar { flex-wrap: wrap; }
  .pkl-sort { width: 100%; }
  .pkl-sort select { flex: 1; }
}