/* ===== TTM GLOBAL HEADER STYLES ===== */

/* Hide Flatsome's bottom nav bar on DESKTOP only (mobile uses it for search) */
@media (min-width: 850px) {
  #wide-nav.header-bottom { display:none !important; }
}

/* Hide old yellow shipping banner globally (WPCode cache) */
div[style*="background-color: rgb(231, 194, 0)"],
section[style*="background-color: rgb(231, 194, 0)"] {
  display: none !important;
}

/* ===== HEADER MAIN - ONE LINE LAYOUT ===== */
.header-main { padding:10px 0 !important; border-bottom:none !important; }
.header-main .header-inner { min-height:auto !important; align-items:center !important; }

/* Logo: restore proper size */
#logo img { max-height:55px !important; }

/* Force ALL nav items + search + cart into ONE line */
.header-main .header-nav-main.nav-right {
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:0 !important;
}

/* Nav menu items: clean text, no icons, aligned center */
.header-nav-main .menu-item .ux-menu-icon { display:none !important; }
.header-nav-main .menu-item a.nav-top-link {
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:0.3px !important;
  color:#333 !important;
  padding:10px 14px !important;
  text-transform:uppercase !important;
  transition:color .2s !important;
  white-space:nowrap !important;
}
.header-nav-main .menu-item a.nav-top-link:hover { color:#f5c518 !important; }

/* SHOP link - pill button style CTA */
.header-nav-main .menu-item:first-child a.nav-top-link {
  background:#f5c518 !important;
  color:#1a1a1a !important;
  font-weight:700 !important;
  padding:8px 20px !important;
  border-radius:8px !important;
  transition:all .2s !important;
}
.header-nav-main .menu-item:first-child a.nav-top-link:hover {
  background:#e6b800 !important;
  color:#1a1a1a !important;
}

/* ===== SEARCH BAR - compact, rounded, lupa inside ===== */
.header-search-form {
  margin-left:8px !important;
}
.header-search-form .searchform-wrapper,
.header-search-form .ux-search-box,
.header-search-form .searchform {
  border-radius:8px !important;
}
.header-search-form .ux-search-box {
  border:1.5px solid #ddd !important;
  border-radius:8px !important;
  background:#f9f9f9 !important;
  transition:border-color .2s, background .2s !important;
  overflow:visible !important;
}
.header-search-form .ux-search-box:focus-within {
  border-color:#f5c518 !important;
  background:#fff !important;
}
.header-search-form .ux-search-box .flex-row {
  align-items:center !important;
}
.header-search-form input.search-field {
  background:transparent !important;
  border:none !important;
  font-size:13px !important;
  padding:8px 12px !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  color:#333 !important;
  width:180px !important;
  min-width:140px !important;
}
.header-search-form input.search-field::placeholder {
  color:#aaa !important;
  font-size:13px !important;
}
/* Lupa: subtle icon inside the field, no button bg */
.header-search-form button.ux-search-submit.submit-button.secondary.button,
.header-main .header-search-form .ux-search-submit,
button.ux-search-submit.button.secondary {
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 10px !important;
  min-width:auto !important;
  height:36px !important;
  cursor:pointer !important;
  color:#aaa !important;
}
.header-search-form button.ux-search-submit.button i,
.header-search-form .ux-search-submit i,
.header-search-form .ux-search-submit .icon-search {
  color:#aaa !important;
  font-size:15px !important;
  transition:color .2s !important;
}
.header-search-form button.ux-search-submit.button:hover,
.header-search-form .ux-search-submit:hover {
  background:transparent !important;
  background-color:transparent !important;
}
.header-search-form .ux-search-submit:hover i,
.header-search-form .ux-search-submit:hover .icon-search {
  color:#f5c518 !important;
}

/* ===== CART BUTTON - compact, rounded ===== */
.header-main .cart-item { margin-left:8px !important; }
.header-cart-link.button,
a.header-cart-link {
  background:#1a1a1a !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:8px 18px !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transition:background .2s !important;
  height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  line-height:1 !important;
}
.header-cart-link.button:hover,
a.header-cart-link:hover {
  background:#333 !important;
}
.header-cart-link .icon-shopping-basket,
.header-cart-link .cart-icon {
  font-size:14px !important;
  color:#fff !important;
}
.header-cart-link .header-cart-title {
  font-size:13px !important;
}
/* Cart count badge (Flatsome uses data-icon-label pseudo-element) */
.header-cart-link .cart-count,
.cart-icon .cart-count,
.header-cart-link i[data-icon-label]::after,
i.icon-shopping-basket[data-icon-label]::after {
  background:#f5c518 !important;
  color:#1a1a1a !important;
  font-size:10px !important;
  font-weight:700 !important;
  min-width:18px !important;
  height:18px !important;
  line-height:18px !important;
  border-radius:50% !important;
}

/* ===== LIVE SEARCH RESULTS ===== */
/* Ensure search wrappers don't clip the dropdown */
.header-search-form,
.header-search-form-wrapper,
.searchform-wrapper,
.header-main .flex-right,
.header-main .header-nav-main {
  overflow:visible !important;
}

.live-search-results {
  position:absolute !important;
  top:100% !important;
  right:0 !important;
  left:auto !important;
  width:450px !important;
  max-height:500px !important;
  overflow-y:auto !important;
  border-radius:12px !important;
  box-shadow:0 12px 40px rgba(0,0,0,0.15) !important;
  border:1px solid #eee !important;
  background:#fff !important;
  z-index:99999 !important;
  margin-top:4px !important;
}
.autocomplete-suggestions {
  max-height:480px !important;
  overflow-y:auto !important;
}
.autocomplete-suggestion {
  padding:10px 14px !important;
  border-bottom:1px solid #f5f5f5 !important;
}
.autocomplete-suggestion:hover {
  background:#fafafa !important;
}
/* Live search: EUR price bigger, USD smaller */
.autocomplete-suggestion .amount {
  font-size:15px !important;
  font-weight:700 !important;
  color:#1a1a1a !important;
}
.autocomplete-suggestion .tt-dual-price {
  font-size:12px !important;
  font-weight:600 !important;
}

@media (max-width: 849px) {
  .live-search-results {
    width:calc(100vw - 20px) !important;
    left:10px !important;
    right:10px !important;
    position:fixed !important;
  }
}

/* ===== TOPBAR ===== */
.header-top { min-height:30px !important; }

/* Login icon */
.header-top .account-item .nav-top-link span::before {
  content:"\e901" !important;
  font-family:"fl-icons" !important;
  margin-right:6px !important;
  font-size:12px !important;
}

/* Order Tracking link hover */
.header-top a[href*="orders"]:hover {
  color:#f5c518 !important;
}

/* ===== MOBILE (max-width: 849px - Flatsome breakpoint) ===== */
@media (max-width: 849px) {

  /* Topbar: clean mobile style */
  .header-top { min-height:0 !important; padding:6px 0 !important; }

  /* Hide the Order Tracking custom image icon on mobile, replace with emoji */
  .header-top .ux-menu-icon,
  .header-top img.ux-menu-icon,
  .header-top .menu-item .ux-menu-icon {
    display:none !important;
  }

  /* Add package emoji before Order Tracking text on mobile */
  .header-top .menu-item a.nav-top-link::before {
    content:"📦 " !important;
    font-size:12px !important;
  }

  /* Style mobile topbar nav links */
  .header-top .nav-top a,
  .header-top .mobile-nav a,
  .header-top .menu-item a { font-size:12px !important; color:#ccc !important; }

  /* Fix mobile search: input must fill full width, 16px prevents iOS zoom */
  .header-search-form input.search-field,
  .header-bottom input.search-field,
  input.search-field {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:16px !important;
  }
  /* Clean search wrapper - keep overflow visible for live search */
  .header-bottom .searchform-wrapper.ux-search-box,
  .header-bottom .header-search-form .ux-search-box {
    border:1.5px solid #ddd !important;
    border-radius:10px !important;
    background:#f9f9f9 !important;
    overflow:visible !important;
  }
  .header-bottom .searchform-wrapper,
  .header-bottom .header-search-form,
  .header-bottom .header-search-form-wrapper {
    overflow:visible !important;
  }
  .header-bottom form.searchform {
    border:none !important;
  }
  .header-bottom .ux-search-submit {
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  /* Mobile live search dropdown */
  .header-bottom .live-search-results {
    position:absolute !important;
    width:100% !important;
    left:0 !important;
    right:0 !important;
    z-index:99999 !important;
  }

  /* Let Flatsome handle its own mobile header (hamburger + search + cart) */
  .header-main .header-nav-main.nav-right {
    flex-wrap:wrap !important;
  }

  /* Mobile logo smaller */
  #logo img { max-height:38px !important; }

  /* Mobile search bar in bottom header */
  .header-bottom .search-form .search-field {
    border-radius:8px !important;
    font-size:14px !important;
  }

  /* Mobile cart button: more compact, keep dark style */
  .header-cart-link.button,
  a.header-cart-link {
    padding:6px 12px !important;
    font-size:12px !important;
    height:32px !important;
    border-radius:6px !important;
  }
  .header-cart-link .header-cart-title { font-size:12px !important; }

  /* Keep cart badge yellow on mobile */
  .header-cart-link i[data-icon-label]::after,
  i.icon-shopping-basket[data-icon-label]::after {
    min-width:16px !important;
    height:16px !important;
    line-height:16px !important;
    font-size:9px !important;
  }

  /* Mobile menu sidebar: match site style */
  #main-menu .nav-sidebar li a {
    font-size:15px !important;
    padding:12px 16px !important;
  }
}