/* =========================================================
   Barevna Founarna - mobilni vysouvaci filtr
   Desktop zustava beze zmeny. Na mobilu pouziva existujici
   .fn-model-filter-sidebar, tedy nekopiruje formulare ani stav.
   v: 20260711mfd1
   ========================================================= */

@media (max-width: 767px) {
  /* Anti-flash mezistav aktivovany kratkym skriptem v HEAD. */
  html.fn-mobile-filter-drawer-pending:not(.fn-mobile-filter-drawer-ready)
  body:not(.type-product) #content .fn-model-filter-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 2147482000 !important;
    width: min(88vw, 360px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(calc(-100% - 20px), 0, 0) !important;
  }

  html.fn-mobile-filter-drawer-pending:not(.fn-mobile-filter-drawer-ready)
  body:not(.type-product) #content .fn-model-filter-layout,
  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-model-filter-layout {
    display: block !important;
  }

  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-model-filter-main {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-model-filter-sidebar.fn-mobile-filter-drawer {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 2147482000 !important;
    display: block !important;
    width: min(88vw, 360px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 10px max(18px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 0 !important;
    border-right: 1px solid rgba(188, 207, 231, .92) !important;
    border-radius: 0 24px 24px 0 !important;
    background:
      radial-gradient(circle at 4% 5%, rgba(255, 197, 31, .18), transparent 13rem),
      radial-gradient(circle at 96% 36%, rgba(100, 191, 242, .18), transparent 15rem),
      radial-gradient(circle at 20% 96%, rgba(233, 88, 170, .1), transparent 14rem),
      linear-gradient(155deg, #fffdf5 0%, #f7fcff 54%, #fff8fc 100%) !important;
    box-shadow: 24px 0 60px rgba(15, 23, 42, .24) !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(calc(-100% - 24px), 0, 0) !important;
    transition:
      transform .28s cubic-bezier(.22, .75, .2, 1),
      opacity .2s ease,
      visibility 0s linear .28s !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-model-filter-sidebar.fn-mobile-filter-drawer.is-drawer-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition:
      transform .28s cubic-bezier(.22, .75, .2, 1),
      opacity .2s ease,
      visibility 0s !important;
  }

  /* Puvodni horni mobilni harmonika uz neni potreba. */
  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-mobile-filter-drawer > .fn-model-filter-mobile-toggle {
    display: none !important;
  }

  /* Sekce musi byt dostupne i kdyz je panel vizualne zavreny. */
  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-mobile-filter-drawer > .fn-model-filter-section {
    display: block !important;
    margin: 8px 0 0 !important;
  }

  .fn-mobile-filter-drawer-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin: 0 -10px 10px;
    padding: max(13px, env(safe-area-inset-top)) 12px 12px 16px;
    border-bottom: 1px solid rgba(191, 208, 230, .76);
    border-radius: 0 24px 18px 0;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 22px rgba(28, 42, 64, .07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .fn-mobile-filter-drawer-kicker {
    display: block;
    margin: 0 0 2px;
    color: #8a6810;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .fn-mobile-filter-drawer-title {
    display: block;
    color: #111827;
    font-size: 20px;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -.025em;
  }

  .fn-mobile-filter-drawer-subtitle {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 750;
  }

  .fn-mobile-filter-drawer-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(189, 207, 230, .9);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #f2f7ff);
    color: #1f3554;
    box-shadow: 0 7px 18px rgba(31, 53, 84, .1);
    cursor: pointer;
  }

  .fn-mobile-filter-drawer-close::before,
  .fn-mobile-filter-drawer-close::after {
    position: absolute;
    width: 17px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }

  .fn-mobile-filter-drawer-close::before { transform: rotate(45deg); }
  .fn-mobile-filter-drawer-close::after { transform: rotate(-45deg); }

  .fn-mobile-filter-drawer-close:focus-visible,
  .fn-mobile-filter-tab:focus-visible {
    outline: 3px solid rgba(100, 191, 242, .48);
    outline-offset: 2px;
  }

  .fn-mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147481900;
    display: block;
    border: 0;
    background: rgba(15, 23, 42, .48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  html.fn-mobile-filter-drawer-open .fn-mobile-filter-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease, visibility 0s;
  }

  html.fn-mobile-filter-drawer-open,
  html.fn-mobile-filter-drawer-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .fn-mobile-filter-tab {
    position: fixed;
    top: 56%;
    left: 0;
    z-index: 2147481800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 50px;
    min-height: 43px;
    padding: 7px 9px 7px 7px;
    border: 1px solid rgba(182, 204, 231, .94);
    border-left: 0;
    border-radius: 0 15px 15px 0;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(240, 248, 255, .98));
    color: #1f3554;
    box-shadow: 8px 8px 24px rgba(15, 23, 42, .16);
    box-sizing: border-box;
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .fn-mobile-filter-tab-label {
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.01em;
  }

  .fn-mobile-filter-tab-icon {
    position: relative;
    display: grid;
    align-content: center;
    gap: 3px;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .fn-mobile-filter-tab-icon > i {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .fn-mobile-filter-tab-icon > i::after {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #f7fbff;
    content: "";
    transform: translateY(-50%);
  }

  .fn-mobile-filter-tab-icon > i:nth-child(1)::after,
  .fn-mobile-filter-tab-icon > i:nth-child(3)::after { left: 3px; }
  .fn-mobile-filter-tab-icon > i:nth-child(2)::after { right: 3px; }

  .fn-mobile-filter-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ffc51f;
    color: #111827;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    box-sizing: border-box;
  }

  .fn-mobile-filter-tab-count[hidden] { display: none !important; }

  .fn-mobile-filter-hint {
    position: fixed;
    top: calc(56% - 64px);
    left: 10px;
    z-index: 2147481850;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(280px, calc(100vw - 24px));
    padding: 9px 12px;
    border: 1px solid rgba(198, 211, 230, .94);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    color: #233653;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 850;
    opacity: 0;
    transform: translate3d(-8px, 5px, 0);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
  }

  .fn-mobile-filter-hint::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(255, 197, 31, .28), rgba(100, 191, 242, .24));
    color: #4338a0;
    content: "\2192";
    font-size: 18px;
    font-weight: 950;
  }

  .fn-mobile-filter-hint.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  html.fn-mobile-filter-drawer-open .fn-mobile-filter-tab,
  html.fn-mobile-filter-drawer-open .fn-mobile-filter-hint {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 767px) {
  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-model-filter-sidebar.fn-mobile-filter-drawer {
    border-right-color: rgba(86, 101, 122, .9) !important;
    background:
      radial-gradient(circle at 5% 5%, rgba(255, 197, 31, .12), transparent 13rem),
      radial-gradient(circle at 95% 36%, rgba(100, 191, 242, .12), transparent 15rem),
      linear-gradient(155deg, #171b22 0%, #1a2028 56%, #1d1b22 100%) !important;
    box-shadow: 24px 0 64px rgba(0, 0, 0, .55) !important;
  }

  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-mobile-filter-drawer > .fn-model-filter-section {
    border-color: rgba(75, 89, 108, .82) !important;
    background: rgba(31, 37, 45, .92) !important;
  }

  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-mobile-filter-drawer .fn-model-filter-section-title,
  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-mobile-filter-drawer label,
  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-mobile-filter-drawer .filter-label,
  html.fn-mobile-filter-drawer-ready
  body:not(.type-product) #content .fn-mobile-filter-drawer .filter-count {
    color: #f7f9fc !important;
  }

  .fn-mobile-filter-drawer-header {
    border-bottom-color: rgba(76, 91, 111, .82);
    background: rgba(24, 29, 36, .94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  }

  .fn-mobile-filter-drawer-kicker { color: #ffd96a; }
  .fn-mobile-filter-drawer-title { color: #f8fafc; }
  .fn-mobile-filter-drawer-subtitle { color: #b8c1d0; }

  .fn-mobile-filter-drawer-close {
    border-color: rgba(86, 102, 125, .95);
    background: linear-gradient(145deg, #252c36, #1b2129);
    color: #f4f7fb;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
  }

  .fn-mobile-filter-tab {
    border-color: rgba(82, 100, 124, .96);
    background: linear-gradient(145deg, rgba(35, 42, 52, .98), rgba(25, 30, 38, .98));
    color: #f4f7fb;
    box-shadow: 8px 8px 26px rgba(0, 0, 0, .42);
  }

  .fn-mobile-filter-tab-icon > i::after { background: #202731; }

  .fn-mobile-filter-hint {
    border-color: rgba(82, 100, 124, .96);
    background: rgba(31, 37, 46, .97);
    color: #f1f5f9;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fn-mobile-filter-drawer,
  .fn-mobile-filter-backdrop,
  .fn-mobile-filter-hint {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}