/* =========================================================================
   Header search bar — custom pill design, replacing the default
   WordPress/WooCommerce search form look.

   Targets both possible sources so this applies regardless of which one
   your theme actually renders:
     - WooCommerce's default get_product_search_form() → .woocommerce-product-search
     - WordPress's default get_search_form()            → .search-form
   plus generic role="search" / input[type="search"] as a safety net.

   Desktop only — mobile already has its own search overlay (bottom nav).
   ========================================================================= */

@media (min-width: 783px) {

  form[role="search"],
  .woocommerce-product-search,
  .search-form {
    position: relative;
    display: flex !important;
    align-items: center;
    width: 100%;
    max-width: 340px;
    background: #fff;
    border: 1.5px solid var(--fmke-border, #F0E4D8);
    border-radius: 999px;
    padding: 4px 4px 4px 40px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  form[role="search"]:focus-within,
  .woocommerce-product-search:focus-within,
  .search-form:focus-within {
    border-color: var(--fmke-primary, #FF6A00);
    box-shadow: 0 0 0 3px rgba(255,106,0,.12);
  }

  /* Magnifying-glass icon, drawn with CSS only (no image request) */
  form[role="search"]::before,
  .woocommerce-product-search::before,
  .search-form::before {
    content: "";
    position: absolute; left: 14px; top: 50%;
    width: 15px; height: 15px; margin-top: -8px;
    border: 2px solid var(--fmke-muted, #767676);
    border-radius: 50%;
    box-sizing: border-box;
  }
  form[role="search"]::after,
  .woocommerce-product-search::after,
  .search-form::after {
    content: "";
    position: absolute; left: 25px; top: 50%;
    width: 7px; height: 2px; margin-top: 6px;
    background: var(--fmke-muted, #767676);
    transform: rotate(45deg);
    border-radius: 1px;
  }
  form[role="search"]:focus-within::before,
  .woocommerce-product-search:focus-within::before,
  .search-form:focus-within::before { border-color: var(--fmke-primary, #FF6A00); }
  form[role="search"]:focus-within::after,
  .woocommerce-product-search:focus-within::after,
  .search-form:focus-within::after { background: var(--fmke-primary, #FF6A00); }

  form[role="search"] input[type="search"],
  form[role="search"] input.search-field,
  .woocommerce-product-search input[type="search"],
  .woocommerce-product-search .search-field,
  .search-form input[type="search"],
  .search-form .search-field {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 8px 4px !important;
    font-size: 13.5px;
    color: var(--fmke-text, #1F3D2C);
    -webkit-appearance: none;
    appearance: none;
  }
  form[role="search"] input[type="search"]::placeholder,
  .woocommerce-product-search input[type="search"]::placeholder,
  .search-form input[type="search"]::placeholder { color: var(--fmke-muted, #767676); }
  /* remove native webkit "x" clear icon so it doesn't clash with our pill */
  form[role="search"] input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  form[role="search"] button[type="submit"],
  .woocommerce-product-search button[type="submit"],
  .search-form button[type="submit"],
  .search-form input[type="submit"] {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border: none !important;
    border-radius: 50% !important;
    background: var(--fmke-primary, #FF6A00) !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer;
    position: relative;
  }
  form[role="search"] button[type="submit"]::before,
  .woocommerce-product-search button[type="submit"]::before,
  .search-form button[type="submit"]::before,
  .search-form input[type="submit"]::before {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 12px; height: 12px; margin: -7px 0 0 -7px;
    border: 2px solid #fff; border-radius: 50%; box-sizing: border-box;
  }
  form[role="search"] button[type="submit"]::after,
  .woocommerce-product-search button[type="submit"]::after,
  .search-form button[type="submit"]::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 2px; margin: 3px 0 0 1px;
    background: #fff; transform: rotate(45deg); border-radius: 1px;
  }
  form[role="search"] button[type="submit"]:hover,
  .woocommerce-product-search button[type="submit"]:hover,
  .search-form button[type="submit"]:hover { background: var(--fmke-primary-dark, #CC5500) !important; }
}