/* Kominy Mega Menu 1.2.7
 * Desktop full-bleed background implemented on the REAL theme flyout.
 * No JS overlay, no duplicated layer, no hover race.
 * The menu content keeps the theme's existing width and position.
 */

@media (min-width: 992px) {
  /* The active theme renders the module inside these wrappers. They must not
     clip the flyout background when it bleeds to the viewport edges. */
  .cs-container--navigation,
  .cs-container--navigation > .cs-container__inner,
  .cs-navigation,
  .cs-navigation__list--main,
  .cs-navigation__item--main {
    overflow: visible !important;
  }

  /* Real desktop flyout used by themes/kominy override.
     A huge white spread + horizontal clip extends ONLY the background to both
     viewport edges. It does not create a layer above the menu content. */
  .cs-navigation__item--main > .cs-navigation__flyout {
    overflow: visible !important;
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: 0 0 0 100vmax #fff !important;
    clip-path: inset(0 -100vmax);
  }

  /* Full-width red rule. Using +/-100vmax makes it independent of the
     navigation container's width or horizontal position. */
  .cs-navigation__item--main > .cs-navigation__flyout::after {
    content: "";
    position: absolute;
    left: -100vmax;
    right: -100vmax;
    bottom: 0;
    height: 3px;
    background: #e6382b;
    pointer-events: none;
    z-index: 5;
  }

  /* Keep actual flyout content above the decorative full-width rule. */
  .cs-navigation__item--main > .cs-navigation__flyout > .cs-navigation__list,
  .cs-navigation__item--main > .cs-navigation__flyout > .cs-navigation__extras {
    position: relative;
    z-index: 6;
  }

  /* Compatibility with the module's own non-overridden desktop template. */
  .nav-left .nav-item > .cs-navigation__flyout {
    overflow: visible !important;
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: 0 0 0 100vmax #fff !important;
    clip-path: inset(0 -100vmax);
  }

  .nav-left .nav-item > .cs-navigation__flyout::after {
    content: "";
    position: absolute;
    left: -100vmax;
    right: -100vmax;
    bottom: 0;
    height: 3px;
    background: #e6382b;
    pointer-events: none;
    z-index: 5;
  }

  .nav-left .nav-item > .cs-navigation__flyout > * {
    position: relative;
    z-index: 6;
  }

  .nav-left .nav-item:focus-within > .cs-navigation__flyout,
  .nav-left .nav-item.kh-mm-open > .cs-navigation__flyout {
    display: flex;
  }
}

/* Mobile behaviour from the stable 1.2.1 implementation. */
[data-kh-mobile-nav].kh-mm-ready .kh-mobile-nav__panel[hidden] {
  display: none !important;
}

[data-kh-mobile-nav].kh-mm-ready .kh-mobile-nav__item.is-open > .kh-mobile-nav__panel:not([hidden]) {
  display: block;
}

[data-kh-mobile-nav].kh-mm-ready .kh-mobile-nav__toggle .caret {
  transition: transform .18s ease;
}

[data-kh-mobile-nav].kh-mm-ready .kh-mobile-nav__item.is-open > .kh-mobile-nav__toggle .caret {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  [data-kh-mobile-nav].kh-mm-ready .kh-mobile-nav__toggle .caret {
    transition: none;
  }
}

/* 1.4.0 presentation features applied by front-1.7.0.js. These rules are
   additive and intentionally do not change the stable 1.2.7 flyout geometry. */
.kh-mm-front-bold { font-weight: 700 !important; }
.kh-mm-front-colored { color: var(--kh-mm-text-color) !important; }
.kh-mm-front-icon { display: inline-block; margin-right: .38em; line-height: 1; }
.kh-mm-front-badge {
  display: inline-block;
  margin-left: .5em;
  padding: .12em .55em;
  border-radius: 999px;
  background: var(--kh-mm-badge-color, #e6382b);
  color: #fff;
  font-size: .72em;
  font-weight: 700;
  line-height: 1.35;
  vertical-align: .12em;
  white-space: nowrap;
}
.kh-mm-front-desc {
  display: block;
  margin-top: .25em;
  color: #777;
  font-size: .82em;
  font-weight: 400;
  line-height: 1.25;
}
.kh-mm-front-separator { border-bottom: 1px dotted #d5d5d5; padding-bottom: .55em; margin-bottom: .35em; }

/* Do not let decoration spans inherit theme image/caret sizing rules. */
.kh-mm-front-icon,
.kh-mm-front-badge,
.kh-mm-front-desc { width: auto; height: auto; }

/* 1.7.3 — mobile theme-override compatibility.
 * Badge/icon decoration from 1.7.2 stays enabled. No layout offsets are
 * applied to the theme mobile drawer.
 * The theme uses its own off-canvas markup on mobile, so front-1.7.2.js can
 * decorate labels by configured name/trail when .kh-mobile-nav is absent. */
@media (max-width: 991.98px) {
  .kh-mm-front-badge {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    max-width: 42%;
    margin-left: .55em;
    padding: .16em .58em;
    font-size: .62em;
    line-height: 1.2;
    vertical-align: middle;
  }

  .kh-mm-front-icon { flex: 0 0 auto; }
  .kh-mm-front-desc { width: 100%; }

}

/* 1.7.4 — exact mobile drawer spacing fix based on the active theme markup.
 * IMPORTANT: no JS offsets, no negative margins, no transforms and no page
 * scrolling. We only normalize the top spacing of the ROOT mobile menu.
 * Nested panels/crumb navigation keep the theme's normal geometry. */
@media (max-width: 991.98px) {
  /* The mobile nav follows the header/topbar in the active theme. Any legacy
     top reservation on the nav itself creates the large empty area. */
  nav.kh-mobile-nav[data-kh-mobile-nav] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Apply the compact top spacing only while we are on the ROOT view, i.e.
     while the breadcrumb/back bar is hidden. This deliberately does not touch
     deeper category views. */
  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport {
    margin-top: 0 !important;
    padding-top: 16px !important;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* 1.7.5 — mobile drawer visual polish.
 * Pure CSS only. No DOM movement, no scroll manipulation and no desktop
 * changes. The theme's real mobile markup is used directly. */
@media (max-width: 991.98px) {
  /* Visually separate the utility/header row (close, logo, locale, account,
     cart) from the navigation content without recreating the old large gap. */
  .topbar:has(#closeMenu.active) {
    position: relative;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    box-shadow: 0 7px 18px rgba(17, 24, 39, .055);
  }

  /* The nav itself begins as a distinct section below the header. */
  nav.kh-mobile-nav[data-kh-mobile-nav] {
    background: #fff;
    border-top: 0 !important;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport {
    padding-top: 20px !important;
  }

  /* Root-level rows: more deliberate spacing and a soft, consistent divider.
     Nested levels keep the theme's existing density. */
  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item {
    margin: 0 18px;
    border-bottom: 1px solid #eceff2;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle,
  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__link {
    min-height: 64px;
    padding-left: 2px;
    padding-right: 2px;
    display: flex;
    align-items: center;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item:last-child {
    border-bottom-color: transparent;
  }

  /* Keep the disclosure arrow visually aligned with the row label. */
  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle {
    justify-content: space-between;
    gap: 12px;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle .caret {
    flex: 0 0 auto;
    opacity: .82;
  }

  /* Deeper levels get a proper navigation header instead of visually floating
     directly under the utility bar. */
  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    box-shadow: 0 5px 14px rgba(17, 24, 39, .045);
  }

  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden])
    .kh-mobile-nav__back {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden])
    .kh-mobile-nav__crumbs {
    min-width: 0;
    font-weight: 700;
    line-height: 1.25;
  }

  /* A subtle active/pressed state makes the drawer feel less static on touch. */
  nav.kh-mobile-nav[data-kh-mobile-nav] .kh-mobile-nav__toggle:active,
  nav.kh-mobile-nav[data-kh-mobile-nav] .kh-mobile-nav__link:active {
    background: #f7f8f9;
  }
}

/* 1.7.6 — mobile navigation redesign inspired by a clean retail/app drawer.
 * Pure CSS: no DOM movement, no scrolling hacks, no desktop changes. */
@media (max-width: 991.98px) {
  /* Utility header: clean and quiet, visually separate from navigation. */
  .topbar:has(#closeMenu.active) {
    background: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: none;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav] {
    --kh-mm-mobile-border: #dddddd;
    --kh-mm-mobile-soft: #f3f4f5;
    --kh-mm-mobile-text: #171717;
    --kh-mm-mobile-muted: #747474;
    background: #fff;
    color: var(--kh-mm-mobile-text);
  }

  /* ROOT LEVEL ----------------------------------------------------------- */
  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport {
    padding-top: 8px !important;
    background: #fff;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item {
    margin: 0 !important;
    border-bottom: 1px dashed var(--kh-mm-mobile-border) !important;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item:last-child {
    border-bottom: 1px dashed var(--kh-mm-mobile-border) !important;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle,
  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__link {
    min-height: 74px;
    width: 100%;
    padding: 0 28px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: var(--kh-mm-mobile-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle {
    justify-content: space-between;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport
    > .kh-mobile-nav__panel[data-kh-mobile-root]
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle .caret {
    flex: 0 0 auto;
    opacity: 1;
  }

  /* DEEPER LEVEL HEADER ------------------------------------------------- */
  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 25;
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 58px;
    background: var(--kh-mm-mobile-soft);
    border-top: 0;
    border-bottom: 1px dashed #d2d2d2;
    box-shadow: none;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden])
    .kh-mobile-nav__back {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #171717;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden])
    .kh-mobile-nav__back svg {
    width: 11px;
    height: 19px;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden])
    .kh-mobile-nav__crumbs {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden])
    .kh-mobile-nav__crumbs > :first-child {
    font-size: 18px;
    font-weight: 700;
  }

  /* LEVEL CONTENT ------------------------------------------------------- */
  nav.kh-mobile-nav[data-kh-mobile-nav] > .kh-mobile-nav__crumbbar:not([hidden])
    + .kh-mobile-nav__viewport {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: #fff;
  }

  /* “Wszystkie produkty” becomes a distinct muted utility row, just like in
     polished retail drawers. */
  nav.kh-mobile-nav[data-kh-mobile-nav] .kh-mobile-nav__link--all {
    min-height: 58px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 28px !important;
    margin: 0 !important;
    background: var(--kh-mm-mobile-soft) !important;
    border-bottom: 1px solid #e6e6e6;
    color: var(--kh-mm-mobile-muted) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
  }

  /* Every nested category/product row uses one consistent rhythm. */
  nav.kh-mobile-nav[data-kh-mobile-nav]
    .kh-mobile-nav__panel:not([data-kh-mobile-root])
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item {
    margin: 0 !important;
    border-bottom: 1px dashed var(--kh-mm-mobile-border) !important;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    .kh-mobile-nav__panel:not([data-kh-mobile-root])
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle,
  nav.kh-mobile-nav[data-kh-mobile-nav]
    .kh-mobile-nav__panel:not([data-kh-mobile-root])
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__link {
    min-height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px !important;
    background: #fff;
    color: var(--kh-mm-mobile-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
  }

  nav.kh-mobile-nav[data-kh-mobile-nav]
    .kh-mobile-nav__panel:not([data-kh-mobile-root])
    > .kh-mobile-nav__list
    > .kh-mobile-nav__item
    > .kh-mobile-nav__toggle {
    justify-content: space-between;
  }

  /* Keep badge elegant inside the larger mobile rows. */
  nav.kh-mobile-nav[data-kh-mobile-nav] .kh-mm-front-badge {
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  /* Touch feedback: no geometry change. */
  nav.kh-mobile-nav[data-kh-mobile-nav] .kh-mobile-nav__toggle:active,
  nav.kh-mobile-nav[data-kh-mobile-nav] .kh-mobile-nav__link:active {
    background: #f6f6f6;
  }
}

/* 1.7.7 — subtle separator between the mobile utility header and ROOT menu.
 * Root view only. Deeper breadcrumb levels are intentionally untouched. */
@media (max-width: 991.98px) {
  nav.kh-mobile-nav[data-kh-mobile-nav]
    > .kh-mobile-nav__crumbbar[hidden]
    + .kh-mobile-nav__viewport {
    position: relative;
    border-top: 1px solid #e2e2e2 !important;
    box-shadow: inset 0 6px 0 #f3f4f5;
    padding-top: 16px !important;
  }
}