/* =========================================================================
   F2 · Seek — listing styles, ported from the design handoff
   (design_handoff_liquid_landing/Search.html inline <style>).

   Two adaptations to server rendering: the facet values are links rather than
   JavaScript buttons, so they are styled together; and the price and sort
   controls are real GET forms, so `.sort` sits on the form instead of a label.
   ========================================================================= */
.seek-head { padding-block: clamp(32px, 4vw, 58px) clamp(22px, 2.6vw, 34px); }
.seek-head h1 { font-size: var(--h1); }
.seek-head .sub { color: var(--ink-2); margin: 12px 0 0; }
.seek-form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; margin-top: 26px; max-width: 640px; }
.seek-form input { flex: 1; border: 0; background: none; outline: none; font-family: var(--serif); font-size: 1.4rem; color: var(--ink); }
.seek-form input::placeholder { color: var(--ink-3); }
.seek-form button { background: none; border: 0; cursor: pointer; color: var(--ink); }
/* Clearing the term and clearing the facets are two separate acts. This control drops
   the typed term only; #clearFacets below resets the filters only. It is a link, so it
   works with scripts off; the script adds Escape and keeps it in step while typing. */
#seekClear { display: none; align-items: center; gap: 7px; font-family: var(--sans); font-size: .73rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); transition: color .2s; }
#seekClear[data-on] { display: inline-flex; }
#seekClear:hover { color: var(--clay); }
#seekClear svg { flex: none; }
.seek-form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.seek-body { display: grid; grid-template-columns: 216px 1fr; gap: clamp(28px, 4vw, 60px); padding-block: clamp(28px, 3.4vw, 48px) var(--section); }
/* Sticky alone pins the rail in place but gives it nothing of its own to
   scroll: once its facets outgrow the viewport below top, the only way to
   reach the rest was scrolling the whole page past the results grid. Bounding
   its height to the viewport and scrolling inside it fixes that. */
.facet-rail { position: sticky; top: 132px; align-self: start; max-height: calc(100vh - 132px - 24px); overflow-y: auto; }
.facet { margin-bottom: 30px; }
.facet h4 { font-family: var(--sans); font-size: .67rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 13px; }
.facet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* A facet has to look like something you can press, not just report its own state: a
   checkbox mark, a hover background, and — once selected — a mark that becomes an × on
   hover, so it is clear the next press removes it. */
.facet li a { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 5px 8px 5px 6px; margin-left: -6px; border-radius: 3px; cursor: pointer; font-family: var(--sans); font-size: .93rem; color: var(--ink-2); text-align: left; transition: color .2s, background .2s; }
.facet li a .fx { flex: none; position: relative; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; transition: border-color .2s, background .2s; }
.facet li a .fx::before, .facet li a .fx::after { content: ""; position: absolute; background: #fff; opacity: 0; transition: opacity .15s; }
.facet li a .fx::before { left: 3px; top: 6px; width: 4px; height: 1.6px; transform: rotate(45deg); transform-origin: left center; }
.facet li a .fx::after { left: 5.4px; top: 8px; width: 7px; height: 1.6px; transform: rotate(-50deg); transform-origin: left center; }
.facet li a:hover { color: var(--ink); background: rgba(0,0,0,.035); }
.facet li a:hover .fx { border-color: var(--ink-3); }
.facet li a:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.facet li a.on { color: var(--clay); font-weight: 600; }
.facet li a.on .fx { background: var(--clay); border-color: var(--clay); }
.facet li a.on .fx::before, .facet li a.on .fx::after { opacity: 1; }
/* selected + hover: the mark becomes an × — signifies the click removes it */
.facet li a.on:hover .fx::before { left: 3.4px; top: 6.2px; width: 8px; transform: rotate(45deg); }
.facet li a.on:hover .fx::after { left: 3.4px; top: 6.2px; width: 8px; transform: rotate(-45deg); transform-origin: left center; }
.facet-hint { font-size: .72rem; color: var(--ink-3); margin: -6px 0 11px; }
.facet input[type=range] { width: 100%; accent-color: var(--amber); }
.facet-price { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-3); margin-top: 6px; }
.facet noscript .btn { margin-top: 12px; }
#clearFacets { color: var(--ink-3); background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; padding: 0 0 3px; }

.results-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 38px); }
.results-bar .count { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.sort { display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sort select { font-family: var(--sans); font-size: .82rem; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 4px 0; outline: none; cursor: pointer; }

@media (max-width: 900px) {
  .seek-body { grid-template-columns: 1fr; }
  /* A 2-column grid here swept the hint paragraph and the price slider into
     the same grid as every facet group — none of them are facets, so they
     threw the pairing off (Country next to Size, ABV wrapping under
     Country, Max Price stacked wherever the zig-zag landed). One column,
     same stacking desktop already does without a grid at all, avoids the
     whole class of mismatch. */
  .facet-rail { position: static; display: block; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
}