/* Branded Parcels — header categories dropdown + search bar.
   Loads sitewide. Sits as a new strip above your existing Kadence
   header (see includes/header.php for why it's positioned this way).

   Every icon color/fill and the search input's background are pinned
   with !important. Kadence/WooCommerce both ship their own generic
   `input[type=search]` and `button[type=submit]` styling, and on a real
   site that CSS can win a specificity fight against a plain SVG
   `stroke="currentColor"` attribute or an unguarded background rule —
   which is exactly what made the search button render as a blank red
   circle and the input pick up a faint background pattern the first
   time around. Pinning colors directly on our own classes makes this
   immune to whatever else is loaded on the page. */

.bp-hdr{
  background:linear-gradient(180deg,#f8f9fc,#f1f3f8);border-bottom:1px solid rgba(15,23,42,.07);padding:16px 0;
  position:sticky;top:var(--bp-category-bar-height, 0px);z-index:9999;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
  transition:box-shadow .2s ease
}
.bp-hdr.is-stuck{box-shadow:0 6px 20px rgba(15,23,42,.1)}
.bp-hdr *{box-sizing:border-box}
.bp-hdr-inner{display:flex;align-items:center;gap:14px}

/* Categories */
.bp-hdr-cats{position:relative;flex:none}
.bp-hdr-cats-toggle{
  display:flex;align-items:center;gap:9px;background:#fff!important;border:1px solid rgba(15,23,42,.09);
  border-radius:999px;padding:0 18px;height:50px;font-weight:400;font-size:13.5px;
  color:var(--bp-ink,#111827)!important;cursor:pointer;white-space:nowrap;font-family:inherit;
  box-shadow:0 1px 3px rgba(15,23,42,.07);transition:box-shadow .2s ease,border-color .2s ease
}
.bp-hdr-cats-toggle:hover{box-shadow:0 5px 16px rgba(15,23,42,.12);border-color:rgba(15,23,42,.16)}
.bp-hdr-hamburger{width:18px;height:18px;flex:none;fill:none!important;stroke:var(--bp-blue,#123b8f)!important;stroke-width:2!important;stroke-linecap:round!important}
.bp-hdr-caret{width:14px;height:14px;flex:none;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;transition:transform .2s ease}
.bp-hdr-cats-toggle.is-open .bp-hdr-caret{transform:rotate(180deg)}

.bp-hdr-cats-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:270px;max-height:70vh;overflow-y:auto;
  background:#fff!important;border:1px solid rgba(15,23,42,.08);border-radius:14px;
  box-shadow:0 16px 40px rgba(15,23,42,.16);padding:10px;display:none;z-index:9998
}
.bp-hdr-cats-menu.is-open{display:block}
.bp-hdr-cats-menu a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;color:var(--bp-ink,#111827)!important;font-size:14.5px;font-weight:400;text-decoration:none;transition:background-color .15s ease}
.bp-hdr-cats-menu a:hover{background:#f4f6fb!important;color:var(--bp-ink,#111827)!important}
.bp-hdr-cats-icon{width:30px;height:30px;border-radius:8px;background:#f4f6fb;display:flex;align-items:center;justify-content:center;flex:none;color:var(--bp-blue,#123b8f)}
.bp-hdr-cats-icon svg{width:17px;height:17px}
.bp-hdr-cats-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--bp-muted,#667085);padding:11px 10px 5px}
.bp-hdr-cats-divider{height:1px;background:rgba(15,23,42,.08);margin:6px 4px}

.bp-hdr-cats-store{background:linear-gradient(90deg,rgba(201,162,39,.08),transparent)}
.bp-hdr-cats-icon-store{background:rgba(201,162,39,.14);color:var(--bp-gold,#c9a227)}
.bp-hdr-cats-label-main{display:flex;align-items:center;gap:7px}
.bp-hdr-cats-tag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--bp-gold,#c9a227);padding:2px 7px;border-radius:5px}
.bp-hdr-cats-sub{display:block;font-size:11.5px;color:var(--bp-muted,#667085);font-weight:400;margin-top:1px}

.bp-hdr-cats-menu a.bp-hdr-cats-all{border-top:1px solid rgba(15,23,42,.08);margin-top:6px;padding-top:13px;color:var(--bp-red,#d71920)!important;font-weight:600}
.bp-hdr-cats-menu a.bp-hdr-cats-all .bp-hdr-cats-icon{background:rgba(215,25,32,.08);color:var(--bp-red,#d71920)}
.bp-hdr-cats-empty{margin:0;padding:10px 14px;font-size:13px;color:var(--bp-muted,#667085)}

/* Search — one connected pill: icon + input + button, all inside a
   single elevated shell, so it reads as one control rather than
   several floating pieces. */
.bp-hdr-search-group{flex:1;display:flex;align-items:center;gap:10px;min-width:0}

.bp-hdr-search{
  flex:1;display:flex;align-items:stretch;background:#fff!important;border:1.5px solid rgba(15,23,42,.09);
  border-radius:999px;height:50px;min-width:0;overflow:hidden;
  box-shadow:0 3px 14px rgba(15,23,42,.08);
  transition:box-shadow .2s ease,border-color .2s ease
}
.bp-hdr-search:focus-within{border-color:var(--bp-blue,#123b8f);box-shadow:0 5px 20px rgba(18,59,143,.18)}

.bp-hdr-search-icon{width:19px;height:19px;margin:auto 0 auto 20px;flex:none;fill:none!important;stroke:#9aa1ab!important;stroke-width:2!important;stroke-linecap:round!important}

.bp-hdr-search-input{
  flex:1;min-width:0;border:0!important;outline:0;font-size:15px;font-family:inherit;
  background:#fff!important;background-image:none!important;
  -webkit-appearance:none;appearance:none;
  color:var(--bp-ink,#111827)!important;padding:0 14px;height:100%
}
.bp-hdr-search-input::-webkit-search-cancel-button,
.bp-hdr-search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.bp-hdr-search-input::placeholder{color:#9aa1ab!important;opacity:1}

.bp-hdr-search-submit{
  flex:none;height:100%;border:0!important;background:var(--bp-red,#d71920)!important;
  display:flex;align-items:center;gap:8px;padding:0 24px;cursor:pointer;
  font-weight:700!important;font-size:13.5px;letter-spacing:.03em;font-family:inherit;
  transition:background-color .2s ease
}
.bp-hdr-search-submit:hover{background:#bb131a!important}
.bp-hdr-search-submit-icon{width:17px;height:17px;flex:none;fill:none!important;stroke:#fff!important;stroke-width:2.4!important;stroke-linecap:round!important}
.bp-hdr-search-submit-label{color:#fff!important;line-height:1}

.bp-hdr-camera-btn{
  flex:none;width:50px;height:50px;border-radius:50%;background:#fff!important;border:1px solid rgba(15,23,42,.09);
  display:flex;align-items:center;justify-content:center;color:var(--bp-ink,#111827)!important;
  box-shadow:0 1px 3px rgba(15,23,42,.07);transition:box-shadow .2s ease,background-color .2s ease
}
.bp-hdr-camera-btn:hover{box-shadow:0 5px 16px rgba(15,23,42,.12);background:#f7f8fb!important}
.bp-hdr-camera-btn svg{width:19px;height:19px;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linejoin:round!important}

@media(max-width:700px){
  .bp-hdr{padding:12px 0}
  .bp-hdr-cats-toggle span{display:none}
  .bp-hdr-cats-toggle{padding:0 13px;height:46px}
  .bp-hdr-search{height:46px}
  .bp-hdr-search-icon{margin-left:14px}
  .bp-hdr-search-submit{padding:0 16px}
  .bp-hdr-search-submit-label{display:none}
  .bp-hdr-camera-btn{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  .bp-hdr *{transition-duration:.001ms!important}
}