/* ==========================================================================
   Live search overlay (חיפוש חי)
   מבנה: שורת חיפוש עליונה + שכבת החשכה + לוח תוצאות.
   מובייל (<768px): מסך מלא, שורת "לכל התוצאות" דבוקה לתחתית.
   דסקטופ: לוח לבן מתחת לשורה, שלוש עמודות 3 / 6 / 3.
   ========================================================================== */
.ls { position: fixed; inset: 0; z-index: calc(var(--z-sheet) + 5); display: flex; flex-direction: column; background: var(--surface); animation: fp-fade .15s ease both; }
.has-livesearch body { overflow: hidden; }
html.has-livesearch { overflow: hidden; }

.ls__bar { flex-shrink: 0; background: var(--surface); border-bottom: var(--bw) solid var(--ink); position: relative; z-index: 2; }
.ls__bar-in { display: flex; align-items: center; gap: 4px; height: 68px; padding-inline: 8px 4px; max-width: var(--container); margin-inline: auto; }
.ls__logo, .ls__cart { display: none; }
.ls__form { flex: 1 1 auto; display: flex; min-width: 0; height: 48px; }
.ls__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding-inline: 12px 4px; border: 2px solid var(--ink); background: var(--surface); }
.ls__field svg { flex-shrink: 0; }
.ls__field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; height: 100%; -webkit-appearance: none; appearance: none; }
.ls__field input::-webkit-search-cancel-button { display: none; }
.ls__field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.ls__clear { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ls__clear:hover { background: var(--stage); }
.ls__go { display: none; }
.ls__cancel { min-width: 64px; height: 48px; padding-inline: 8px; font-size: 15px; font-weight: 700; }
.ls__cancel:hover { text-decoration: underline; text-underline-offset: 4px; }

.ls__scrim { display: none; }
.ls__panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.ls__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.ls__grid { display: block; }
.ls__col { display: flex; flex-direction: column; }
.ls__h { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 16px 10px; background: var(--paper); border-block: var(--bw) solid var(--ink); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--track-eyebrow); }
.ls__col:first-child .ls__h { border-top: 0; }
.ls__count { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.ls__mini { font-size: 12px; font-weight: 700; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }
.ls__empty { display: block; padding: 14px 16px; font-size: 14px; color: var(--ink-2); background: var(--surface); }

.ls-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 16px; text-align: start; transition: background-color .12s ease; }
.ls-row:hover, .ls-row:focus-visible, .ls-guide:hover, .ls-mat:hover { background: #F4FBD8; }
.ls-row svg { flex-shrink: 0; }
.ls-row strong { font-weight: 800; background: var(--accent); }

.ls-prods { display: block; }
.ls-prod { display: grid; grid-template-columns: 84px 1fr; background: var(--surface); border-bottom: 1px solid var(--line); transition: box-shadow .12s ease; }
.ls-prod:hover, .ls-prod:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.ls-prod__img { position: relative; height: 84px; background: var(--stage); }
.ls-prod__img img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.ls-prod__txt { display: flex; flex-direction: column; gap: 3px; justify-content: center; align-items: flex-start; min-width: 0; padding: 8px 14px; }
.ls-prod__txt strong { font-size: 16px; line-height: 21px; text-align: start; }
.ls-prod__row { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ls-prod__dots { display: flex; gap: 3px; }
.ls-prod__dots .swatch { width: 12px; height: 12px; }
.ls-prod__price { font-size: 15px; font-weight: 700; }

.ls-guide { display: flex; flex-direction: column; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); transition: background-color .12s ease; }
.ls-guide__c { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-2); }
.ls-guide__t { font-size: 16px; line-height: 23px; font-weight: 700; }

.ls-mats { display: grid; grid-template-columns: 1fr 1fr; border-inline-start: 1px solid var(--ink); }
.ls-mat { display: flex; flex-direction: column; padding: 12px 14px; background: var(--surface); border-inline-end: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: background-color .12s ease; }
.ls-mat strong { font-size: 20px; line-height: 26px; text-align: start; }
.ls-mat span { font-size: 13px; color: var(--ink-2); }
.ls-mat--quiz { background: var(--accent); }
.ls-mat--quiz strong { font-size: 17px; }
.ls-mat--quiz:hover { background: var(--ink); color: #fff; }
.ls-mat--quiz:hover span { color: #ddd; }


.ls__none { display: flex; flex-direction: column; gap: 12px; padding: 32px 16px; }
.ls__none-h { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.035em; }
.ls__none p { font-size: 15px; }
.ls__none-cta { display: flex; flex-direction: column; margin-top: 6px; }
.ls__none-cta .btn { min-height: 54px; }

.ls__all { flex-shrink: 0; min-height: 64px; padding: 0 16px; justify-content: space-between; font-size: 16px; }
.ls__all:hover { background: var(--accent); color: var(--ink); }
.ls__all-r { display: inline-flex; align-items: center; gap: 14px; }
.ls__all-r kbd { display: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--line); }
.ls__all:hover .ls__all-r kbd { color: var(--ink); }
.ls__all:hover .ls__all-r svg path { stroke: var(--ink); }

/* ---------- דסקטופ ---------- */
@media (min-width: 768px) {
  .ls { background: transparent; }
  .ls__bar-in { height: 84px; gap: 32px; padding-inline: var(--gutter); }
  .ls__logo, .ls__cart { display: inline-flex; }
  .ls__logo { font-size: 29px; }
  .ls__form { max-width: 860px; margin-inline: auto; height: 54px; }
  .ls__field { border-inline-end: 0; padding-inline: 16px 8px; }
  .ls__field input { font-size: 18px; }
  .ls__go { display: flex; width: 120px; min-height: 0; font-size: 16px; }
  .ls__cancel { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
  .ls__cart { height: 46px; padding-inline: 16px; background: var(--ink); color: #fff; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
  .ls__cart-count { min-width: 22px; height: 22px; padding-inline: 5px; background: var(--accent); color: var(--ink); font-size: 12px; line-height: 22px; text-align: center; }

  .ls__scrim { display: block; position: absolute; inset: 0; background: rgba(17,17,17,.52); z-index: 1; animation: fp-fade .2s ease both; }
  .ls__panel { position: absolute; z-index: 3; top: 84px; inset-inline: 0; flex: none; max-height: calc(100vh - 84px - 24px); max-height: calc(100dvh - 84px - 24px); border-bottom: var(--bw) solid var(--ink); }
  .ls__body { overflow-y: auto; }
  .ls__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; max-width: var(--container); margin-inline: auto; padding: 32px var(--gutter) 28px; }
  .ls__col--sug, .ls__col--guides { grid-column: span 3; }
  .ls__col--prods { grid-column: span 6; }
  .ls__h { padding: 0 0 12px; background: transparent; border: 0; border-bottom: var(--bw) solid var(--ink); }
  .ls__col:first-child .ls__h { border-top: 0; }
  .ls-row { min-height: 48px; padding: 0 4px; }
  .ls-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .ls-prod { grid-template-columns: 96px 1fr; padding: 10px; gap: 14px; box-shadow: inset 0 0 0 1px var(--line); border-bottom: 0; }
  .ls-prod__img { height: 96px; }
  .ls-prod__txt { padding: 0; gap: 4px; }
  .ls-prod__txt strong { font-size: 17px; line-height: 22px; }
  .ls-prod__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ls-guide { padding: 12px 4px; }
  .ls-guide__c { font-size: 12px; letter-spacing: .12em; }
  .ls__empty { padding: 14px 4px; }
  .ls__all { max-width: none; width: 100%; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); min-height: 64px; font-size: 17px; }
  .ls__all-r kbd { display: inline; }

  /* מצב ריק: אחרונים 3 / פופולרי 3 / חומרים 6. בלי "אחרונים": פופולרי 3 / חומרים 9 */
  .ls__grid--empty .ls__col--recent, .ls__grid--empty .ls__col--pop { grid-column: span 3; }
  .ls__grid--empty .ls__col--mats { grid-column: span 6; }
  .ls__grid--empty:not(:has(.ls__col--recent)) .ls__col--mats { grid-column: span 9; }
  .ls-mats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--ink); border-inline-start: 1px solid var(--ink); }
  .ls-mat { padding: 16px 18px; gap: 2px; }
  .ls-mat strong { font-size: 22px; }
  .ls-mat--quiz strong { font-size: 18px; }

  /* אין תוצאות: 7 / 5 */
  .ls__grid--none { align-items: center; }
  .ls__none { grid-column: span 7; padding: 8px 0; }
  .ls__none-h { font-size: 44px; line-height: 48px; }
  .ls__none p { font-size: 17px; max-width: 520px; }
  .ls__none-cta { flex-direction: row; }
  .ls__none-cta .btn { padding-inline: 24px; }
  .ls__grid--none .ls__col { grid-column: span 5; }
}

/* מובייל: 3 הצעות בלבד, כדי שהמוצרים יופיעו בלי גלילה */
@media (max-width: 767.98px) {
  .ls__col--sug .ls-row:nth-child(n+5) { display: none; }
}