/* WFARHALI live search 1.8 — /search and /ar/search only (FR + AR, mobile first). */
.wf-ls {
  --ls-ink: #1d1030;
  --ls-muted: #6b5a7b;
  --ls-bg: #ffffff;
  --ls-surface: #ffffff;
  --ls-line: #ebe4f7;
  --ls-brand: #6d28d9;
  --ls-brand-dark: #4c1d95;
  --ls-soft: #f3edff;
  --ls-warn-bg: #fff7e8;
  --ls-warn-ink: #8a5a12;
  --ls-radius: 18px;
  background: var(--ls-bg);
  color: var(--ls-ink);
  min-height: 70vh;
}
.wf-ls[dir="rtl"] { font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; }
.wf-ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wf-ls svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero: light, purple glow, dotted routes and destination pins ---------- */
.wf-ls-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 40px 16px 28px; text-align: center;
  background:
    radial-gradient(60% 55% at 50% 0%, #e9ddff 0%, rgba(233, 221, 255, 0) 70%),
    radial-gradient(40% 40% at 0% 60%, #f3e8ff 0%, rgba(243, 232, 255, 0) 70%),
    radial-gradient(40% 40% at 100% 70%, #f5e9ff 0%, rgba(245, 233, 255, 0) 70%),
    #fff;
}
/* Hero figures: the customer with her bags (left) and the globe with the plane (right).
   Phones: the globe sits above the headline; tablets: globe only; desktop: both sides. */
.wf-ls-hero-figure { display: block; margin: 0; pointer-events: none; }
.wf-ls-hero-figure img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(76, 29, 149, .18)); }
.wf-ls-hero-figure-left { display: none; }
.wf-ls-hero-figure-right { width: min(260px, 62vw); margin: 0 auto 6px; }
@media (min-width: 1000px) {
  .wf-ls-hero { padding-top: 32px; padding-bottom: 36px; }
  .wf-ls-hero-figure { position: absolute; bottom: 0; z-index: 0; max-height: 100%; }
  .wf-ls-hero-figure img { max-height: 100%; width: auto; max-width: 100%; margin-inline: auto; }   /* never above the hero (the sticky header hid the top) */
  .wf-ls-hero-figure-left { display: block; left: max(-40px, calc(50% - 720px)); width: 330px; }
  .wf-ls-hero-figure-right { position: absolute; right: max(-20px, calc(50% - 720px)); width: 360px; margin: 0; }
  [dir="rtl"] .wf-ls-hero-figure-left { left: auto; right: max(-40px, calc(50% - 720px)); }
  [dir="rtl"] .wf-ls-hero-figure-right { right: auto; left: max(-20px, calc(50% - 720px)); }
}
@media (min-width: 1300px) {
  .wf-ls-hero-figure-left { width: 380px; }
  .wf-ls-hero-figure-right { width: 420px; }
}
.wf-ls-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.wf-ls-hero h1, .wf-ls-lead, .wf-ls-form { max-width: 860px; margin-inline: auto; }
.wf-ls-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 16px; border-radius: 999px;
  background: #efe4ff; color: #5b21b6; font-size: 14px; font-weight: 700;
}
.wf-ls-kicker svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.wf-ls-hero h1 { margin: 0 auto; font-size: clamp(34px, 7.5vw, 68px); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; }
.wf-ls-hero h1 em { font-style: normal; color: var(--ls-brand); }
.wf-ls-lead { margin: 16px auto 0; max-width: 640px; color: var(--ls-muted); font-size: clamp(16px, 3.6vw, 20px); line-height: 1.55; }

/* Search field */
.wf-ls-form { position: relative; margin: 28px auto 0; max-width: 820px; }
.wf-ls-form[hidden] { display: none; }
.wf-ls-icon {
  position: absolute; inset-inline-start: 20px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%);
  color: var(--ls-ink); pointer-events: none;
}
.wf-ls-form input {
  width: 100%; box-sizing: border-box; height: 64px; border: 2px solid #ead9ff; border-radius: 999px;
  padding-inline: 56px 120px; font: inherit; font-size: 17px; color: var(--ls-ink); background: #fff;
  box-shadow: 0 18px 40px rgba(76, 29, 149, .14); -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wf-ls-form input::placeholder { color: #a393b6; }
.wf-ls-form input::-webkit-search-cancel-button { display: none; }
.wf-ls-form input:focus-visible { outline: none; border-color: var(--ls-brand); box-shadow: 0 18px 40px rgba(109, 40, 217, .22); }
.wf-ls-go {
  position: absolute; inset-inline-end: 8px; top: 8px; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.wf-ls-go svg { width: 22px; height: 22px; stroke-width: 2.4; }
.wf-ls-clear, .wf-ls-spinner { position: absolute; top: 50%; transform: translateY(-50%); }
.wf-ls-clear {
  inset-inline-end: 66px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--ls-soft); color: var(--ls-ink);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.wf-ls-spinner {
  inset-inline-end: 108px; width: 20px; height: 20px; border: 3px solid var(--ls-line); border-top-color: var(--ls-brand);
  border-radius: 50%; animation: wf-ls-spin .7s linear infinite;
}
.wf-ls-clear[hidden], .wf-ls-spinner[hidden] { display: none; }
@keyframes wf-ls-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Microphone: speak the request (Darija / French) instead of typing it */
.wf-ls-mic {
  position: absolute; inset-inline-end: 62px; top: 8px; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--ls-soft); color: var(--ls-brand-dark); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.wf-ls-mic svg { width: 22px; height: 22px; stroke-width: 2.2; }
.wf-ls-mic[hidden] { display: none; }
.wf-ls-mic:hover { background: #e9ddff; }
.wf-ls-mic[aria-pressed="true"] { background: #e11d48; color: #fff; animation: wf-ls-pulse 1.2s ease-in-out infinite; }
.wf-ls-mic[disabled] { opacity: .55; cursor: wait; animation: none; }
@keyframes wf-ls-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .45); } 50% { box-shadow: 0 0 0 12px rgba(225, 29, 72, 0); } }
.wf-ls-form.has-mic input { padding-inline-end: 124px; }
.wf-ls-form.has-mic .wf-ls-clear { inset-inline-end: 118px; }
.wf-ls-form.has-mic .wf-ls-spinner { inset-inline-end: 160px; }
.wf-ls-voice-hint { margin: 12px auto 0; max-width: 820px; font-size: 14px; color: var(--ls-muted); }
.wf-ls-voice-hint[hidden] { display: none; }
.wf-ls.is-listening .wf-ls-form input { border-color: #e11d48; box-shadow: 0 18px 40px rgba(225, 29, 72, .18); }

/* Photo button: search by picture (a screenshot joins the request) */
.wf-ls-photo {
  position: absolute; inset-inline-end: 62px; top: 8px; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--ls-soft); color: var(--ls-brand-dark); cursor: pointer; display: grid; place-items: center;
}
.wf-ls-photo svg { width: 22px; height: 22px; stroke-width: 2.2; }
.wf-ls-photo[hidden] { display: none; }
.wf-ls-photo:hover { background: #e9ddff; }
.wf-ls-form.has-photo.has-mic .wf-ls-mic { inset-inline-end: 116px; }
.wf-ls-form.has-photo input { padding-inline-end: 124px; }
.wf-ls-form.has-photo.has-mic input { padding-inline-end: 178px; }
.wf-ls-form.has-photo .wf-ls-clear { inset-inline-end: 118px; }
.wf-ls-form.has-photo.has-mic .wf-ls-clear { inset-inline-end: 172px; }
.wf-ls-form.has-photo .wf-ls-spinner { inset-inline-end: 160px; }
.wf-ls-form.has-photo.has-mic .wf-ls-spinner { inset-inline-end: 214px; }
@media (max-width: 479px) {
  .wf-ls-form.has-photo.has-mic input { padding-inline-end: 150px; font-size: 15px; }
}
.wf-ls-picture {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px auto 0; max-width: 820px;
  font-size: 14px; color: var(--ls-muted);
}
.wf-ls-picture[hidden] { display: none; }
.wf-ls-picture img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ls-line); background: #fff; }
.wf-ls-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 14px auto 0; }
.wf-ls-demo[hidden] { display: none; }

/* Category chips */
.wf-ls-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px auto 0; max-width: 1180px; }
.wf-ls-chips[hidden] { display: none; }
.wf-ls-chips button {
  padding: 10px 14px; border: 1px solid #ead9ff; border-radius: 999px; background: #fff; color: var(--ls-ink);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(76, 29, 149, .06);
  transition: border-color .15s ease, background .15s ease;
}
.wf-ls-chips button:hover, .wf-ls-chips button[aria-pressed="true"] { border-color: var(--ls-brand); background: var(--ls-soft); }
@media (max-width: 719px) {
  .wf-ls-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 8px; scrollbar-width: none; }
  .wf-ls-chips::-webkit-scrollbar { display: none; }
  .wf-ls-chips button { flex: none; }
}

/* Trust row */
.wf-ls-trust {
  list-style: none; margin: 0 auto; padding: 18px 16px 8px; width: min(1180px, 100%); box-sizing: border-box;
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .wf-ls-trust { grid-template-columns: repeat(4, 1fr); padding-top: 26px; } }
.wf-ls-trust li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--ls-ink); }
.wf-ls-trust b { font-weight: 600; }
.wf-ls-trust-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ls-soft); color: var(--ls-brand); }
.wf-ls-trust-icon svg { width: 22px; height: 22px; }

/* ---------- Body ---------- */
.wf-ls-body { width: min(1180px, calc(100% - 32px)); margin: 18px auto 64px; display: grid; gap: 18px; position: relative; }
.wf-ls-status { margin: 0; font-size: clamp(20px, 4vw, 26px); font-weight: 800; color: var(--ls-ink); }
.wf-ls-status:empty { display: none; }
.wf-ls-status[data-tone="warning"] { font-size: 16px; font-weight: 600; padding: 14px 16px; border-radius: 12px; background: var(--ls-warn-bg); color: var(--ls-warn-ink); border: 1px solid #f4dfb5; }
.wf-ls-searched { margin: -10px 0 0; color: var(--ls-muted); font-size: 14px; }
.wf-ls-searched[hidden] { display: none; }

/* Pipeline steps (presentations only, ?demo=1) */
.wf-ls-pipeline { padding: 14px 16px; border-radius: var(--ls-radius); border: 1px solid var(--ls-line); background: #fff; }
.wf-ls-pipeline[hidden] { display: none; }
.wf-ls-pipeline-title { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ls-muted); }
.wf-ls-pipeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .wf-ls-pipeline-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wf-ls-pipeline-list li { display: grid; gap: 2px; padding: 10px 12px; padding-inline-start: 34px; position: relative; border-radius: 12px; background: #faf7ff; font-size: 14px; }
.wf-ls-pipeline-list li::before {
  content: ""; position: absolute; inset-inline-start: 12px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: #cbd5e1;
}
.wf-ls-pipeline-list li[data-status="done"]::before { background: #16a34a; }
.wf-ls-pipeline-list li[data-status="failed"]::before { background: #e11d48; }
.wf-ls-pipeline-list li[data-status="skipped"] { opacity: .65; }
.wf-ls-step-name { font-weight: 700; color: var(--ls-ink); }
.wf-ls-step-state { font-size: 13px; color: var(--ls-muted); }
.wf-ls-pipeline-list li small { font-size: 12px; color: var(--ls-muted); overflow-wrap: anywhere; }

/* What the assistant understood from a spoken request: products + budget */
.wf-ls-understood {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--ls-radius); background: var(--ls-soft);
  border: 1px solid #e4d5ff;
}
.wf-ls-understood[hidden] { display: none; }
.wf-ls-understood-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ls-ink); }
.wf-ls-understood-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wf-ls-understood-list li {
  padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e4d5ff; color: var(--ls-brand-dark);
  font-size: 14px; font-weight: 700;
}
.wf-ls-understood-budget { margin: 0; font-size: 14px; font-weight: 700; color: var(--ls-ink); }
.wf-ls-understood-budget[hidden] { display: none; }
.wf-ls-understood-details { margin: 0; font-size: 14px; color: var(--ls-ink); }
.wf-ls-understood-details[hidden] { display: none; }
.wf-ls-understood-cutout { width: 96px; height: 96px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid #e4d5ff; }
.wf-ls-understood-cutout[hidden] { display: none; }

/* Result grid */
.wf-ls-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-ls-group { grid-column: 1 / -1; margin: 6px 0 -4px; font-size: 17px; font-weight: 800; color: var(--ls-ink); display: flex; align-items: center; gap: 8px; }
.wf-ls-group::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ls-brand); }
.wf-ls-group-note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ls-muted); }
.wf-ls-grid:empty { display: none; }
@media (min-width: 720px) { .wf-ls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1040px) { .wf-ls-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.wf-ls-card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--ls-surface);
  border: 1px solid var(--ls-line); border-radius: var(--ls-radius);
  box-shadow: 0 6px 18px rgba(36, 19, 49, .05); transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .wf-ls-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(36, 19, 49, .1); } }
.wf-ls-card-media { display: block; width: 100%; padding: 12px 12px 0; border: 0; background: none; cursor: pointer; }
.wf-ls-card-media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: #faf7ff; }
.wf-ls-card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.wf-ls-card-title {
  margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ls-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.wf-ls-card-store { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* Store name as a plain framed tag (like marketplace listings): one look for every store added later. */
.wf-ls-store-tag { display: inline-block; padding: 2px 8px; border: 1px solid #cfd4dc; border-radius: 4px; background: #fff; color: #4b5563; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.wf-ls-store-kind { color: #6b7280; font-weight: 600; }
.wf-ls-card-hint { margin: 2px 0 auto; font-size: 12px; color: var(--ls-brand); font-weight: 700; }
.wf-ls-options { display: grid; gap: 10px; }
@media (min-width: 480px) { .wf-ls-options { grid-template-columns: 1fr 1fr; } .wf-ls-options .wf-ls-field:first-child { grid-column: 1 / -1; } }
.wf-ls-known { margin: 0; font-size: 14px; color: var(--ls-muted); }
.wf-ls-known[hidden] { display: none; }
.wf-ls-known span { color: var(--ls-ink); font-weight: 700; }
.wf-ls-link { border: 0; background: none; padding: 0; color: var(--ls-brand); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.wf-ls-field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.wf-ls-field[hidden] { display: none; }
.wf-ls-field select {
  min-height: 46px; padding: 0 12px; border: 1px solid var(--ls-line); border-radius: 12px; background: #fff; color: var(--ls-ink);
  font: inherit; font-size: 15px; font-weight: 500;
}
.wf-ls-field select[aria-invalid="true"] { border-color: #dc2626; }
.wf-ls-field select:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 1px; }
.wf-ls-card-price { margin: 2px 0 auto; display: flex; flex-direction: column; gap: 1px; }
.wf-ls-card-price b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.wf-ls-card-price small { color: var(--ls-muted); font-size: 12px; }
.wf-ls-skeleton { min-height: 300px; background: linear-gradient(100deg, #f3edff 30%, #faf7ff 50%, #f3edff 70%); background-size: 300% 100%; animation: wf-ls-shimmer 1.2s ease-in-out infinite; }
@keyframes wf-ls-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Buttons */
.wf-ls-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px;
  border: 0; border-radius: 12px; background: var(--ls-brand); color: #fff; font: inherit; font-weight: 800;
  cursor: pointer; transition: background .15s ease;
}
.wf-ls-btn svg { width: 18px; height: 18px; }
.wf-ls-btn:hover { background: var(--ls-brand-dark); }
.wf-ls-btn:focus-visible, .wf-ls-go:focus-visible, .wf-ls-chips button:focus-visible, .wf-ls-stepper button:focus-visible, .wf-ls-clear:focus-visible, .wf-ls-card-media:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.wf-ls-btn-block { width: 100%; margin-top: 6px; }
.wf-ls-card .wf-ls-btn { min-height: 42px; padding: 0 8px; font-size: 14px; line-height: 1.2; white-space: nowrap; }
@media (min-width: 720px) { .wf-ls-card .wf-ls-btn { font-size: 15px; } }

/* Paste-a-link fallback */
.wf-ls-paste { background: var(--ls-surface); border: 1px dashed #c4b5fd; border-radius: var(--ls-radius); padding: 22px 18px; }
.wf-ls-paste[hidden] { display: none; }
.wf-ls-paste h2 { margin: 0; font-size: 20px; line-height: 1.35; }
.wf-ls-paste p { margin: 8px 0 0; color: var(--ls-muted); }
.wf-ls-paste-form { margin-top: 16px; display: grid; gap: 10px; }
@media (min-width: 640px) { .wf-ls-paste-form { grid-template-columns: 1fr auto; } .wf-ls-error { grid-column: 1 / -1; } }
.wf-ls-paste-form input {
  min-height: 48px; box-sizing: border-box; width: 100%; padding: 0 14px; border: 1px solid var(--ls-line);
  border-radius: 12px; font: inherit; font-size: 16px; background: #fff; color: var(--ls-ink);
}
.wf-ls-paste-form input[dir="ltr"] { direction: ltr; text-align: left; }
.wf-ls-paste-form input:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 1px; }
.wf-ls-paste-form input[aria-invalid="true"] { border-color: #dc2626; }
.wf-ls-error { color: #b91c1c; font-weight: 600; }
.wf-ls-error[hidden] { display: none; }

/* Quick view dialog (bottom sheet on phones) */
.wf-ls-dialog {
  width: min(520px, 100%); max-width: 100%; max-height: 92vh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 22px 22px 0 0; background: var(--ls-surface); color: var(--ls-ink); box-shadow: 0 -10px 40px rgba(36, 19, 49, .25);
}
@media (min-width: 640px) { .wf-ls-dialog { margin: auto; border-radius: 22px; } }
.wf-ls-dialog::backdrop { background: rgba(23, 8, 38, .55); }
.wf-ls-dialog-inner { position: relative; display: grid; gap: 16px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
.wf-ls-dialog-close {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--ls-soft); color: var(--ls-ink); font-size: 24px; line-height: 1; cursor: pointer;
}
.wf-ls-dialog-product { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; padding-inline-end: 36px; }
/* Product pictures: one big picture, arrows to move, thumbnails below (swipe on phones). */
.wf-ls-gallery { display: grid; gap: 8px; }
.wf-ls-gallery-main { position: relative; border-radius: 14px; background: var(--ls-soft); overflow: hidden; touch-action: pan-y; }
.wf-ls-gallery-main img { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 260px; object-fit: contain; background: #fff; }
.wf-ls-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ls-ink); box-shadow: 0 2px 8px rgba(20,16,40,.18); cursor: pointer; display: grid; place-items: center; }
.wf-ls-gallery-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wf-ls-gallery-prev { inset-inline-start: 8px; }
.wf-ls-gallery-next { inset-inline-end: 8px; }
[dir="rtl"] .wf-ls-gallery-arrow svg { transform: scaleX(-1); }
.wf-ls-gallery-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.wf-ls-gallery-thumbs::-webkit-scrollbar { display: none; }
.wf-ls-gallery-thumbs button { flex: none; width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--ls-soft); overflow: hidden; cursor: pointer; }
.wf-ls-gallery-thumbs button[aria-current="true"] { border-color: var(--ls-brand); }
.wf-ls-gallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wf-ls-gallery-arrow[hidden], .wf-ls-gallery-thumbs[hidden] { display: none; }   /* one picture only: no arrows, no thumbnails */
.wf-ls-dialog-product h2 { margin: 2px 0 8px; font-size: 16px; line-height: 1.4; font-weight: 700; }
.wf-ls-dialog-product .wf-ls-card-price b { font-size: 18px; }
.wf-ls-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.wf-ls-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ls-line); border-radius: 12px; overflow: hidden; }
.wf-ls-stepper button { width: 44px; height: 44px; border: 0; background: #fff; color: var(--ls-ink); font-size: 20px; cursor: pointer; }
.wf-ls-stepper output { min-width: 40px; text-align: center; font-weight: 800; }
.wf-ls-note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--ls-soft); color: var(--ls-muted); font-size: 14px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .wf-ls-card, .wf-ls-btn, .wf-ls-chips button { transition: none; }
  .wf-ls-spinner, .wf-ls-skeleton { animation: none; }
}

/* Desktop with the two hero figures: room for the text between them, headline on two lines.
   (Placed last on purpose: these override the base .wf-ls-hero-inner / h1 rules above.) */
@media (min-width: 1000px) {
  .wf-ls-hero-inner { max-width: 1440px; padding-inline: 300px; box-sizing: border-box; }
  .wf-ls-hero h1 { font-size: clamp(38px, 3.9vw, 58px); }
}
@media (min-width: 1300px) { .wf-ls-hero-inner { padding-inline: 320px; } }

/* Register + confirmation dialogs (the confirmation reuses the global .wf-cart-added-* styles) */
.wf-ls-register-title { margin: 0; font-size: 20px; line-height: 1.3; padding-inline-end: 40px; }
.wf-ls-register-lead { margin: 6px 0 0; color: var(--ls-muted); font-size: 14px; line-height: 1.5; }
.wf-ls-register-login { margin: 0; text-align: center; font-size: 14px; color: var(--ls-muted); }
.wf-ls-register-login a { color: var(--ls-brand); font-weight: 700; }
.wf-ls-field input {
  min-height: 46px; padding: 0 12px; border: 1px solid var(--ls-line); border-radius: 12px; background: #fff; color: var(--ls-ink);
  font: inherit; font-size: 15px; font-weight: 500; box-sizing: border-box; width: 100%;
}
.wf-ls-field input:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 1px; }
[data-ls-register-dialog] .wf-ls-options { grid-template-columns: 1fr; }
[data-ls-register-dialog] .wf-ls-options .wf-ls-field:first-child { grid-column: auto; }
.wf-ls-btn:disabled { opacity: .7; cursor: progress; }
.wf-ls-success-more { display: block; margin: 12px auto 0; }
[data-ls-success-dialog] a.wf-cart-added-action {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 18px;
  box-sizing: border-box; text-decoration: none; line-height: 1.2;
}

/* ---- 1.8.5: category tiles (popular + sections), shown while nothing is searched ---- */
.wf-ls-cats { max-width: 1180px; margin: 0 auto; padding: 8px 16px 24px; }
.wf-ls-cats[hidden] { display: none; }
.wf-ls-cats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.wf-ls-cats-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ls-ink); display: flex; align-items: center; gap: 8px; }
.wf-ls-cats-head p { margin: 0; color: var(--ls-muted); font-size: 13px; }
.wf-ls-cats-browse { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ls-line); }
.wf-ls-cats-browse h2 { font-size: 20px; }
.wf-ls-cats-icon { font-size: 18px; }
.wf-ls-tile { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 8px; border: 1px solid var(--ls-line); border-radius: 16px; background: var(--ls-surface); color: var(--ls-ink); text-align: center; cursor: pointer; font: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.wf-ls-tile:hover, .wf-ls-tile:focus-visible { transform: translateY(-2px); border-color: #d9ccf5; box-shadow: 0 10px 24px rgba(42, 17, 66, .10); outline: none; }
.wf-ls-tile:focus-visible { box-shadow: 0 0 0 3px rgba(109, 40, 217, .25); }
.wf-ls-tile-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background: #fff; overflow: hidden; }
.wf-ls-tile:not(.has-image) .wf-ls-tile-media { background: var(--ls-soft); }
.wf-ls-tile-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; line-height: 1; }
.wf-ls-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; mix-blend-mode: multiply; }   /* a catalogue photo on white looks cut out (ZenMarket-like) */
.wf-ls-tile img[hidden] { display: none; }
.wf-ls-tile.has-image .wf-ls-tile-icon { display: none; }
.wf-ls-tile-label { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ls-ink); padding-bottom: 2px; }
.wf-ls-cats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Popular: large coloured tiles, label on top, picture below (ZenMarket-like) */
.wf-ls-cats-popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wf-ls-tile-big { padding: 12px 12px 10px; border: 0; background: linear-gradient(160deg, #ede4ff 0%, #d8c7ff 100%); min-height: 150px; text-align: start; }
.wf-ls-tile-big:nth-child(4n+2) { background: linear-gradient(160deg, #e3f0ff 0%, #c5dcff 100%); }
.wf-ls-tile-big:nth-child(4n+3) { background: linear-gradient(160deg, #ffe9f3 0%, #f8c9df 100%); }
.wf-ls-tile-big:nth-child(4n+4) { background: linear-gradient(160deg, #e6f8f1 0%, #c3ecd9 100%); }
.wf-ls-tile-big .wf-ls-tile-label { font-size: 15px; font-weight: 800; text-align: start; }
.wf-ls-tile-big .wf-ls-tile-media { aspect-ratio: auto; height: 104px; border-radius: 0; background: transparent; align-self: flex-end; width: 84%; margin-inline-start: auto; }
.wf-ls-tile-big:not(.has-image) .wf-ls-tile-media { background: transparent; }
.wf-ls-tile-big img { object-fit: contain; object-position: bottom center; }
.wf-ls-tile-big .wf-ls-tile-icon { font-size: 44px; }
@media (min-width: 640px) {
  .wf-ls-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-ls-cats-popular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .wf-ls-cats { padding-inline: 24px; }
  .wf-ls-cats-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wf-ls-tile-icon { font-size: 42px; }
  .wf-ls-tile-big { min-height: 170px; }
}

/* ---- 1.9.1: Wfarhali illustrations with the name printed in the picture (fr/ or ar/) ---- */
.wf-ls-tile.has-label-art { padding: 6px; gap: 0; }
.wf-ls-tile.has-label-art .wf-ls-tile-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wf-ls-tile.has-label-art .wf-ls-tile-media { border-radius: 12px; }
.wf-ls-tile-big.has-label-art { min-height: 0; padding: 8px; }
.wf-ls-tile-big.has-label-art .wf-ls-tile-media { width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0; border-radius: 14px; }
.wf-ls-tile-big.has-label-art img { object-position: center; }

/* ---- 1.9.2: no "popular" block (user decision 2026-10-25): the page starts with "Acheter par catégorie" ---- */
.wf-ls-cats > .wf-ls-cats-browse:first-child { margin-top: 10px; padding-top: 0; border-top: 0; }