@media (max-width: 480px){

  /* FORCE the form layout (beats responsive-480.css) */
  html.is-home .hero__cta form#hero-search.hero-search{
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* INPUT: transparent, 3px white border, square, white text */
  html.is-home .hero__cta form#hero-search.hero-search #heroSearchInput{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: #fff !important;
    caret-color: #fff !important;

    border: 3px solid #fff !important;
    border-radius: 0 !important;
    outline: none !important;

    padding: 0 14px !important;
    box-shadow: none !important;

    -webkit-appearance: none !important;
    appearance: none !important;
  }

  html.is-home .hero__cta form#hero-search.hero-search #heroSearchInput::placeholder{
    color: rgba(255,255,255,.85) !important;
  }

  /* BUTTON: make sure it’s not hidden by responsive-480.css */
  html.is-home .hero__cta form#hero-search.hero-search .hero-search__btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    color: #fff !important;

    border: 3px solid #fff !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 480px){

  /* ✅ MOBILE: remove the extra search-icon square */
  html.is-home .hero__cta form#hero-search.hero-search .hero-search__btn{
    display: none !important;
  }

  /* optional: remove useless gap since button is gone */
  html.is-home .hero__cta form#hero-search.hero-search{
    gap: 0 !important;
  }

  /* keep your input styling (optional width control) */
  html.is-home .hero__cta form#hero-search.hero-search #heroSearchInput{
    width: 70vw !important; /* change if you want */
  }
}
@media (max-width: 480px){

  /* ===== Center text vertically + horizontally inside BOTH boxes ===== */

  /* INPUT: center placeholder/text */
  html.is-home .hero__cta form#hero-search.hero-search #heroSearchInput{
    height: 48px !important;                /* match the button height */
    line-height: 48px !important;           /* vertical centering for input text */
    text-align: center !important;          /* horizontal centering */
    padding: 0 !important;                  /* remove side padding so it’s truly centered */
  }

  /* Button: match search box style + centered label */
  html.is-home .hero__cta a.btn.btn--primary{
    width: 70vw !important;
    height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    color: #fff !important;

    border: 3px solid #fff !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    text-decoration: none !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }
@media (max-width: 480px){

  /* kill any old "inject text" tricks */
  html.is-home .hero__cta a.btn.btn--primary{
    font-size: 12px !important;   /* ensures it’s not 0 */
  }
  html.is-home .hero__cta a.btn.btn--primary::after{
    content: none !important;
  }

}

}
@media (max-width: 480px){

  /* Karla bold (what you called "klarna") inside BOTH boxes */
  html.is-home .hero__cta form#hero-search.hero-search #heroSearchInput,
  html.is-home .hero__cta a.btn.btn--primary{
    font-family: "Karla", sans-serif !important;
    font-weight: 700 !important;
  }

  /* Placeholder also Karla bold */
  html.is-home .hero__cta form#hero-search.hero-search #heroSearchInput::placeholder{
    font-family: "Karla", sans-serif !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 480px){

  /* add breathing room between the H2 block and the search bar */
  html.is-home .hero__cta .hero-mobile-copy{
    margin-bottom: 10px !important;   /* change to 6–16px */
  }

  /* (optional) if you prefer spacing on the search instead */
  /* html.is-home .hero__cta form#hero-search{ margin-top: 10px !important; } */
}
@media (max-width: 480px){

  /* ✅ Mobile-only text shadow for the 2 lines */
  html.is-home .hero-mobile-copy__p,
  html.is-home .hero-mobile-copy__h2{
    text-shadow:
      0 2px 10px rgba(0,0,0,.35),
      0 1px 2px rgba(0,0,0,.20);
  }

}