/* =========================================================================
   TZ_KRYSSNINGAR — kryssningskort och partneringångar (pass 82, 2026-09-27)

   Markup: inc/tz-kryssningar.php

   Formspråket är hämtat från /premiumresor/, som ägaren godkänt: vita kort
   med mjuk ram, bild överst, grön rubrik, varm beige CTA-yta. Men det är
   INTE en kopia av den sidan — kryssningskortet bär mer fakta (rederi,
   fartyg, rutt, datum, hamn, pris) och behöver därför en egen rytm.

   NAMNRUM `tz-kr-`. Pass 80 lärde oss varför: `.tz-panel` och `.tz-drawer`
   var redan upptagna av andra komponenter i style.css, med högre
   specificitet, och rubrikerna renderades i fel storlek och färg innan
   namnrummet byttes. `tz-kr` är kontrollerat mot style.css,
   resa-ny-mall.css, resor-oversikt.css, tz-typografi.css och tz-header.css.

   SPECIFICITET: temats egna regler är genomgående `body #page-container …`
   (0,1,1 plus ID). Rubriker och länkar här scopas därför likadant, annars
   vinner en global p- eller a-regel. Det var exakt felet i pass 80.
   ========================================================================= */

:root {
  --tzkr-vit:        #ffffff;
  --tzkr-beige:      #f7f3ec;
  --tzkr-text:       #1a1a1a;
  --tzkr-text-svag:  rgba(26, 26, 26, 0.68);
  --tzkr-gron:       #415321;
  --tzkr-gron-ljus:  rgba(65, 83, 33, 0.14);
  --tzkr-guld:       #8c6a38;
  --tzkr-guld-hover: #75592f;
  --tzkr-font-rubrik: 'Poppins', Arial, sans-serif;
  --tzkr-font-brod:   'Roboto', Arial, sans-serif;
  --tzkr-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   1. Sektionen
   ---------------------------------------------------------------------- */

/* Toppmarginalen tillkom i pass 88: pa /tema/kryssningsresor/ ligger
   sektionen nu direkt efter ingressen, dar den generella Resor-sektionen
   tidigare stod med egen sektionspadding. Utan den klistrar rubriken i
   ingressen. */
body #page-container .tz-kr { margin: clamp(2rem, 1rem + 2vw, 3.5rem) 0 48px; }

/* Rubrikraden (pass 102). Rubriken till vänster, "se fler"-länken till höger
   — samma mönster som startsidans "Populära resor just nu / Se alla resor →".
   Länken låg tidigare under korten.

   Raden bär avståndet ned till rutnätet, inte rubriken. Hade båda haft en
   egen marginal skulle de lagt på varandra. `baseline` gör att rubrikens och
   länkens textbaslinjer möts trots olika teckenstorlek, och `wrap` låter
   länken falla ned under rubriken på smala skärmar i stället för att tryckas
   ihop. */
body #page-container .tz-kr__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin: 0 0 20px;
}

body #page-container .tz-kr__rubrik {
  font-family: var(--tzkr-font-rubrik);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tzkr-text);
  margin: 0;
  padding: 0;
}

/* TAKET ÄR BORTTAGET I PASS 83, efter mätning. Ett FAST maxmått i minmax()
   styr inte bara bredden utan också ANTALET spår: auto-fit räknar kolumner på
   maxmåttet, så 420 px gav 3 × 420 = 1316 px av radens 1715 och tryckte ned
   det fjärde kortet på en egen rad. Det var raka motsatsen till avsikten.

   `1fr` låter i stället auto-fit räkna på minmåttet 280 px, kollapsa de tomma
   spåren och dela raden lika: fyra kort blir (1715 − 3 × 28) / 4 = 407,75 px
   och fyller raden exakt. Det är samma beteende som Premiums egen
   `.tz-premium-grid`, som ägaren godkänt — den ger tre kort 553 px och fem
   kort 321 px. Pass 79 undvek medvetet den skalan; pass 83 väljer den, därför
   att kravet nu är att kryssningsraden ska harmoniera med sidan den står på
   i stället för att ha en egen rytm. Gapet 28 px är Premiums, inte vårt. */
body #page-container .tz-kr__rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  align-items: stretch;
}

body #page-container .tz-kr__mer {
  font-family: var(--tzkr-font-rubrik);
  font-size: 15px;
  font-weight: 600;
  color: var(--tzkr-gron);
  text-decoration: none;
  white-space: nowrap;
}

body #page-container .tz-kr__mer:hover { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   2. Kortet
   ---------------------------------------------------------------------- */

body #page-container .tz-kr-kort {
  display: flex;
  flex-direction: column;
  background: var(--tzkr-vit);
  border: 1px solid var(--tzkr-gron-ljus);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 200ms var(--tzkr-ease), transform 200ms var(--tzkr-ease);
}

body #page-container .tz-kr-kort:hover {
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.10);
  transform: translateY(-2px);
}

body #page-container .tz-kr-kort__bild {
  display: block;
  line-height: 0;
  background: var(--tzkr-beige);
}

/* Fast höjdförhållande så att tre kort är lika höga oavsett bildens
   ursprungsformat. object-position sätts per kryssning i markupen:
   fartyget får inte hamna utanför utsnittet. Bilden ändras aldrig —
   bara vilket utsnitt som visas. */
body #page-container .tz-kr-kort__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

body #page-container .tz-kr-kort__kropp {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}

body #page-container .tz-kr-kort__rederi {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--tzkr-font-rubrik);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tzkr-gron);
  line-height: 1.3;
}

body #page-container .tz-kr-kort__titel {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--tzkr-font-rubrik);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tzkr-text);
}

body #page-container .tz-kr-kort__titel a {
  color: inherit;
  text-decoration: none;
}

body #page-container .tz-kr-kort__titel a:hover { color: var(--tzkr-gron); }

body #page-container .tz-kr-kort__fakta,
body #page-container .tz-kr-kort__rutt {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--tzkr-font-brod);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tzkr-text-svag);
}

body #page-container .tz-kr-kort__rutt { margin-bottom: 16px; }
body #page-container .tz-kr-kort__stopp { color: var(--tzkr-gron); font-weight: 500; }

/* Prisblocket trycks ned så att CTA:n ligger i linje mellan korten. */
/* `margin-top: auto` trycker prisblocket till kortets botten, så att fyra
   kort med olika lång rutt ändå får pris och knapp på samma höjd. Bottenmåttet
   höjdes från 4 till 16 px när prisnoten togs bort i pass 83 — den luften bar
   noten tidigare. */
body #page-container .tz-kr-kort__pris {
  margin: auto 0 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--tzkr-gron-ljus);
  font-family: var(--tzkr-font-brod);
  line-height: 1.2;
  color: var(--tzkr-text);
}

body #page-container .tz-kr-kort__pris--forfragan {
  font-size: 17px;
  font-weight: 500;
  color: var(--tzkr-gron);
  margin-bottom: 16px;
}

body #page-container .tz-kr-kort__pris-fran { font-size: 14px; color: var(--tzkr-text-svag); }

body #page-container .tz-kr-kort__pris-belopp {
  font-family: var(--tzkr-font-rubrik);
  font-size: 22px;
  font-weight: 700;
}

body #page-container .tz-kr-kort__pris-enhet { font-size: 13px; color: var(--tzkr-text-svag); }

body #page-container .tz-kr-kort__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--tzkr-guld);
  color: #fff !important;
  font-family: var(--tzkr-font-rubrik);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms var(--tzkr-ease);
}

body #page-container .tz-kr-kort__cta:hover,
body #page-container .tz-kr-kort__cta:focus-visible {
  background: var(--tzkr-guld-hover);
  color: #fff !important;
}

body #page-container .tz-kr-kort__cta::after,
body #page-container .tz-kr-kort__cta::before { content: none !important; }

/* -------------------------------------------------------------------------
   3. Partneringångarna
   ---------------------------------------------------------------------- */

body #page-container .tz-kr-partner {
  /* Toppmarginalen behövs sedan rutan flyttades till direkt efter korten
     (tema_efter_kontakt): korträdens nederkant och rutan låg annars an mot
     varandra (0 px, uppmätt 2026-10-07). */
  margin: 36px 0 48px;
  padding: 28px 30px 30px;
  background: var(--tzkr-beige);
  border-radius: 14px;
  text-align: center;
}

body #page-container .tz-kr-partner__rubrik {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--tzkr-font-rubrik);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tzkr-text);
}

body #page-container .tz-kr-partner__text {
  margin: 0 auto 20px;
  padding: 0;
  max-width: 62ch;
  font-family: var(--tzkr-font-brod);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tzkr-text);
}

body #page-container .tz-kr-partner__knappar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body #page-container .tz-kr-partner__knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--tzkr-gron);
  color: #fff !important;
  font-family: var(--tzkr-font-rubrik);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms var(--tzkr-ease);
}

body #page-container .tz-kr-partner__knapp:hover { background: #2f3d18; color: #fff !important; }

body #page-container .tz-kr-partner__knapp--sekundar {
  background: transparent;
  color: var(--tzkr-gron) !important;
  border: 1px solid rgba(65, 83, 33, 0.45);
}

body #page-container .tz-kr-partner__knapp--sekundar:hover {
  background: rgba(65, 83, 33, 0.08);
  color: var(--tzkr-gron) !important;
}

body #page-container .tz-kr-partner__knapp::after,
body #page-container .tz-kr-partner__knapp::before { content: none !important; }

body #page-container .tz-kr-partner__not {
  margin: 16px 0 0;
  padding: 0;
  font-family: var(--tzkr-font-brod);
  font-size: 13px;
  color: var(--tzkr-text-svag);
}

/* -------------------------------------------------------------------------
   4. Bildkällor
   ---------------------------------------------------------------------- */

body #page-container .tz-kr-bildkallor {
  margin: 32px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--tzkr-gron-ljus);
}

body #page-container .tz-kr-bildkallor p {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--tzkr-font-brod);
  font-size: 12px;
  line-height: 1.6;
  color: var(--tzkr-text-svag);
}

body #page-container .tz-kr-bildkallor a { color: var(--tzkr-gron); }

/* -------------------------------------------------------------------------
   5. Smalare skärmar
   ---------------------------------------------------------------------- */

@media (max-width: 720px) {
  body #page-container .tz-kr__rutnat { grid-template-columns: 1fr; }
  body #page-container .tz-kr-partner { padding: 22px 20px 24px; }
  body #page-container .tz-kr-partner__knappar { flex-direction: column; }
  body #page-container .tz-kr-partner__knapp { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body #page-container .tz-kr-kort,
  body #page-container .tz-kr-kort__cta,
  body #page-container .tz-kr-partner__knapp { transition-duration: 1ms !important; }
  body #page-container .tz-kr-kort:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   6. Enskild kryssningssida

   Resemallen är byggd för city/weekend. På en kryssning renderar fem av dess
   sektioner en rubrik utan innehåll — uppmätt drygt 1 800 px tomrum. Mallen
   ändras inte; den gäller de fjorton godkända city/weekendresorna. Här döljs
   bara de sektioner som saknar innehåll, och bara på en kryssningssida.

   SEKTIONERNA PEKAS UT MED EGNA KLASSER, INTE MED INDEX (pass 104).

   Fram till pass 104 räknade regeln upp `.et_pb_section_1_tb_body`,
   `_3_`, `_4_` och så vidare. Divi numrerar sektionerna efter deras
   plats i mallen, så numren flyttade sig så fort någon la till en
   sektion — uppmätt i pass 104: en enda ny sektion sköt allt efter den
   ett steg, och regeln började dölja fel saker. En mall som utvecklas
   aktivt tål inte en selektor som beror på ordningen.

   Sektionerna i Theme Builder-mallen 393143 (numera "Alla Resor – Aktiv")
   har därför fått varsin stabil klass via Divis egna htmlAttributes.
   Innehåll och layout är orörda — klassen är det enda som lagts till:

     .tz-resa-nav             flikraden (flikar pekade på dolda sektioner)
     .tz-resa-dagsprogram     Exempel på dagsprogram
     .tz-resa-boende          Boende (tom på en kryssning)
     .tz-resa-vad-ingar       Vad som ingår
     .tz-resa-praktisk-info   Praktisk information + Vad våra resenärer säger
     .tz-resa-avgangar        Avgångar (köpboxens knapp pekas om till #boka i PHP)

   Nya kryssningssektioner kan nu läggas till, flyttas eller tas bort utan
   att den här regeln behöver röras.
   ---------------------------------------------------------------------- */

body.tz-ar-kryssning #page-container .tz-resa-nav,
body.tz-ar-kryssning #page-container .tz-resa-dagsprogram,
body.tz-ar-kryssning #page-container .tz-resa-boende,
body.tz-ar-kryssning #page-container .tz-resa-vad-ingar,
body.tz-ar-kryssning #page-container .tz-resa-praktisk-info,
body.tz-ar-kryssning #page-container .tz-resa-avgangar {
  display: none !important;
}

/* -------------------------------------------------------------------------
   7. Enskild kryssningssida — eget innehåll (pass 83)

   Markup: tz_kryssning_sidinnehall() i inc/tz-kryssningar.php, inlagd före
   sektionen #boka via ett render_block-filter.

   Blocket ligger utanför Divis radsystem och måste därför sätta sin egen
   bredd. Mallens innehållsrad mättes till 810 px på en kryssningssida; här
   används samma maxbredd som resten av sidans brödtext och centreras, så att
   blocket inte sticker ut som en främmande kropp.
   ---------------------------------------------------------------------- */

body #page-container .tz-kr-sida {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 20px 8px;
  font-family: var(--tzkr-font-brod);
  color: var(--tzkr-text);
}

body #page-container .tz-kr-sida__topp {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}

body #page-container .tz-kr-sida__block { margin: 0 0 40px; }
body #page-container .tz-kr-sida__topp .tz-kr-sida__block { margin-bottom: 0; }

body #page-container .tz-kr-sida__rubrik {
  font-family: var(--tzkr-font-rubrik);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tzkr-text);
  margin: 0 0 16px;
  padding: 0;
}

body #page-container .tz-kr-sida__underrubrik {
  font-family: var(--tzkr-font-rubrik);
  font-size: 15px;
  font-weight: 600;
  color: var(--tzkr-gron);
  margin: 0 0 10px;
  padding: 0;
}

body #page-container .tz-kr-sida__brod {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 14px;
  padding: 0;
}

body #page-container .tz-kr-sida__kalla {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tzkr-text-svag);
  margin: 14px 0 0;
  padding: 0;
}

body #page-container .tz-kr-sida__kalla a { color: var(--tzkr-gron); }

/* ---- Snabbfakta ---- */

body #page-container .tz-kr-sida__fakta {
  margin: 0;
  padding: 20px 22px;
  background: var(--tzkr-beige);
  border-radius: 10px;
}

body #page-container .tz-kr-sida__faktarad {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--tzkr-gron-ljus);
}

body #page-container .tz-kr-sida__faktarad:last-child { border-bottom: 0; padding-bottom: 0; }
body #page-container .tz-kr-sida__faktarad:first-child { padding-top: 0; }

body #page-container .tz-kr-sida__faktarad dt {
  font-size: 13px;
  font-weight: 400;
  color: var(--tzkr-text-svag);
  margin: 0;
  flex: 0 0 auto;
}

body #page-container .tz-kr-sida__faktarad dd {
  font-family: var(--tzkr-font-rubrik);
  font-size: 14px;
  font-weight: 600;
  color: var(--tzkr-text);
  margin: 0;
  text-align: right;
}

/* ---- Rutt ---- */

body #page-container .tz-kr-sida__rutt {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--tzkr-gron-ljus);
}

body #page-container .tz-kr-sida__hamn {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
}

body #page-container .tz-kr-sida__hamn:last-child { padding-bottom: 0; }

/* Punkten sitter på linjen: 22 px indrag plus 2 px linje, minus halva punkten. */
body #page-container .tz-kr-sida__hamn::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tzkr-gron-ljus);
}

body #page-container .tz-kr-sida__hamn:first-child::before,
body #page-container .tz-kr-sida__hamn:last-child::before { background: var(--tzkr-gron); }

body #page-container .tz-kr-sida__hamndatum {
  font-size: 12.5px;
  color: var(--tzkr-text-svag);
  min-width: 78px;
}

body #page-container .tz-kr-sida__hamnnamn {
  font-family: var(--tzkr-font-rubrik);
  font-size: 15px;
  font-weight: 600;
}

body #page-container .tz-kr-sida__hamnroll {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tzkr-gron);
  background: var(--tzkr-gron-ljus);
  border-radius: 3px;
  padding: 2px 7px;
}

/* ---- Vad som ingår ---- */

body #page-container .tz-kr-sida__kolumner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

body #page-container .tz-kr-sida__punkter {
  list-style: none;
  margin: 0;
  padding: 0;
}

body #page-container .tz-kr-sida__punkter li {
  position: relative;
  margin: 0;
  padding: 0 0 8px 24px;
  font-size: 14.5px;
  line-height: 1.6;
  list-style: none;
}

/* Bock och streck ritas i CSS, inte med en ikonfont. Pass 80: ETmodules
   laddas inte alltid, och ett kryss som inte renderas blir en tom ruta. */
body #page-container .tz-kr-sida__punkter--ingar li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--tzkr-gron);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body #page-container .tz-kr-sida__punkter--ej li {
  color: var(--tzkr-text-svag);
}

body #page-container .tz-kr-sida__punkter--ej li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 11px;
  height: 2px;
  background: var(--tzkr-text-svag);
  opacity: 0.6;
}

/* ---- Avslutande CTA ---- */

body #page-container .tz-kr-sida__cta-rad { margin: 22px 0 0; padding: 0; }

body #page-container .tz-kr-sida__cta {
  display: inline-block;
  font-family: var(--tzkr-font-rubrik);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--tzkr-guld);
  border-radius: 4px;
  padding: 12px 26px;
  text-decoration: none;
  transition: background 0.25s var(--tzkr-ease);
}

body #page-container .tz-kr-sida__cta:hover { background: var(--tzkr-guld-hover); color: #fff; }
body #page-container .tz-kr-sida__cta::after,
body #page-container .tz-kr-sida__cta::before { content: none !important; }

@media (max-width: 880px) {
  body #page-container .tz-kr-sida__topp { grid-template-columns: 1fr; gap: 36px; }
  body #page-container .tz-kr-sida__topp .tz-kr-sida__block--fakta { margin-bottom: 0; }
  body #page-container .tz-kr-sida { padding-top: 36px; }
}

/* -------------------------------------------------------------------------
   8. Köpboxen i hjälten på en kryssningssida (pass 83)
   ---------------------------------------------------------------------- */

/* Flygikonen. Mallen sätter ett flygplan bredvid "Nästa avgång" därför att
   city/weekendresorna är flygpaket. På en kryssning är den en utsaga: tre av
   fyra piloter har visserligen flyg i paketet, men Alaska-kryssningen är
   cruise only och där påstår ikonen något som inte stämmer. Den döljs på alla
   kryssningar — en ikon ska inte behöva tolkas per produkt. */
body.tz-ar-kryssning #page-container .tzr-buy-icon { display: none !important; }

body #page-container .tz-kr-kop__fran {
  font-size: 13px;
  color: var(--tzkr-text-svag);
}

body #page-container .tz-kr-kop__belopp {
  font-family: var(--tzkr-font-rubrik);
  font-size: 21px;
  font-weight: 700;
  color: var(--tzkr-text);
  margin: 0 0 0 4px;
}

body #page-container .tz-kr-kop__bas {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tzkr-text-svag);
  margin: 2px 0 0;
}

/* Pris och knapp på egen rad på telefon (A3-fynd A-1, 2026-09-29).
   Resmallens telefonregel (resa-ny-mall.css, ≤ 600 px) lägger pris och
   "Skicka reseförfrågan" sida vid sida och staplar först under 360 px. Det
   passar city/weekend ("Fr. 3 895 kr"), men kryssningspriset med raden
   "per person i innerhytt" är bredare — vid 375–390 px kapades det bakom
   knappen. Här staplas de i stället på alla telefonbredder, med samma
   regler som mallens egen < 360 px-variant. Bara kryssningar berörs.
   Knappen behåller sin naturliga bredd: Divi sätter max-width: max-content
   på knappen, så en width: 100% skulle ändå inte verka. */
@media (max-width: 600px) {
  body.single-resa.tz-ar-kryssning .tzr-buybox { grid-template-columns: 22px minmax(0, 1fr); }
  body.single-resa.tz-ar-kryssning .tzr-buy-price { grid-column: 1 / -1; white-space: normal; }
  body.single-resa.tz-ar-kryssning .tzr-buybox > .et_pb_button_module_wrapper { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   9. Temasidans variant — resekortets formspråk (pass 95)

   Markup: tz_kryssningskort_resekort(), bara på `is_singular('tema')`.
   Premiumresor kör standardkortet ovan och berörs inte.

   Värdena är UPPMÄTTA på resekortet i /resor/ (#tz-resor-grid), inte
   ungefärliga: radie 12 px, ram #e6e1d2, skugga 0 4 14 rgba(0,0,0,.05),
   titel Poppins 20/700, faktarad Roboto 14,5 px #4b5140 med ikon #5b6b3a,
   etikett Poppins 11,5/700 versal på rgba(28,30,24,.82), CTA Roboto
   14,5/700 på #e2571f med radie 8 och padding 11/18, gap 30 px.

   BREDDEN. Kortkoden ligger i temamallens ingress-textmodul, som är smalare
   (≈1 150 px vid 1 440) än sidans rad (1 296 px). Fyra kort i 1 150 px blir
   265 px breda, och auto-fit föll dessutom till 3 + 1 med ett ensamt kort.
   Sektionen tar därför radens bredd, centrerad mot textmodulen, och aldrig
   mer än viewporten minus 16 px sidomarginal per sida.

   RUTNÄTET. Fyra spår från 1 100 px, två spår däremellan och ett på mobil —
   så att fyra kort aldrig blir 3 + 1. Färre kort delar raden (auto-fit).
   ---------------------------------------------------------------------- */

body #page-container .tz-kr--resekort {
  --tzkr-rad: min(1296px, calc(100vw - 32px));
  width: var(--tzkr-rad);
  margin-left: calc((100% - var(--tzkr-rad)) / 2);
  margin-right: calc((100% - var(--tzkr-rad)) / 2);
  text-align: left;
}

/* RYTMEN. Temamallens sektioner står 108 px isär (54 + 54, uppmätt på
   /tema/cityresor/: ingress → Resor → bildspel). Utvalda kryssningar ligger
   inne i ingressens modul i stället för i en egen sektion, så avståndet
   måste ges här: 108 px ovanför rubriken, och 0 under korten — sektionens
   egen bottenpadding plus nästa sektions topp ger då samma 108 px. */
body #page-container .tz-kr.tz-kr--resekort {
  margin-top: 108px;
  margin-bottom: 0;
}

/* Pass 110: ligger kortblocket först i en egen sektion ger sektionsparen
   redan de 108 px:en (54 + 54), och marginalen ovan lägger sig ovanpå dem
   — 216 px i stället för 108. Villkoret ovan gäller alltså bara kvar när
   kortkoden står i ett ingressfält med text före sig; står den ensam först
   i sin sektion nollas marginalen här. Selektorn kräver hela kedjan
   sektion → första raden → första kolumnen → första modulen, så ett block
   längre ned i en sektion behåller sin rytm. */
body #page-container .et_pb_section > .et_pb_row:first-child > .et_pb_column:first-child > .et_pb_module:first-child .et_pb_text_inner > .tz-kr.tz-kr--resekort:first-child {
  margin-top: 0;
}

/* Temasidan centrerar sin rubrik. Utan "se fler"-länk är rubriken ensam i
   raden, och då ska den centreras — inte ligga kvar till vänster som
   space-between hade gjort. Tillkommer en länk där någon gång faller raden
   tillbaka till rubrik vänster / länk höger av sig själv. */
body #page-container .tz-kr--resekort .tz-kr__topp { margin-bottom: 28px; }

body #page-container .tz-kr--resekort .tz-kr__topp:not(:has(.tz-kr__mer)) { justify-content: center; }

body #page-container .tz-kr--resekort .tz-kr__rubrik { text-align: center; }

body #page-container .tz-kr--resekort .tz-kr__rutnat {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

@media (max-width: 1099px) {
  body #page-container .tz-kr--resekort .tz-kr__rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  body #page-container .tz-kr--resekort .tz-kr__rutnat { grid-template-columns: 1fr; }
}

body #page-container .tz-kr--resekort .tz-kr-kort {
  border: 1px solid #e6e1d2;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  text-align: left;
}

body #page-container .tz-kr--resekort .tz-kr-kort__bild { position: relative; }

body #page-container .tz-kr--resekort .tz-kr-kort__etikett {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(28, 30, 24, 0.82);
  color: #fff;
  font-family: var(--tzkr-font-rubrik);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body #page-container .tz-kr--resekort .tz-kr-kort__kropp { padding: 22px 22px 22px; }

body #page-container .tz-kr--resekort .tz-kr-kort__titel {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

body #page-container .tz-kr--resekort .tz-kr-kort__faktalista {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

body #page-container .tz-kr--resekort .tz-kr-kort__faktarad {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 7px;
  padding: 0;
  font-family: var(--tzkr-font-brod);
  font-size: 14.5px;
  line-height: 1.45;
  color: #4b5140;
}

body #page-container .tz-kr--resekort .tz-kr-kort__faktarad::before { content: none; }

/* Ikonerna ritas som mask i ikonfärgen. Plats och kalender är samma banor
   som resekortet på /resor/; fartyg och rutt är ritade i samma 24-rutnät
   med samma streckbredd 1,8. Inline-SVG fungerar inte här — se
   tz_kryssning_faktaikon(). */
body #page-container .tz-kr--resekort .tz-kr-kort__ikon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  background-color: #5b6b3a;
  -webkit-mask: var(--tzkr-ikon) center / contain no-repeat;
  mask: var(--tzkr-ikon) center / contain no-repeat;
}

body #page-container .tz-kr-kort__ikon--fartyg {
  --tzkr-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5 5 20h14l2-2.5'/%3E%3Cpath d='M5 17.5V12h14v5.5'/%3E%3Cpath d='M8.5 12V8h7v4'/%3E%3Cpath d='M12 8V4.5'/%3E%3C/svg%3E");
}

body #page-container .tz-kr-kort__ikon--kalender {
  --tzkr-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18M7 3v4M17 3v4'/%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

body #page-container .tz-kr-kort__ikon--plats {
  --tzkr-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Cpath d='M12 10a2 2 0 1 0 0-.01'/%3E%3C/svg%3E");
}

body #page-container .tz-kr-kort__ikon--rutt {
  --tzkr-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Cpath d='M8 18h7a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h7'/%3E%3C/svg%3E");
}

body #page-container .tz-kr--resekort .tz-kr-kort__fot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

body #page-container .tz-kr--resekort .tz-kr-kort__pris {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-top: 0;
  font-family: var(--tzkr-font-brod);
}

body #page-container .tz-kr--resekort .tz-kr-kort__pris-fran { font-size: 12.5px; }

body #page-container .tz-kr--resekort .tz-kr-kort__pris-belopp {
  font-family: var(--tzkr-font-brod);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

body #page-container .tz-kr--resekort .tz-kr-kort__pris-enhet { font-size: 13px; }

body #page-container .tz-kr--resekort .tz-kr-kort__pris--forfragan {
  font-size: 15px;
  font-weight: 500;
}

body #page-container .tz-kr--resekort .tz-kr-kort__cta {
  align-self: auto;
  flex: 0 0 auto;
  min-height: 0;
  padding: 11px 18px;
  border-radius: 8px;
  background: #e2571f;
  font-family: var(--tzkr-font-brod);
  font-size: 14.5px;
  font-weight: 700;
}

body #page-container .tz-kr--resekort .tz-kr-kort__cta:hover,
body #page-container .tz-kr--resekort .tz-kr-kort__cta:focus-visible { background: #c64716; }

/* -------------------------------------------------------------------------
   10. Pass 99 — sex kort och "Resan i korthet"

   SEX KORT. Kryssningsresor visar sex utvalda kryssningar. Med auto-fit och
   260 px blir sex kort 4 + 2 på en 1 296 px rad — en halvtom andra rad. Tre,
   fem och sex kort läggs därför i tre spår från 1 100 px: sex blir 3 + 3.
   Fyra och åtta ligger kvar på auto-fit (4 per rad). Under 1 100 px gäller
   avsnitt 9:s två spår och ett spår på mobil oförändrat.

   RESAN I KORTHET. Mallens kolumn är ett rutnät med ikonspår 24 px och
   text. Kryssningens egna rader läggs direkt i samma rutnät, med samma
   typografi som mallens rader (uppmätt på /resa/prag-4-dagar/: Roboto
   17,5 px, #27292f). Ikonerna är avsnitt 9:s masker.
   ---------------------------------------------------------------------- */

@media (min-width: 1100px) {
  body #page-container .tz-kr--resekort.tz-kr--antal-3 .tz-kr__rutnat,
  body #page-container .tz-kr--resekort.tz-kr--antal-5 .tz-kr__rutnat,
  body #page-container .tz-kr--resekort.tz-kr--antal-6 .tz-kr__rutnat {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body #page-container .tz-kr-korthet__ikon {
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: #27292f;
  -webkit-mask: var(--tzkr-ikon) center / contain no-repeat;
  mask: var(--tzkr-ikon) center / contain no-repeat;
}

body #page-container .tz-kr-korthet__text {
  margin: 0;
  padding: 0;
  font-family: var(--tzkr-font-brod);
  font-size: 17.5px;
  line-height: 1.35;
  color: #27292f;
}


/* =========================================================================
   10. KRYSSNINGSFLÖDET (pass 104)

   Sektionerna ligger i Theme Builder-mallen "Alla Resor – Aktiv" (393143),
   villkorade på `zrp_produkttyp = kryssning`. Divi äger bredd, bakgrund och
   spacing; det här avsnittet formger bara innehållet inuti dem.

   Före pass 104 byggdes hela underdelen av sidan av en PHP-funktion som sköt
   in fyra staplade boxar utanför radsystemet. Det som ändras här är alltså
   inte informationen — den är densamma — utan rytmen.
   ========================================================================= */

/* -- Snabbfakta som liggande rad -----------------------------------------
   Den stående definitionslistan blev sex rader staplade i en smal spalt.
   Raden lägger samma uppgifter bredvid varandra och bryter först när de inte
   får plats, så en kryssning med fyra fakta ser lika samlad ut som en med
   sju. `auto-fit` gör att posterna delar bredden jämnt utan mediefrågor. */

body #page-container .tzkr-fakta {
  margin: 0;
}

body #page-container .tzkr-fakta__rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 28px;
  margin: 0;
  padding: 26px 30px;
  list-style: none;
  background: var(--tzkr-sand, #f7f3ec);
  border-radius: 16px;
}

body #page-container .tzkr-fakta__post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body #page-container .tzkr-fakta__post::marker { content: none; }

body #page-container .tzkr-fakta__ikon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background-color: var(--tzkr-gron, #415321);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body #page-container .tzkr-fakta__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body #page-container .tzkr-fakta__etikett {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.58);
}

body #page-container .tzkr-fakta__varde {
  font-family: var(--tzkr-font-rubrik);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tzkr-text, #1a1a1a);
}

/* Ikonerna är CSS-masker av samma skäl som kortens (avsnitt 9): kortkoden kan
   köras inne i ett dynamiskt Divi-fält, och där rensar wp_kses bort <svg>. */
body #page-container .tzkr-fakta__ikon--kalender {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
}

body #page-container .tzkr-fakta__ikon--plats {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

body #page-container .tzkr-fakta__ikon--fartyg {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M5 15l1.5-5h11L19 15'/%3E%3Cpath d='M12 10V6M9 6h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18c1.5 0 2-1 3.5-1s2 1 3.5 1 2-1 3.5-1 2 1 3.5 1 2-1 3.5-1'/%3E%3Cpath d='M5 15l1.5-5h11L19 15'/%3E%3Cpath d='M12 10V6M9 6h6'/%3E%3C/svg%3E");
}

body #page-container .tzkr-fakta__ikon--stjarna {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6.1L12 16.9 6.7 19.7l1.1-6.1L3.4 9.4l6-.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6.1L12 16.9 6.7 19.7l1.1-6.1L3.4 9.4l6-.8z'/%3E%3C/svg%3E");
}

/* -- Resans höjdpunkter ---------------------------------------------------
   Bildkort i samma familj som kryssningskorten: vit panel, mjuk kant, radie
   14, bilden i 3:2. Antalet styr spåren, så två kort blir två breda i stället
   för två smala med tomrum bredvid. */

body #page-container .tzkr-hojd {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

body #page-container .tzkr-hojd--antal-1 { grid-template-columns: minmax(0, 620px); }
body #page-container .tzkr-hojd--antal-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body #page-container .tzkr-hojd__kort {
  display: flex;
  flex-direction: column;
  background: var(--tzkr-vit, #fff);
  border: 1px solid var(--tzkr-gron-ljus, rgba(65, 83, 33, 0.14));
  border-radius: 14px;
  overflow: hidden;
}

body #page-container .tzkr-hojd__bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

body #page-container .tzkr-hojd__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body #page-container .tzkr-hojd__kropp {
  padding: 22px 24px 26px;
}

body #page-container .tzkr-hojd__rubrik {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--tzkr-font-rubrik);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tzkr-text, #1a1a1a);
}

body #page-container .tzkr-hojd__text p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.78);
}

body #page-container .tzkr-hojd__text p:last-child { margin-bottom: 0; }

/* -- Textblock i kryssningssektionerna -----------------------------------
   Blocken ärver Divis radbredd i stället för att sätta en egen, som den gamla
   injicerade klumpen behövde göra. */

body #page-container .tzkr-block {
  max-width: 78ch;
}

body #page-container .tzkr-block .tz-kr-sida__kolumner { max-width: none; }

/* -- Prisreservationen ----------------------------------------------------
   En formulering, ett ställe. Diskret men läsbar: samma dämpade ton som
   källhänvisningarna, aldrig en varningsruta. */

body #page-container .tz-prisreservation {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.62);
}

@media (max-width: 599px) {
  body #page-container .tzkr-fakta__rad { padding: 22px; gap: 16px 20px; }
  body #page-container .tzkr-hojd { gap: 22px; }
  body #page-container .tzkr-hojd--antal-2 { grid-template-columns: minmax(0, 1fr); }
}


/* -- Bildstripen ----------------------------------------------------------
   Karusellen är `zmart_carousel` med temat `images` — samma motor som
   landsidornas bildspel. Den visar en bild i taget i full radbredd, och en
   3:2-bild blir då 1 143 px hög: en egen skärm, inte en strip.

   Karusellen skapar sin höjd med `padding-top: 50%` inline — ett gammalt
   proportionsknep — och sliderna ligger absolut positionerade inuti. Det gav
   2:1 mot radbredden, 857 px, vilket läste som en andra hero under den
   riktiga.

   Procenttalet sänks därför till 29, alltså ungefär 3,4:1. Vid 1 715 px
   radbredd blir stripen 497 px hög. Motorn, markupen, pilarna och prickarna
   rörs inte.

   Värdet är en andel av bredden, så proportionen skalar med ned genom
   brytpunkterna — och det är just problemet på smala skärmar: 29 % av 298 px
   är 86 px, en remsa man inte kan se något i. Bilden måste bli mer stående
   ju smalare skärmen är, så andelen höjs i två steg. */

body #page-container .tzkr-sek--bilder .zmart-carousel {
  padding-top: 29% !important;
}

body #page-container .tzkr-sek--bilder .zmart-carousel > div {
  height: 100% !important;
}

body #page-container .tzkr-sek--bilder .zmart-carousel img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 16px;
}

/* -- Fartyget som bild + text --------------------------------------------
   Divi äger kolumnerna; det här ger bara bilden sin form. Samma radie och
   proportion som höjdpunktskorten, så sektionerna känns besläktade. */

body #page-container .tzkr-fartygsbild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* -- Tonade sektioner -----------------------------------------------------
   Sidan var vit hela vägen ned, och 108 px luft mellan vita textblock läser
   som tomrum i stället för rytm. Två sektioner får därför en mycket ljus
   ton — samma sandfärg som snabbfaktaraden och premiumbannern, inget nytt
   värde. Variationen ska vara knappt märkbar, inte randig. */

body #page-container .tzkr-sek--ingar {
  background-color: var(--tzkr-beige, #f7f3ec);
}

/* Snabbfaktaraden har redan sandfärgad yta inuti sig. Ligger den mot en
   tonad sektion försvinner kontrasten, så den blir vit där. */
body #page-container .tzkr-sek--ingar .tzkr-fakta__rad { background: #fff; }

/* -- Bra att veta som hopfällbara punkter --------------------------------
   Tre stycken brödtext blev ett block till på vit botten. Samma uppgifter
   ligger nu i <details>, precis som kampanjkortens villkor — öppet för den
   som vill veta, tyst för den som inte gör det. */

body #page-container .tzkr-veta {
  max-width: 78ch;
  border-top: 1px solid var(--tzkr-gron-ljus, rgba(65, 83, 33, 0.14));
}

body #page-container .tzkr-veta__punkt {
  border-bottom: 1px solid var(--tzkr-gron-ljus, rgba(65, 83, 33, 0.14));
}

body #page-container .tzkr-veta__punkt summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--tzkr-font-rubrik);
  font-size: 17px;
  font-weight: 600;
  color: var(--tzkr-text, #1a1a1a);
}

body #page-container .tzkr-veta__punkt summary::-webkit-details-marker { display: none; }

/* Plustecknet ritas av två streck i ::after, så ingen ikonfil behövs. Det
   vågräta strecket försvinner när punkten är öppen. */
body #page-container .tzkr-veta__punkt summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--tzkr-gron, #415321), var(--tzkr-gron, #415321)) center/14px 2px no-repeat,
    linear-gradient(var(--tzkr-gron, #415321), var(--tzkr-gron, #415321)) center/2px 14px no-repeat;
  transition: transform 160ms var(--tzkr-ease);
}

body #page-container .tzkr-veta__punkt[open] summary::after {
  background: linear-gradient(var(--tzkr-gron, #415321), var(--tzkr-gron, #415321)) center/14px 2px no-repeat;
}

body #page-container .tzkr-veta__punkt summary:focus-visible {
  outline: 2px solid var(--tzkr-gron, #415321);
  outline-offset: 3px;
}

body #page-container .tzkr-veta__text {
  padding: 0 2px 20px;
}

body #page-container .tzkr-veta__text p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.78);
}

body #page-container .tzkr-veta__text p:last-child { margin-bottom: 0; }

@media (max-width: 599px) {
  body #page-container .tzkr-fartygsbild img { aspect-ratio: 3 / 2; }
}

/* -- Bildstripen och fartygsraden på smala skärmar ------------------------
   Stripens 3,4:1 är räknat för en radbredd på 1 715 px. Samma andel ger
   86 px höjd vid 390 px skärm, så bilden får en mer stående form i två steg
   nedåt: ungefär 2,4:1 på surfplatta och 1,6:1 på mobil.

   Fartygsraden är en vanlig Divi-rad med två kolumner. Divi håller kvar
   procentbredderna hela vägen ned, vilket ger en 114 px bred bild bredvid
   en lika smal textspalt. Kolumnerna staplas därför under 980 px — bara
   inom kryssningssektionen, så city- och weekendresornas rader rörs inte. */

@media (max-width: 980px) {
  body #page-container .tzkr-sek--bilder .zmart-carousel {
    padding-top: 42% !important;
  }

  body #page-container .tzkr-sek--fartyg .et_pb_row {
    flex-direction: column;
  }

  body #page-container .tzkr-sek--fartyg .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
  }

  body #page-container .tzkr-sek--fartyg .et_pb_column:not(:last-child) {
    margin-bottom: 28px;
  }
}

@media (max-width: 599px) {
  body #page-container .tzkr-sek--bilder .zmart-carousel {
    padding-top: 62% !important;
  }
}

/* -- Fail-empty för hela sektioner ---------------------------------------
   Varje kryssningssektion får sitt sakinnehåll från en kortkod, men rubriken
   ligger i en egen Divi-modul bredvid. Saknas fältet returnerar kortkoden
   tomt — och rubriken blir ensam kvar. Fyra av sex kryssningar visade så en
   "Resans höjdpunkter" utan höjdpunkter, 187 px rubrik och luft.

   En sektion utan något av kortkodernas rotelement har därför inget att visa
   och döljs i sin helhet. Regeln är skriven mot markörklasserna, inte mot
   enskilda sektioner, så den gäller även sektioner som tillkommer senare. */

body #page-container [class*="tzkr-sek--"]:not(:has(
  .tzkr-block, .tzkr-hojd, .tzkr-fakta__rad, .tzkr-veta, .zmart-carousel
)) {
  display: none !important;
}