/* Fixní hlavička — smart fixed header for eshop-rychle templates. */

/* In-flow placeholder; the script gives it the header's height while fixed so the
   page content does not jump. */
#er-fixed-header-placeholder {
  height: 0;
}

/* No overflow clipping and no transform in the resting state — hover dropdowns
   inside the header must be able to overhang, and template modals rely on
   viewport-relative positioning. */
#er-fixed-header.er-fh--fixed {
  position: fixed;
  /* --er-fh-top is set by the script on product detail below #id-detail-anchor,
     where the template shows its own fixed anchor bar (z-index 1032, above us):
     the header then reveals BELOW that bar instead of colliding with it. */
  top: var(--er-fh-top, 0);
  /* Span the full viewport so the background and box-shadow reach the screen
     edges (no shadow visible at the sides). The script converts the container's
     offsets (margin + inline padding) into inline padding-left/right on this
     element, keeping the header content aligned with the in-flow layout. */
  left: 0;
  right: 0;
  z-index: var(--er-fh-z, 1030); /* above content, below template modal backdrop (1040) */
  background: var(--er-fh-bg, #fff); /* script detects the shop's real background */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition:
    transform var(--er-fh-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1),
    top var(--er-fh-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Opening the menu activates the template's #id-overlay (z-index 1040, catches
   pointer events). Natively the template lifts #eshop-menu to z-index 10401, but
   inside this wrapper's stacking context that lift cannot beat the overlay — so
   lift the wrapper itself while the pointer (or focus) is anywhere inside it.
   :hover stays true over the overhanging mega menu because it is a DOM descendant.
   1045 stays below the template modals (1050). */
#er-fixed-header.er-fh--fixed:hover,
#er-fixed-header.er-fh--fixed:focus-within {
  z-index: var(--er-fh-z-active, 1045);
}

/* Extra offset past -100% keeps the box-shadow out of view as well; the
   anchor-bar offset is compensated so the header hides fully even when its
   resting position is below the bar. */
#er-fixed-header.er-fh--fixed.er-fh--hidden {
  transform: translateY(calc(-100% - 16px - var(--er-fh-top, 0px)));
}

/* Breadcrumbs (`div > ol` in .content-header on category/product pages — the
   only <ol> in the header across the templates) belong to the page, not to the
   floating header — hide them while detached. At the top of the page the header
   is in normal flow and the breadcrumb shows as usual. The :has() rule removes
   the whole box including its padding; the plain-ol rule is the fallback for
   browsers without :has(). */
#er-fixed-header.er-fh--fixed .content-header div:has(> ol) {
  display: none;
}
#er-fixed-header.er-fh--fixed .content-header ol {
  display: none;
}

#er-fixed-header.er-fh--no-anim {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #er-fixed-header.er-fh--fixed {
    transition: none;
  }
}