/* Barevná Founárna – anti-flash critical CSS
   Načítat jako první CSS v HEAD. Cíl: nenechat probliknout původní Shoptet header/search/menu. */

:root {
  --ff-af-text: #101827;
  --ff-af-muted: #667085;
  --ff-af-border: rgba(78, 91, 126, .13);
  --ff-af-yellow: #ffc928;
  --ff-af-yellow-2: #ffdd63;
  --ff-af-blue: #74c8ed;
  --ff-af-purple: #a993f6;
}

html.founarna-anti-flash .header-top,
.header-top {
  background:
    radial-gradient(circle at 42% 15%, rgba(112, 206, 226, .07), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(183, 151, 235, .07), transparent 22%),
    #fff;
}

html.founarna-anti-flash .header-bottom,
.header-bottom {
  border-top: 1px solid rgba(74, 82, 112, .08);
  border-bottom: 1px solid rgba(74, 82, 112, .09);
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 201, 40, .055), transparent 28%),
    linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
}

html.founarna-anti-flash #formSearchForm,
html.founarna-anti-flash #formSearchForm fieldset,
#formSearchForm,
#formSearchForm fieldset {
  box-sizing: border-box !important;
}

html.founarna-anti-flash #formSearchForm fieldset,
#formSearchForm fieldset {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 1px solid var(--ff-af-border) !important;
  background:
    radial-gradient(circle at 11% 45%, rgba(117, 206, 224, .16), transparent 32%),
    radial-gradient(circle at 88% 40%, rgba(169, 147, 246, .13), transparent 36%),
    linear-gradient(105deg, #fbfdff 0%, #f6fbff 52%, #f9f5ff 100%) !important;
  box-shadow: 0 8px 22px rgba(40, 51, 82, .07) !important;
}

html.founarna-anti-flash #formSearchForm .search-input,
#formSearchForm .search-input {
  min-width: 0 !important;
  padding-left: 58px !important;
  padding-right: 58px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ff-af-text) !important;
  text-overflow: ellipsis !important;
}

html.founarna-anti-flash #formSearchForm .search-input::placeholder,
#formSearchForm .search-input::placeholder {
  color: var(--ff-af-muted) !important;
}

html.founarna-anti-flash #formSearchForm .search-input-icon,
#formSearchForm .search-input-icon {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  left: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  overflow: hidden !important;
  border: 1px solid rgba(91, 151, 202, .20) !important;
  border-radius: 14px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8' stroke='%2324324d' stroke-width='2.15' stroke-linecap='round'/%3E%3Cpath d='M16.2 16.2L21 21' stroke='%2324324d' stroke-width='2.15' stroke-linecap='round'/%3E%3C/svg%3E") center / 21px 21px no-repeat,
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 46%),
    linear-gradient(145deg, rgba(223, 250, 250, .98), rgba(232, 238, 255, .94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 18px rgba(64, 112, 158, .10) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transform: translateY(-50%) !important;
}

html.founarna-anti-flash #formSearchForm .search-input-icon > *,
#formSearchForm .search-input-icon > *,
html.founarna-anti-flash #formSearchForm .search-input-icon::before,
#formSearchForm .search-input-icon::before,
html.founarna-anti-flash #formSearchForm .search-input-icon::after,
#formSearchForm .search-input-icon::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 992px) {
  html.founarna-anti-flash .header-top .search,
  .header-top .search {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 360px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  html.founarna-anti-flash #formSearchForm,
  #formSearchForm {
    width: min(430px, 100%) !important;
    max-width: 430px !important;
  }

  html.founarna-anti-flash #formSearchForm,
  html.founarna-anti-flash #formSearchForm fieldset,
  #formSearchForm,
  #formSearchForm fieldset {
    height: 50px !important;
    border-radius: 16px !important;
  }

  html.founarna-anti-flash #formSearchForm .search-input,
  #formSearchForm .search-input {
    height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  html.founarna-anti-flash .header-top .navigation-buttons,
  .header-top .navigation-buttons {
    align-items: center !important;
  }

  html.founarna-anti-flash .header-top .cart-count,
  .header-top .cart-count {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 178px !important;
    height: 50px !important;
    padding: 6px 16px 6px 10px !important;
    border: 1px solid rgba(78, 91, 126, .13) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 0% 50%, rgba(255, 201, 40, .18), transparent 44%),
      linear-gradient(145deg, #fffdf8, #f9f7ff) !important;
    box-shadow: 0 8px 22px rgba(40, 51, 82, .07) !important;
    color: var(--ff-af-text) !important;
    text-decoration: none !important;
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li,
  .navigation-in .menu-level-1 > li {
    --fm-accent: #6d5bd0;
    --fm-soft: rgba(109, 91, 208, .10);
    --fm-line: rgba(109, 91, 208, .28);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li:nth-child(1),
  .navigation-in .menu-level-1 > li:nth-child(1) {
    --fm-accent: #d05299;
    --fm-soft: rgba(208, 82, 153, .10);
    --fm-line: rgba(208, 82, 153, .28);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li:nth-child(2),
  .navigation-in .menu-level-1 > li:nth-child(2) {
    --fm-accent: #4ca7dc;
    --fm-soft: rgba(76, 167, 220, .11);
    --fm-line: rgba(76, 167, 220, .28);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li:nth-child(3),
  .navigation-in .menu-level-1 > li:nth-child(3) {
    --fm-accent: #efa82b;
    --fm-soft: rgba(239, 168, 43, .12);
    --fm-line: rgba(239, 168, 43, .30);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li:nth-child(4),
  .navigation-in .menu-level-1 > li:nth-child(4) {
    --fm-accent: #8067dc;
    --fm-soft: rgba(128, 103, 220, .10);
    --fm-line: rgba(128, 103, 220, .27);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li:nth-child(5),
  .navigation-in .menu-level-1 > li:nth-child(5) {
    --fm-accent: #31a987;
    --fm-soft: rgba(49, 169, 135, .11);
    --fm-line: rgba(49, 169, 135, .28);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li:nth-child(6),
  .navigation-in .menu-level-1 > li:nth-child(6) {
    --fm-accent: #ed7762;
    --fm-soft: rgba(237, 119, 98, .11);
    --fm-line: rgba(237, 119, 98, .28);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li:nth-child(n+7),
  .navigation-in .menu-level-1 > li:nth-child(n+7) {
    --fm-accent: #4d8fd1;
    --fm-soft: rgba(77, 143, 209, .10);
    --fm-line: rgba(77, 143, 209, .27);
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li > a,
  .navigation-in .menu-level-1 > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    margin: 8px 2px !important;
    padding: 0 15px 0 31px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: var(--ff-af-text) !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
  }

  html.founarna-anti-flash .navigation-in .menu-level-1 > li > a::before,
  .navigation-in .menu-level-1 > li > a::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--fm-accent) !important;
    box-shadow: 0 0 0 5px var(--fm-soft) !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 767px) {
  html.founarna-anti-flash .header-top .search,
  .header-top .search {
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 10070 !important;
    padding: 9px 10px 11px !important;
    background:
      radial-gradient(circle at 15% 0%, rgba(116, 200, 237, .12), transparent 42%),
      linear-gradient(100deg, rgba(255,255,255,.98), rgba(248,252,255,.98) 58%, rgba(249,247,255,.98)) !important;
    box-shadow: 0 10px 24px rgba(35, 47, 78, .10) !important;
  }

  html.founarna-anti-flash #formSearchForm,
  #formSearchForm,
  html.founarna-anti-flash #formSearchForm fieldset,
  #formSearchForm fieldset {
    width: 100% !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  html.founarna-anti-flash #formSearchForm .search-input,
  #formSearchForm .search-input {
    height: 46px !important;
    font-size: 14px !important;
  }
}