/**
 * Travel Zmart - reseoversikten /resor-ver-2/
 *
 * Ny PRESENTATION av samma data. Laddas bara pa sidor som anvander
 * [tz_resekort_grid ... layout=lista], sa startsidans karusell och
 * relaterade resor pa resesidan ror den aldrig.
 *
 * Informationsstruktur och proportioner ar inspirerade av Rolfs Flyg och
 * Buss reseoversikt: kompakt hero, sok, bred lista till vanster och filter
 * till hoger. Formspraket ar Travel Zmarts eget - samma typsnitt, farger,
 * rundningar och luft som resten av sajten.
 */

body #page-container .tz-resor {
  --tzo-gron: #415321;
  --tzo-gron-ljus: #dbe6da;
  --tzo-beige: #fcf9ef;
  --tzo-orange: #e04e12;
  --tzo-text: #27292f;
  --tzo-dampad: #6b7063;
  --tzo-ram: #e6e1d2;
  --tzo-radie: 14px;
  --tzo-radie-s: 8px;
}

/* ---------- HERO ---------- */
body #page-container .tz-resor-hero {
  position: relative;
  border-radius: var(--tzo-radie);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 270px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 26px;
}
body #page-container .tz-resor-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,24,16,0) 35%, rgba(20,24,16,.74) 100%);
}
body #page-container .tz-resor-hero__innehall {
  position: relative;
  z-index: 1;
  padding: 30px 34px;
  max-width: 780px;
}
body #page-container .tz-resor-hero__rubrik {
  font-family: var(--tz-font-heading);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
body #page-container .tz-resor-hero__ingress {
  color: #f2efe4;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

/* ---------- SOK ---------- */
body #page-container .tz-resor__topp { margin-bottom: 22px; }
body #page-container .tz-resor-sok__falt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--tzo-ram);
  border-radius: 999px;
  padding: 4px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
body #page-container .tz-resor-sok__ikon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--tzo-gron);
}
body #page-container .tz-resor-sok__input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 0;
  color: var(--tzo-text);
  min-width: 0;
}
body #page-container .tz-resor-sok__input::-webkit-search-cancel-button { display: none; }
body #page-container .tz-resor-sok__rensa {
  border: none;
  background: transparent;
  color: var(--tzo-dampad);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* ---------- TVA KOLUMNER ---------- */
body #page-container .tz-resor__kolumner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 32px;
  align-items: start;
}
body #page-container .tz-resor__sido {
  position: sticky;
  top: 130px;
  background: var(--tzo-beige);
  border: 1px solid var(--tzo-ram);
  border-radius: var(--tzo-radie);
  padding: 18px 18px 22px;
}

/* Filterblocket ar ororda moduler - har staplas de bara vertikalt. */
body #page-container .tz-resor__sido .tz-filter { margin: 0; }
body #page-container .tz-resor__sido .tz-filter__antal {
  font-family: var(--tz-font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--tzo-text);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tzo-ram);
}
body #page-container .tz-resor__sido .tz-filterbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
body #page-container .tz-resor__sido .tz-filterbar .tz-fbtn {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}
body #page-container .tz-resor__sido .tz-fbtn--sort {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 6px;
}
body #page-container .tz-resor__sido .tz-fbtn--sort select { width: 100%; }
body #page-container .tz-resor__sido .tz-chips { margin-top: 12px; }
body #page-container .tz-resor__sido .tz-mobilebar { display: none; }

/* ---------- BRED LISTA ---------- */
body #page-container .tz-resor .tz-resekort-grid--lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

body #page-container .tz-resor .tz-kort--bred {
  background: #fff;
  border: 1px solid var(--tzo-ram);
  border-radius: var(--tzo-radie);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  transition: box-shadow .18s ease, transform .18s ease;
}
body #page-container .tz-resor .tz-kort--bred:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
body #page-container .tz-resor .tz-kort--bred > a {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  text-decoration: none;
  color: inherit;
  position: relative;
}
body #page-container .tz-resor .tz-kort--bred img {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body #page-container .tz-resor .tz-kort--bred .tz-card__etikett {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

/* Kortets hogerdel: titel och fakta uppe, pris och CTA nere. */
body #page-container .tz-resor .tz-kort--bred .tz-card__kropp {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 0;
}
body #page-container .tz-resor .tz-kort--bred .tz-card__titel {
  font-family: var(--tz-font-heading);
  font-size: 24px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--tzo-text);
  margin: 0;
}
body #page-container .tz-resor .tz-kort--bred .tz-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 15.5px;
  color: var(--tzo-dampad);
  line-height: 1.5;
}
body #page-container .tz-resor .tz-kort--bred .tz-card__pris {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-bottom: 2px;
}
body #page-container .tz-kort--bred .tz-card__pris-label {
  font-size: 14px;
  color: var(--tzo-dampad);
}
body #page-container .tz-kort--bred .tz-card__pris-belopp {
  font-family: var(--tz-font-body);
  font-size: 26px;
  font-weight: 700;
  color: var(--tzo-text);
}
body #page-container .tz-kort--bred .tz-card__pris-enhet {
  font-size: 14px;
  color: var(--tzo-dampad);
}
body #page-container .tz-kort--bred .tz-card__pris--forfragan .tz-card__pris-belopp {
  font-size: 20px;
  font-weight: 400;
  color: var(--tzo-dampad);
}

/* Verifierade produktfakta. Tomt element renderas aldrig - se
   tz_resor_inkluderat(), som bara chipsar pa verifierat underlag. */
body #page-container .tz-resor .tz-kort--bred .tz-kort__inkluderat {
  grid-column: 2;
  grid-row: 2;
  list-style: none;
  margin: 10px 0 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body #page-container .tz-kort--bred .tz-kort__inkluderat li {
  background: var(--tzo-gron-ljus);
  color: var(--tzo-gron);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13.5px;
  line-height: 1.3;
  margin: 0;
}


/* Doljs av sokningen. Oberoende av filtrets hidden-attribut, sa bada
   kan gomma samma kort utan att trampa pa varandra. */
body #page-container .tz-sok-dold { display: none !important; }

/* ---------- SURFPLATTA ---------- */
@media (max-width: 1100px) {
  body #page-container .tz-resor__kolumner {
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 22px;
  }
  body #page-container .tz-resor .tz-kort--bred > a { grid-template-columns: 240px minmax(0, 1fr); }
  body #page-container .tz-resor .tz-kort--bred .tz-card__titel { font-size: 21px; }
}

/* ---------- MOBIL ----------
   Hogerspalten blir INTE en lang filterlista ovanfor resorna. Filterbarens
   knappar doljs och mallens egna mobilknappar, Filter och Sortera, tar over.
   De oppnar samma lada som tidigare - ingen ny mekanik. */
@media (max-width: 860px) {
  body #page-container .tz-resor__kolumner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  body #page-container .tz-resor__sido {
    position: static;
    order: -1;
    margin-bottom: 18px;
    padding: 14px 16px;
  }
  body #page-container .tz-resor__sido .tz-filterbar { display: none; }
  body #page-container .tz-resor__sido .tz-mobilebar {
    display: flex;
    gap: 10px;
  }
  body #page-container .tz-resor__sido .tz-mobilebar .tz-fbtn { flex: 1 1 50%; justify-content: center; }
  body #page-container .tz-resor__sido .tz-filter__antal {
    margin-bottom: 12px;
    padding-bottom: 10px;
    font-size: 16px;
  }

  body #page-container .tz-resor-hero { min-height: 210px; }
  body #page-container .tz-resor-hero__innehall { padding: 22px 20px; }
  body #page-container .tz-resor-hero__rubrik { font-size: 34px; }
  body #page-container .tz-resor-hero__ingress { font-size: 15.5px; }

  /* Bilden overst, innehallet under - inga horisontella kort pa mobil. */
  body #page-container .tz-resor .tz-kort--bred > a {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  body #page-container .tz-resor .tz-kort--bred img {
    grid-column: 1;
    grid-row: 1;
    height: 190px;
  }
  body #page-container .tz-resor .tz-kort--bred .tz-card__kropp {
    grid-column: 1;
    grid-row: 2;
    padding: 18px 18px 0;
  }
  body #page-container .tz-resor .tz-kort--bred .tz-kort__inkluderat {
    grid-column: 1;
    grid-row: 3;
    padding: 0 18px;
  }
  body #page-container .tz-resor .tz-kort--bred .tz-card__titel { font-size: 20px; }
  body #page-container .tz-kort--bred .tz-card__pris-belopp { font-size: 23px; }
}

@media (max-width: 480px) {
  body #page-container .tz-resor-hero__rubrik { font-size: 28px; }
  body #page-container .tz-resor-sok__falt { padding: 2px 14px; }
  body #page-container .tz-resor-sok__input { font-size: 16px; padding: 11px 0; }
}

/* =====================================================================
   KORTETS INRE

   Kortkroppen ar TEMATS eget rutnat med egna radnummer, och CTA:n
   stylas av en :is()-regel med hogre specificitet an en vanlig kedja.
   Den guldfargade textlanken Visa resa med pil ar Travel Zmarts
   befintliga kortformsprak och delas med startsidans karusell - den
   lamnas darfor ORORD i stallet for att kapprustas om med !important.

   Har styrs bara det som den breda varianten sjalv ager: lankens
   rutnat, bildens hojd, kroppens luft och chipsens utseende.
   ===================================================================== */

body #page-container .tz-resor .tz-kort--bred > a {
  /* align-content: stretch ar default och delade ut overbliven hojd till den
     TOMMA chipsraden, vilket gav ett band under innehallet pa kort utan
     verifierade chips. start haller raderna hogst upp. */
  /* Bilden spanner bada raderna och satter darmed kortets hojd. Rad 1 far
     1fr sa att kortkroppen fyller ut lika hogt - annars blev det en tom vit
     yta under texten pa kort utan chips. */
  /* Utan min-height styrs kortets hojd av TEXTKOLUMNEN och bilden strackes
     till samma hojd. Med min-height blev bilden hogre an texten och lamnade
     ett tomt falt under innehallet. */
  grid-template-rows: 1fr auto;
}

/* Bilden ska fylla kortets hojd, inte halla en fast bildkvot. */
body #page-container .tz-resor .tz-kort--bred img {
  /* min-height:100% pa ett rutnatsbarn vars rad sjalv mats ur innehallet ar
     cirkulart och blaste upp raden. height:100% racker - bilden strackes da
     till den hojd textkolumnen satter. */
  aspect-ratio: auto;
  height: 100%;
  grid-column: 1;
  grid-row: 1 / -1;
}

body #page-container .tz-resor .tz-kort--bred .tz-card__kropp {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  /* Temat lagger en beige kortbotten bakom innehallet. I den breda
     varianten ska hela textkolumnen vara vit. */
  background: #fff;
  padding: 22px 24px 14px;
}

/* Verifierade produktfakta, under kroppen och over kortets underkant. */
body #page-container .tz-resor .tz-kort--bred .tz-kort__inkluderat {
  grid-column: 2;
  grid-row: 2;
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 0 24px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body #page-container .tz-resor .tz-kort--bred .tz-kort__inkluderat li {
  background: #dbe6da;
  color: #415321;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13.5px;
  line-height: 1.3;
  margin: 0;
  list-style: none;
}

@media (max-width: 860px) {
  body #page-container .tz-resor .tz-kort--bred > a {
    grid-template-rows: auto auto auto;
  }
  body #page-container .tz-resor .tz-kort--bred img {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    grid-column: 1;
    grid-row: 1;
  }
  body #page-container .tz-resor .tz-kort--bred .tz-card__kropp {
    grid-column: 1;
    grid-row: 2;
    padding: 18px 18px 10px;
  }
  body #page-container .tz-resor .tz-kort--bred .tz-kort__inkluderat {
    grid-column: 1;
    grid-row: 3;
    padding: 0 18px 18px;
  }
}

/* Under brytpunkten blir kolumnbehallaren flex-column. Utan explicit bredd
   krymper barnen till sitt innehall i stallet for att fylla raden. */
@media (max-width: 860px) {
  body #page-container .tz-resor__huvud,
  body #page-container .tz-resor__sido {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-width: 0;
  }
  body #page-container .tz-resor .tz-resekort-grid--lista { width: 100%; }
}

/* =====================================================================
   DESIGNPASS 1B - reseforteckningens kort

   GRUNDORSAK TILL DET LJUSA BANDET: temat lagger en beige
   linear-gradient som bakgrundsBILD pa sjalva lanken - en kortbotten
   avsedd for de hoga karusellkorten. Den syntes under textkolumnen sa
   fort bilden var hogre an texten. Den tas bort har, inte overtackas.

   SPECIFICITET: temats kortregler kommer fran en :is()-selektor pa
   (1 id, 4 klasser, 1 element) och anvander !important. Kedjan nedan
   lagger en klass till och vinner darmed pa riktigt i stallet for att
   vara beroende av laddningsordningen.
   ===================================================================== */

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred > a {
  background-image: none !important;
  background-color: #fff !important;
  /* Positionerad forfader sa att bilden kan absolutplaceras i sin
     grid-cell. En absolutplacerad grid-item far sin grid-area som
     containing block nar griden sjalv ar containing block. */
  position: relative;
  /* Golvet 220px i stallet for 270 haller bildandelen inom 30-35 % aven
     nar kortet smalnar pa mindre skarmar. Vid 1440 ger 32 % 442px, vid
     1024 tar golvet vid pa 220px vilket motsvarar cirka 35 %. */
  grid-template-columns: minmax(220px, 32%) minmax(0, 1fr) !important;
  /* En enda rad, helt innehallsstyrd. Golvet ligger i stallet som
     min-height pa kortkroppen: det visade sig att kroppen inte later sig
     stretchas av raden (align-self:stretch gav 183px i en 232px rad), sa
     ett golv i raden hade aldrig natt fram till innehallet. */
  grid-template-rows: auto !important;
}

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred img {
  /* Bada slutlinjerna maste anges. For en absolutplacerad grid-item
     betyder slutlinjen 'auto' inte 'nasta linje' utan gridens PADDINGKANT,
     sa 'grid-column: 1' lat bilden spanna over hela kortet. */
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  /* GRUNDORSAKEN till de spretiga korthojderna: sa lange bilden ligger i
     flodet bidrar dess egen proportion till radens hojd, och kortet blir
     lika hogt som bilden ar. Bilder i portratt gav 660px hoga kort.
     Absolutplacerad i sin grid-cell paverkar bilden inte radhojden alls:
     kortets hojd styrs helt av innehallet, med 232px som golv, och
     bilden fyller cellen och beskars med object-fit. */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  display: block;
}

/* Kroppens rader: titel, metadata, produktinfo, luft, pris + CTA. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__kropp {
  grid-column: 2 !important;
  grid-row: 1 !important;
  /* INTE height:100%. En fast hojd gjorde kroppen till en behallare vars
     egna rader komprimerades i stallet for att vaxa: pa kort med chips
     pressades metaraden ihop till 8px och raderna lade sig over varandra.
     Med auto hojd bidrar innehallet till kortradens hojd, och radens
     minmax(232px, auto) later kortet vaxa nar det behover. Standardvardet
     align-self:stretch fyller anda hela kortet nar innehallet ar kortare. */
  height: auto !important;
  /* Golvet for korthojden. Kroppen ar den enda i flodet placerade delen av
     kortet, sa det ar den som bestammer bade minsta och faktiska hojd. */
  min-height: 232px !important;
  background: transparent !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto 1fr auto !important;
  column-gap: 20px;
  row-gap: 0;
  padding: 22px 26px 20px !important;
}

/* Titeln klamras till tva rader och far tva raders reserverad hojd, sa att
   en kort och en lang titel ger samma kortproportion. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__titel {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
  min-height: calc(2 * 1.25em);
  -webkit-line-clamp: 2 !important;
  margin: 0 !important;
}

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__meta {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 2px 14px;
  min-height: 1.6em;
  margin-top: 6px;
  font-size: 15.5px !important;
}
/* Punkten skrivs bara ut nar det FINNS ett datum - saknas det blir det
   ingen tom rad och ingen ensam avskiljare. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__natter + .tz-card__datum::before {
  content: '\00b7';
  margin-right: 14px;
  color: #a9a297;
}

/* Produktinfo mellan metadata och pris. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-kort__inkluderat {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  list-style: none;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent !important;
}

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__pris {
  grid-column: 1 !important;
  grid-row: 5 !important;
  align-self: end !important;
  margin: 14px 0 0 !important;
}

/* CTA: en liten tydlig knapp i Travel Zmarts orange accent. Scopad till den
   breda varianten - startsidans karusell behaller sin guldfargade textlank.
   Temats automatiska hoverpil stangs av. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__cta {
  grid-column: 2 !important;
  grid-row: 5 !important;
  justify-self: end !important;
  align-self: end !important;
  display: inline-block !important;
  margin: 14px 0 0 !important;
  padding: 10px 20px !important;
  min-height: 0 !important;
  background: #e04e12 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-family: var(--tz-font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .18s ease !important;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__cta::after {
  content: none !important;
  display: none !important;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred > a:hover .tz-card__cta {
  background: #c94208 !important;
  color: #fff !important;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred > a:hover .tz-card__cta::after {
  transform: none !important;
}

/* ---------- 1B: MOBIL OCH SURFPLATTA ---------- */
@media (max-width: 860px) {
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred > a {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0;
  }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    /* Staplat lage: bilden tillbaka i flodet med fast 16:9-band ovanfor
       texten. Aterstaller absolutplaceringen fran desktopregeln. */
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__kropp {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    /* Golvet 232px behovs bara i sida-vid-sida-laget, dar kroppen ska mota
       bildens hojd. Staplat ligger bilden ovanfor och kroppen ska vara
       precis sa hog som innehallet kraver. */
    min-height: 0 !important;
    padding: 18px 18px 20px !important;
  }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__titel {
    font-size: 20px !important;
  }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__pris {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin-top: 16px !important;
  }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred .tz-card__cta {
    grid-column: 1 !important;
    grid-row: 5 !important;
    justify-self: stretch !important;
    text-align: center !important;
    margin-top: 14px !important;
    padding: 12px 20px !important;
  }
}

/* ---------- 1B: FILTERSPALTENS BALANS ---------- */
body #page-container .tz-resor__sido {
  padding: 20px 20px 24px;
}
body #page-container .tz-resor__sido .tz-filter__antal {
  font-size: 17px;
  margin-bottom: 16px;
  padding-bottom: 14px;
}
body #page-container .tz-resor__sido .tz-filterbar {
  gap: 10px;
}
body #page-container .tz-resor__sido .tz-fbtn--sort {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid #e6e1d2;
}

/* =====================================================================
   DESIGNPASS 2 - KOMMANDE AVGANGAR

   Sma stilrena Travel Zmart-objekt i ett vagratt spar, inte stora
   produktkort. Farger, radier och typografi ar hamtade ur temats egen
   style.css. Referensen bidrog med informationsstrukturen - stor dag,
   kort manad, resorna och antalet - inte med formspraket.
   ===================================================================== */

body #page-container .tz-resor .tz-avgangar {
  margin: 0 0 28px;
}

body #page-container .tz-resor .tz-avgangar__huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 14px;
}

body #page-container .tz-resor .tz-avgangar__rubrik {
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  color: #2c2a26;
}

body #page-container .tz-resor .tz-avgangar__ingress {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #6f6a60;
}

/* Ramen halller pilarna utanfor sjalva sparet. */
body #page-container .tz-resor .tz-avgangar__ram {
  position: relative;
}

body #page-container .tz-resor .tz-avgangar__spar {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 2px 2px 10px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  /* INGEN scroll-snap har. Chrome avbryter en smooth scrollBy() nar
     behallaren har scroll-snap-type: pilklicket rullade da tillbaka till
     noll i stallet for att flytta sig (uppmatt: smooth -> 2px,
     auto -> 962px). Snappningen behovs bara for svep och ligger darfor
     i mediefragan for touchbredder, dar pilarna inte anvands. */
  /* INGEN scroll-behavior: smooth. Den gor aven en scrollLeft-tilldelning
     animerad, och nar animeringen inte fullfoljs stannar sparet kvar pa
     noll - alltsa samma fallgrop som scrollBy({behavior:'smooth'}). Pilen
     maste flytta sparet varje gang, aven utan animering. */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body #page-container .tz-resor .tz-avgangar__spar::before,
body #page-container .tz-resor .tz-avgangar__spar::after {
  content: none;
}

body #page-container .tz-resor .tz-avgangar__cell {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* Cellen strackt av sparet; knappen fyller cellen. Ger alla datumobjekt
     samma hojd aven nar resenamnen tar olika manga rader. */
  display: flex;
}

body #page-container .tz-resor .tz-avgangar__cell::before {
  content: none;
}

/* ---------- Sjalva datumobjektet ---------- */

body #page-container .tz-resor .tz-avgang {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "dag resor"
    "manad antal";
  column-gap: 12px;
  row-gap: 0;
  align-items: center;
  width: 188px;
  height: 100%;
  min-height: 74px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e2ddd0;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

body #page-container .tz-resor .tz-avgang:hover {
  border-color: #cfc7b3;
  box-shadow: 0 2px 10px rgba(44, 42, 38, .07);
}

body #page-container .tz-resor .tz-avgang:focus-visible {
  outline: 2px solid #e04e12;
  outline-offset: 2px;
}

body #page-container .tz-resor .tz-avgang__dag {
  grid-area: dag;
  align-self: end;
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  color: #2c2a26;
  font-variant-numeric: tabular-nums;
}

body #page-container .tz-resor .tz-avgang__manad {
  grid-area: manad;
  align-self: start;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8d8578;
}

body #page-container .tz-resor .tz-avgang__resor {
  grid-area: resor;
  align-self: end;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: #2c2a26;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body #page-container .tz-resor .tz-avgang__antal {
  grid-area: antal;
  align-self: start;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6f6a60;
}

/* "Alla datum" ar smalare och har ingen siffra. */
body #page-container .tz-resor .tz-avgang--alla {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "dag"
    "resor"
    "antal";
  grid-template-rows: auto auto auto;
  width: 148px;
  align-content: center;
  row-gap: 2px;
}

body #page-container .tz-resor .tz-avgang__alla {
  grid-area: dag;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  color: #2c2a26;
}

body #page-container .tz-resor .tz-avgang--alla .tz-avgang__resor {
  grid-area: resor;
  align-self: start;
  font-size: 13px;
  font-weight: 400;
  color: #6f6a60;
}

body #page-container .tz-resor .tz-avgang--alla .tz-avgang__antal {
  grid-area: antal;
}

/* ---------- Valt datum ---------- */

body #page-container .tz-resor .tz-avgang.is-vald {
  border-color: #e04e12;
  background: #fdf3ee;
  box-shadow: inset 0 0 0 1px #e04e12;
}

body #page-container .tz-resor .tz-avgang.is-vald .tz-avgang__dag,
body #page-container .tz-resor .tz-avgang.is-vald .tz-avgang__manad,
body #page-container .tz-resor .tz-avgang.is-vald .tz-avgang__alla {
  color: #b93c0c;
}

/* ---------- Pilar ---------- */

body #page-container .tz-resor .tz-avgangar__pil {
  position: absolute;
  top: calc(50% - 5px);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid #e2ddd0;
  border-radius: 50%;
  background: #fff;
  color: #2c2a26;
  box-shadow: 0 2px 10px rgba(44, 42, 38, .12);
  cursor: pointer;
}

body #page-container .tz-resor .tz-avgangar__pil:hover {
  border-color: #cfc7b3;
}

body #page-container .tz-resor .tz-avgangar__pil svg {
  width: 16px;
  height: 16px;
  display: block;
}

body #page-container .tz-resor .tz-avgangar__pil--bak  { left: -14px; }
body #page-container .tz-resor .tz-avgangar__pil--fram { right: -14px; }

/* Mjuk uttoning i sparets kant sa att det syns att fler datum finns. */
body #page-container .tz-resor .tz-avgangar__ram.har-mer::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  width: 40px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

body #page-container .tz-resor .tz-avgangar__ram.har-mer.vid-slut::after {
  content: none;
}

/* ---------- Doljning vid datumval ---------- */

body #page-container .tz-resor .tz-resekort-grid__cell.tz-datum-dold {
  display: none !important;
}

/* ---------- Surfplatta och mobil ---------- */

@media (max-width: 860px) {
  body #page-container .tz-resor .tz-avgangar { margin-bottom: 22px; }
  body #page-container .tz-resor .tz-avgangar__rubrik { font-size: 20px; }
  body #page-container .tz-resor .tz-avgangar__ingress { font-size: 14px; }
  /* Pilarna ersatts av swipe pa touchskarmar. */
  body #page-container .tz-resor .tz-avgangar__pil { display: none; }
  body #page-container .tz-resor .tz-avgangar__spar {
    scroll-snap-type: x proximity;
    gap: 10px;
    /* Sparet far ga ut i sidans marginal sa att det syns att det gar att
       svepa, utan att dokumentet far vagratt scroll. */
    padding-right: 18px;
  }
}

@media (max-width: 480px) {
  /* Inga mikroskopiska kort: bredden halls uppe aven pa liten skarm. */
  body #page-container .tz-resor .tz-avgang { width: 172px; min-height: 70px; }
  body #page-container .tz-resor .tz-avgang--alla { width: 138px; }
  body #page-container .tz-resor .tz-avgang__dag { font-size: 27px; }
}

/* =====================================================================
   PASS 4 - VISUELL HELHET

   Tre avgransade rattelser efter en helhetsgranskning pa 1440, 1024,
   768 och 390. Inget annat ar rort.
   ===================================================================== */

/* ---------- 1. Dubbel reslangd i de breda korten ----------

   Kort vars badge redan sager "4 dagar" visade ocksa "3 natter" i
   metaraden - samma reslangd tva ganger i samma kort.

   Natterna doljs DARFOR BARA pa kort som har en reslangdsbadge. Tio av
   de 23 korten har badgen Populär, Nyhet eller ingen badge alls, och
   for dem ar natterna den enda reslangden i oversikten. En ovillkorlig
   borttagning hade raderat den uppgiften helt pa de korten.

   Enbart presentation: antal_natter ligger kvar i data och pa
   detaljsidan, och rutnatskorten pa startsidan ar oberorda. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred.tz-har-dagbadge .tz-card__natter {
  display: none !important;
}

/* Nar natterna doljs OCH resan saknar aktiv avgang blir metaraden tom men
   fortsatter ta plats - en tom rad mellan titel och pris. Den kollapsas
   darfor helt. Galler de sju resorna med Pris pa forfragan. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred.tz-har-dagbadge .tz-card__meta:not(:has(.tz-card__datum)) {
  display: none !important;
}

/* Separatorpunkten hor ihop med natterna och ska bort med dem. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred.tz-har-dagbadge .tz-card__natter + .tz-card__datum::before {
  content: none !important;
}

/* ---------- 2. Sokfaltets bredd ----------

   Faltet hade ingen maxbredd och blev darfor 1 283 px vid 1440 och
   1 715 px vid 1920 - en enda placeholder i vanstermarginalen och over
   en meter tomrum till hoger. Det dominerade sidan i stallet for att
   vara ett tydligt verktyg. Under cirka 640 px bred vy ar regeln utan
   verkan och mobilen behaller full bredd. */
body #page-container .tz-resor .tz-resor__topp .tz-resor-sok {
  max-width: 560px;
}

/* ---------- 3. Kommande avgangar: sektionens luft ----------

   .tz-avgangar ar ett <section>-element och arvde temats 48 px padding.
   Sektionen blev 234 px hog for en 95 px hog datumrad, vilket gjorde
   genvagen till sidans tyngsta yta. Panelen och dess ljusa botten
   behalls - bara den vertikala luften stramas at. */
body #page-container .tz-resor .tz-avgangar {
  padding-top: 26px;
  padding-bottom: 22px;
}

@media (max-width: 860px) {
  body #page-container .tz-resor .tz-avgangar {
    padding-top: 22px;
    padding-bottom: 18px;
  }
}

/* ---------- 4. Fokusmarkering pa kortlanken ----------

   Hela kortet ar en lank, men temat nollstaller outline och lanken fick
   darfor ingen synlig fokusmarkering alls - en tangentbordsanvandare
   kunde inte se var i listan hen befann sig. Hover fanns redan.
   :focus-visible valjs sa att musklick inte ritar ramen. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--bred > a:focus-visible {
  outline: 3px solid #e04e12 !important;
  outline-offset: 3px;
  border-radius: 12px;
}

/* =====================================================================
   PASS 5 - TVA UX-ANDRINGAR
   ===================================================================== */

/* ---------- 1. Filterspalten linjerad med forsta kortet ----------

   .tz-resekort-grid--lista har padding-top 36px, sa forsta kortet borjade
   36 px lagre an filterspalten trots att bada kolumnerna startar pa samma
   rad i griden. Uppmatt: spalt 646, forsta kort 682.

   Spalten far samma 36 px, sa overkanterna moter varandra. Rutnatets egen
   padding rors inte - den delas med andra vyer. */
body #page-container .tz-resor .tz-resor__kolumner .tz-resor__sido {
  margin-top: 36px;
}

/* ---------- 2. Progressiv visning ---------- */

/* Fjarde doljmekanismen, ovanpa hidden, tz-sok-dold och tz-datum-dold. */
body #page-container .tz-resor .tz-resekort-grid__cell.tz-sida-dold {
  display: none !important;
}

body #page-container .tz-resor .tz-visa-fler {
  display: flex;
  justify-content: center;
  margin: 4px 0 8px;
}

body #page-container .tz-resor .tz-visa-fler__knapp {
  margin: 0;
  padding: 13px 28px;
  border: 1px solid #d8d2c2;
  border-radius: 10px;
  background: #fff;
  color: #2c2a26;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

body #page-container .tz-resor .tz-visa-fler__knapp:hover {
  border-color: #b9b09a;
  background: #fdfbf5;
  box-shadow: 0 2px 10px rgba(44, 42, 38, .07);
}

body #page-container .tz-resor .tz-visa-fler__knapp:focus-visible {
  outline: 3px solid #e04e12;
  outline-offset: 3px;
}

body #page-container .tz-resor .tz-visa-fler__knapp::after {
  content: none !important;
}

@media (max-width: 860px) {
  /* Staplat lage: spalten ligger overst och ska inte ha nagon
     linjeringsmarginal - det finns inget kort bredvid att mota. */
  body #page-container .tz-resor .tz-resor__kolumner .tz-resor__sido {
    margin-top: 0;
  }
  body #page-container .tz-resor .tz-visa-fler__knapp {
    width: 100%;
    padding: 15px 20px;
  }
}

/* =====================================================================
   DESIGNPASS 2026-09-22 - RESOR-SIDAN

   Tre justeringar. Ingen ny markup, ingen ny JS, inget bibliotek.
   Datumkortens och resekortens egen design ar orord - detta galler
   scrollbaren, navigationen runt korten och luften mellan dem.
   ===================================================================== */

/* ---------- 1. Den synliga scrollbaren under datumkorten ----------

   Sparet hade scrollbar-width:thin och visade darfor en vagratt
   scrollbar under korten. Funktionen behalls helt - bara den visuella
   komponenten doljs, i alla tre motorfamiljerna. Swipe, trackpad,
   tangentbord och pilknappar fungerar precis som forut.              */
body #page-container .tz-resor .tz-avgangar__spar {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* aldre Edge/IE */
}
body #page-container .tz-resor .tz-avgangar__spar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chrome, Safari, nya Edge */
}

/* Utrymmet som scrollbaren tog behovs inte langre. */
body #page-container .tz-resor .tz-avgangar__spar {
  padding-bottom: 2px;
}

/* ---------- 2. Pilarna far egen plats utanfor sparet ----------

   Pilarna lag pa left/right -14px och hamnade darfor delvis OVANPA
   ytterkorten. Ramen far i stallet en egen navigationsgata pa varje
   sida, och pilarna sitter i den. Sparet blir smalare - sektionen
   blir inte bredare.

   Pilarna ar fortsatt absolutpositionerade. Det ar medvetet: JS
   doljer dem med hidden vid sparets borjan och slut, och med flex
   hade varje sadan doljning flyttat hela sparet i sidled.            */
body #page-container .tz-resor .tz-avgangar__ram {
  padding-left: 46px;
  padding-right: 46px;
}
body #page-container .tz-resor .tz-avgangar__pil--bak  { left: 0; right: auto; }
body #page-container .tz-resor .tz-avgangar__pil--fram { right: 0; left: auto; }

/* Tydligare pilar - de bar nu signalen som scrollbaren gav forut. */
body #page-container .tz-resor .tz-avgangar__pil {
  width: 40px;
  height: 40px;
  border-color: #d6cfbe;
  box-shadow: 0 3px 14px rgba(44, 42, 38, .18);
}
body #page-container .tz-resor .tz-avgangar__pil svg {
  width: 19px;
  height: 19px;
}
body #page-container .tz-resor .tz-avgangar__pil:hover {
  border-color: #b9ae94;
  background: #fbf9f4;
}
body #page-container .tz-resor .tz-avgangar__pil:focus-visible {
  outline: 2px solid #415321;
  outline-offset: 2px;
}

/* Uttoningen slutar dar sparet slutar, sa den inte lagger sig over
   hogerpilen i navigationsgatan. */
body #page-container .tz-resor .tz-avgangar__ram.har-mer::after {
  right: 46px;
}

/* ---------- 3. Mer luft mellan resekorten ----------

   Bara containerns gap andras. Korten sjalva - bild, rubrik, pris,
   metadata, badges, CTA, radie och inre padding - ar ororda.        */
body #page-container .tz-resor .tz-resekort-grid--lista {
  gap: 34px;
}

/* ---------- Surfplatta och mobil ----------

   Pilarna ar redan dolda under 860px och ersatts av svep. Da behovs
   ingen navigationsgata - sparet far hela bredden tillbaka.         */
@media (max-width: 860px) {
  body #page-container .tz-resor .tz-avgangar__ram {
    padding-left: 0;
    padding-right: 0;
  }
  body #page-container .tz-resor .tz-avgangar__ram.har-mer::after {
    right: 0;
  }
  body #page-container .tz-resor .tz-resekort-grid--lista {
    gap: 24px;
  }
}
/* ===== /DESIGNPASS 2026-09-22 ======================================= */
/* =====================================================================
   REDESIGN 2026-09-22 - RESEKORT SOM RUTNAT

   Kortet byter modifierklass fran .tz-kort--bred till .tz-kort--rutnat.
   De gamla horisontella reglerna slutar darmed matcha helt i stallet for
   att overskrivas med annu mer !important - de ligger kvar ororda och
   gor en rullning tillbaka trivial.

   OM DEN LANGA SELEKTORKEDJAN: style.css bar ett DELAT "prishylle"-
   system som ar pixelmatchat mot startsidans karusell och som traffar
   hela .tz-resekort-grid. Dess selektorer ar byggda med :is() och far
   specificiteten (1,4,1) - de lases alltsa inte av en kortare kedja hur
   manga !important den an bar. Prefixet nedan ger (1,5,1) och vinner
   utan att en enda rad i det delade systemet behover roras. Startsidans
   karusell och ovriga rutnat behaller hyllan helt oforandrad.
   ===================================================================== */

/* ---------- Kolumnstruktur: filterpanelen som egen hogerspalt ----------
   Panelens EGEN styling ligger kvar orord hogre upp i filen (rad 109-154
   och 1063+): sticky, beige bakgrund, ram, radie, vertikal filterstapel
   och mobilvaxlingen vid 860px. Det enda som behovdes har var spaltmatt
   och brytpunkter - ingen ny panel byggdes.                             */
body #page-container .tz-resor .tz-resor__kolumner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  column-gap: 30px;
  align-items: start;
}

/* ---------- Rutnatet ----------
   TRE kort per rad forutsatter att huvudspalten verkligen racker till.
   UPPMATT: med 268px panel + 30px gap blir huvudspalten ca 300px smalare
   an forut. Tre kort under 1300px hade gett ca 240px per kort - for
   trangt for bild, tvaradig rubrik, faktarader och pris/CTA pa samma rad.
   Uppmatt kortbredd: 1440px ger 307px, 1366px ger 285px, 1300px hade
   gett 266px. Vid 1360px gar gransen dar kortet fortfarande andas.
   Darfor gar rutnatet till tva kort under 1360px, enligt agarens egen
   prioritering: lasbarhet fore en hard trekolumnsregel.                 */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
}

@media (min-width: 1360px) {
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Tablet: panelen far inte pressa sonder korten ----------
   Hogerspalten tas bort redan vid 1080px, inte vid 860px. Uppmatt: vid
   900px fonster hade huvudspalten blivit ca 470px, och tva kort dar ger
   omkring 220px styck. Panelen ersatts av den befintliga kompakta
   Filter/Sortera-raden, som redan finns och ar oforandrad.             */
@media (max-width: 1079px) {
  body #page-container .tz-resor .tz-resor__kolumner {
    display: block;
  }
  body #page-container .tz-resor .tz-resor__sido {
    position: static;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 24px;
  }
  /* Panelen ligger sist i markupen men ska visas FORE korten nar den
     blir en vagrat rad. Flex-ordningen gor det utan att markupen rors. */
  body #page-container .tz-resor .tz-resor__kolumner {
    display: flex;
    flex-direction: column;
  }
  body #page-container .tz-resor .tz-resor__sido  { order: 1; }
  body #page-container .tz-resor .tz-resor__huvud { order: 2; }

  body #page-container .tz-resor .tz-resor__sido .tz-filterbar { display: none; }
  body #page-container .tz-resor .tz-resor__sido .tz-mobilebar { display: flex; gap: 10px; }
  body #page-container .tz-resor .tz-resor__sido .tz-mobilebar .tz-fbtn {
    flex: 1 1 50%;
    justify-content: center;
  }
  body #page-container .tz-resor .tz-resor__sido .tz-filter__antal {
    font-size: 17px;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 10px;
  }
}

/* ---------- Mobil: ett kort per rad ---------- */
@media (max-width: 720px) {
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}

/* ---------- Sokrutan centrerad ----------
   Behaller sin bredd, sokikon, placeholder och filterkoppling. Enbart
   den vagrata placeringen ar andrad.                                   */
/* Blockflode, INTE flex. Som flex-item krympte sokrutan till sitt
   innehall (uppmatt 255px mot tidigare 560px). Med margin auto pa ett
   blockelement behaller den sin egen bredd och centreras anda. */
body #page-container .tz-resor .tz-resor-sok {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Heron under den fasta headern ----------
   GRUNDORSAK, uppmatt i webblasaren: temats header ar position:fixed och
   76px hog, men ingenting kompenserar for den hojden. Det enda som skot
   ner innehallet var Divis generiska .et_pb_section { padding-top: 4% }.

   Fyra procent av sidbredden gav 47px vid 1183px - alltsa 29px FOR LITE.
   Heron lag darfor delvis bakom headern, och eftersom vardet ar en
   PROCENT blev overlappet varre ju smalare fonstret var, precis tvartemot
   vad som behovs.

   Marginalen nedan ar satt i px just darfor: den krymper inte med
   fonsterbredden. Den tar igen de 29px och lagger till medveten luft, sa
   att hela hero-bilden syns pa alla desktopbredder.                    */
body #page-container .tz-resor .tz-resor-hero {
  margin-top: 64px;
}

@media (max-width: 860px) {
  body #page-container .tz-resor .tz-resor-hero {
    margin-top: 40px;
  }
}

/* ---------- Kortet ---------- */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat {
  background: #fff;
  border: 1px solid var(--tzo-ram);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  transition: box-shadow .18s ease, transform .18s ease;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, .11);
  transform: translateY(-3px);
}

/* Lanken ar hela kortet och staplar bild + kropp. Hyllans malade
   bakgrundsgradient tas bort - priset bar sig sjalvt i den har designen. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  position: relative;
  background-image: none !important;
  background-color: #fff !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  border-radius: 0 !important;
  text-decoration: none;
}

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat img {
  position: static !important;
  inset: auto !important;
  grid-area: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

/* Badgen ligger over bilden, uppe till vanster. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__etikett {
  position: absolute;
  top: 14px !important;
  left: 14px !important;
  z-index: 2;
  margin: 0;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(28, 30, 24, .82);
  color: #fff;
  font-family: var(--tz-font-heading);
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Kortkroppen ----------
   Hyllsystemets atta grid-rader och fasta 183px hojd slas av. Kroppen
   ar i stallet en flexkolumn som far vaxa efter sitt innehall, sa att
   faktaraderna aldrig kan lagga sig ovanpa priset. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__kropp {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  background: transparent !important;
  padding: 22px 22px 20px !important;
  gap: 0 !important;
}

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__titel {
  grid-row: auto !important;
  grid-column: auto !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 700;
  margin: 0 0 14px !important;
  min-height: 0 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  overflow: hidden;
}

/* Metaraden ar ersatt av faktaraderna. Den ligger kvar i DOM:en for
   sokstrang och filterattribut, men visas inte. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__meta { display: none !important; }

/* ---------- Faktarader ---------- */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__fakta {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__faktarad {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: #4b5140;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__faktarad::before { content: none; }
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__faktaikon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
  color: #5b6b3a;
  opacity: .95;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__faktaikon svg { display: block; }
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__faktatext { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Chip ---------- */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-kort__inkluderat {
  grid-row: auto !important;
  grid-column: auto !important;
  margin: 0 0 16px !important;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-kort__inkluderat li {
  background: #dbe6da;
  color: #415321;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  list-style: none;
}

/* ---------- Pris och CTA forankrade nedtill ---------- */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__pris {
  grid-row: auto !important;
  grid-column: auto !important;
  margin: auto 0 0 !important;
  padding-top: 4px;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 0;
  max-width: calc(100% - 136px);
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__pris-label {
  flex: 1 0 100% !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__pris-belopp {
  font-family: var(--tz-font-body);
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.2 !important;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__pris-enhet {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__cta {
  grid-row: auto !important;
  grid-column: auto !important;
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 11px 18px !important;
  border-radius: 8px !important;
  background: #e2571f !important;
  color: #fff !important;
  font-family: var(--tz-font-body);
  font-size: 14.5px !important;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat > a:hover .tz-card__cta {
  background: #c8481a !important;
  color: #fff !important;
}
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat > a:focus-visible {
  outline: 2px solid #5b6b3a;
  outline-offset: 3px;
}

/* ---------- Tablet: tva kort per rad ---------- */
@media (max-width: 1100px) {
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

/* ---------- Mobil: ett kort per rad ---------- */
@media (max-width: 720px) {
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat img { aspect-ratio: 16 / 9 !important; }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__kropp { padding: 20px 18px 18px !important; }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__titel { font-size: 19px !important; }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__faktarad { font-size: 14px; }
}

/* Mycket smala skarmar: pris och CTA staplas i stallet for att trangas.
   Det slar ocksa av hyllsystemets containerfraga vid 215px. */
@media (max-width: 420px) {
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__pris { max-width: 100%; }
  body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-kort--rutnat .tz-card__cta {
    position: static;
    margin-top: 14px !important;
    align-self: flex-start;
  }
}

/* ---------- Filterraden pa mobil ---------- */
@media (max-width: 860px) {
  /* Filterraden ar ersatt av hogerspalten 2026-09-22. Vaxlingen till
     kompakt Filter/Sortera sker nu i 1080px-blocket hogre upp. */
}

/* ---------- Kommande avgangar: pilarna far riktigt eget utrymme ----------
   Gatan pa 46px racker inte - pilen ar 40px bred och centrerad i den, sa
   ytterkortens ram kapades anda. Gatan breddas till 64px och pilen far
   12px in. Hellre ett datumkort farre an pilar ovanpa korten. */
/* Bara dar pilarna visas (over 860px). Utan mediafragan slog den har
   regeln ut designpassets mobilregel (padding 0 under 860px), sa ramen
   holl 2 x 64px tom yta pa telefon och bara ett datumkort syntes
   (A3-fynd B-1, 2026-09-29). */
@media (min-width: 861px) {
  body #page-container .tz-resor .tz-avgangar__ram {
    padding-left: 64px;
    padding-right: 64px;
  }
  body #page-container .tz-resor .tz-avgangar__pil--bak  { left: 12px; right: auto; }
  body #page-container .tz-resor .tz-avgangar__pil--fram { right: 12px; left: auto; }
  body #page-container .tz-resor .tz-avgangar__ram.har-mer::after { right: 64px; }
}
/* ===== /REDESIGN 2026-09-22 ========================================= */
/* =====================================================================
   DESIGNPASS 2026-09-24 - DATUMKORTEN: HOJD, DATUMKOLUMN OCH LUFT

   Bara matt och placering. Samma markup, samma JS, samma farger,
   markering, hover och filterfunktion.
   - kortet nagot hogre (min-height 74 -> 88) och luftigare padding
   - datumet far en fast egen kolumn (42px) med dag och manad centrerade
   - en diskret avdelare mellan datum och destination (bakgrundslinje,
     ingen extra markup)
   - destinationen flyttas at hoger (kolumngap 12 -> 20)
   - mer luft mellan destination och antal avgangar
   ===================================================================== */
body #page-container .tz-resor .tz-avgang {
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 6px;
  width: 216px;
  min-height: 88px;
  padding: 16px 16px 16px 12px;
  background-image: linear-gradient(#ebe5d8, #ebe5d8);
  background-repeat: no-repeat;
  background-size: 1px calc(100% - 32px);
  background-position: 64px 16px;
}
body #page-container .tz-resor .tz-avgang__dag,
body #page-container .tz-resor .tz-avgang__manad {
  justify-self: center;
  text-align: center;
}
/* Dag och manad ska lasas som en enhet: radavstandet (6px) ar till for
   destination/antal, sa manaden dras upp nagot. letter-spacing lagger
   luft efter sista bokstaven - vansterpaddingen ger optisk centrering. */
body #page-container .tz-resor .tz-avgang__manad {
  margin-top: -3px;
  padding-left: .08em;
}
/* Valt datum: samma farger som forut, avdelaren i en tonad nyans.
   Regeln for .is-vald satter background som shorthand, darfor maste
   linjens storlek och lage upprepas har. */
body #page-container .tz-resor .tz-avgang.is-vald {
  background-image: linear-gradient(#f0cdbb, #f0cdbb);
  background-repeat: no-repeat;
  background-size: 1px calc(100% - 32px);
  background-position: 64px 16px;
}
/* Alla datum: en kolumn och ingen avdelare, samma hojd som ovriga. */
body #page-container .tz-resor .tz-avgang--alla,
body #page-container .tz-resor .tz-avgang--alla.is-vald {
  background-image: none;
}
body #page-container .tz-resor .tz-avgang--alla {
  grid-template-columns: minmax(0, 1fr);
  width: 152px;
  padding: 16px;
  row-gap: 4px;
}
@media (max-width: 480px) {
  body #page-container .tz-resor .tz-avgang {
    width: 192px;
    min-height: 82px;
    column-gap: 16px;
    padding: 14px 14px 14px 10px;
    background-size: 1px calc(100% - 28px);
    background-position: 60px 14px;
  }
  body #page-container .tz-resor .tz-avgang.is-vald {
    background-size: 1px calc(100% - 28px);
    background-position: 60px 14px;
  }
  body #page-container .tz-resor .tz-avgang--alla {
    width: 140px;
    padding: 14px;
  }
}
/* ===== /DESIGNPASS 2026-09-24 ======================================= */

/* === TZ_CTA_UTAN_PIL 2026-09-26 (pass 73) ==========================
 * Agarbeslut: resekortens CTA ska bara sta "Visa resa". Ingen pil, och
 * ingen pil som animeras fram vid hover.
 *
 * Pilen kommer fran style.css (.tz-card__cta::after { content: "\2192" })
 * med en hoverregel som translateX:ar den. Den stangdes tidigare av bara
 * for .tz-kort--bred - men /resor/ renderar .tz-kort--rutnat, som darfor
 * fortfarande fick pilen.
 *
 * Regeln sitter nu pa ratt generisk niva: hela rutnatet i oversikten,
 * oavsett kortvariant. content:none tar bort pseudoelementet helt, sa
 * inget hover-, focus-, tangentbords- eller touchlage kan ateruppliva det
 * - en transform pa ett element som inte finns gor ingenting.
 *
 * SCOPAD TILL /resor/ MED FLIT. Startsidan, Cityresor och Weekendresor
 * visar korten via .zmart-carousel och har varken .tz-resekort-grid--lista
 * eller .tz-kort--rutnat - resekarusellen ar alltsa helt oberord.
 * Knappens ovriga design och hoverfarg behalls.
 * ================================================================= */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-card__cta::after,
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista > a:hover .tz-card__cta::after,
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-resekort-grid__cell > a:hover .tz-card__cta::after,
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-resekort-grid__cell > a:focus .tz-card__cta::after,
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-resekort-grid__cell > a:focus-visible .tz-card__cta::after {
  content: none !important;
  display: none !important;
  transform: none !important;
}

/* Utan pilen finns bara ett flexbarn kvar - gapet ska inte lamna luft. */
body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista .tz-card__cta {
  gap: 0 !important;
}

/* =====================================================================
   PASS 111 - NEDERDELEN AV /resor/  (2026-09-30)

   Tva fel, en gemensam grundorsak: bade vitytan och sticky-panelens
   bottenstopp var bundna till RUTNATET i stallet for till kolumnen.

   UPPMATT FORE (1440 px, langst ned pa sidan):
     .tz-resekort-grid--lista  slutade  4314
     .tz-visa-fler             4318-4364   <- utanfor vitytan
     .tz-resor__huvud          slutade  4372
     footern borjade           4372        <- noll luft
     .tz-resor__sido  underkant 4372        <- exakt pa footerkanten
   ===================================================================== */

/* ---------- 1. Vitytan flyttar fran rutnatet till kolumnen ----------

   style.css ger `.tz-resekort-grid` sin genomgaende vita yta med
   `box-shadow: 0 0 0 100vw #fff` + `clip-path: inset(0 -100vw)`, och
   bar sektionens borttagna bottenpadding som `padding-bottom: 72px`.
   Tekniken ar rätt - men den satt pa fel element. "Visa fler resor"
   och tomtexten ligger EFTER rutnatet och hamnade darfor utanfor
   vitytan, pa sektionens beigea botten. Det var den tunna remsan.

   Samma teknik, ett steg upp: kolumnen bar vitytan, och allt som ligger
   i den - rutnat, knapp och tomtext - star pa den. Ingen ny markup.

   VARFOR `.tz-resor__huvud` OCH INTE `.tz-resor__kolumner`: `clip-path`
   klipper lodratt och gor elementet till containing block for `fixed`.
   Filtrens popovers och mobilladan bor i `.tz-resor__sido` - lagger man
   klippningen pa kolumnbehallaren tar den med sig aven dem. Huvudspalten
   innehaller bara kort, knapp och tomtext.

   Avgransat till `.tz-resor`, alltsa layout="lista". Ovriga sidor som
   anvander `.tz-resekort-grid` (landssidorna, relaterade resor) behaller
   style.css regel oforandrad.                                          */

body #page-container .tz-resor .tz-resor__huvud {
  background: #fff;
  box-shadow: 0 0 0 100vw #fff;
  clip-path: inset(0 -100vw);
  padding-bottom: 72px;   /* samma bottenrytm som rutnatet bar forut */
}

body #page-container .tz-resor .tz-resor__huvud .tz-resekort-grid--lista,
body #page-container .tz-resor .tz-resor__huvud .tz-filter__tomt {
  background: transparent;
  box-shadow: none;
  clip-path: none;
  padding-bottom: 0;
}

/* Knappen star centrerad under korten med luft over och under. Luften
   under kommer fran kolumnens padding-bottom ovan. */
body #page-container .tz-resor .tz-visa-fler {
  margin: 0;
  padding-top: 44px;
}

/* Ryms alla resor doljer tz-resor-visafler.js knappen med [hidden]. Da
   finns ingen knapp att ge luft omkring, och kolumnens 72 px racker som
   bottenrytm. Skrivet som ett undantag och inte tvartom med flit: utan
   `:has()`-stod blir resultatet dagens luft, inte en klamd knapp. */
body #page-container .tz-resor .tz-visa-fler:not(:has(.tz-visa-fler__knapp:not([hidden]))) {
  padding-top: 0;
}

/* ---------- 2. Knappen i sajtens morka variant ----------

   Ingen ny design. Samma varden som `.tz-fbtn--all` ("Alla filter") i
   style.css, som ar sajtens befintliga morka knapp - och den ligger
   dessutom pa samma sida, sa de laser som samma system.                */
body #page-container .tz-resor .tz-visa-fler__knapp {
  background: var(--tz-color-text);
  border-color: var(--tz-color-text);
  color: #fff;
}

body #page-container .tz-resor .tz-visa-fler__knapp:hover {
  background: #000;
  border-color: #000;
  box-shadow: none;
}

/* ---------- 3. Sticky-panelens bottenstopp ----------

   Panelen ar ett grid-item i `.tz-resor__kolumner`. Ett sticky-element
   begransas av sin CONTAINING BLOCK - for ett grid-item ar det hela
   grid-arean, och den slutar dar den hogsta spalten slutar. Med
   sektionens `padding-bottom: 0 !important` slutade den exakt pa
   footerkanten, och panelen kunde glida anda dit.

   Sticky begransar MARGINALBOXEN. En bottenmarginal pa panelen ar
   darfor inte kosmetik utan sjalva stoppet: den sager var panelen far
   sluta inne i grid-arean. Samma 72 px som vitytans bottenrytm ovan, sa
   att panelen slutar inne i den vita ytan med tydlig luft till footern.

   Regeln ligger i samma selektor som panelens `margin-top: 36px` (rad
   1063), men maste sta har for att inte krocka med 860-brytpunkten som
   nollar marginalen i staplat lage.                                    */
body #page-container .tz-resor .tz-resor__kolumner .tz-resor__sido {
  margin-bottom: 72px;
}

/* Staplat lage borjar vid 1079px, INTE vid 860px: da ar panelen `static`,
   ligger overst och behover inget stopp. Bottenmarginalen dar ar 24 px och
   satts av tablet-blocket hogre upp - den maste aterstallas explicit, for
   selektorn ovan ar starkare (fyra klasser mot tre) och hade annars gett
   72 px dod luft mellan filterraden och forsta kortraden. */
@media (max-width: 1079px) {
  body #page-container .tz-resor .tz-resor__kolumner .tz-resor__sido {
    margin-bottom: 24px;
  }
}

/* Samma brytpunkt som knappens befintliga mobilregel: pa smal skarm blir
   72 px botten for mycket nar knappen redan ar fullbred. */
@media (max-width: 860px) {
  body #page-container .tz-resor .tz-resor__huvud {
    padding-bottom: 48px;
  }
  body #page-container .tz-resor .tz-visa-fler {
    padding-top: 32px;
  }
}
/* ===== /PASS 111 ==================================================== */