/* ==========================================================================
   Forms — pill inputs, bordeaux focus ring
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: #fff;
  border: 1px solid rgba(27, 21, 18, .18);
  border-radius: var(--jl-r-pill);
  padding: 13px 18px;
  color: var(--jl-ink);
  font: 400 14px/1.4 var(--jl-sans);
  box-shadow: none;
  transition: border-color .2s ease;
}
textarea { border-radius: var(--jl-r-media); }
input:focus, textarea:focus, select:focus {
  border-color: var(--jl-bordeaux);
  box-shadow: none;
  outline: none;
}
/* Storefront draws a purple (#7f54b3) focus outline on links/buttons/inputs.
   Drop it for mouse/touch, but keep a brand-bordeaux ring for keyboard users
   (:focus-visible) so focus stays visible without the purple. */
a:focus, button:focus, select:focus, input:focus, textarea:focus,
.button:focus, .button.alt:focus,
input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus,
input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="password"]:focus, input[type="search"]:focus { outline: none; }

/* Links/buttons only — text inputs match :focus-visible on mouse focus too, and
   they already signal focus with the bordeaux border, so no ring there. */
a:focus-visible, button:focus-visible,
.button:focus-visible, .button.alt:focus-visible {
  outline: 2px solid var(--jl-bordeaux);
  outline-offset: 2px;
}
::placeholder { color: var(--jl-text-42); }