.sb_header.sb_header {
  --sb-header-pattern-width: clamp(100px, 5vw, 72px);

  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sb_header.sb_header::before,
.sb_header.sb_header::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: var(--sb-header-pattern-width);
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: url("../svg/belarus_flag_pattern_transparent_cut_white.svg") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  pointer-events: none;
}

.sb_header.sb_header::before {
  left: 0 !important;
}

.sb_header.sb_header::after {
  right: 0 !important;
  transform: rotate(180deg) !important;
}

.sb_header.sb_header > * {
  position: relative;
  z-index: 3;
}

@media (max-width: 1520px) {
  .sb_header.sb_header::before,
  .sb_header.sb_header::after {
    display: none !important;
  }
}

.sb_pattern_block {
  background-color: #fff;
  background-image: url("../svg/belarus_flag_pattern.svg");
  background-position: left center;
  background-repeat: repeat-x;
  background-size: auto 100%;
}

/**
 * Sticky header
 *
 * Struktura w Elementorze:
 * 1. czerwony topbar: sb_header
 * 2. biały nagłówek: sb_header_main
 * 3. ornament: sb_pattern_block
 *
 * Sticky ustawiamy tutaj, nie w Motion Effects Elementora.
 */

header.elementor-location-header {
  position: sticky;
  z-index: 1000;
  top: calc(-1 * var(--sb-topbar-height, 0px));
}

.sb_header_main.sb_header_main {
  position: relative;
  z-index: 2;
  background-color: #fff;
}

.sb_pattern_block.sb_pattern_block {
  position: relative;
  z-index: 1;
  transform: translateY(var(--sb-pattern-shift, 0px));
}

@supports (animation-timeline: scroll()) {
  .sb_pattern_block.sb_pattern_block {
    animation-name: sb-pattern-hide-on-scroll;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0 var(--sb-topbar-height, 30px);
  }
}

@keyframes sb-pattern-hide-on-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

/* Nagłówek zatrzymuje się pod paskiem administratora WordPressa. */
body.admin-bar header.elementor-location-header {
  top: calc(
    var(--wp-admin--admin-bar--height, 32px) - var(--sb-topbar-height, 0px)
  );
}
/* Dynamiczna wartość koszyka: [sb_cart_total] */

.sb_header_cart_total {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 6px;
  background: #fff;
  color: var(--sb-color-secondary, #007c30);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

.sb_header_cart_total .woocommerce-Price-amount,
.sb_header_cart_total .woocommerce-Price-currencySymbol {
  color: inherit;
  font: inherit;
}