/* FoxiWorld V997 — one search field across the whole storefront and compact mobile purchase UI. */

/* The shared header is rendered on every public page, but older page bundles
   supplied competing form-control rules. This layer is the single visual source
   of truth for the storefront search field on desktop, tablet and phone. */
body:not(.admin-body) .fw-header .fw-search{
  box-sizing:border-box!important;
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr) auto!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:1px solid #cfe0d8!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(10,72,50,.055)!important;
  transform:none!important;
  transition:border-color .18s ease,box-shadow .18s ease!important;
}
body:not(.admin-body) .fw-header .fw-search:focus-within{
  border-color:#78b59b!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(9,126,83,.09),0 10px 28px rgba(10,72,50,.075)!important;
  transform:none!important;
}
body:not(.admin-body) .fw-header .fw-search__icon{
  box-sizing:border-box!important;
  position:relative!important;
  display:block!important;
  align-self:stretch!important;
  width:50px!important;
  height:auto!important;
  min-width:50px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#6c7f77!important;
  font-size:0!important;
  line-height:0!important;
  background:transparent!important;
}
body:not(.admin-body) .fw-header .fw-search__icon::before{
  content:""!important;
  position:absolute!important;
  left:18px!important;
  top:50%!important;
  width:11px!important;
  height:11px!important;
  border:1.7px solid currentColor!important;
  border-radius:50%!important;
  transform:translateY(-58%)!important;
}
body:not(.admin-body) .fw-header .fw-search__icon::after{
  content:""!important;
  position:absolute!important;
  left:29px!important;
  top:30px!important;
  width:6px!important;
  height:1.7px!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform:rotate(45deg)!important;
  transform-origin:left center!important;
}
body:not(.admin-body) .fw-header .fw-search input[type="search"]{
  box-sizing:border-box!important;
  display:block!important;
  align-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0 14px 0 2px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#24312c!important;
  font:500 14px/1.2 "DM Sans",sans-serif!important;
  text-overflow:ellipsis!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
body:not(.admin-body) .fw-header .fw-search input[type="search"]::placeholder{
  color:#7a857f!important;
  opacity:1!important;
}
body:not(.admin-body) .fw-header .fw-search input[type="search"]::-webkit-search-decoration,
body:not(.admin-body) .fw-header .fw-search input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none!important;
}
body:not(.admin-body) .fw-header .fw-search button[type="submit"]{
  box-sizing:border-box!important;
  align-self:stretch!important;
  min-width:94px!important;
  width:auto!important;
  height:auto!important;
  margin:-1px -1px -1px 0!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:0 17px 17px 0!important;
  background:linear-gradient(135deg,#ff711f,#ff5f13)!important;
  box-shadow:none!important;
  color:#fff!important;
  font:800 13px/1 "DM Sans",sans-serif!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transform:none!important;
}
body:not(.admin-body) .fw-header .fw-search button[type="submit"]:hover{
  background:linear-gradient(135deg,#ff7c2e,#f9550b)!important;
  box-shadow:none!important;
  transform:none!important;
}
body:not(.admin-body) .fw-header .fw-search button[type="submit"]:focus-visible{
  outline:3px solid rgba(255,100,25,.28)!important;
  outline-offset:2px!important;
}

@media(max-width:760px){
  body:not(.admin-body) .fw-header .fw-search{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    height:48px!important;
    border-radius:15px!important;
    box-shadow:0 6px 18px rgba(10,72,50,.045)!important;
  }
  body:not(.admin-body) .fw-header .fw-search__icon{
    width:42px!important;
    min-width:42px!important;
  }
  body:not(.admin-body) .fw-header .fw-search__icon::before{
    left:14px!important;
    width:10px!important;
    height:10px!important;
  }
  body:not(.admin-body) .fw-header .fw-search__icon::after{
    left:24px!important;
    top:27px!important;
    width:5px!important;
  }
  body:not(.admin-body) .fw-header .fw-search input[type="search"]{
    padding:0 8px 0 1px!important;
    font-size:13.5px!important;
  }
  body:not(.admin-body) .fw-header .fw-search button[type="submit"]{
    min-width:78px!important;
    margin:-1px -1px -1px 0!important;
    padding:0 14px!important;
    border-radius:0 15px 15px 0!important;
    font-size:12.5px!important;
  }

  /* The visible label remains honest (this action adds to cart), while the
     compact wording and explicit min-width prevent clipping on 320–430 px. */
  body.foxi-mobile-product .product-page.pd-showcase-yuup .pd-buy--showcase .pd-add{
    min-width:0!important;
    padding-inline:7px!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  body.foxi-mobile-product .product-page.pd-showcase-yuup .pd-buy--showcase .pd-add span{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    color:inherit!important;
    font-size:12.5px!important;
    line-height:1!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
}

@media(max-width:380px){
  body:not(.admin-body) .fw-header .fw-search input[type="search"]{font-size:13px!important}
  body:not(.admin-body) .fw-header .fw-search button[type="submit"]{
    min-width:72px!important;
    padding-inline:11px!important;
    font-size:12px!important;
  }
  body.foxi-mobile-product .product-page.pd-showcase-yuup .pd-buy--showcase .pd-add span{font-size:12px!important}
}

@media(prefers-reduced-motion:reduce){
  body:not(.admin-body) .fw-header .fw-search{transition:none!important}
}