/* === FOAM ME / BLOCKSY HEADER CUSTOM ICONS === */

/* =========================
   SHARED ICON COLOR LOGIC
   Ikony biorą kolor z Blocksy:
   normal / transparent / sticky
========================= */

button.ct-header-search[data-id="search"]::before,
.ct-header-cart[data-id="cart"] .ct-cart-item .ct-icon-container::before,
button.ct-header-trigger[data-id="trigger"]::before,
.ct-header-account[data-id="account"] .ct-account-item::before {
  background-color: var(--theme-icon-color, var(--fm-header-icon-color)) !important;
}

button.ct-header-search[data-id="search"]:hover::before,
button.ct-header-search[data-id="search"]:focus-visible::before,
.ct-header-cart[data-id="cart"] .ct-cart-item:hover .ct-icon-container::before,
.ct-header-cart[data-id="cart"] .ct-cart-item:focus-visible .ct-icon-container::before,
button.ct-header-trigger[data-id="trigger"]:hover::before,
button.ct-header-trigger[data-id="trigger"]:focus-visible::before,
.ct-header-account[data-id="account"]:hover .ct-account-item::before,
.ct-header-account[data-id="account"] .ct-account-item:hover::before,
.ct-header-account[data-id="account"] .ct-account-item:focus-visible::before {
  background-color: var(--theme-icon-hover-color, var(--fm-header-icon-hover-color)) !important;
}

/* Transparent header — jasne ikony */
[data-transparent-row="yes"] button.ct-header-search[data-id="search"]::before,
button.ct-header-search[data-id="search"][data-transparent-row="yes"]::before,
[data-transparent-row="yes"] .ct-header-cart[data-id="cart"] .ct-cart-item .ct-icon-container::before,
.ct-header-cart[data-id="cart"][data-transparent-row="yes"] .ct-cart-item .ct-icon-container::before,
[data-transparent-row="yes"] button.ct-header-trigger[data-id="trigger"]::before,
button.ct-header-trigger[data-id="trigger"][data-transparent-row="yes"]::before,
[data-transparent-row="yes"] .ct-header-account[data-id="account"] .ct-account-item::before,
.ct-header-account[data-id="account"][data-transparent-row="yes"] .ct-account-item::before {
  background-color: #FFFBEE !important;
}

/* Transparent header hover */
[data-transparent-row="yes"] button.ct-header-search[data-id="search"]:hover::before,
button.ct-header-search[data-id="search"][data-transparent-row="yes"]:hover::before,
[data-transparent-row="yes"] .ct-header-cart[data-id="cart"] .ct-cart-item:hover .ct-icon-container::before,
.ct-header-cart[data-id="cart"][data-transparent-row="yes"] .ct-cart-item:hover .ct-icon-container::before,
[data-transparent-row="yes"] button.ct-header-trigger[data-id="trigger"]:hover::before,
button.ct-header-trigger[data-id="trigger"][data-transparent-row="yes"]:hover::before,
[data-transparent-row="yes"] .ct-header-account[data-id="account"]:hover .ct-account-item::before,
.ct-header-account[data-id="account"][data-transparent-row="yes"]:hover .ct-account-item::before {
  background-color: #FFFFFF !important;
}

/* Sticky / normalny header — ciemne ikony
   UWAGA: bez .ct-sticky-container, bo ona istnieje też przed sticky state */
[data-sticky*="yes"] button.ct-header-search[data-id="search"]::before,
button.ct-header-search[data-id="search"][data-sticky*="yes"]::before,
[data-sticky*="yes"] .ct-header-cart[data-id="cart"] .ct-cart-item .ct-icon-container::before,
.ct-header-cart[data-id="cart"][data-sticky*="yes"] .ct-cart-item .ct-icon-container::before,
[data-sticky*="yes"] button.ct-header-trigger[data-id="trigger"]::before,
button.ct-header-trigger[data-id="trigger"][data-sticky*="yes"]::before,
[data-sticky*="yes"] .ct-header-account[data-id="account"] .ct-account-item::before,
.ct-header-account[data-id="account"][data-sticky*="yes"] .ct-account-item::before,
[data-sticky="yes"] button.ct-header-search[data-id="search"]::before,
[data-sticky="yes"] .ct-header-cart[data-id="cart"] .ct-cart-item .ct-icon-container::before,
[data-sticky="yes"] button.ct-header-trigger[data-id="trigger"]::before,
[data-sticky="yes"] .ct-header-account[data-id="account"] .ct-account-item::before {
  background-color: #415733 !important;
}

/* Sticky hover */
[data-sticky*="yes"] button.ct-header-search[data-id="search"]:hover::before,
button.ct-header-search[data-id="search"][data-sticky*="yes"]:hover::before,
[data-sticky*="yes"] .ct-header-cart[data-id="cart"] .ct-cart-item:hover .ct-icon-container::before,
.ct-header-cart[data-id="cart"][data-sticky*="yes"] .ct-cart-item:hover .ct-icon-container::before,
[data-sticky*="yes"] button.ct-header-trigger[data-id="trigger"]:hover::before,
button.ct-header-trigger[data-id="trigger"][data-sticky*="yes"]:hover::before,
[data-sticky*="yes"] .ct-header-account[data-id="account"]:hover .ct-account-item::before,
.ct-header-account[data-id="account"][data-sticky*="yes"]:hover .ct-account-item::before {
  background-color: #2F3F25 !important;
}

/* =========================
   SEARCH / LUPKA
========================= */

button.ct-header-search[data-id="search"] > svg.ct-icon {
  display: none !important;
}

button.ct-header-search[data-id="search"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

button.ct-header-search[data-id="search"]::before {
  content: "";
  display: block;
  width: var(--fm-header-icon-size);
  height: var(--fm-header-icon-size);
  transition: background-color 0.2s ease;

  -webkit-mask: url("/wp-content/uploads/2026/05/MagnifyingGlass.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/05/MagnifyingGlass.svg") center / contain no-repeat;
}

/* =========================
   CART / KOSZYK
========================= */

.ct-header-cart[data-id="cart"] .ct-cart-item .ct-icon-container > svg {
  display: none !important;
}

.ct-header-cart[data-id="cart"] .ct-cart-item .ct-icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ct-header-cart[data-id="cart"] .ct-cart-item .ct-icon-container::before {
  content: "";
  display: block;
  width: var(--fm-header-icon-size);
  height: var(--fm-header-icon-size);
  transition: background-color 0.2s ease;

  -webkit-mask: url("/wp-content/uploads/2026/05/Tote.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/05/Tote.svg") center / contain no-repeat;
}

.ct-header-cart[data-id="cart"] .ct-dynamic-count-cart {
  z-index: 2;
}

/* =========================
   HAMBURGER
========================= */

button.ct-header-trigger[data-id="trigger"] > svg.ct-icon {
  display: none !important;
}

button.ct-header-trigger[data-id="trigger"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

button.ct-header-trigger[data-id="trigger"]::before {
  content: "";
  display: block;
  width: 24px;
  height: 18px;
  transition: background-color 0.2s ease;

  -webkit-mask: url("/wp-content/uploads/2026/05/Hamburger.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/05/Hamburger.svg") center / contain no-repeat;
}

/* =========================
   ACCOUNT / USER
========================= */

.ct-header-account[data-id="account"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ct-header-account[data-id="account"] .ct-account-item .ct-label {
  display: none !important;
}

.ct-header-account[data-id="account"] .ct-account-item > svg.ct-icon {
  display: none !important;
}

.ct-header-account[data-id="account"] .ct-account-item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: var(--fm-header-icon-size) !important;
  height: var(--fm-header-icon-size) !important;
  min-width: var(--fm-header-icon-size) !important;
  min-height: var(--fm-header-icon-size) !important;

  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.ct-header-account[data-id="account"] .ct-account-item::before {
  content: "";
  display: block;
  width: var(--fm-header-icon-size);
  height: var(--fm-header-icon-size);
  transition: background-color 0.2s ease;

  -webkit-mask: url("/wp-content/uploads/2026/05/User.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/05/User.svg") center / contain no-repeat;
}