/* =====================================================================================
   Header, top bar and menu - matched to the Shopify theme (announcement-bar + header sections)
   Loaded after custom.css.
   ===================================================================================== */

/* ---------- announcement (top) bar ---------- */
#top-bar.header-top {
  background: #121212;
  height: 45px;
  min-height: 45px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#top-bar.header-top>.flex-row.container {
  height: 44px;
  max-width: 1500px;
  padding: 0 35px;
}

#top-bar .flex-col {
  height: 44px;
}

#top-bar .nav,
#top-bar .html_topbar_left,
#top-bar .osr-top-bar-slider {
  width: 100%;
  height: 44px;
  margin: 0;
}

/* before the script builds the bar (or with scripts blocked) show only the first message, centred */
#top-bar .osr-top-bar-slider .slider:not(.flickity-enabled)>.osr-top-bar-slide:not(:first-child) {
  display: none;
}

#top-bar .osr-top-bar-slider .slider:not(.flickity-enabled)>.osr-top-bar-slide:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  text-align: center;
}

#top-bar .osr-top-bar-slider .osr-top-bar-slide p {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

/* the bar the script builds */
.osr-announce {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  width: 100%;
  color: #ffffff;
}

.osr-announce__btn {
  flex: 0 0 44px;
  width: 44px;
  height: 38px;
  margin: 0;
  padding: 1px 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.osr-announce__btn:hover {
  color: #ffffff;
}

.osr-announce__btn svg {
  display: block;
  width: 12px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.osr-announce__track {
  position: relative;
  flex: 1 1 auto;
  height: 44px;
  overflow: hidden;
}

.osr-announce__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.osr-announce__msg.is-active {
  opacity: 1;
  visibility: visible;
}

/* ---------- header box ---------- */
#header .header-inner {
  width: calc(100% - 100px);
  max-width: 1400px;
  margin: 25px auto 0;
  height: 78px;
  padding: 0 !important;
  border: 2px solid #000000;
  border-radius: 10px;
  background: #ffffff;
}

#header .header-inner .flex-col.hide-for-medium.flex-left {
  padding-left: 10px;
}

#header .header-inner .flex-col.hide-for-medium.flex-right {
  padding-right: 12px;
}

@media (max-width: 1099px) {
  #header .header-inner {
    height: 70px;
  }
}

@media (max-width: 1199px) {
  #header .header-inner {
    width: calc(100% - 100px);
    height: 58px;
  }
}

/* ---------- menu ---------- */
#header .header-nav.nav>li>a.nav-top-link {
  padding: 12px 27px 12px 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.6px;
  text-transform: none;
  color: #000000;
}

#header .header-nav.nav>li>a.nav-top-link {
  position: relative;
}

/* one consistent chevron (Shopify look) instead of the icon font arrow */
#header .header-nav.nav>li>a.nav-top-link .icon-angle-down {
  display: none;
}

#header .header-nav.nav>li.menu-item-has-children>a.nav-top-link::after,
#header .header-nav.nav>li.has-dropdown>a.nav-top-link::after,
#header .header-nav.nav>li.osr-mega-menu-item>a.nav-top-link::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid #000000;
  border-bottom: 1.6px solid #000000;
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.2s ease;
}

#header .header-nav.nav>li.active>a.nav-top-link::after,
#header .header-nav.nav>li:hover>a.nav-top-link::after,
#header .header-nav.nav>li.osr-mm-active>a.nav-top-link::after {
  transform: translateY(-25%) rotate(225deg);
}

#header .header-nav.nav>li {
  margin: 0;
}

/* ---------- right-hand icons: search / account / cart (44px hit areas like Shopify) ---------- */
#header .header-inner .header-nav-main.nav-right>li>a.nav-top-link,
#header .header-inner .header-nav-main.nav-right>li>a.header-cart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #000000;
}

#header .header-inner .header-nav-main.nav-right .icon-search,
#header .header-inner .header-nav-main.nav-right .icon-user {
  font-size: 20px;
}

#header .header-inner .header-nav-main.nav-right .icon-shopping-bag,
#header .header-inner .header-nav-main.nav-right .icon-shopping-cart {
  font-size: 24px;
}

#header .header-inner .header-divider {
  display: none;
}

/* ---------- "Get in touch" button ---------- */
#header .header-inner .header-button-1 {
  margin-left: 8px;
}

#header .header-inner .header-button-1 .button,
#header .header-inner .header-button-1 a.button {
  min-height: 54px;
  margin: 0;
  padding: 10px 20px;
  background: #000000;
  color: #cdd949;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--heading), 'agenda', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

#header .header-inner .header-button-1 .button:hover {
  background: #121212;
  color: #cdd949;
  opacity: 0.9;
}

@media (max-width: 1099px) {
  #header .header-inner .header-button-1 .button {
    min-height: 46px;
    padding: 6px 16px;
    font-size: 20px;
  }
}

@media (max-width: 1199px) {
  #header .header-inner .header-button-1 {
    display: none;
  }
}

/* =====================================================================================
   Mega menu panels + dropdowns (Shopify: .mega-menu__content, About Us dropdown)
   ===================================================================================== */
.osr-custom-mega-menu-wrapper,
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown,
#header .header-nav>li.menu-item-design-full-width>.nav-dropdown,
#header .nav>li.menu-item-design-full-width>.nav-dropdown,
#header .header-nav>li.menu-item-design-container>.nav-dropdown,
#header .nav>li.menu-item-design-container>.nav-dropdown,
#header .header-nav>li:has(.nav-dropdown > ul > li:nth-child(3))>.nav-dropdown,
#header .nav>li:has(.nav-dropdown > ul > li:nth-child(3))>.nav-dropdown {
  top: 100% !important;
  border: 2px solid #000000 !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

/* the invisible bridge that keeps the panel open must not sit over the menu row */
.osr-custom-mega-menu-wrapper::before,
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown::before,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown::before {
  top: -12px !important;
  height: 12px !important;
}

/* Shop All: 5 equal columns, 20px gap */
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown>ul,
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown>ul,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown {
  gap: 20px !important;
}

/* column headings: agenda 24px, blue, title case (Shopify .osr-mega-menu-child-link) */
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown>ul>li>a,
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown>li>a,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown>ul>li>a,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown>li>a {
  font-size: 24px !important;
  line-height: 34px !important;
  font-weight: 700 !important;
  font-family: var(--heading), 'agenda', sans-serif !important;
  text-transform: none !important;
  color: #004f95 !important;
  letter-spacing: 0.6px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  border: 0 !important;
}

/* links: 14px / 24px black, 5px padding, no divider lines */
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown ul.sub-menu li,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown ul.sub-menu li {
  margin: 0 !important;
  border: 0 !important;
}

#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown ul.sub-menu li a,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown ul.sub-menu li a {
  font-size: 14px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  letter-spacing: 0.6px !important;
  padding: 5px 0 !important;
  border: 0 !important;
  text-transform: none !important;
}

#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown ul.sub-menu li a:hover,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown ul.sub-menu li a:hover {
  color: #000000 !important;
  text-decoration: underline !important;
  transform: none !important;
}

/* About Us: small dropdown with a black border and hard shadow */
#header .header-nav>li.menu-item-has-children:not(:first-child):not(.osr-mega-menu-item):not(.header-search-dropdown) {
  position: relative !important;
}

#header .header-nav>li.menu-item-has-children:not(:first-child):not(.osr-mega-menu-item):not(.header-search-dropdown)>.nav-dropdown-default {
  top: calc(100% + 14px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 150px;
  padding: 10px 0 !important;
  background: #ffffff;
  border: 2px solid #000000 !important;
  border-radius: 10px !important;
  box-shadow: 2px 2px 0 #000000 !important;
  transform: none !important;
}

#header .header-nav>li.menu-item-has-children:not(:first-child):not(.osr-mega-menu-item):not(.header-search-dropdown)>.nav-dropdown-default::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
  background: transparent;
}

#header .header-nav>li.menu-item-has-children:not(:first-child):not(.osr-mega-menu-item):not(.header-search-dropdown)>.nav-dropdown-default::after {
  display: none !important;
}

#header .header-nav>li.menu-item-has-children:not(:first-child):not(.osr-mega-menu-item):not(.header-search-dropdown)>.nav-dropdown-default li {
  margin: 0;
  border: 0;
}

#header .header-nav>li.menu-item-has-children:not(:first-child):not(.osr-mega-menu-item):not(.header-search-dropdown)>.nav-dropdown-default li a {
  padding: 8px 20px !important;
  border: 0 !important;
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  line-height: 20.8px !important;
  text-transform: none !important;
}

#header .header-nav>li.menu-item-has-children:not(:first-child):not(.osr-mega-menu-item):not(.header-search-dropdown)>.nav-dropdown-default li a:hover {
  text-decoration: underline;
  background: transparent;
}

/* ---- Shop All / mega panels: padding like Shopify (30px top, 20px sides) ---- */
.osr-custom-mega-menu-wrapper,
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown {
  padding: 30px 20px !important;
}

#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>.nav-dropdown {
  padding-bottom: 50px !important;
}

/* leftover Flatsome notch arrows under the menu items */
#header .header-nav>li.has-dropdown::after,
#header .header-nav>li.menu-item-has-children::after,
#header .nav-dropdown-has-arrow>li.has-dropdown::after {
  display: none !important;
}

/* ---- Shop By Collection cards (Shopify .osr-header-megamenu-* rules) ---- */
.osr-mega-menu-item-name {
  margin: 0;
  padding-bottom: 10px;
  font-size: 36px;
  line-height: 46px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: #121212;
}

.osr-mega-menu-item-description {
  margin: 0 0 15px !important;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.6px;
  color: #121212;
}

.osr-mega-menu-item-btn {
  padding: 10px;
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.6px;
}

.osr-header-megamenu-2-block-tag {
  top: 15px;
  left: 15px;
  transform: none;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 25.2px;
  font-weight: 400;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.osr-header-megamenu-2-block-card {
  border-radius: 20px;
  box-shadow: 5px 4px 0 0 #000000;
}

.osr-mega-menu-bottom-btn {
  padding: 12px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0.6px;
  border-radius: 6px;
}

/* Shop All panel is a <ul class="nav-dropdown">: beat the older padding:0 rule for that element */
#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown {
  padding: 30px 20px 50px !important;
  box-sizing: border-box !important;
}

/* Flatsome's little arrow under an open menu item */
#header .header-nav>li.has-dropdown::before,
#header .header-nav>li.menu-item-has-children::before,
#header .nav-dropdown-has-arrow>li.has-dropdown::before,
#header .header-nav-main>li.has-dropdown::before {
  display: none !important;
}

#header .header-nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown,
#header .nav>li:first-child.has-dropdown:not(.header-search-dropdown)>ul.nav-dropdown {
  padding-bottom: 40px !important;
}

/* =====================================================================================
   Mobile: top bar, header box, header icons and the Shopify-style drawer
   ===================================================================================== */
#header .header-nav>li>a.nav-top-link:hover span,
#header .header-nav>li.osr-mm-active>a.nav-top-link span {
  text-decoration: underline;
}

@media (max-width: 1200px) {
  #header .header-inner .header-button-1 .button span {
    display: none;
  }

  #header .header-inner .header-button-1 .button::after {
    content: '';
    width: 14px;
    height: 14px;
    background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 12 12 2M4.5 2H12v7.5' stroke='%23cdd949' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  }

  #header .header-inner .header-button-1 .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-height: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
  }
}

@media (max-width: 1199px) {

  /* the top bar showed nothing on mobile (both columns were hidden) */
  #top-bar.header-top .flex-col.hide-for-medium.flex-center {
    display: flex !important;
    width: 100%;
  }

  #top-bar.header-top .flex-col.show-for-medium.flex-grow {
    display: none !important;
  }

  #top-bar.header-top>.flex-row.container {
    padding: 0 12px;
  }

  #header .header-inner {
    width: calc(100% - 34px);
    padding: 0 6px !important;
  }

  #header .header-inner #logo img {
    width: 124px;
    max-height: none;
    height: auto;
  }

  /* burger: two clean thin lines like Shopify, an X while the drawer is open */
  #header .header-inner li.nav-icon>a i.icon-menu {
    display: none;
  }

  #header .header-inner li.nav-icon>a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  #header .header-inner li.nav-icon>a::before {
    content: '';
    width: 24px;
    height: 20px;
    background: no-repeat center / 24px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M1 4h22M1 10h22M1 16h22' stroke='%23121212' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  }

  html.osr-drawer-open #header .header-inner li.nav-icon>a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 1l18 18M21 1L3 19' stroke='%23121212' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  }

  /* header button becomes the small black square with a lime arrow */
  #header .header-inner .header-button-1 {
    display: block;
    margin: 0 0 0 4px;
  }
}

/* ---------- the drawer ---------- */
.osr-drawer {
  display: none;
  position: fixed;
  z-index: 99990;
  bottom: 2px;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  color: #121212;
  border: 2px solid #000000;
  border-radius: 10px;
  box-shadow: 2px 2px 0 #000000;
  font-size: 15px;
  letter-spacing: 0.6px;
}

.osr-drawer.is-open {
  display: flex;
}

@media (min-width: 1200px) {

  .osr-drawer,
  .osr-drawer.is-open {
    display: none !important;
  }
}

html.osr-drawer-open {
  overflow: hidden;
}

.osr-drawer__views {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.osr-drawer__view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: #ffffff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0.25s;
}

.osr-drawer__view.is-active {
  transform: none;
  visibility: visible;
}

.osr-drawer__view.is-behind {
  transform: translateX(-30%);
}

.osr-drawer__root {
  padding-top: 30px;
}

.osr-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 11px 30px;
  background: transparent;
  color: #121212;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
  letter-spacing: 0.6px;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}

.osr-drawer__root .osr-drawer__row {
  padding-right: 30px;
}

.osr-drawer__row svg {
  flex: 0 0 15px;
  width: 15px;
  height: 16px;
}

.osr-drawer__back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 26px 12px 30px;
  background: rgba(18, 18, 18, 0.04);
  color: #121212;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: none;
  text-align: left;
  cursor: pointer;
}

.osr-drawer__back svg {
  width: 15px;
  height: 16px;
}

.osr-drawer__all {
  display: block;
  padding: 14px 30px;
  background: rgba(18, 18, 18, 0.04);
  color: #121212;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-decoration: none;
}

.osr-drawer__cards {
  padding: 20px 16px 24px;
}

.osr-drawer__cards .osr-mega-menu-2-products {
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

.osr-drawer__cards .osr-mega-menu-2-item {
  flex-direction: column;
  align-items: stretch;
  padding: 14px;
}

.osr-drawer__cards .osr-mega-menu-2-item-left {
  width: 100%;
}

.osr-drawer__cards .osr-mega-menu-item-name {
  font-size: 30px;
  line-height: 36px;
}

.osr-drawer__cards .osr-header-megamenu-2-block-flex {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.osr-drawer__footer {
  flex: 0 0 auto;
  padding: 20px 30px;
  background: rgba(18, 18, 18, 0.03);
}

.osr-drawer__login {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  color: #121212;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-decoration: none;
}

.osr-drawer__social {
  display: flex;
  gap: 10px;
  padding-top: 10px;
}

.osr-drawer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ffffff;
  color: #121212;
  border-radius: 50%;
}

.osr-drawer__social svg {
  width: 16px;
  height: 16px;
}

/* ---- mobile: make the button + icons win over Flatsome's inline header styles ---- */
@media (max-width: 1199px) {

  #header .header-inner .header-button-1 .button,
  #header .header-inner .header-button-1 a.button {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    background: #000000 !important;
  }

  #header .header-inner .flex-right.show-for-medium .nav-top-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #000000 !important;
  }

  #header .header-inner .flex-right.show-for-medium .icon-search {
    font-size: 20px !important;
  }

  #header .header-inner .flex-right.show-for-medium .icon-shopping-bag,
  #header .header-inner .flex-right.show-for-medium .icon-shopping-cart {
    font-size: 24px !important;
  }
}

/* Flatsome's own .hide-for-medium/.show-for-medium switch is hardcoded to 850px in the PARENT
   theme's compiled CSS and cannot be edited there - between 850px and 1199px it was still showing
   the desktop nav row (Shop All / Shop By Collection / About Us) as a plain stacked list instead
   of the burger + drawer, because our custom 1200px breakpoint above only restyles the burger/drawer,
   it never controlled which block Flatsome actually renders. This forces the switch itself to
   match our 1200px breakpoint, scoped to the header only - every other hide-for-medium/show-for-medium
   use on the site (e.g. the top bar fix above) is untouched and keeps its own 1199px rule. */
@media (min-width: 850px) and (max-width: 1199px) {

  #header .header-inner .flex-col.hide-for-medium.flex-left,
  #header .header-inner .flex-col.hide-for-medium.flex-right {
    display: none !important;
  }

  #header .header-inner .flex-col.show-for-medium.flex-left,
  #header .header-inner .flex-col.show-for-medium.flex-right {
    display: flex !important;
  }
}

/* cards inside the drawer must not be wider than the drawer */
.osr-drawer__cards,
.osr-drawer__cards .osr-mega-menu-inner,
.osr-drawer__cards .osr-mega-menu-2-products,
.osr-drawer__cards .osr-mega-menu-2-item,
.osr-drawer__cards .osr-header-megamenu-2-block-flex {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.osr-drawer__cards {
  overflow: hidden;
}


/* =====================================================================================
   Main navigation dropdowns / mega menus open on CLICK only (class .osr-mm-active), never on hover
   or because the page is the current menu item
   ===================================================================================== */
@media (min-width: 1200px) {

  html body #header .header-nav-main.nav-left>li.has-dropdown.has-dropdown:not(.osr-mm-active)>.nav-dropdown,
  html body #header .header-nav-main.nav-left>li.has-dropdown.has-dropdown:not(.osr-mm-active)>.osr-custom-mega-menu-wrapper,
  html body #header .header-nav-main.nav-left>li.has-dropdown.has-dropdown:not(.osr-mm-active):hover>.nav-dropdown,
  html body #header .header-nav-main.nav-left>li.has-dropdown.has-dropdown:not(.osr-mm-active).active>.nav-dropdown,
  html body #header .header-nav-main.nav-left>li.has-dropdown.has-dropdown:not(.osr-mm-active).current-dropdown>.nav-dropdown,
  html body #header .header-nav-main.nav-left>li.has-dropdown.has-dropdown:not(.osr-mm-active)>.nav-dropdown:hover {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body #header .header-nav-main.nav-left>li.has-dropdown.osr-mm-active>.nav-dropdown,
  html body #header .header-nav-main.nav-left>li.has-dropdown.osr-mm-active>.osr-custom-mega-menu-wrapper {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* chevron / underline follow the open state, not hover or "current page" */
  html body #header .header-nav.nav>li.has-dropdown:not(.osr-mm-active):hover>a.nav-top-link::after,
  html body #header .header-nav.nav>li.has-dropdown:not(.osr-mm-active).active>a.nav-top-link::after,
  html body #header .header-nav.nav>li.has-dropdown:not(.osr-mm-active).current-dropdown>a.nav-top-link::after {
    transform: translateY(-75%) rotate(45deg);
  }

  html body #header .header-nav.nav>li.has-dropdown.osr-mm-active>a.nav-top-link::after {
    transform: translateY(-25%) rotate(225deg);
  }
}

/* open panels must never be clipped: Flatsome keeps max-height:0 until its own hover class is set */
html body #header .header-nav-main.nav-left>li.has-dropdown.osr-mm-active>.nav-dropdown,
html body #header .header-nav-main.nav-left>li.has-dropdown.osr-mm-active>.osr-custom-mega-menu-wrapper {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* ===== content must clear the floating header (header box ends ~148px desktop / ~128px mobile) ===== */
body.error404 #main,
body.search #main,
body.woocommerce-account #main,
body.post-type-archive-product #main,
body.page-template-default:not(.osr-cart-template):not(.woocommerce-checkout):not(.woocommerce-cart) #main {
  padding-top: 100px;
}

@media (max-width: 1199px) {

  body.error404 #main,
  body.search #main,
  body.woocommerce-account #main,
  body.post-type-archive-product #main,
  body.page-template-default:not(.osr-cart-template):not(.woocommerce-checkout):not(.woocommerce-cart) #main {
    padding-top: 85px;
  }

  .osr-contact-hero {
    padding-top: 140px !important;
  }

  .osr-landing-page>.osr-iwz-section:first-child,
  .osr-landing-page>section.osr-section:first-child {
    padding-top: 140px !important;
  }

  .osr-lp-flavor>.page-width:first-child {
    padding-top: 35px;
  }
}

/* =====================================================================================
   Header icons = Shopify's icons (filled search, filled account, bag) with Shopify's sizes (20 / 20 / 25px)
   ===================================================================================== */
#header .header-inner .nav-right>li>a>.icon-search::before,
#header .header-inner .nav-right>li>a>.icon-user::before,
#header .header-inner .nav-right>li>a>.icon-shopping-bag::before,
#header .header-inner .nav-right>li>a>.icon-shopping-cart::before {
  content: '';
  display: block;
  font-family: inherit;
  background: currentColor;
  -webkit-mask: var(--osr-hi) center / contain no-repeat;
  mask: var(--osr-hi) center / contain no-repeat;
}

#header .header-inner .nav-right>li>a>.icon-search {
  --osr-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='258 1141 32 32'%3E%3Cpath d='M289.688,1171.25 L281.429,1163.12 C283.591,1160.77 284.92,1157.67 284.92,1154.25 C284.92,1146.93 278.894,1141 271.46,1141 C264.026,1141 258,1146.93 258,1154.25 C258,1161.56 264.026,1167.49 271.46,1167.49 C274.672,1167.49 277.618,1166.38 279.932,1164.53 L288.224,1172.69 C288.629,1173.09 289.284,1173.09 289.688,1172.69 C290.093,1172.3 290.093,1171.65 289.688,1171.25'/%3E%3C/svg%3E");
}

#header .header-inner .nav-right>li>a>.icon-user {
  --osr-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3Cpath d='M12 13a8 8 0 0 0-8 8h16a8 8 0 0 0-8-8z'/%3E%3C/svg%3E");
}

#header .header-inner .nav-right>li>a>.icon-shopping-bag,
#header .header-inner .nav-right>li>a>.icon-shopping-cart {
  --osr-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M372,160V148A116.13,116.13,0,0,0,258.89,32c-1,0-1.92,0-2.89,0s-1.93,0-2.89,0A116.13,116.13,0,0,0,140,148v12H52a4,4,0,0,0-4,4V464a16,16,0,0,0,16,16H448a16,16,0,0,0,16-16V164a4,4,0,0,0-4-4Zm-40,0H180V149c0-41.84,33.41-76.56,75.25-77A76.08,76.08,0,0,1,332,148Z'/%3E%3C/svg%3E");
}

#header .header-inner .nav-right>li>a>.icon-search,
#header .header-inner .nav-right>li>a>.icon-user {
  width: 20px;
  height: 20px;
  font-size: 20px !important;
}

#header .header-inner .nav-right>li>a>.icon-search::before,
#header .header-inner .nav-right>li>a>.icon-user::before {
  width: 20px;
  height: 20px;
}

#header .header-inner .nav-right>li>a>.icon-shopping-bag,
#header .header-inner .nav-right>li>a>.icon-shopping-cart {
  width: 25px;
  height: 25px;
  font-size: 25px !important;
}

#header .header-inner .nav-right>li>a>.icon-shopping-bag::before,
#header .header-inner .nav-right>li>a>.icon-shopping-cart::before {
  width: 25px;
  height: 25px;
}

/* cart count bubble sits on the bag's corner and stays clear of the "Get in touch" button */
#header .header-inner .nav-right>li>a>.icon-shopping-bag[data-icon-label]::after {
  top: -8px;
  right: -8px;
  width: 17px;
  height: 17px;
  line-height: 17px;
  background: #cdd949;
  color: #000;
}

/* room between the icons and the "Get in touch" button (Shopify: 16px) */
#header .header-inner .header-button-1 {
  margin-left: 16px;
}

#header .header-inner .header-nav-main.nav-right>li.header-button-1 {
  margin-left: 16px !important;
}

/* =====================================================================================
   Header search: matched to the live Shopify stores own predictive search (verified against
   trymeloair.com's real /search/suggest response and its custom.css override 2026-10-01):
   - a bordered card (2px solid #000, 10px radius - the stores own override of Dawn's default
     .search-modal.modal__content), NOT a full-screen dark modal - the store also disables the
     dark backdrop (details[open] .modal-overlay{display:none}), so the rest of the page stays
     fully visible
   - a rounded search "pill" with a "Search" label above the typed text, a clear (x), a black
     round submit button, a plain close X outside the pill
   - two columns below: "Suggestions" (query-phrase completions, title-starts-with-query shown as
     <mark>typed</mark><span>rest</span> exactly like Shopify's own predictive-search markup, plus
     matching collection/category titles mixed in) + "Pages" stacked on the left (fixed width,
     matching Shopify's flex:0 0 26.4rem first column), "Products" (Flatsome's own existing
     live-search output) on the right
   - a "Search for '<query>'" button at the bottom with an arrow, like Shopify's own
     .predictive-search__item--term
   Applies the same way at every width (desktop AND the 1200px-down mobile header) -
   js/custom.js's initOsrMegaMenu() owns open/close for every li.header-search-dropdown on the
   page (there are two: the desktop header row and the mobile row), replacing Flatsome's own
   hover/tap dropdown entirely, so there is no media-query gate on visibility here.
   ===================================================================================== */
#header li.header-search-dropdown>.nav-dropdown {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  /* padding-top is a static fallback - js/custom.js's placeSearchPanel() overrides it with the
     headers real on-screen position (accounts for the announcement bar's height, sticky/scroll
     state, anything static CSS cannot know) the instant the panel opens */
  padding: 25px 50px 40px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 99996 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  /* Flatsome's own hover-driven .nav-dropdown-full skin (li.has-dropdown:hover, added by its
     mouseenter handler regardless of our click-only system) centers dropdowns with
     left:50% + transform:translateX(-50%) - cancel it, nothing above contests "transform" */
  transform: none !important;
  transition: opacity 0.2s ease !important;
}

#header li.header-search-dropdown.osr-mm-active>.nav-dropdown {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 1199px) {
  #header li.header-search-dropdown>.nav-dropdown {
    padding: 25px 17px 30px !important;
  }
}

/* the li itself defaults to shrink-to-fit content width as a flex item (list items do not
   stretch on the main axis the way a plain div would) - without this the card below collapses to
   the pill's own content width instead of filling the centered flex row */
#header li.header-search-dropdown>.nav-dropdown>li.header-search-form {
  flex: 1 1 auto !important;
  width: 100% !important;
  margin: 20px auto 0 auto;
}

/* the card itself - same max-width/border/radius as #header .header-inner so the two read as one
   continuous shape, and the exact border/radius trymeloair.com's own custom.css applies
   (.search-modal.modal__content{border-radius:10px;border:2px solid #000000}) */
#header li.header-search-dropdown .header-search-form-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.05);
  padding: 0px 10px;
}

/* close (X) button: a plain icon outside the pill, top-right of the card (no circle/background) -
   z-index needed because .searchform-wrapper below (position:relative, later in the DOM) would
   otherwise paint over this corner and silently absorb clicks aimed at it even though the icon
   renders visually on top - confirmed with document.elementFromPoint() the first time this was
   built, not assumed */
#header li.header-search-dropdown .osr-search-close {
  position: absolute;
  top: 24px;
  right: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #000000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

#header li.header-search-dropdown .osr-search-close svg {
  width: 18px;
  height: 18px;
}

/* the search "pill": a rounded, thin-bordered box around the input + submit button, with room
   reserved on the right so it never runs under the close X */
#header li.header-search-dropdown .searchform-wrapper {
  padding-right: 44px;
}

#header li.header-search-dropdown .searchform-wrapper .flex-row {
  align-items: center;
  /* border: 1.5px solid #cccccc;
  border-radius: 30px;
  padding: 4px 4px 4px 20px;
  background: #ffffff; */
}

/* the sr-only "Search for:" label, shown as the small caption sitting above the typed query -
   same visual role as the "Search" caption on the live store */
#header li.header-search-dropdown .searchform-wrapper label.screen-reader-text {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #808080;
  text-transform: none;
}

#header li.header-search-dropdown .searchform-wrapper .flex-col.flex-grow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#header li.header-search-dropdown .searchform-wrapper input.search-field {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 26px;
  box-shadow: none;
  width: calc(100% - 40px);
  height: auto;
}

/* a small gray round clear (x) button, shown once something is typed - inserted after the input
   by initOsrMegaMenu() in js/custom.js (no reliable native cross-browser equivalent to style) */
#header li.header-search-dropdown .osr-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 4px;
  padding: 0;
  background: #e8e8e8;
  color: #555555;
  border: 0;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  min-height: auto;
  min-width: auto;
  text-align: center;
}

#header li.header-search-dropdown .osr-search-clear.is-visible {
  display: flex;
}

#header li.header-search-dropdown .searchform-wrapper .ux-search-submit {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #000000;
  border: 0;
  border-radius: 0%;
  box-shadow: none;
  min-height: auto;
}

/* #header li.header-search-dropdown .searchform-wrapper .ux-search-submit:hover {
  background: #121212;
} */

#header li.header-search-dropdown .searchform-wrapper .ux-search-submit .icon-search {
  font-size: 17px;
}

/* =====================================================================================
   Two-column results, like the live store: "Suggestions"/"Pages" (left, fixed width) next to
   "Products" (right, flexible). Both .osr-search-suggest (inserted by js/custom.js) and
   .live-search-results (Flatsome's own output) are plain siblings of the pill row inside the
   same form - no DOM move needed, CSS grid areas place them regardless of source order.
   ===================================================================================== */
#header li.header-search-dropdown form.searchform {
  display: grid;
  grid-template-columns: 240px 1fr;
  column-gap: 32px;
  row-gap: 18px;
  grid-template-areas:
    "pill pill"
    "suggest products";
  align-items: start;
  max-width: 700px;
  margin: 0 auto;
}

#header li.header-search-dropdown form.searchform>.flex-row {
  margin: 0 auto;
  grid-area: pill;
  max-width: 700px;
  border: 1px solid;
  border-radius: 8px;
  margin-top: 10px;
  padding: 10px;
}

#header li.header-search-dropdown .osr-search-suggest {
  grid-area: suggest;
  display: none;
  margin: 0;
  min-width: 0;
}

#header li.header-search-dropdown .osr-search-suggest.is-visible {
  display: block;
}

@media (max-width: 767px) {
  #header li.header-search-dropdown form.searchform {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pill"
      "suggest"
      "products";
  }
}

#header li.header-search-dropdown .osr-search-suggest-group+.osr-search-suggest-group {
  margin-top: 20px;
}

#header li.header-search-dropdown .osr-search-suggest-label,
html body #header li.header-search-dropdown .live-search-results:has(.autocomplete-suggestions:not(:empty))::before {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: rgba(18, 18, 18, 0.7);
}

#header li.header-search-dropdown .osr-search-suggest-list {
  display: flex;
  flex-direction: column;
}

#header li.header-search-dropdown .osr-search-suggest-list a {
  padding: 8px 0;
  color: #121212;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}

#header li.header-search-dropdown .osr-search-suggest-list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* query-type suggestion: the typed part (mark) stays the lighter, regular-weight color; the
   completion (span) is the bold part - exactly Shopify's own
   .predictive-search__item-query-result rule (mark stays normal weight + muted, *:not(mark) bold) */
#header li.header-search-dropdown .osr-search-suggest-list a mark {
  background: transparent;
  color: rgba(18, 18, 18, 0.75);
  font-weight: 400;
}

#header li.header-search-dropdown .osr-search-suggest-list a span {
  font-weight: 700;
}

/* results: normal document flow (grid area "products"), with an uppercase "Products" label -
   Flatsome already renders this section position:relative (not an absolute dropdown) in this
   markup path, this just adds the heading/background the live store shows */
html body #header li.header-search-dropdown .live-search-results {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}

html body #header li.header-search-dropdown .live-search-results:has(.autocomplete-suggestions:not(:empty))::before {
  content: "Products";
  display: block;
}

html body #header li.header-search-dropdown .autocomplete-suggestions {
  background-color: #ffffff !important;
  box-shadow: none !important;
  display: block !important;
}

#header .autocomplete-suggestion .search-price {
  display: none;
}

#header .autocomplete-suggestion img {
  border-radius: 0px;
}


/* "Search for '<query>'" button - hidden until initOsrMegaMenu() (js/custom.js) adds
   .is-visible once the field has text. A button, not a link (same as Shopify's own
   .predictive-search__item--term) - JS navigates on click. */
#header li.header-search-dropdown .osr-search-forx {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: #000000;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 0px;
  padding-right: 0px;
}

#header li.header-search-dropdown .osr-search-forx.is-visible {
  display: flex;
}

#header li.header-search-dropdown .osr-search-forx-arrow {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

/* lock page scroll while the search panel is open (same pattern as html.osr-drawer-open) */
html.osr-search-open {
  overflow: hidden;
}