/* =========================================================================
   watchfaces.co — Mobile Header Search ("Spotlight Gallery") — theme build
   Trigger button + full-screen search overlay. Responsive: available at all breakpoints.
   ========================================================================= */
:root{ --card-shadow:0px 8.1px 10.8px -2.7px rgba(16,24,40,.08),0px 2.7px 4.05px -1.35px rgba(16,24,40,.03); }

/* Trigger button — matches the burger (.mnu-btn) sizing/look */
/* Trigger = visual twin of the burger (.mnu-btn): round, white, hairline border */
.wf-search-trigger{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;min-width:2.75rem;height:2.75rem;padding:0;margin:0;cursor:pointer;color:var(--text-primary);background:#fff;border:1px solid rgba(40,37,41,.1);border-radius:999px;-webkit-tap-highlight-color:transparent;transition:background .18s ease,border-color .18s ease,transform .12s ease}
.wf-search-trigger svg{width:1.5rem;height:1.5rem;display:block}
.wf-search-trigger:active{transform:scale(.92);background:#f9f9f9}
.wf-search-trigger:hover{background:#f9f9f9;border-color:rgba(40,37,41,.18)}
.wf-search-trigger:focus-visible{outline:1px solid rgba(17,17,19,.48);outline-offset:2px;box-shadow:0 0 0 4px rgba(17,17,19,.1)}

/* =========================================================================
   watchfaces.co — Mobile Header Search v1 ("Spotlight Gallery")
   Top-anchored full-screen takeover · iOS-native · image-forward rows
   (v1.1 — visual/a11y refinements from multi-lens critique)
   ========================================================================= */

:root{ --error-text:#D70015; }            /* AA-passing error text (≈5.3:1) */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Trigger active feedback (button itself lives in header markup) ---- */

/* ---- Global focus-visible (WCAG 2.4.7) — keyboard only ---- */
.wf-overlay :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.wf-input{outline:none}
/* The field NEVER paints a full accent ring at rest (that read "bulky" vs iOS). Brand lives in the
   caret; focus shows only a soft halo. */
.wf-field:focus-within{background:#F4F4F5;border-color:rgba(90,69,214,.35);box-shadow:0 0 0 3px rgba(90,69,214,.12)}
.wf-input:focus-visible{outline:none}

/* ============================ Overlay ==================================== */
.wf-overlay{
  position:fixed;left:0;top:0;width:100%;height:100vh;height:100dvh;z-index:2147483000;
  background:var(--background);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top right;
  transition:opacity .26s cubic-bezier(.22,1,.36,1),transform .26s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
html.wf-search-lock{overflow:hidden!important}
body.wf-search-lock{position:fixed!important;left:0;right:0;width:100%;overflow:hidden!important;overscroll-behavior:none}
.wf-overlay[hidden]{display:none}
.wf-overlay.is-open{opacity:1;transform:none}
.wf-overlay.is-closing{transition:opacity .2s cubic-bezier(.4,0,1,1),transform .2s cubic-bezier(.4,0,1,1)}

.wf-safe-top{height:env(safe-area-inset-top,0px);flex:0 0 auto;background:var(--background)}

/* ---- Search bar row ---- */
.wf-bar{display:flex;align-items:center;gap:10px;padding:6px 12px 10px;flex:0 0 auto}
/* Field = pill, same material as the header pill (#F4F4F5 + hairline border) */
.wf-field{
  flex:1;height:2.75rem;background:#F4F4F5;border:1px solid rgba(40,37,41,.08);
  border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 16px;min-width:0;
  transition:box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.wf-field .wf-mag{width:20px;height:20px;flex:0 0 auto;color:var(--placeholder);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.wf-input{
  flex:1;min-width:0;height:40px;border:0;background:none;outline:none;
  font:400 17px/1.3 var(--font-family);color:var(--text-primary);caret-color:var(--accent);
  -webkit-appearance:none;appearance:none;
}
.wf-input::placeholder{color:var(--placeholder);opacity:1}
.wf-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}

.wf-clear{
  position:relative;flex:0 0 auto;width:24px;height:24px;border:0;background:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--placeholder);
}
.wf-clear::after{content:"";position:absolute;width:44px;height:44px;left:50%;top:50%;transform:translate(-50%,-50%)} /* ≥44 hit area */
.wf-clear svg{width:20px;height:20px;display:block}
.wf-clear:active{color:var(--text-secondary)}
.wf-clear[hidden]{display:none}

/* Close = round X button, visual twin of the burger/trigger */
.wf-close{
  flex:0 0 auto;width:2.75rem;min-width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(40,37,41,.1);border-radius:999px;color:var(--text-primary);
  cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:background .18s ease,border-color .18s ease,transform .12s ease;
}
.wf-close svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.wf-close:active{transform:scale(.92);background:#f9f9f9}
.wf-close:hover{background:#f9f9f9;border-color:rgba(40,37,41,.18)}
.wf-close:focus-visible{outline:1px solid rgba(17,17,19,.48);outline-offset:2px;box-shadow:0 0 0 4px rgba(17,17,19,.1)}

/* ---- Progress (indeterminate) ---- */
.wf-progress{height:2px;flex:0 0 auto;overflow:hidden;background:transparent}
.wf-progress.is-active{background:rgba(90,69,214,.15)}
.wf-progress.is-active::before{
  content:"";display:block;height:100%;width:40%;background:var(--accent);
  animation:wf-indeterminate 1.1s ease-in-out infinite;
}
@keyframes wf-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ---- Scroll region ---- */
.wf-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
}

/* ============================ Empty state =============================== */
.wf-empty{padding:6px 0 8px}
.wf-empty[hidden]{display:none}
.wf-section-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px 8px;font:600 13px/16px var(--font-family);letter-spacing:.06em;
  text-transform:uppercase;color:#8E8E93;
}
.wf-section-label .wf-clear-recents{
  border:0;background:none;color:var(--accent);font:600 12px var(--font-family);
  text-transform:none;letter-spacing:0;cursor:pointer;min-height:44px;padding:0 4px;margin:-14px 0;
}
.wf-recent{display:flex;align-items:center;gap:0;min-height:44px}
.wf-recent-main{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;
  padding:0 8px 0 16px;border:0;background:none;cursor:pointer;color:var(--text-primary);
  text-align:left;font:inherit;-webkit-tap-highlight-color:transparent;
}
.wf-recent-main:active{background:var(--background-secondary)}
.wf-recent .ic{width:18px;height:18px;flex:0 0 auto;color:var(--placeholder);stroke:currentColor;fill:none;stroke-width:2}
.wf-recent .q{flex:1;min-width:0;font:400 15px var(--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-recent .refill,.wf-recent .rm{
  flex:0 0 auto;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--placeholder);
}
.wf-recent .refill svg,.wf-recent .rm svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wf-recent .rm:active,.wf-recent .refill:active{color:var(--text-secondary)}

/* Popular-searches chips: lighter filled rail, ≥44px tap target retained */
.wf-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 8px}
.wf-chip{
  min-height:44px;padding:9px 15px;border:0;background:#F2F2F4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  border-radius:16px;font:500 14px var(--font-family);color:var(--text-primary);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,transform .12s ease;
}
.wf-chip:active{background:#EEEDFE;color:var(--accent-hover);transform:scale(.96)}
.wf-hint{padding:10px 16px 12px;color:var(--text-secondary);font:400 13px var(--font-family)}

/* ============================ Results =================================== */
.wf-results{list-style:none;margin:0;padding:4px 0 0}
.wf-results[hidden]{display:none}
.wf-row{
  display:flex;align-items:center;gap:14px;min-height:84px;padding:10px 16px;
  text-decoration:none;color:var(--text-primary);position:relative;
  -webkit-tap-highlight-color:transparent;transition:background .12s ease;
}
.wf-row:active{background:#F2F1FA}
.wf-row.is-active{background:var(--background-secondary);box-shadow:inset 0 0 0 2px var(--accent)}
/* Watch-face-shaped thumbnail: portrait (matches the real card aspect 87/107) on the site's light card */
.wf-thumb{
  position:relative;flex:0 0 auto;width:54px;aspect-ratio:87/107;border-radius:13px;overflow:hidden;
  background:#F7F7F9;box-shadow:inset 0 0 0 .5px rgba(16,24,40,.05),0 1px 3px rgba(40,37,41,.07);
}
.wf-thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.wf-thumb .ph{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;color:var(--border);background:var(--background-secondary)}
.wf-thumb .ph svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}
.wf-rowtext{flex:1;min-width:0}
.wf-rowtext .t{font:600 15px/1.3 var(--font-family);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-rowtext .c{font:400 13px/1.4 var(--font-family);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.wf-rowtext mark{background:#EEEDFE;color:var(--accent-hover);font-weight:600;font-style:normal;border-radius:4px;padding:0 3px;margin:0 -1px}
.wf-badge{
  position:absolute;top:12px;right:16px;font:600 10px/1 var(--font-family);letter-spacing:.03em;
  color:var(--accent-hover);background:#EEEDFE;padding:3px 7px;border-radius:50px;
}

/* result settle (first appearance only; JS adds .wf-animate to <ul>) */
.wf-results.wf-animate .wf-row{animation:wf-rise .28s cubic-bezier(.32,.72,0,1) both}
.wf-results.wf-animate .wf-row:nth-child(1){animation-delay:0ms}
.wf-results.wf-animate .wf-row:nth-child(2){animation-delay:30ms}
.wf-results.wf-animate .wf-row:nth-child(3){animation-delay:60ms}
.wf-results.wf-animate .wf-row:nth-child(4){animation-delay:90ms}
.wf-results.wf-animate .wf-row:nth-child(5){animation-delay:120ms}
.wf-results.wf-animate .wf-row:nth-child(6){animation-delay:150ms}
@keyframes wf-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* skeleton (first session query while chunk boots) */
.wf-skel-row{display:flex;align-items:center;gap:12px;min-height:72px;padding:8px 16px}
.wf-skel-tile{width:64px;height:64px;border-radius:12px;background:var(--background-secondary)}
.wf-skel-lines{flex:1}
.wf-skel-bar{height:12px;border-radius:6px;background:var(--background-secondary);margin:6px 0}
.wf-skel-bar.s1{width:60%}
.wf-skel-bar.s2{width:35%}
.wf-skel-shimmer{position:relative;overflow:hidden}
.wf-skel-shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:wf-shimmer 1.2s infinite}
@keyframes wf-shimmer{100%{transform:translateX(100%)}}

/* ---- See all CTA — pinned footer, always reachable above the keyboard ---- */
.wf-footer{
  flex:0 0 auto;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid rgba(60,60,67,.12);
}
.wf-footer[hidden]{display:none}
.wf-seeall{
  display:flex;align-items:center;justify-content:center;gap:6px;height:50px;
  background:var(--accent);color:#fff;border-radius:14px;font:600 17px var(--font-family);
  text-decoration:none;box-shadow:0 6px 16px rgba(90,69,214,.28);transition:transform .12s ease,background .15s ease;
}
.wf-seeall svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wf-seeall:active{background:var(--accent-hover);transform:scale(.985)}

/* ---- No results (vertically centered) ---- */
.wf-noresults{padding:0 24px;min-height:48vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.wf-noresults[hidden]{display:none}
.wf-noresults .nr-title{font:400 16px var(--font-family);color:var(--text-secondary)}
.wf-noresults .nr-title b{color:var(--text-primary);font-weight:600}
.wf-noresults .nr-sub{font:400 13px var(--font-family);color:var(--text-secondary);margin-top:6px}
.wf-noresults .wf-chips{justify-content:center;margin-top:14px}
.wf-nr-links{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:18px}
.wf-nr-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:600 15px var(--font-family);color:var(--accent);text-decoration:none}
.wf-nr-link:not(.wf-nr-primary){font-weight:500;color:var(--text-secondary)}
.wf-nr-link:active{opacity:.5}

/* ---- Error / offline ---- */
.wf-error{padding:14px 16px;color:var(--error-text);font:500 14px var(--font-family);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wf-error[hidden]{display:none}
.wf-error-retry{border:0;background:none;color:var(--accent);font:600 14px var(--font-family);cursor:pointer;min-height:44px;padding:0 6px;text-decoration:underline}
.wf-error-retry[hidden]{display:none}
.wf-error-retry:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---- Undo toast (recent removal) ---- */
.wf-toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(8px);
  background:var(--text-primary);color:#fff;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:14px;
  font:500 14px var(--font-family);box-shadow:var(--card-shadow);z-index:2147483001;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;max-width:calc(100% - 32px);
}
.wf-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.wf-toast button{border:0;background:none;color:#8C7BFF;font:600 14px var(--font-family);cursor:pointer;min-height:44px}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .wf-overlay{transition:opacity .12s linear;transform:none}
  .wf-overlay.is-open{transform:none}
  .wf-results.wf-animate .wf-row{animation:none}
  .wf-progress.is-active::before{animation:none;width:30%;opacity:.6}
  .wf-skel-shimmer::after{animation:none}
  .wf-search-trigger:active,.wf-chip:active,.wf-seeall:active,.wf-row.is-active{transform:none}
}

/* ---- Responsive: center the search content in a readable column on wider screens ---- */
@media (min-width:768px){
  .wf-bar,.wf-progress,.wf-scroll,.wf-footer{max-width:680px;margin-left:auto;margin-right:auto;width:100%}
}

/* ---- Desktop hover states (search is responsive; the theme's generic a:hover
       turns links blue + underlined, which made the purple See-all text vanish) ---- */
.wf-overlay a:hover{text-decoration:none}
.wf-seeall:hover{background:var(--accent-hover);color:#fff;text-decoration:none}
.wf-row:hover{background:var(--background-secondary)}
.wf-chip:hover{background:#EBEBEF}
.wf-recent-main:hover{background:var(--background-secondary)}
.wf-nr-link.wf-nr-primary:hover{text-decoration:underline}
.wf-nr-link:not(.wf-nr-primary):hover{color:var(--text-primary)}