/*
 * Vibben – mobilnavigation 2026-10
 * Håll Flatsomes mobilheader i dokumentflödet, visa off-canvasmenyn ovanpå
 * headern och matcha sökrutan med Vibbens vita/plommonfärgade gränssnitt.
 * Ändrar inte desktop, WooCommerce eller menyernas länkar.
 */
@media (max-width:849px) {
  /* Låt logomenyn stanna högst upp på SIDAN, inte ovanpå sidinnehållet vid scroll. */
  html body #header.has-sticky.sticky-jump {
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }
  html body #header.has-sticky.sticky-jump > .header-wrapper,
  html body #header.has-sticky.sticky-jump > .header-wrapper.stuck {
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    transform:none !important;
    animation:none !important;
  }
  /* Ett öppet sidofält ska ligga framför header och sida, inte bakom dem. */
  html body .mfp-wrap.off-canvas {
    z-index:11050 !important;
  }
  /* Off-canvas-innehållet rullar oberoende av sidan och börjar med sökrutan. */
  html body .mfp-wrap.off-canvas #main-menu,
  html body .mfp-wrap.off-canvas #main-menu .sidebar-menu {
    box-sizing:border-box !important;
    max-width:100% !important;
  }
  html body #main-menu .nav-sidebar {
    padding-top:12px !important;
  }
  html body #main-menu li.header-search-form {
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:16px 18px 18px !important;
    background:#f6f5f5 !important;
    border-bottom:1px solid #e6e2e4 !important;
  }
  html body #main-menu .header-search-form-wrapper,
  html body #main-menu .searchform-wrapper,
  html body #main-menu form.searchform {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
  }
  html body #main-menu .searchform-wrapper {
    border:1px solid #d8cfd4 !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  html body #main-menu form.searchform .flex-row {
    display:flex !important;
    align-items:stretch !important;
    min-width:0 !important;
    height:48px !important;
    overflow:hidden !important;
    border-radius:9px !important;
  }
  html body #main-menu form.searchform .flex-col.flex-grow {
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  html body #main-menu input.search-field {
    box-sizing:border-box !important;
    display:block !important;
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 13px !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    color:#34212c !important;
    font-size:15px !important;
    font-weight:400 !important;
  }
  html body #main-menu input.search-field::placeholder {
    color:#737079 !important;
    opacity:1 !important;
  }
  html body #main-menu .ux-search-submit {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-left:1px solid #e6e2e4 !important;
    border-radius:0 !important;
    background:#fff !important;
    color:#681d3d !important;
    box-shadow:none !important;
  }
  html body #main-menu .ux-search-submit:hover,
  html body #main-menu .ux-search-submit:focus-visible {
    background:#f4eaf0 !important;
    color:#681d3d !important;
  }
  html body #main-menu .searchform-wrapper:focus-within {
    border-color:#86536b !important;
    box-shadow:0 0 0 2px rgba(104,29,61,.10) !important;
  }
  html body #main-menu .live-search-results {
    z-index:15 !important;
    background:#fff !important;
    color:#34212c !important;
    border-radius:0 0 10px 10px !important;
  }
}