/* HEADER */
header.sticky-top {
  box-shadow: rgba(0, 0, 0, 0.15) 4px 4px 4px;
}

/* FOOTER */
footer svg.feather {
  fill: none;
}

/* PDP */
.swift_quantity-field .icon-2 svg {
  fill: white !important;
}

.favorite-icon .icon-2 svg {
  fill: #1d243c !important;
}

/* ===== EXPRESS BUY: kolommen & layout ===== */

#ExpressBuyResultsContainer>header .grid> :nth-child(4),
#ExpressBuyResultsContainer>header .grid> :nth-child(5) {
  display: none !important;
}

#ExpressBuyResultsContainer>header .grid>.g-col-4 {
  grid-column: span 6 / span 6 !important;
}

#ExpressBuyResultsContainer article .grid>.g-col-lg-1.order-4 {
  display: none !important;
}

#ExpressBuyResultsContainer article .grid>.g-col-lg-4.order-3 {
  grid-column: span 6 / span 6 !important;
}

#ExpressBuyResultsContainer article>.g-col-lg-2 {
  justify-self: end;
}

/* Qty controls */
#ExpressBuyResultsContainer .js-replacement-product .d-flex.align-items-center.justify-content-between input[type="number"][id^="Quantity_"] {
  width: 1rem !important;
  min-width: 1rem !important;
  max-width: 1rem !important;
  flex: 0 0 1rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

#ExpressBuyResultsContainer .js-replacement-product .d-flex.align-items-center.justify-content-between .btn {
  padding: .375rem !important;
  line-height: 1 !important;
  min-width: 2rem;
}

#ExpressBuyResultsContainer .js-replacement-product .d-flex.align-items-center.justify-content-between {
  gap: 0 !important;
}

/* Empty‑state button */
#ExpressBuyResultsContainer .js-express-buy-empty-state a.btn.btn-secondary {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

/* Express Buy aside & summary panel tint */
.item_swift-v2_expressbuyapp aside {
  background-color: rgb(247, 247, 247) !important;
}

#CartSummaryContainer .bg-body {
  background-color: rgb(247, 247, 247) !important;
}

#CartSummaryContainer .fs-8.border-top,
#CartSummaryContainer .fs-6.border-top {
  background-color: rgb(247, 247, 247) !important;
}

#CartSummaryContainer .border-top {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ===== Mobile (≤ 991px) ===== */
@media (max-width: 991px) {
  #ExpressBuyResultsContainer header .g-col-2.text-end {
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
  }

  #ExpressBuyResultsContainer article .g-col-2.g-col-lg-1.order-4 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
  }

  #ExpressBuyResultsContainer .productPrice {
    padding-top: 6px !important;
    position: relative;
    top: 10px;
  }

  .item_swift-v2_expressbuyapp section {
    padding: 16px !important;
  }
}

/* COOKIE BANNER */
#dwCookieBanner button.btn-link {
  color: #003a4a;
}

#dwCookieBanner .btn-secondary {
  color: #1D243C;
  border-color: #1D243C;
  background-color: #FFFFFF;
}

#dwCookieBanner .btn-secondary:hover {
  color: #FFFFFF;
  border-color: #1D243C;
  background-color: #1D243C;
}

#dwCookieModal .modal-dialog {
  color: #1D243C;
}

#dwCookieModal .modal-dialog .btn-secondary {
  color: #1D243C;
  border-color: #1D243C;
  background-color: #FFFFFF;
}

#dwCookieModal .modal-dialog .btn-secondary:hover {
  color: #FFFFFF;
  border-color: #1D243C;
  background-color: #1D243C;
}

#dwCookieModal .modal-dialog .form-switch .form-check-input:checked {
  background-color: #1D243C !important;
  border-color: #1D243C;
}

#dwCookieModal .modal-dialog .h3 {
  font-weight: bold;
}

/* CATEGORY PAGE */
.product-list .item_swift-v2_productheader {
  text-transform: uppercase;
}

/* SALES BADGE */
.sale-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(255, 46, 46);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 20;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  /* voorkom dat flex hem meetelt */
  display: inline-block;
  pointer-events: none;
  /* optioneel: klik valt door badge heen */
}

/* HIDE OUTLET FROM WEBSHOP NAVIGATION */
  .nav-wrapper 
  .nav-item.dropdown 
  .dropdown-menu 
  a[href*="/outlet"] {
    display: none !important;
}


/* LOCATIONS MAP STYLING */

.map {
  height: 60vh;
  height: clamp(320px, 60svh, 600px);
}

/* Kleine schermen: iets lager om content boven/onder ruimte te geven */
@media (max-width: 768px) {
  .map {
    height: clamp(260px, 50svh, 520px);
  }
}

/* Hele grote schermen */
@media (min-width: 1400px) {
  .map {
    height: clamp(360px, 60svh, 720px);
  }
}

/* Custom maptype toggle (standaard hooks) */
.maptype-toggle {
  display: inline-flex;
  gap: .5rem;
  background: rgba(255, 255, 255, 0.9);
  margin-bottom: 5px;
  padding: .5rem;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.maptype-btn {
  appearance: none;
  border: 0;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: transparent;
  font: 600 14px/1.2 system-ui, sans-serif;
  cursor: pointer;
  color: #6b7280;
  /* NIET-actief = middengrijs */
  transition: color .15s ease, outline-color .15s ease, outline-width .15s ease, outline-offset .15s ease;
}

.maptype-btn.active {
  color: #000;
  /* ACTIEF = zwart */
  outline: none;
  /* geen rand op 'active' */
}

/* Rand alleen bij hover of keyboard focus */
.maptype-btn:hover,
.maptype-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Vast label naast de Google-pin */
.map-label {
  position: absolute;
  pointer-events: none;
  /* niet aanklikbaar, voorkomt “grab” op touch */
  white-space: nowrap;
  font: 600 14px/1.2 poppins, sans-serif;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

/* Info-label linksboven in de map */
.map-infobox {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  padding: 12px 14px;
  max-width: 320px;
  font: 500 14px/1.3 system-ui, sans-serif;
  margin: 20px 0 0 20px;
}

.map-infobox .mi-title {
  font-weight: 700;
  margin: 0 0 4px;
}

.map-infobox .mi-address {
  opacity: .85;
  margin: 0 0 8px;
}

.map-infobox .mi-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}

.map-infobox .mi-star {
  display: inline-block;
  vertical-align: -3px;
}

.map-infobox .mi-score {
  font-weight: 600;
  color: #333;
}

.map-infobox .mi-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.map-infobox .mi-link {
  text-decoration: none;
  color: #1a73e8;
  /* Google-achtig blauw – pas aan naar huisstijl */
  font-weight: 600;
}

.map-infobox .mi-link:hover {
  text-decoration: underline;
}

/* Search bar styling */
.js-suggestion, #ViewAllProductResults, #ViewAllContentPageResults , #NoProductResults, #NoContentPageResults{
  color:#1d243c;
}

.search-modal li:hover {
  background-color: rgb(29,36,60,.15);
  text-decoration-color: #1d243c !important;
}
.search-modal .dropdown-item-search-icon{
  color: #1d243c !important;
}


/* Language selector styling */
#DynamicOffcanvas:has(#LanguageSelect) .offcanvas-body {
    flex: 0 0 auto !important; /* zorgt dat het niet meer oprekt */
    height: auto !important;   /* laat het meegroeien met inhoud */
    padding-bottom: 0px !important ;  /* laat het meegroeien met inhoud */
}


/* Styling categoriebuttons boven filter */
@supports (selector(:has(*))) {
  /* H2 met 'Categorieën' gevolgd door 1e UL */
  h2:has(> :where(span, strong, em, a):where(:not(:empty)), :where(:not(:empty))) + ul {
    display: none !important;
  }
  /* en de 2e UL direct erna = mobiele/knoppenvariant → altijd tonen + stylen */
  h2:has(> :where(span, strong, em, a):where(:not(:empty)), :where(:not(:empty))) + ul + ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: .5rem;
  }
  h2:has(> :where(span, strong, em, a):where(:not(:empty)), :where(:not(:empty))) + ul + ul a {
    display: inline-block;
    padding: .5rem .9rem;
    border-radius: .375rem;
    background: var(--dw-color-primary, #0b6aa2);
    color: #fff;
    text-decoration: none;
    line-height: 1.1;
  }
  h2:has(> :where(span, strong, em, a):where(:not(:empty)), :where(:not(:empty))) + ul + ul a:hover {
    filter: brightness(0.92);
  }
}


/* === CAP Buttons: basis === */
a.btn.rounded-pill[data-dw-button="secondary"] {
  background-color: #1D243C !important;
  border: 1px solid #1D243C !important;
  color: #FFFFFF !important;
  transition: background-color .15s, color .15s, border-color .15s;
}

/* Hover / active / current */
a.btn.rounded-pill[data-dw-button="secondary"]:hover,
a.btn.rounded-pill[data-dw-button="secondary"].active,
a.btn.rounded-pill[data-dw-button="secondary"][aria-current="page"] {
  background-color: #FFFFFF !important;
  color: #1D243C !important;
  border-color: #1D243C !important;
}

/* Tap-state (mobiel) */
a.btn.rounded-pill[data-dw-button="secondary"]:active {
  background-color: #FFFFFF !important;
  color: #1D243C !important;
  border-color: #1D243C !important;
}

/* Compacte kleine variant */
a.btn.rounded-pill.btn-sm[data-dw-button="secondary"] {
  padding: .1rem .1rem;
  line-height: 1.1;
}

/* === Mobiel: 1 per rij + gecentreerd === */
@media (max-width: 768px) {
  /* elk categorie-item volle breedte */
  li.bd-catitem { 
    width: 100% !important; 
  }
  /* knop zelf centreren en laten afbreken indien nodig */
  li.bd-catitem > a[data-dw-button="secondary"] {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    white-space: normal !important; /* overschrijft eventuele .text-nowrap in markup */
  }
}

/* === Desktop: compacter maken === */
@media (min-width: 992px) {
  /* minder horizontale padding in de pill-knop */
  nav.navbar.d-none.d-lg-block a.btn.rounded-pill[data-dw-button="secondary"] {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
    /* eventueel ook verticaal iets compacter:
    padding-top: .35rem !important;
    padding-bottom: .35rem !important; */
  }
  /* marge op knop reduceren als .me-2 aanwezig is */
  nav.navbar.d-none.d-lg-block a.btn.rounded-pill[data-dw-button="secondary"].me-2 {
    margin-right: .25rem !important;  /* zet op 0 als je alléén gap gebruikt */
  }
  /* als de UL met flex+gap werkt, gap iets kleiner */
  nav.navbar.d-none.d-lg-block ul.navbar-nav.d-flex {
    gap: .25rem !important;           /* was soms ~.5rem via gap-2 */
  }
}

/* 1) Kleine tekstregel direct onder de H1 */
[data-swift-text] {
  font-size: .8rem !important;
  margin-bottom: .5rem !important;
}

/* PDP: dezelfde tekst binnen de product-omgeving */
[itemtype="https://schema.org/Product"] [data-swift-text]{
  font-size: .8rem !important;
  line-height: 1.35 !important;
}

/* 2) De twee CTA-knoppen direct onder die tekst compacter */
[data-swift-text] + .d-flex.align-items-center > a.btn {
  font-size: .8rem !important;
  padding: .3rem .55rem !important;
  line-height: 1.2 !important;
  border-width: 1px !important;
}
/* PDP: de 2 knoppen direct na die tekst binnen de product-omgeving */
[itemtype="https://schema.org/Product"] [data-swift-text] + .d-flex.align-items-center > a.btn{
  font-size: .8rem !important;
  padding: .3rem .55rem !important;
  line-height: 1.2 !important;
  border-width: 1px !important;
}

/* IMPERSONATION PAGINATION */
.pagination-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.pagination-wrapper::-webkit-scrollbar {
    height: 6px;
}
.pagination-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

.pagination {
    display: flex;
    flex-wrap: nowrap; /* prevent wrapping */
    white-space: nowrap;
}
.page-link {
    min-width: 40px; /* prevent collapse */
    text-align: center;
}

@media (max-width: 767.98px) {
  main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* Support 1080 x 1920 resolution */
@media (max-width: 1080px) {
  [data-dw-itemtype="swift-v2_productcomponentselector"] {
    flex-basis: 100% !important;
    max-width: 100% !important;    
    grid-column: 1 / -1 !important;

  }
  [data-dw-itemtype="swift-v2_productcomponentselector"]:nth-of-type(2) {
  background-color: #1D243C !important;
  padding: 1rem !important;
  }
  
}
/* TABEL PDP MOBILE EN DESKTOP */

/* Specs-blok mag nooit krimpen binnen gridlay-outs */
.bd-pdp-specs { width: 100% !important; min-width: 0 !important; }
.grid > .bd-pdp-specs { grid-column: 1 / -1 !important; }

/* Desktop: tabel en wrapper altijd full width */
@media (min-width: 768px){
  .bd-pdp-specs .table-responsive,
  .bd-pdp-specs table { width: 100% !important; max-width: 100% !important; }
  /* Ruimte tussen key en value (extra zekerheid naast inline paddings) */
  .bd-pdp-specs .spec-key  { padding-right: 1rem !important; }
  .bd-pdp-specs .spec-value{ padding-left:  1rem !important; }
}

/* MIJN ACCOUNT STYLING AFMELDBUTTON */

/* Afmelden -> pill, links uitgelijnd met de andere menu-items (zelfde inset) */
.dropdown-menu .dropdown-item.swift_sign-out-link,
.dropdown-item.swift_sign-out-link{
  display: block !important;
  width: fit-content !important;                 /* shrink-to-fit */
  /* marge: top/bottom = item-padding-y, left = item-padding-x, right = 0 */
  margin: var(--bs-dropdown-item-padding-y) 0 var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x) !important;
  white-space: nowrap !important;
  background: #FFFFFF !important;
  color: #1D243C !important;
  border: 2px solid #1D243C !important;
  border-radius: 9999px !important;
  font-weight: 400 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  padding: .45rem .9rem !important;             /* knop-paddings */
  text-decoration: none !important;
}

.dropdown-menu .dropdown-item.swift_sign-out-link:hover,
.dropdown-item.swift_sign-out-link:hover,
.dropdown-menu .dropdown-item.swift_sign-out-link:focus,
.dropdown-item.swift_sign-out-link:focus{
  background: #1D243C !important;
  color: #FFFFFF !important;
  border-color: #1D243C !important;
  text-decoration: none !important;
}

/* (optioneel) divider net boven 'Afmelden' verbergen */
[id^="SignInDropdown_"] .dropdown-menu .dropdown-divider:last-of-type{
  display: none !important;
}

/* Make sign in + My account not clickable */
#SignInDropdown_25669, #SignInDropdown_25668, #SignInDropdown_25670, #SignInDropdown_25671, #SignInDropdown_25672, #SignInDropdown_25663, #SignInDropdown_25664, #SignInDropdown_25665, #SignInDropdown_25666, #SignInDropdown_25667{
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
}

/* :root {
  --swift-text-width: 100% !important;
} */