/* ========== Fixní max šířka webu (hlavička + obsah + patička) ========== */
:root {
  --site-max-width: 1200px;
  --site-side-padding: 16px;
}

/* Společné pravidlo pro běžné shoptet wrapery */
:where(
  header, .header, .site-header, .page-header, .top,
  main, #content, .content, .page, .page-wrap,
  .container, .container-inner, .wrapper, .site, .layout, .layout-wrapper,
  footer, .footer, .site-footer, .page-footer, #footer
) {
  box-sizing: border-box;
  max-width: var(--site-max-width) !important;
  width: min(100%, var(--site-max-width)) !important;
  margin-inline: auto !important;
  padding-inline: var(--site-side-padding);
}

/* Vnitřní „inner“ wrapy, které některé šablony mají */
:where(
  .header-inner, .nav-inner, .toolbar-inner,
  .content-inner, .main-inner,
  .footer-inner
) {
  box-sizing: border-box;
  max-width: var(--site-max-width) !important;
  width: min(100%, var(--site-max-width)) !important;
  margin-inline: auto !important;
  padding-inline: var(--site-side-padding);
}

/* Na širokých monitorech zmenšíme vnitřní padding (ať jsou okraje prázdné) */
@media (min-width: 1280px) {
  :where(
    header, .header, .site-header, .page-header, .top,
    main, #content, .content, .page, .page-wrap,
    .container, .container-inner, .wrapper, .site, .layout, .layout-wrapper,
    footer, .footer, .site-footer, .page-footer, #footer,
    .header-inner, .nav-inner, .toolbar-inner,
    .content-inner, .main-inner, .footer-inner
  ) {
    padding-inline: 0 !important;
  }
}

/* Prvky, které mají zůstat přes celou šířku (hero/banner apod.) dej jako .full-bleed */
.full-bleed {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}



/* ===== Sticky header zarovnání (jen když je aktivní) ===== */
@media (min-width: 992px){
  :where(
    header.is-sticky-active,
    .header.is-sticky-active,
    .site-header.is-sticky-active,
    .page-header.is-sticky-active,
    .top.is-sticky-active
  ){
    /* sticky element necháme přes celou šířku, ale vizuálně dorovnáme guttery */
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-left:  calc((100vw - var(--site-max-width)) / 2) !important;
    padding-right: calc((100vw - var(--site-max-width)) / 2) !important;
    box-sizing: border-box;
    z-index: 999;
  }

  /* uvnitř hlavičky – žádné dvojité odsazení */
  :where(
    header.is-sticky-active,
    .header.is-sticky-active,
    .site-header.is-sticky-active,
    .page-header.is-sticky-active,
    .top.is-sticky-active
  ) .container.navigation-wrapper{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-inline: auto;
    max-width: var(--site-max-width);
    width: min(100%, var(--site-max-width));
    box-sizing: border-box;
  }
}


/* ===== Mega-menu (menu-level-2) – omezit na max 1200 a vystředit ===== */
@media (min-width: 992px){
  /* samotný panel */
  .menu-level-2{
    box-sizing: border-box;
    /* ponecháme jeho původní positioning (absolute/fixed), jen ho vycentrujeme */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: min(100vw, var(--site-max-width)) !important;
    max-width: var(--site-max-width) !important;

    margin: 0 auto !important;
    padding-left:  var(--site-side-padding);
    padding-right: var(--site-side-padding);
    z-index: 1000; /* nad obsahem */
  }

  /* vnitřní layout: obrázek + text vedle sebe, ať nic nepřetéká */
  .menu-level-2 > li{
    box-sizing: border-box;
    max-width: 100%;
  }
  .menu-level-2 a.menu-image{
    display: inline-block;
    vertical-align: top;
    margin-right: 12px;
  }
  .menu-level-2 a.menu-image img{
    display: block;
    max-width: 140px;
    height: auto;
  }

  /* třetí úroveň necháme zalamovat do řádku a držet se šířky panelu */
  .menu-level-2 .menu-level-3{
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 6px;
    margin: 6px 0 0 0;
    padding: 0;
    max-width: 100%;
  }
  .menu-level-2 .menu-level-3 > li{
    list-style: none;
    white-space: nowrap;         /* nechceš-li čárky za položkami, můžeš je v HTML odstranit */
  }

  /* nulujeme případné bootstrapové/šablonové posuny */
  .menu-level-2{ margin-left: 0 !important; }
}

/* mobil/tablet <992px necháváme původní chování menu */