.dialog-off-canvas-main-canvas {
  background-color: #e9ecf2;
}

.button.btn-close.btn-close-white {
  color: black;
}

div.cart-empty-page.text-align-center.h4 {
  margin-top: 80px;
}

a.navigation-toggle.me-auto.cursor-pointer {
  margin-left: 0;
  margin-top: 0%;
}

/* Logo — push farther left from search bar */
.block.block-system.block-system-branding-block {
  margin-left: 0;
  margin-right: 2.5rem;
  margin-bottom: 5px;
}

.node-type--cklb-landing-page.eu-cookie-compliance-status-2 {
  margin-top: -80px !important;
}

div.bg-video.background-local-video {
  height: 950px !important;
}

div.content {
  top: 300px !important;
}

section#navigationRegion {
  z-index: 9999 !important;
  background-color: white !important;
}

div.main-image {
  background-color: white;
}

div.product-relations-block {
  margin-left: 2rem;
  margin-right: 2rem;
  width: 95%;
}

.node-type--cklb-landing-page.eu-cookie-compliance-status-1 {
  margin-top: -80px !important;
}

.node-type--cklb-landing-page.eu-cookie-compliance-status-null {
  margin-top: -80px !important;
}

.node-type--cklb-landing-page.eu-cookie-compliance-status-0 {
  margin-top: -80px !important;
}

/* ── Top bar — transparent at top, blue on scroll ── */
.region-top-bar {
  transition: background-color 0.4s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Top bar + quick links — unified look */
.region-top-bar .container > .d-flex {
  gap: 0.5rem;
}

/* Header region — reduce vertical padding so bars feel tighter */
.region-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* ── Search bar — thinner / shorter ── */
.global-search-input {
  padding: 5px 14px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.global-search-wrapper {
  border-radius: 18px;
  max-height: 34px;
}
.global-search-submit {
  padding: 4px !important;
  margin: 0 6px 0 0 !important;
}
.global-search-submit::before {
  width: 13px;
  height: 13px;
}
.global-search-submit::after {
  width: 5px;
  height: 1.5px;
  transform: translate(-50%, -50%) translate(5px, 5px) rotate(45deg);
}

@media (max-width: 768px) {
  /* ── Mobile header: single-row flex, evenly spaced ── */
  .d-flex.align-items-center.justify-content-between.fw-light,
  .d-flex.align-items-center.fw-light {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    justify-content: flex-start !important;
  }

  /* Burger — order 1, remove me-auto so it doesn't push */
  a.navigation-toggle.me-auto.cursor-pointer {
    margin: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    order: 1 !important;
    position: relative !important;
    left: auto !important;
  }
  .navigation-toggle.me-auto.cursor-pointer > span {
    display: none;
  }
  /* Kill the me-auto margin on mobile */
  .navigation-toggle.me-auto {
    margin-right: 6px !important;
  }

  /* Logo — order 2, compact, fully visible */
  .block.block-system.block-system-branding-block {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
    margin: 0 4px 0 0 !important;
    flex: 0 0 auto !important;
    order: 2 !important;
  }
  .block.block-system.block-system-branding-block img {
    max-height: 22px !important;
    width: auto !important;
    display: block !important;
  }

  /* Search — order 3, flex-shrink, percentage-capped width */
  .block.block-global-search.block-global-search-block {
    flex: 0 1 120px !important;
    min-width: 0 !important;
    max-width: 30vw !important;
    order: 3 !important;
    margin: 0 0 0 auto !important;
  }
  .global-search-block {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .global-search-wrapper {
    max-height: 28px !important;
    border-radius: 14px !important;
  }
  .global-search-input {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }
  .global-search-input::placeholder {
    font-size: 10px !important;
  }
  .global-search-submit {
    padding: 2px !important;
    margin: 0 4px 0 0 !important;
  }

  /* Cart — order 4, next to user icon */
  .block.block-commerce-cart {
    flex: 0 0 auto !important;
    order: 4 !important;
    margin: 0 !important;
    margin-left: auto !important;
  }
  .cart-block--summary__count {
    display: none;
  }
  .beo.beo-list {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
  .cart-block--summary__icon .beo {
    width: 22px !important;
    height: 22px !important;
  }

  /* User menu — order 5, tight to cart on the right */
  #block-belgrade-account-menu,
  .block.block-menu.menu--account {
    flex: 0 0 auto !important;
    order: 5 !important;
    margin: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
  }
  #block-belgrade-account-menu .nav,
  .block.block-menu.menu--account .nav {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  #block-belgrade-account-menu .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .nav-link[href="/user/login"] {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MC42NzEgNjAuNjcxIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSIjMDAwMDAwIiB0cmFuc2Zvcm09InJvdGF0ZSgwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjAuMjQyNjgzOTk5OTk5OTk5OTgiPjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48L2c+PGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2U9IiNDQ0NDQ0MiIHN0cm9rZS13aWR0aD0iMC40ODUzNjc5OTk5OTk5OTk5NyI+PC9nPjxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPGc+IDxnPiA8ZWxsaXBzZSBzdHlsZT0iZmlsbDojZmZmZmZmOyIgY3g9IjMwLjMzNiIgY3k9IjEyLjA5NyIgcng9IjExLjk5NyIgcnk9IjEyLjA5NyI+PC9lbGxpcHNlPiA8cGF0aCBzdHlsZT0iZmlsbDojZmZmZmZmOyIgZD0iTTM1LjY0LDMwLjA3OUgyNS4wMzFjLTcuMDIxLDAtMTIuNzE0LDUuNzM5LTEyLjcxNCwxMi44MjF2MTcuNzcxaDM2LjAzN1Y0Mi45IEM0OC4zNTQsMzUuODE4LDQyLjY2MSwzMC4wNzksMzUuNjQsMzAuMDc5eiI+PC9wYXRoPiA8L2c+IDwvZz4gPC9nPjwvc3ZnPg==");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    width: 26px !important;
    height: 26px !important;
  }

  /* Autocomplete dropdown — full-width on mobile */
  .global-search-autocomplete-dropdown {
    max-width: 100vw !important;
    width: calc(100vw - 16px) !important;
    left: 8px !important;
  }

  /* Hide the "active" user link (logged-in username) */
  .nav-link.active {
    display: none;
  }

  /* Header region — tighter on mobile */
  .region-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .region-header .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Extra-small screens (< 400px) ── */
@media (max-width: 400px) {
  .block.block-system.block-system-branding-block img {
    max-height: 18px !important;
  }
  .block.block-global-search.block-global-search-block {
    flex: 0 1 100px !important;
    max-width: 28vw !important;
  }
  .global-search-input {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
  .global-search-wrapper {
    max-height: 26px !important;
  }
}

/* ── Tiny screens (< 340px) — e.g. Galaxy Fold, iPhone SE ── */
@media (max-width: 340px) {
  .d-flex.align-items-center.justify-content-between.fw-light,
  .d-flex.align-items-center.fw-light {
    gap: 2px !important;
    padding: 4px 6px !important;
  }
  .block.block-system.block-system-branding-block img {
    max-height: 16px !important;
  }
  .block.block-global-search.block-global-search-block {
    flex: 0 1 80px !important;
    max-width: 25vw !important;
  }
  .global-search-input {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }
  .global-search-wrapper {
    max-height: 24px !important;
  }
  .cart-block--summary__icon .beo {
    width: 18px !important;
    height: 18px !important;
  }
  .nav-link[href="/user/login"] {
    width: 22px !important;
    height: 22px !important;
    background-size: 14px 14px !important;
  }
}

/* Center modal dialog vertically and horizontally */
.modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 1rem);
  margin: 0.5rem auto;
}

/* Ensure modal content is properly sized */
.modal-content {
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

/* Center carousel images */
.carousel-item img {
  margin: 0 auto;
  display: block;
}

/* Optional: Adjust modal body padding */
.modal-body {
  padding: 1rem;
}

/* Ensure carousel maintains proper sizing */
#bootstrap-basic-image-gallery-carousel--2 {
  max-height: 80vh;
}

.carousel-inner {
  display: flex;
  align-items: center;
}

/* Product card image background: white instead of blue */
.product .product-image.bg-primary {
  background-color: #ffffff !important;
  color: #333 !important;
}
.product .product-image.bg-primary .product-hover {
  background-color: rgba(3, 167, 224, 0.85);
  color: #fff;
}