/* hdr-search.css: the header search button + its dialog (23.10.2026, option reef_hdr_search; inc/hdr-search.php, assets/js/hdr-search.js).
   The button copies the header v3 icon buttons of chrome-v3.css: icon only, 44px, under 640; icon + the word 640-1100; a 46px ring next to
   the call / cart pills from 1101. The dialog drops from the top; search v3 draws its list inside the panel, in its flow. Logical CSS only. */
.rf-srch-nj{display:contents}
body.rf-hd3 .rf-header-v3 .rf-srch-btn{display:inline-flex;position:relative;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:48px;min-height:48px;margin:0;padding:0 4px;background:none;border:0;border-radius:10px;color:#0d0b2a;font:400 13px/1 var(--mfe);cursor:pointer;-webkit-tap-highlight-color:transparent}
body.rf-hd3 .rf-header-v3 .rf-srch-ico{display:block;flex:none;width:24px;height:24px}
body.rf-hd3 .rf-header-v3 .rf-srch-btn:hover,body.rf-hd3 .rf-header-v3 .rf-srch-btn[aria-expanded="true"]{background:#f3ece1}
@media(max-width:639px){
  body.rf-hd3 .rf-header-v3 .rf-srch-btn{min-width:44px;min-height:44px}
  body.rf-hd3 .rf-header-v3 .rf-srch-btn-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* 320-343: the logo + three 44px buttons need 24px more than the row has. The logo keeps its size: the row gap 10 → 6, the three
   buttons touch (each still a 44px target, the glyphs ~25px apart), and the menu button's target reaches 10px into the side gutter
   (its glyph stays 19px from the edge). From 344 the normal gaps fit. */
@media(max-width:343px){
  body.rf-hd3 .rf-header-v3>.rf-wrap{gap:6px}
  body.rf-hd3 .rf-header-v3 .rf-hact{gap:0}
  body.rf-hd3 .rf-header-v3 .rf-hmenu{margin-inline-end:-10px}
}
@media(min-width:1101px){
  body.rf-hd3 .rf-header-v3 .rf-srch-btn{flex-direction:row;width:46px;min-width:46px;height:46px;min-height:46px;padding:0;border:1px solid #e7e0d4;border-radius:999px;background:#fff}
  body.rf-hd3 .rf-header-v3 .rf-srch-ico{width:21px;height:21px}
  body.rf-hd3 .rf-header-v3 .rf-srch-btn:hover,body.rf-hd3 .rf-header-v3 .rf-srch-btn[aria-expanded="true"]{border-color:#cfc6b8;background:#fff;box-shadow:0 1px 2px #3c28140f,0 4px 12px -4px #3c28141a}
  body.rf-hd3 .rf-header-v3 .rf-srch-btn-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* 1101-1199, the narrowest full-nav row (21px to spare at 1101 before the ring): a little air out of the gaps and the logo */
@media(min-width:1101px) and (max-width:1199px){
  body.rf-hd3 .rf-header-v3>.rf-wrap{gap:16px}
  body.rf-hd3 .rf-header-v3 .rf-mnav-list{gap:2px}
  body.rf-hd3 .rf-header-v3 .rf-hact{gap:6px}
  body.rf-hd3 .rf-header-v3 .rf-logo img{height:48px}
}

/* ---------- the dialog: a panel that drops from the header's bottom edge, so it reads as part of the header ----------
   --rf-srch-top = the header's bottom (set by the script on open). Above it the backdrop is clear (the header stays as it is, the icon
   pressed), below it a light veil. One row: the field (magnifier, input, an inline "חיפוש") + the close X. Type: 17px 400 / 700, the
   calm scale's body size. Motion: opacity + 6px, 200 ms ease-out; none under reduced motion or the a11y widget's "stop animations". */
.rf-srch{--rf-srch-top:0px;position:fixed;inset:0;z-index:2147483000;color:#0d0b2a;font-family:var(--mfe);text-align:start}
.rf-srch[hidden]{display:none}
.rf-srch-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent var(--rf-srch-top),rgba(6,2,32,.26) var(--rf-srch-top));opacity:0;transition:opacity .18s ease-out}
.rf-srch-in{position:absolute;inset-inline:0;top:var(--rf-srch-top);max-height:calc(100% - var(--rf-srch-top));padding:10px 16px 12px;background:#fff;border-top:1px solid #e7e0d4;box-shadow:0 18px 26px -22px rgba(6,2,32,.3);opacity:0;transform:translateY(-6px);transition:opacity .2s ease-out,transform .2s ease-out}
.rf-srch.is-open .rf-srch-bg{opacity:1}
.rf-srch.is-open .rf-srch-in{opacity:1;transform:none}
.rf-srch-f{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;max-width:720px;margin:0 auto}
.rf-srch-fld{position:relative;min-width:0}
.rf-srch-mg{position:absolute;inset-inline-start:14px;top:14px;width:20px;height:20px;color:#5F6670;pointer-events:none}
.rf-srch-q{box-sizing:border-box;display:block;width:100%;min-width:0;height:48px;margin:0;padding-block:0;padding-inline:44px 88px;border:1.5px solid #cfc6b8;border-radius:12px;background:#fff;color:#0d0b2a;font:400 17px/1.2 var(--mfe);-webkit-appearance:none;appearance:none}
.rf-srch-q::placeholder{color:#6b6577;opacity:1}
.rf-srch-q::-webkit-search-cancel-button,.rf-srch-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.rf-srch-q:focus{outline:none;border-color:#b84300;box-shadow:0 0 0 3px rgba(255,98,0,.16)}
.rf-srch-go{position:absolute;inset-inline-end:4px;top:4px;height:40px;margin:0;padding:0 14px;border:0;border-radius:9px;background:#0d0b2a;color:#fff;font:700 17px/1 var(--mfe);cursor:pointer}
.rf-srch-go:hover{background:#2b2950}
.rf-srch-x{display:grid;place-items:center;width:44px;height:48px;margin:0;padding:0;background:none;border:0;border-radius:10px;color:#0d0b2a;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rf-srch-x svg{width:24px;height:24px;fill:currentColor}
.rf-srch-x:hover{background:#f3ece1}
.rf-srch-x:focus-visible,.rf-srch-go:focus-visible{outline:3px solid #b84300;outline-offset:2px}
/* search v3's list (assets/css/search-v3.css) in the panel's flow under the field, also under the X column; no card of its own */
.rf-srch .sv3-pop{position:static;width:auto;margin:8px 0 0;margin-inline-end:-52px;padding-block:2px 0;border:0;border-top:1px solid #e7e0d4;border-radius:0;box-shadow:none}
/* no page scroll while open: on body, never on html. The theme's body{overflow-x:hidden} would otherwise become its own scroll box and the
   sticky header would drop out of view (measured at scroll 900: header at -868). scrollbar-gutter keeps the width (no shift with classic bars). */
html.rf-srch-open{scrollbar-gutter:stable}
html.rf-srch-open body{overflow:hidden}
/* phone: the call / WhatsApp bar stays on top and usable (search v3 already stops its list above it) */
@media(max-width:760px){html.rf-srch-open .rf-bar{z-index:2147483001}}
@media(max-width:359px){.rf-srch-mg{display:none}.rf-srch-q{padding-inline-start:14px}}
/* from 761px: a card that hangs from the header's line under the action buttons (the icon's group), not a full-width sheet */
@media(min-width:761px){
  .rf-srch-in{inset-inline-start:auto;inset-inline-end:max(16px,calc(var(--rf-srch-end,32px) - 16px));width:min(752px,calc(100vw - 32px));padding:14px 16px 16px;border:1px solid #e7e0d4;border-top-color:#fff;border-radius:0 0 16px 16px;box-shadow:0 22px 34px -24px rgba(6,2,32,.32)}
  .rf-srch-f{max-width:none}
}
@media(prefers-reduced-motion:reduce){.rf-srch-bg,.rf-srch-in{transition:none}.rf-srch-in{transform:none}}
html.reef-a11y-motion .rf-srch-bg,html.reef-a11y-motion .rf-srch-in{transition:none}
html.reef-a11y-motion .rf-srch-in{transform:none}
