/* ============================================================================
   HEADER SEARCH + DELIVERY/COLLECT WIDGET (TOPBAR1 → moved into the brand row,
   Director 2026-07-11). Two brand-row functions:
     · a real, exhaustive site-search FIELD in the cream brand row (desktop; off
       the homepage, which keeps its hero search) with an inline results dropdown;
     · a live delivery/collection widget — a compact "Receive by" countdown pill
       (ticking seconds + a depleting lime fuse) that expands to show HOME DELIVERY
       (order-within countdown → dispatch → receive-by, e-mailed when it ships) and
       COLLECT IN LEEDS — SAME DAY IF IN STOCK (call to check, we message when ready).
   Reuses the search index (site-search.js) + dispatch math (delivery-promise.js).
   Innovative-but-credible: brand teal/lime, tabular numerals, no glassmorphism.
   ============================================================================ */

/* ── brand-row search FIELD (desktop; mobile keeps the .hpp-search icon button) ── */
.hpp-bsearch { position: relative; flex: 1 1 auto; max-width: 560px; display: none; }
@media (min-width: 901px) { .hpp-bsearch { display: block; } }
/* homepage keeps its hero search — hide the brand-row field there (JS stamps html.hpp-home) */
@media (min-width: 901px) { html.hpp-home .hpp-bsearch { display: none; } }

.hpp-bsearch-field {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1.6px solid #d8ddd9; border-radius: 12px; padding: 11px 16px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.hpp-bsearch-field svg { flex: none; color: #0f5257; }
.hpp-bsearch-field:focus-within {
  border-color: #0f5257;
  box-shadow: 0 0 0 3px rgba(167, 205, 58, .34), 0 10px 26px rgba(10, 46, 54, .12);
}
.hpp-bsearch-input,
.hpp-bsearch-input:focus,
.hpp-bsearch-input:focus-visible {
  flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important;
  background: transparent !important; border-radius: 0 !important; padding: 0 !important; margin: 0;
  font: inherit; font-size: 15px; color: #10201f;
}
.hpp-bsearch-input::placeholder { color: #9aa2a0; }

/* results dropdown (reuses the site index; rendered inline under the field) */
.hpp-bsearch-results {
  position: absolute; top: calc(100% + 9px); left: 0; width: min(560px, calc(100vw - 28px));
  background: #FAF7F2; border: 1px solid #e6e0d6; border-radius: 14px;
  box-shadow: 0 28px 66px rgba(10, 46, 54, .30); overflow: hidden auto; max-height: 70vh;
  z-index: 200; display: none;
}
.hpp-bsearch-results.on { display: block; }
.hpp-sr-grp { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8a7f6f; padding: 12px 15px 5px; }
.hpp-sr-row { display: flex; align-items: center; gap: 11px; padding: 10px 15px; text-decoration: none; cursor: pointer; }
.hpp-sr-row.sel, .hpp-sr-row:hover { background: #0f5257; }
.hpp-sr-row.sel .hpp-sr-n, .hpp-sr-row:hover .hpp-sr-n { color: #FAF7F2; }
.hpp-sr-row.sel .hpp-sr-h, .hpp-sr-row:hover .hpp-sr-h { color: rgba(250, 247, 242, .72); }
.hpp-sr-row.sel .hpp-sr-pr, .hpp-sr-row:hover .hpp-sr-pr { background: rgba(250, 247, 242, .16); color: #FAF7F2; border-color: transparent; }
.hpp-sr-txt { flex: 1; min-width: 0; }
.hpp-sr-n { display: block; font-size: 14.5px; font-weight: 700; color: #0A2E36; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpp-sr-h { display: block; font-size: 12px; color: #6b7a76; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.hpp-sr-pr { flex: none; font-size: 11.5px; font-weight: 800; color: #0f5257; background: #fff; border: 1px solid #cfe3d8; border-radius: 999px; padding: 3px 9px; }
.hpp-sr-all { display: block; text-align: center; padding: 11px; font-size: 12.5px; font-weight: 800; color: #0f5257; text-decoration: none; border-top: 1px solid #ece6da; background: #f3efe6; }
.hpp-sr-all:hover { background: #eae3d5; }
.hpp-sr-empty { padding: 20px 16px; text-align: center; color: #6b7a76; font-size: 13.5px; }

/* ── delivery / collect widget (brand-row right) ─────────────────────────── */
.hpp-brandrow { position: relative; }   /* lets the mobile panel span the row width */
.hpp-deliv { position: relative; flex: none; }
.hpp-deliv-pill {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: #fff; border: 1px solid #d8e6e0; border-radius: 13px; padding: 6px 12px;
  box-shadow: 0 2px 10px rgba(10, 46, 54, .06); font: inherit; color: #0A2E36;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.hpp-deliv-pill:hover, .hpp-deliv.open .hpp-deliv-pill { border-color: #0f5257; background: #f3f9f7; }
.hpp-deliv-pill:focus-visible { outline: 2px solid #0f5257; outline-offset: 1px; }
.hpp-deliv-ico { flex: none; color: #0f5257; }
.hpp-deliv-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.hpp-deliv-top { font-size: 11px; color: #6b7a76; white-space: nowrap; }
.hpp-deliv-top b { color: #0f5257; font-weight: 800; }
.hpp-deliv-count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: 800; font-size: 13px; color: #0A2E36; letter-spacing: .01em; }
.hpp-deliv-fuse { height: 2px; margin-top: 3px; border-radius: 2px; background: #e5eeea; overflow: hidden; }
.hpp-deliv-fuse i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #A7CD3A, #7fae1f); border-radius: 2px; transition: width 1s linear; }
.hpp-deliv.soon .hpp-deliv-fuse i { background: linear-gradient(90deg, #c47556, #e0895f); }
.hpp-deliv.soon .hpp-deliv-count { color: #b45f39; }
.hpp-deliv-cv { flex: none; color: #9aa2a0; transition: transform .18s ease; }
.hpp-deliv.open .hpp-deliv-cv { transform: rotate(180deg); }

/* the expandable panel */
.hpp-deliv-panel {
  position: absolute; top: calc(100% + 9px); right: 0; width: 340px; max-width: calc(100vw - 24px);
  background: #FAF7F2; border: 1px solid #e6e0d6; border-radius: 15px;
  box-shadow: 0 28px 66px rgba(10, 46, 54, .30); padding: 6px; z-index: 210;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hpp-deliv.open .hpp-deliv-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hpp-deliv-opt { padding: 13px 14px; border-radius: 11px; }
.hpp-deliv-opt + .hpp-deliv-opt { margin-top: 2px; }
.hpp-deliv-opt.collect { background: #eef5ec; }
.hpp-deliv-opt h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 13.5px; font-weight: 800; color: #0A2E36; }
.hpp-deliv-opt h4 svg { flex: none; color: #0f5257; }
.hpp-deliv-opt.collect h4 { color: #2f6d3a; }
.hpp-deliv-opt.collect h4 svg { color: #2f6d3a; }
.hpp-deliv-opt p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #4a5652; }
.hpp-deliv-opt b { color: #0A2E36; font-weight: 700; }
.hpp-deliv-opt .hpp-deliv-call { color: #0f5257; font-weight: 800; text-decoration: none; white-space: nowrap; }
.hpp-deliv-opt .hpp-deliv-call:hover { text-decoration: underline; }
.hpp-deliv-msg { display: flex; align-items: center; gap: 7px; margin: 8px 6px 4px; font-size: 11.5px; color: #6b7a76; }
.hpp-deliv-msg svg { flex: none; color: #A7CD3A; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* the brand-row search field is desktop-only; mobile uses the .hpp-search icon.
     the delivery widget compacts: drop the "Receive by" line + caret, keep the countdown. */
  .hpp-deliv-top, .hpp-deliv-cv { display: none; }
  .hpp-deliv-pill { padding: 6px 10px; gap: 7px; }
  .hpp-deliv-panel { width: min(340px, calc(100vw - 16px)); right: 0; }
}
@media (max-width: 560px) {
  /* phones: the brand row is tight — the widget becomes a van ICON that opens the panel
     (full countdown + delivery + same-day collection), keeping the basket visible. */
  .hpp-deliv-txt { display: none; }
  .hpp-deliv-pill { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; }
  .hpp-brandrow { gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  /* the panel drops as a full-width sheet under the brand row (anchored to .hpp-brandrow) */
  .hpp-deliv { position: static; }
  .hpp-deliv-panel { top: calc(100% + 4px); left: 10px; right: 10px; width: auto; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hpp-deliv-fuse i, .hpp-deliv-cv, .hpp-deliv-panel { transition: none; }
}