.swift-custom-mandatory {
}

.custom-box-shadow-subtle {
    border-radius: 10px;
    border: 2px solid #eee; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    padding: 15px;
    margin: 10px;
}

.custom-box-shadow-moderate {
    border-radius: 2px;
    border: 1px solid #eee; 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    padding: 15px;
    margin: 10px;
}

.custom-box-shadow-prominent {
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2); 
    padding: 15px;
    margin: 10px;
}

.custom-box-hover:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}

.custom-box-shift:hover
{
transition: transform 0.3s ease-out;
transform: translateY(-5px);
}

.custom-image img {
  border-radius: 8px;
  padding: 2px; 
  max-width: 100%; 
  display: block; 
  margin-bottom: 10px;
}

.custom-image-transparency:hover
{
opacity: 0.7;
}

/* Base dark blue effect (DIN VIRKENDE DEL) */
.custom-dark-image img {
  filter: grayscale(100%) !important;
  transition: filter 0.5s ease;
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit; /* follow container rounding if any */
}
/* Restore color on hover */
.custom-dark-image:hover img {
  filter: grayscale(0%) !important;
}
/* Container setup */
.custom-dark-image {
  position: relative;
  border-radius: 12px;     /* optional – match your card radius */
  overflow: hidden;        /* ensures overlay follows rounded corners */
  isolation: isolate;      /* ensures z-index layering works cleanly */
  /* ✅ NYT: skygge der IKKE bliver klippet af overflow:hidden */
  /* Justér værdierne så de matcher din temas skygge */
  filter: drop-shadow(0 8px 5px rgba(0,0,0,0.18))
          drop-shadow(0 8px 5px rgba(0,0,0,0.10));
}
/* Semi-transparent dark-blue overlay (below text) */
.custom-dark-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 30, 60, 0.5); /* dark blue overlay */
  transition: background-color 0.5s ease;
  border-radius: inherit;  /* keeps overlay edges rounded */
  z-index: 1;              /* sits below text but above image */
  pointer-events: none;    /* allows interactions through */
}
/* Fade overlay out on hover */
.custom-dark-image:hover::before {
  background-color: rgba(0, 30, 60, 0);
}
/* Text/content layer (keeps text visible above overlay) */
.custom-dark-image > div:last-child {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;              /* above overlay */
  color: inherit;          /* use your theme color (e.g. yellow) */
  pointer-events: none;
}
/* --- Gør hele .custom-dark-image klikbart uden at ændre eksisterende kode --- */
/* Sørg for at containeren er reference for positionering */
.custom-dark-image { position: relative; }
/* Udvid linket til at dække hele feltet */
.custom-dark-image a::after,
.custom-dark-image .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;              /* over overlay og tekst */
  background: transparent;
  pointer-events: auto;    /* modtag klik */
}
/* Overlay skal stadig lade klik gå igennem */
.custom-dark-image::before {
  pointer-events: none;
  z-index: 1;
}

.custom-greyscale-image img
{
filter: grayscale(100%) !important;
transition: filter 0.5s ease;
}
.custom-greyscale-image:hover img
{
filter: grayscale(0%) !important;
}

.custom-image-zoom img {
transition: transform 0.3s ease;
}
.custom-image-zoom:hover img {
transform: scale(1.02);
}

.custom-image-Kadir img {
  border-radius: 8px;               /* rounded corners */
  max-width: 100%;
  display: block;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* base shadow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.custom-box-shadow-prominent-k {
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2); 
    padding: 15px;
    margin: 10px;
}

/* === PROMO3: desktop-only text placement & spacing =================== */
@media (min-width: 993px) {
  /* Push text a bit in from the left edge inside posters */
  .promo3 .text-inset.item_swift_poster > .position-absolute > [id^="Poster_"] {
    /* use clamp so it scales slightly on very wide screens */
    padding-left: clamp(24px, 2.2vw, 30px) !important;
  }
  /* Tighten spacing between heading and subheading */
  .promo3 .text-inset .d-flex.gap-3 {
    gap: 0.1rem !important; /* from ~1rem → 0.1rem */
  }
  /* Trim heading bottom margin */
  .promo3 .text-inset h2 {
    margin-bottom: 0.1rem !important;
  }
  /* Remove top margin on subheading */
  .promo3 .text-inset p {
    margin-top: 0.1rem !important;
  }
  /* Give the CTA some breathing room below the copy */
  .promo3 .text-inset .btn {
    margin-top: 2rem !important;
  }
}

/* 2) Align the SECOND line to the right edge of the first line */
.Title-colour-Kadir h1.display-1 {
  text-align: justify;
  text-align-last: right;        /* aligns the last line (your 2nd line) to the right */
  -moz-text-align-last: right;   /* Firefox */
}
/* If your title sometimes is an 
 instead of 
, add this too: */
.Title-colour-Kadir h2.display-3::first-line { color: #ffffff; }
.Title-colour-Kadir h2.display-3 {
  text-align: justify;
  text-align-last: right;
  -moz-text-align-last: right;
}

/* === TEXT INSET SLIDER — desktop only (optimized) =================== */
@media (min-width: 993px) {
  /* Tweak these three values to control everything */
  .text-inset-slider {
    --inset: clamp(24px, 2.2vw, 40px);   /* left inset of the text block */
    --row-gap: clamp(2px, .3vw, 8px);    /* gap between heading, copy, CTA */
    --btn-gap: clamp(16px, 2vw, 32px);   /* extra space before the button */
    --heading-lh: 1;                     /* compact headline line-height */
  }
  /* 1) Move the entire overlay in from the left edge */
  .text-inset-slider :is(.position-absolute)[class*="top-0"][class*="bottom-0"][class*="start-0"][class*="end-0"] {
    padding-inline-start: var(--inset) !important; /* beats px-* utilities */
  }
  /* 2) If the overlay uses CSS grid utilities, tighten the row gap */
  .text-inset-slider :is(.position-absolute)[class*="grid"] {
    row-gap: var(--row-gap) !important;
  }
  /* 3) Compact headings */
  .text-inset-slider h1,
  .text-inset-slider h2 {
    line-height: var(--heading-lh) !important;
    margin-block-end: 0.15rem !important;
  }
  /* 4) Tighten copy start and add breathing room before the CTA */
  .text-inset-slider p {
    margin-block-start: 0.15rem !important;
  }
  .text-inset-slider .btn {
    margin-block-start: var(--btn-gap) !important;
  }
  /* 5) Keep 
 inside headings consistent with compact line-height */
  .text-inset-slider h1 br,
  .text-inset-slider h2 br {
    line-height: var(--heading-lh) !important;
  }
}
/* === TEXT INSET SLIDER — mobile/tablet fixes ======================= */
@media (max-width: 992.98px) {
  .text-inset-slider {
    /* one place to tune mobile sizing */
    --slide-aspect: 56%;                 /* ~16:9 → use 66.66% for 3:2, 75% for 4:3 */
    --pad: clamp(12px, 4vw, 20px);       /* inside padding for the overlay */
    --row-gap: clamp(6px, 2.5vw, 12px);  /* spacing between heading, copy, CTA */
    --btn-gap: clamp(12px, 3vw, 20px);   /* gap before the button */
  }
  /* 1) Give every slide a stable height via Bootstrap ratio */
  .text-inset-slider .ratio {
    --bs-aspect-ratio: var(--slide-aspect) !important;  /* consistent slide height */
  }
  /* 2) Ensure media fills the frame (no letterboxing) */
  .text-inset-slider .ratio img,
  .text-inset-slider .ratio picture,
  .text-inset-slider .ratio video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 3) Reset desktop offset; use compact, symmetric padding */
  .text-inset-slider .position-absolute[class*="top-0"][class*="bottom-0"][class*="start-0"][class*="end-0"] {
    transform: none !important;
    padding: var(--pad) !important;               /* applies on all sides */
  }
  /* 4) Tighten the internal grid spacing of the overlay */
  .text-inset-slider .position-absolute[class*="grid"] {
    row-gap: var(--row-gap) !important;
  }
  /* 5) Fluid type & button sizing so text doesn’t overwhelm */
  .text-inset-slider h1 {
    font-size: clamp(22px, 7vw, 36px);
    line-height: 1.05;
    margin: 0;
  }
  .text-inset-slider h2 {
    font-size: clamp(18px, 5.5vw, 28px);
    line-height: 1.1;
    margin: 0;
  }
  .text-inset-slider p {
    font-size: clamp(14px, 3.8vw, 18px);
    margin: 0;
  }
  .text-inset-slider .btn {
    margin-top: var(--btn-gap) !important;
    padding: clamp(8px, 2.6vw, 12px) clamp(14px, 4vw, 18px);
    font-size: clamp(14px, 3.6vw, 16px);
  }
  /* 6) Keep text blocks readable in narrow widths */
  .text-inset-slider .position-absolute {
    max-width: 85ch;                /* prevent too-wide paragraphs */
    text-wrap: balance;             /* nicer heading wraps (supported in modern browsers) */
  }
}

/* Target buttons inside poster with this decoration */
.Button-size-Kadir .btn {
  font-size: 20px;          /* font size of text */
  padding: 10px 24px;       /* top/bottom 10px, left/right 24px */
  margin-top: 20px;         /* spacing above the button */
  margin-bottom: 30px;      /* spacing below the button */
  border-radius: 50px;      /* rounded pill style */
  /* NEW → equal size for all */
  min-width: 200px;         /* adjust to your desired width */
  text-align: center;       /* make text centered inside */
  display: inline-flex;     
  justify-content: center;  
  align-items: center;
}

.Title-colour-Kadir-white .highlight-yellow {
  color: #E6E569;   /* yellow */
}

/* Main heading */
.rotating-title{
  font-weight:700;
  line-height:1.1;
  font-size:clamp(36px, 6vw, 60px); /* responsive size */
}
/* Rotating last-word box */
.rotate-words{
  /* Grid makes the column width equal to the longest child (.rw) */
  display:inline-grid;
  grid-template-columns:max-content;   /* <— auto = longest word */
  grid-template-rows:1fr;
  justify-items:start;                 /* left-align the word inside */
  align-items:end;                     /* baseline-ish alignment */
  height:1em;                          /* keeps a single text line tall */
  overflow:hidden;                     /* no vertical spill while sliding */
  margin-left:0.25em;                  /* gap after “Built for / Rooted in” */
  text-align:left;
}
/* Each rotating word */
.rotate-words .rw{
  grid-column:1;                       /* stack all words on top of each other */
  grid-row:1;
  white-space:nowrap;                  /* measure true word width */
  color:#E6E569;
  opacity:0;
  animation:rw-cycle 9s linear infinite;
}
/* show the first word immediately so there’s no flash */
.rotate-words .rw:first-child{ opacity:1; }
/* stagger the words */
.rotate-words .rw:nth-child(1){ animation-delay:0s; }
.rotate-words .rw:nth-child(2){ animation-delay:3s; }
.rotate-words .rw:nth-child(3){ animation-delay:6s; }
/* slide/fade animation */
@keyframes rw-cycle{
  0%   { opacity:0; transform:translateY(100%); }
  10%  { opacity:1; transform:translateY(0); }
  28%  { opacity:1; transform:translateY(0); }
  33%  { opacity:0; transform:translateY(-100%); }
  100% { opacity:0; }
}

/* Reset font styling on right-hand side so it follows the global site font */
.accordion,
.accordion * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* === STATS SECTION: tighten layout and spacing ======================= */
/* 1) Tighter vertical gap between poster elements */
.stats-section .item_swift_poster.h-100.d-flex.flex-column {
  gap: 2px !important; /* replaces gap-3 / gap-md-4 */
}
/* 2) Smaller space under headings / numbers */
.stats-section h1,
.stats-section .display-1,
.stats-section .display-2 {
  margin-bottom: 0.05px !important;
}
/* 3) Smaller space above the yellow button */
.stats-section .btn {
  margin-top: 0.05px !important;
}
/* Disable click behavior for buttons in stats section */
.stats-section a.btn {
  pointer-events: none !important;  /* disables all clicks */
  cursor: default !important;       /* shows regular cursor */
}

/* ===== Timeline – Kadir ===== */
.timeline-kadir {
  --brand: #003660;       /* raaco blue */
  --accent: #E6E569;      /* yellow highlight */
  --ink: #0E374D;         /* dark text */
  --card-bg: #ffffff;
  --muted: #9fb5c2;
  display: grid;
  gap: 20px;
  justify-items: center;
  color: var(--ink);
  /* Keep centered and 2/3 page width */
  width: clamp(720px, 66.666vw, 1160px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 0;
}
/* Hide the radios */
.timeline-kadir input[type="radio"] { display: none; }
/* Year pills row */
.timeline-kadir .years {
  display: flex;
  flex-wrap: nowrap;        /* one row */
  gap: 28px;                /* more spacing */
  justify-content: center;  /* ensure true center */
}
.timeline-kadir .years label {
  min-width: 98px;           /* consistent pill size */
  height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brand);
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: var(--brand);
  transition: .2s ease-in-out;
}
.timeline-kadir .years label:hover { transform: translateY(-1px); }
/* Active year pill */
#t1956:checked ~ .years label[for="t1956"],
#t1963:checked ~ .years label[for="t1963"],
#t1975:checked ~ .years label[for="t1975"],
#t1998:checked ~ .years label[for="t1998"],
#t2007:checked ~ .years label[for="t2007"],
#t2018:checked ~ .years label[for="t2018"],
#t2024:checked ~ .years label[for="t2024"] {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
/* Card container */
.timeline-kadir .cards {
  width: 100%;
  max-width: 1160px;        /* same width as pills area */
}
/* Card look */
.timeline-kadir .card {
  display: none;
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: clamp(24px, 4.2vw, 48px);
  box-shadow: 0 24px 36px rgba(0,0,0,.08);
  text-align: center;
  min-height: 320px;        /* fixed height */
}
/* Show the card that matches the checked radio */
#t1956:checked ~ .cards .c1956,
#t1963:checked ~ .cards .c1963,
#t1975:checked ~ .cards .c1975,
#t1998:checked ~ .cards .c1998,
#t2007:checked ~ .cards .c2007,
#t2018:checked ~ .cards .c2018,
#t2024:checked ~ .cards .c2024 {
  display: block;
}
/* Typography inside card */
.timeline-kadir .card .year {
  color: var(--accent);
  font-weight: 800;
  font-size: clamp(36px, 5.8vw, 70px);
  line-height: 1.05;
  margin: 0 0 12px;
}
.timeline-kadir .card .title {
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 36px);
  margin: 0 0 10px;
}
.timeline-kadir .card p {
  margin: 0 auto;
  max-width: 760px;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
}
/* Dots under the card (optional) */
.timeline-kadir .dots {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
  height: 28px;
}
.timeline-kadir .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted);
  position: relative;
}
#t1956:checked ~ .dots .d1956,
#t1963:checked ~ .dots .d1963,
#t1975:checked ~ .dots .d1975,
#t1998:checked ~ .dots .d1998,
#t2007:checked ~ .dots .d2007,
#t2018:checked ~ .dots .d2018,
#t2024:checked ~ .dots .d2024 { background: var(--accent); }
#t1956:checked ~ .dots .d1956::after,
#t1963:checked ~ .dots .d1963::after,
#t1975:checked ~ .dots .d1975::after,
#t1998:checked ~ .dots .d1998::after,
#t2007:checked ~ .dots .d2007::after,
#t2018:checked ~ .dots .d2018::after,
#t2024:checked ~ .dots .d2024::after {
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  top: 12px; width: 2px; height: 22px;
  background: linear-gradient(180deg, var(--accent), transparent);
  filter: drop-shadow(0 0 2px var(--accent));
}
/* ===== responsive: allow wrapping on small screens ===== */
@media (max-width: 860px){
  .timeline-kadir{
    width: min(92vw, 1100px); 
  }
  .timeline-kadir .years{
    flex-wrap: wrap;
    gap: 16px 14px;
  }
  .timeline-kadir .years label{
    min-width: 108px;
    height: 46px;
  }
  .timeline-kadir .card{
    min-height: 280px;
  }
}
/* --- Center the timeline (no fixed width) --- */
.timeline-kadir{
  width: 100% !important;              /* fill available space */
  margin: 0 auto !important;           /* center the block */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;      /* center children */
  left: 0 !important;                  /* guard against offsets */
}
/* Center the year pills row */
.timeline-kadir .years{
  justify-content: center !important;
}
/* Keep card width you like, but center it */
.timeline-kadir .cards{
  width: min(100%, 1160px) !important; /* use your existing max width */
  margin-inline: auto !important;      /* center the card container */
}
/* Fade-in animation for the visible card */
@keyframes tk-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* play the animation on whichever card is shown */
#t1956:checked ~ .cards .c1956,
#t1963:checked ~ .cards .c1963,
#t1975:checked ~ .cards .c1975,
#t1998:checked ~ .cards .c1998,
#t2007:checked ~ .cards .c2007,
#t2018:checked ~ .cards .c2018,
#t2024:checked ~ .cards .c2024 {
  animation: tk-fade-in 1.0s ease both;
  will-change: opacity, transform;
}
/* === Move the year pills below the card === */
/* 1. Reorder layout so the .years row appears below the .cards */
.timeline-kadir {
  display: flex !important;
  flex-direction: column-reverse !important; /* reverses order: years go under */
  align-items: center;
  gap: 40px; /* extra vertical space between card and years */
}
/* 2. Adjust the year pills row spacing and alignment */
.timeline-kadir .years {
  margin-top: 20px;  /* small space below the card */
  gap: 36px !important; /* increase space between each year pill */
}
/* 3. Optionally, reduce overlap margin between dots and years */
.timeline-kadir .dots {
  margin-bottom: 0; /* ensures no extra spacing conflict */
}

/* ================= MEGA MENU HEADLINES (your existing styles) ================= */
.dropdown-menu.megamenu strong,
.dropdown-menu.megamenu h4,
.dropdown-menu.megamenu b {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
  color: #003660;
}
.dropdown-menu.megamenu a {
  line-height: 1.3;
  padding: 2px 0;
  font-size: 15px;
  font-weight: 400;
}
/* ================= MAIN NAV SPLIT LAYOUT ================= */
/* Remove any dividers/pipes between items */
ul.nav.flex-nowrap.menu_root > li::before,
ul.nav.flex-nowrap.menu_root > li::after,
.nav-left > li::before,
.nav-left > li::after,
.nav-right > li::before,
.nav-right > li::after {
  content: none !important;
}
@media (min-width: 992px) {
  /* Make sure search + language never shrink away */
  header button.p-2.bg-transparent.border-0.text-reset,
  header button[id^="languageSelector_"] {
    flex-shrink: 0 !important;
  }
  /* Wrapper created by JS that contains the two ULs */
  .nav-split {
    display: flex !important;
    align-items: center;
    justify-content: center;        /* center whole 8-link block in nav column */
    width: 100%;
  }
  /* Left and right groups of 4 links */
  .nav-left,
  .nav-right {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    gap: 1.5rem;                    /* normal spacing inside each 4-link group */
  }
  /* 1 + 2) BIG gap between “Online sales” and “Distributors”
        and pull the right block toward the search icon       */
  .nav-right {
    margin-left: 10rem !important;   /* << big, obvious gap between the blocks */
    margin-right: 0.1rem !important; /* distance from Contact to search icon */
  }
}

/* =========================================================
   RAACO — Search modal (clean, no X, even padding)
   ========================================================= */
/* Backdrop + placement */
.modal.show[id^="searchModal_"] {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 6vh !important;               /* distance from top */
  background: rgba(0,0,0,.35) !important;    /* dim page behind */
  z-index: 9999 !important;
  overflow: hidden !important;
}
/* Centered floating dialog */
.modal.show[id^="searchModal_"] .modal-dialog.modal-fullscreen {
  width: min(640px, 92vw) !important;
  max-width: 92vw !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}
/* Modal box */
.modal.show[id^="searchModal_"] .modal-content {
  border: 0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.25) !important;
  padding: 16px 24px !important;
}
/* No header/title/X */
.modal.show[id^="searchModal_"] .modal-header,
.modal.show[id^="searchModal_"] .modal-header .modal-title,
.modal.show[id^="searchModal_"] .modal-header .btn-close {
  display: none !important;
}
/* Body + form layout */
.modal.show[id^="searchModal_"] .modal-body {
  padding: 0 !important;
}
.modal.show[id^="searchModal_"] .modal-body form {
  margin: 0 !important;
  position: relative !important;
}
/* Clean search input (even padding, single-line) */
.modal.show[id^="searchModal_"] .modal-body input[type="search"],
.modal.show[id^="searchModal_"] .modal-body input[type="text"] {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 16px !important;
  padding: 0 16px !important;                 /* equal left/right padding */
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: none !important;          /* kill theme bg icon(s) */
  outline: none !important;
  box-sizing: border-box !important;
}
.modal.show[id^="searchModal_"] .modal-body input[type="search"]:focus,
.modal.show[id^="searchModal_"] .modal-body input[type="text"]:focus {
  border-color: #0e4a6b !important;
  box-shadow: 0 0 0 2px rgba(14,74,107,0.15) !important;
}
/* Hide theme-provided icons near the input (magnifier/X wrappers, etc.) */
.modal.show[id^="searchModal_"] .modal-body .input-group-text,
.modal.show[id^="searchModal_"] .modal-body [class*="icon"],
.modal.show[id^="searchModal_"] .modal-body svg {
  display: none !important;
}
/* Hide browser-native search clear/magnifier */
.modal.show[id^="searchModal_"] .modal-body input[type="search"]::-webkit-search-decoration,
.modal.show[id^="searchModal_"] .modal-body input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}
.modal.show[id^="searchModal_"] .modal-body input[type="search"]::-ms-clear,
.modal.show[id^="searchModal_"] .modal-body input[type="search"]::-ms-reveal {
  display: none !important;
}
/* Hide visible submit controls (Enter still submits) */
.modal.show[id^="searchModal_"] .modal-body button[type="submit"],
.modal.show[id^="searchModal_"] .modal-body input[type="submit"] {
  display: none !important;
}
/* Backdrop tone (Bootstrap’s element) */
.modal-backdrop {
  background-color: rgba(0,0,0,.35) !important;
}

/* === PROMO 3-GRID (Swift row: class 'promo3') === */
/* 1. Mobile-first: stacked layout */
.promo3 .container-xl > .grid.grid-1.grid-lg-3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: var(--bs-gutter-x, 24px); /* respects Swift/Bootstrap gutter */
  place-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  box-sizing: border-box;
}
/* Ensure children flex correctly */
.promo3 .grid.grid-1.grid-lg-3 > .g-col {
  min-width: 0;
  display: block;
  box-sizing: border-box;
}
/* Content inside children should fit width */
.promo3 .grid.grid-1.grid-lg-3 > .g-col > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 2. Image normalization: same ratio, clean crop */
.promo3 .grid.grid-1.grid-lg-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
/* 3. Desktop: 2fr/1fr with right split into two rows */
@media (min-width: 993px) {
  .promo3 .container-xl > .grid.grid-1.grid-lg-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 32px;
  }
  .promo3 .grid.grid-1.grid-lg-3 > .g-col:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2; /* large left */
  }
  .promo3 .grid.grid-1.grid-lg-3 > .g-col:nth-child(2) {
    grid-column: 2;        /* top right */
    grid-row: 1;
  }
  .promo3 .grid.grid-1.grid-lg-3 > .g-col:nth-child(3) {
    grid-column: 2;        /* bottom right */
    grid-row: 2;
  }
}
/* 4. Small mobiles: tighter gaps */
@media (max-width: 576px) {
  .promo3 .container-xl > .grid.grid-1.grid-lg-3 {
    gap: 16px;
  }
}
/* === PROMO3: Aspect ratios and tighter visual alignment =================== */
.promo3 {
  --promo3-ratio: 3 / 2;              /* Adjust to 3 / 2 or 4 / 3 if you want taller tiles */
  --promo3-gap: clamp(16px, 2vw, 32px);
}
/* Desktop: lock consistent tile heights via aspect-ratio */
@media (min-width: 993px) {
  .promo3 .grid.grid-1.grid-lg-3 > .g-col {
    aspect-ratio: var(--promo3-ratio);
    overflow: hidden;
    border-radius: 12px;
  }
  .promo3 .grid.grid-1.grid-lg-3 > .g-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Adjust grid spacing for tighter vertical match */
  .promo3 .container-xl > .grid.grid-1.grid-lg-3 {
    column-gap: var(--promo3-gap);
    row-gap: calc(var(--promo3-gap) * 0.5); /* halves vertical gap → left/right align visually */
  }
}
/* Mobile/tablet: natural height flow but safe crop */
@media (max-width: 992.98px) {
  .promo3 .grid.grid-1.grid-lg-3 > .g-col {
    overflow: hidden;
    border-radius: 12px;
  }
  .promo3 .grid.grid-1.grid-lg-3 > .g-col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
}
/* === FIX: Equal spacing between promo3 boxes === */
@media (min-width: 993px) {
  .promo3 .container-xl > .grid.grid-1.grid-lg-3 {
    gap: 32px !important;          /* same distance horizontally and vertically */
  }
}
/* Optional: enforce equal gaps on tablet/mobile as well */
@media (max-width: 992.98px) {
  .promo3 .container-xl > .grid.grid-1.grid-lg-3 {
    gap: 24px !important; /* or any value you prefer */
  }
}
@media (max-width: 576px) {
  .promo3 .container-xl > .grid.grid-1.grid-lg-3 {
    gap: 16px !important; /* keep your current small-mobile spacing */
  }
}
/* === PROMO3: Left tile – stack buttons vertically with tidy sizing === */
/* 1) Make the wrapper that contains the .btn items a vertical stack */
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child
  :where(.buttons, .btn-group, .button-group, .paragraph__buttons),
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child
  *:has(> .btn + .btn) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 6px; /* spacing between the two buttons */
}
/* Override any built-in margins Swift adds */
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child .btn + .btn,
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child a.btn + a.btn {
  margin-top: 6px !important; /* direct control of distance between buttons */
}
/* 2) Button sizing — shrink to text (change to width:100% if you want full-width) */
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child .btn,
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child a.btn {
  display: inline-flex;              /* use flex layout inside button */
  justify-content: center;           /* horizontal center */
  align-items: center;               /* vertical center */
  text-align: center;                /* fallback for multiline text */
  padding: 6px 24px;
  border-radius: 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;                       /* inherits equal width from wrapper */
}
/* 3) Fallback spacing if the wrapper can't be targeted for some reason */
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child .btn + .btn,
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child a.btn + a.btn {
  margin-top: 12px;
}
/* 4) Keep text left-aligned in the tile */
.promo3 .grid.grid-1.grid-lg-3 > .g-col:first-child { text-align: left; }

/* Tighter spacing i den viste venstre-footermenu */
nav.d-flex.flex-column.align-items-start.text-start {
  gap: 0 !important;                 /* fjern evt. flex-gap */
}
nav.d-flex.flex-column.align-items-start.text-start .nav {
  gap: 0 !important;                 /* sikkerhed, hvis .nav selv har gap */
}
nav.d-flex.flex-column.align-items-start.text-start .nav-item {
  margin: 0 !important;              /* fjern margin mellem 
 */
}
nav.d-flex.flex-column.align-items-start.text-start .nav-link {
  padding-top: 2px !important;       /* var typisk 8px */
  padding-bottom: 2px !important;
  line-height: 1.25 !important;      /* tættere linjeafstand */
}

/* Floating “Contact us” button */
.floating-contact{
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 24px));
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.3rem 1.1rem;
  border-radius: 999px;
  background: #E6E569;                 /* raaco lime */
  color: #0e2f4a;                       /* raaco mørk blå */
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
/* Lille chat-ikon før teksten (inline SVG) */
.floating-contact::before{
  content:"";
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,");
  filter: drop-shadow(0 0 0 transparent);
}
.floating-contact:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.floating-contact:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.floating-contact:focus-visible{
  outline: 3px solid #0e2f4a; outline-offset: 3px;
}
/* Mindre skærme: større klikflade */
@media (max-width: 576px){
  .floating-contact{ padding: .75rem 1.2rem; font-size: 1.05rem; }
}
/* Respektér reduceret bevægelse */
@media (prefers-reduced-motion: reduce){
  .floating-contact{ transition: none; }
}
/* Hvis I har en cookiebar, kan I “løfte” knappen over den:
   .floating-contact{ bottom: calc(var(--cookie-height, 0px) + 16px); } */

/* === Trigger button === */
/* button sizing + look (top version) */
.btn-lime{
  display:inline-block;
  padding: 10px 24px;     /* generous pill size */
  background:#e9eb63; 
  color:#0e2f4a;
  font-size: 20px;          /* larger text like the top one */
  font-weight: 400;           /* not bold */
  letter-spacing: 0;          /* no extra tracking */
  text-transform: none;       /* keep casing */
  margin-top: 20px;         /* spacing above the button */
  margin-bottom: 30px;      /* spacing below the button */
  border-radius: 50px;      /* rounded pill style */
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn-lime:hover { background:#dadd55; }
/* Remove default markers */
.dw-region-modal > summary { list-style:none; cursor:pointer; }
.dw-region-modal > summary::-webkit-details-marker { display:none; }
/* Hide trigger when open */
.dw-region-modal[open] > summary.btn-lime { display:none; }
/* Modal container */
.dw-region-modal .modal {
  position:fixed; inset:0;
  display:none; place-items:center;
  z-index:9999;
  transition:opacity .2s ease, transform .2s ease;
  opacity:0; transform:scale(.97);
}
.dw-region-modal[open] .modal {
  display:grid; opacity:1; transform:scale(1);
}
/* Backdrop blur */
.modal__backdrop {
  position:absolute; inset:0;
  background:rgba(14,59,92,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}
/* Card box */
.modal__card {
  position:relative; z-index:1;
  width:min(680px,92vw); max-height:85vh;
  overflow:auto;
  background:#fff; color:#0e2f4a;
  border-radius:20px;
  padding:28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
/* Title + grid */
.modal__title {
  margin:0 8px 18px;
  font-size:1.6rem;
  font-weight:800;
  text-align:center;
}
.region-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  list-style:none;
  padding:8px;
  margin:0;
}
@media (min-width:640px) {
  .region-grid { grid-template-columns:repeat(3,1fr); }
}
/* Region boxes */
.region {
  display:flex;
  align-items:center;
  justify-content:center;
  height:70px;
  border-radius:14px;
  background:#f7f9fb;
  color:#0e2f4a;
  text-decoration:none;
  font-weight:700;
  border:2px solid #e6ecf2;
  transition:all .15s ease-in-out;
}
.region:hover {
  border-color:#0e4a6b;
  background:#eef5fa;
}

.testimonial-kadir {
  position: relative;
  padding: 40px 20px 20px 70px;
  max-width: 600px;
  font-family: 'Poppins', sans-serif;
  color: #1a2e3b;
  line-height: 1.6;
  text-align: center;
}
.quote-mark {
  position: absolute;
  top: -10px;
  left: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 90px;
  font-weight: 700;
  color: #003B7A; /* True raaco blue */
  opacity: 0.15; /* Light tint for balance */
  line-height: 0.8;
  z-index: 0;
}
.quote-text {
  position: relative;
  z-index: 1;
  font-size: 18px;
  font-weight: 400;
  color: #1a2e3b;
  margin-bottom: 15px;
}
.quote-author {
  font-size: 14px;
  color: #5a7282;
  font-style: italic;
}

/* === Kadir's custom video styling === */
.custom-video-Kadir video {
  border-radius: 8px;                          /* rounded corners */
  overflow: hidden;                            /* ensure poster corners clip */
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;                           /* keeps poster nicely cropped */
  border: none;
  background-color: transparent;               /* prevents unwanted background */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* soft base shadow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix for poster rounding */
}
.custom-video-Kadir {
  border-radius: 8px;
  overflow: hidden;
  display: block;
  background: #000; /* fills the corner gaps */
}
.custom-video-Kadir video {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border: none;
  background: transparent;
}
/* Hover effect */
.custom-video-Kadir video:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);  /* deeper shadow on hover */
  transform: translateY(-3px);                 /* subtle lift */
}
/* the wrapper around the 

/* Make text smaller for a specific row */
.smaller-font {
  font-size: clamp(9px, 1.2vw, 12px);
  line-height: 1.3;
}

/* ---------- CLEAN PRINT VIEW (Datasheet) ---------- */
@media print {
  /* Page */
  @page { size: A4; margin: 12mm; }
  /* Base */
  html { font-size: 80% !important; }
  body { background:#fff !important; color:#111 !important; }
  .product-detail, .content-main, .main-content, .product-container {
    width:100% !important; max-width:none !important; padding:0 !important;
  }
  /* Typography */
  h1 { font-size:18pt !important; margin:0 0 6px !important; color:#0f2240; }
  .product-title { font-size:20pt !important; margin-bottom:10px !important; }
  h2 { font-size:12pt !important; margin:12px 0 6px !important; color:#0f2240; }
  h1, h2 { margin-bottom:4px !important; } /* tighter headings */
  table, p, li { font-size:11pt; line-height:1.4; }
  .muted { color:#6b7280; font-size:9.5pt; }
  .hr { border-top:1px solid #e5e7eb; margin:8px 0 12px; }
  /* Layout used by the datasheet template */
  .grid { display:grid; grid-template-columns:46% 54%; gap:14px; align-items:start; }
  .figure { border:1px solid #e5e7eb; padding:6px; text-align:center; min-height:140px; }
  img { max-width:100%; height:auto; max-height:140px; object-fit:contain; }
  .desc { max-height:160px; overflow:hidden; }
  /* Hide site chrome */
  [itemprop="description"],
  .grid.gap-3,
  h2.h1.mw-75ch,
  .item_swift_productdetailsmediatable,
  circle, header, nav, footer,
  .site-header, .site-footer, .breadcrumbs,
  .top-bar, .main-menu, .mobile-nav,
  .search, .newsletter-signup, .cookie-banner,
  .btn, .raaco-pill, [data-datasheet] {
    display:none !important;
  }
  /* Accordion content visible in print; hide toggles */
  .accordion-collapse, .collapse {
    display:block !important; height:auto !important; visibility:visible !important; overflow:visible !important;
  }
  .accordion-header, .accordion-button { display:none !important; }
  /* Align specs block & heading spacing */
  h2, table { margin-top:0 !important; }
  h2 + table { margin-top:4px !important; }
  section.grid { align-items:start !important; }
  /* Table defaults (for any tables present) */
  table { width:100%; border-collapse:collapse; table-layout:fixed; }
  th, td { text-align:left; padding:5px 4px; border-bottom:1px solid #e5e7eb; font-size:9.6pt; }
  th { width:38%; white-space:nowrap; }
  td { word-wrap:break-word; overflow-wrap:break-word; }
  /* -------- Specifications (final-effective layout) -------- */
  .accordion-body dl.grid.gap-2 {
    display:grid !important;
    grid-template-columns:minmax(140px,30%) 1fr;
    column-gap:18px !important;
    row-gap:0 !important;
    width:100% !important;
    margin:0 0 12px 0 !important;
    border-top:1px solid #e5e7eb !important;
    border-collapse:collapse !important;
  }
  .accordion-body dl.grid.gap-2 > dt,
  .accordion-body dl.grid.gap-2 > dd {
    grid-column:auto !important;
    margin:0 !important;
    padding:2px 0 !important;          /* tightened */
    line-height:1.12 !important;       /* tightened */
    border-bottom:1px solid #e5e7eb !important;
    break-inside:avoid !important;
  }
  .accordion-body dl.grid.gap-2 > dt {
    font-weight:700 !important;
    white-space:nowrap !important;
    width:auto !important;
  }
  .accordion-body dl.grid.gap-2 > dd {
    width:auto !important;
    white-space:nowrap !important;      /* keep values on one line */
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }
  .accordion-body dl.grid.gap-2 > dd.text-break,
  .accordion-body dl.grid.gap-2 > dd .text-break {
    word-break:keep-all !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
  }
  .accordion-body dl.grid.gap-2 > dd span {
    display:inline !important;
    white-space:nowrap !important;
  }
  /* Group spacing */
  .accordion-item + .accordion-item { margin-top:10px !important; }
  /* ---- Working top alignment tweaks ---- */
  /* Remove spacer paddings above the 2-column grid so the grid starts at the top */
  .item_swift_1columnfull.py-3,
  .item_swift_1columnfull.py-lg-3,
  .item_swift_1columnfull.pb-4,
  .item_swift_1columnfull.pb-lg-5,
  .item_swift_1columnfull.pt-lg-0 {
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
  /* Ensure the right (Specifications) column aligns to the very top */
  .item_swift_2columns .grid.grid-lg-2 > .g-col:nth-child(2) {
    align-self:start !important;
    margin-top: -235px !important;  /* your working value */
    padding-top:0 !important;
  }
}
/* ---------- Branded Raaco Footer ---------- */
@media print {
  /* Make sure browsers render backgrounds in print */
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Branded Raaco Footer (with URL-encoded path) */
  body::after {
    content: "raaco A/S • Platanvej 19 • DK-Nykøbing F. • Denmark • www.raaco.com";
    display: block;
    text-align: center;
    font-size: 9pt;
    color: #0f2240;
    position: fixed;
    bottom: 8mm;
    left: 0;
    right: 0;
    padding-top: 24px;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 80px auto;
  }
}

.video-poster {
  aspect-ratio: 16 / 9;      /* Keeps it 16:9 at all sizes */
  width: 100%;               /* Responsive width */
  height: auto;              /* Auto height based on ratio */
  object-fit: cover;         /* 'cover' fills box, may crop — use 'contain' if you prefer letterbox */
  background: #000;          /* Fallback background color */
  display: block;            /* Removes inline gap issues */
}

@media (max-width: 575.98px) {
    .poster-heading-mobile h2 {
        font-size: clamp(1.6rem, 5vw, 1.8rem) !important;
        line-height: 1.4 !important;
    }
}

/* Make Swift video poster compact on mobile */
@media (max-width: 767.98px) {
    /* Kill the tall viewport height on this poster only */
    .poster-compact-mobile .min-vh-75,
    .poster-compact-mobile .min-vh-md-100 {
        min-height: 25vh !important;
    }
    /* Let the inner container shrink to the video height */
    .poster-compact-mobile .h-100 {
        height: auto !important;
        min-height: 25vh !important;
    }
    /* Just in case: hide any overlay that would extend below the video */
    .poster-compact-mobile .position-relative {
        overflow: hidden;
    }
}

/* Mobil-tekst fix KUN for boksen med CSS-klassen "promo3-mobile-fix" */
@media (max-width: 575.98px) {
    /* Overskrift */
    .promo3-mobile-fix h1,
    .promo3-mobile-fix h2,
    .promo3-mobile-fix h3 {
        font-size: 0.9rem !important;   /* ca. 21px – juster efter behov */
        line-height: 1.2 !important;
    }
    /* Brødtekst + bullets */
    .promo3-mobile-fix p,
    .promo3-mobile-fix li {
        font-size: 0.65rem !important;    /* ca. 14–15px */
        line-height: 1.4 !important;
    }
}

/* ----------------------------------------------------------
   PRODUCT PAGE – LONG DESCRIPTION LAYOUT FIX
   ---------------------------------------------------------- */
/* Main description block */
main#content[itemtype="https://schema.org/Product"]
  .item_swift_productnumber
  .mw-75ch.d-inline-block[itemprop="description"] {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    white-space: normal !important;      /* allow normal wrapping */
    overflow-wrap: break-word !important; /* safe for long URLs/strings */
    /* border: 1px solid red !important;  <-- for debugging only */
}
/* Children inside the description */
main#content[itemtype="https://schema.org/Product"]
  .item_swift_productnumber
  .mw-75ch.d-inline-block[itemprop="description"] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;      /* prevent mid-word breaking in children */
}
/* Responsive images inside long description */
main#content[itemtype="https://schema.org/Product"]
  .item_swift_productnumber
  .mw-75ch.d-inline-block[itemprop="description"] img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
/* Responsive tables – no overflow */
main#content[itemtype="https://schema.org/Product"]
  .item_swift_productnumber
  .mw-75ch.d-inline-block[itemprop="description"] table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    box-sizing: border-box;
}
/* Product page – force long description to wrap and stay inside viewport */
main#content[itemtype="https://schema.org/Product"]
  .item_swift_productnumber
  .mw-75ch.d-inline-block[itemprop="description"] {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    white-space: normal !important;   /* allow normal wrapping */
    word-break: break-word !important;/* last-resort wrap to avoid overflow */
    overflow-wrap: break-word !important;
}