/*
 * Home feed (items/all).
 *
 * Shares tokens (--cm-*, --pf-*), the page wrapper (.cm-page) and the listing card
 * (listing_card.css) with the other redesigned pages. Same rules: no shadows, no
 * transitions, secondary text #666666. Values are the home feed handoff's.
 */

:root {
  --fd-free-tint: #F3FAFF;
  --fd-under-border: #F5E27A;
  --fd-box-off: #7A7A7A;
  --fd-empty-text: #A89E76;
}

.fd-page ::selection { background: var(--cm-blue-light); }

.fd-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* main supplies the handoff's 20px under the header. */
.fd-sponsored { padding-top: 0; }

/* Pages that open with the title (Saved) rather than the sponsored slot. */
.fd-container > .fd-title:first-child { margin-top: 6px; }

.fd-page input[type="number"]::-webkit-outer-spin-button,
.fd-page input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fd-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ----------------------------------------------------------------- buttons */

.fd-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fd-btn:hover { border-color: var(--cm-ink); color: var(--cm-ink); }

.fd-btn--blue,
.fd-btn--blue:hover { background: var(--cm-blue); border-color: var(--cm-blue); color: var(--cm-blue-ink); }
.fd-btn--blue:hover { background: var(--cm-blue-light); border-color: var(--cm-blue-light); }

.fd-btn--ink { border-color: var(--cm-ink); }

.fd-btn--link { color: var(--cm-link); }
.fd-btn--link:hover { color: var(--pf-link-hover); }

.fd-textbutton {
  background: none;
  border: 0;
  padding: 5px 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cm-link);
  cursor: pointer;
}

.fd-textbutton:hover { color: var(--pf-link-hover); }

/* --------------------------------------------------------------- title row */

.fd-title {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
}

.fd-title__text {
  flex: 1 1 320px;
  min-width: 0;
}

.fd-title h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.05;
  color: var(--cm-ink);
}

.fd-title p {
  margin: 7px 0 0;
  font-size: 14.5px;
  color: var(--cm-ink-muted);
}

.fd-title__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* -------------------------------------------------------------- search bar */

.fd-search {
  margin-top: 16px;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: stretch;
  min-height: 52px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 12px;
}

.fd-search__cat {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 48%;
  padding: 0 14px 0 16px;
  border: 0;
  border-right: 1.5px solid var(--cm-border);
  border-radius: 10px 0 0 10px;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

.fd-search__cat:hover { background: var(--cm-ground); }

.fd-search__cat svg { flex: none; }

.fd-search__cat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-search__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  cursor: text;
}

.fd-search__field svg { flex: none; }

.fd-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  /* 15.5px in the handoff; 16px keeps iOS Safari from zooming on focus. */
  font-size: 16px;
  color: var(--cm-ink);
  -webkit-appearance: none;
  appearance: none;
}

.fd-search__input::placeholder { color: var(--cm-ink-muted); }
.fd-search__input::-webkit-search-cancel-button { display: none; }

/* The bar is the field's visible edge, so it carries the focus ring. */
.fd-search:has(.fd-search__input:focus-visible) {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.fd-page .fd-search__input:focus-visible { outline: none; }

.fd-search__clear {
  flex: none;
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cm-link);
  cursor: pointer;
}

.fd-search__clear[hidden] { display: none; }

/* ----------------------------------------------------------- category menu */

.fd-catmenu {
  position: absolute;
  left: -1.5px;
  top: calc(100% + 8px);
  width: min(560px, calc(100vw - 40px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--cm-surface);
  border: 2px solid var(--cm-ink);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px;
}

.fd-catmenu[hidden] { display: none; }

.fd-catopt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cm-ink);
  cursor: pointer;
}

.fd-catopt:hover { background: var(--cm-ground); }

/* The radio is the control; the row is its face. */
.fd-catopt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fd-catopt:has(input:checked) { background: var(--cm-yellow); font-weight: 700; }
.fd-catopt:has(input:focus-visible) { outline: 2px solid var(--cm-blue); outline-offset: 0; }

.fd-catopt__name { flex: 1; min-width: 0; }

.fd-catopt__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

/* No results with the other filters — still selectable. */
.fd-catopt--empty:not(:has(input:checked)) .fd-catopt__name { color: var(--fd-empty-text); }

/* -------------------------------------------------------------- filter row */

.fd-filters {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.fd-filters__spacer { flex: 1; min-width: 0; }

.fd-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 14px;
  border-radius: 12px;
  border: 2px solid var(--toggle-border);
  background: var(--cm-surface);
  cursor: pointer;
  --toggle-border: var(--cm-border);
  --toggle-tint: var(--cm-ground);
  --toggle-box: var(--cm-ink);
  --toggle-check: #FFFFFF;
}

.fd-toggle--all { --toggle-check: var(--cm-yellow); }
.fd-toggle--all:has(input:checked) { --toggle-border: var(--cm-ink); }

.fd-toggle--free { --toggle-border: var(--cm-blue); --toggle-tint: var(--fd-free-tint); --toggle-box: var(--cm-link); }
.fd-toggle--under-50 { --toggle-border: var(--fd-under-border); --toggle-tint: var(--pf-surface-warm); --toggle-box: var(--cm-yellow-ink); }
.fd-toggle--price-drop { --toggle-border: var(--cm-orange); --toggle-tint: var(--pf-danger-soft); --toggle-box: var(--pf-danger); }

.fd-toggle:has(input:checked) { background: var(--toggle-tint); }

.fd-toggle:has(input:focus-visible) {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.fd-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fd-toggle__box {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  border: 2px solid var(--fd-box-off);
  background: var(--cm-surface);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-toggle:has(input:checked) .fd-toggle__box {
  border-color: var(--toggle-box);
  background: var(--toggle-box);
  color: var(--toggle-check);
}

.fd-toggle__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-ink);
  white-space: nowrap;
}

.fd-toggle__note {
  font-size: 13px;
  font-weight: 500;
  color: var(--cm-ink-muted);
  white-space: nowrap;
}

.fd-price {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 12px;
  background: var(--cm-surface);
  border: 2px solid var(--cm-border);
}

.fd-price__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
}

.fd-price__field {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--cm-ground);
  border: 1px solid var(--cm-border-band);
  font-size: 14px;
  color: var(--cm-ink-muted);
  cursor: text;
}

.fd-price__field input {
  width: 52px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
  padding: 0;
}

.fd-price__field:has(input:focus-visible) {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.fd-page .fd-price__field input:focus-visible { outline: none; }

.fd-price__dash { color: var(--cm-ink-muted); }

/* ------------------------------------------------------------- results bar */

.fd-bar {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.fd-bar__count {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--cm-ink);
}

/* A quiet figure beside the count (My purchases' total). */
.fd-bar__note {
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.fd-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fd-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border-radius: 8px;
  border: 0;
  background: var(--cm-ink);
  color: var(--cm-ground);
  font-size: 12.5px;
  font-weight: 600;
  max-width: 100%;
  cursor: pointer;
}

.fd-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-chip svg { flex: none; }

.fd-chip:hover { background: #444444; }

.fd-bar__spacer { flex: 1; min-width: 8px; }

.fd-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.fd-sort__select {
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-border);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

/* ------------------------------------------------------------- empty state */

.fd-empty {
  margin-top: 14px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: 14px;
  padding: 22px 20px;
}

.fd-empty__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cm-ink);
}

.fd-empty__body {
  margin: 6px 0 14px;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cm-ink-muted);
  text-wrap: pretty;
}

.fd-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ------------------------------------------------------- guest sign-up wall */

/* Where a guest's feed stops (HomeFeed::GUEST_LIMIT). */
.fd-guestwall {
  margin-top: 12px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 14px;
  padding: 22px 20px;
}

.fd-guestwall__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--cm-ink);
}

.fd-guestwall__body {
  margin: 6px 0 14px;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cm-ink-muted);
}

/* -------------------------------------------------------------------- grid */

.fd-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

/* A frame swap shouldn't flash a stale grid at full strength. */
turbo-frame#feed_results[busy] .fd-grid { opacity: 0.55; }

/* ------------------------------------------------------------------ mobile */

/* On a mobile screen the handoff's full-size toggles each took a row of their
   own, stacking five tall boxes above the first listing. Below 640px they become
   one compact row of pills that scrolls sideways, running edge to edge so the
   cut-off pill at the screen edge says there's more. */
@media (max-width: 639px) {
  /* The header already has Sell, and the account menu My items. */
  .fd-title__actions { display: none; }

  .fd-filters {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px -20px 0;
    padding: 2px 20px 4px;   /* room for the focus ring */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fd-filters::-webkit-scrollbar { display: none; }

  .fd-filters__spacer { display: none; }

  .fd-toggle {
    flex: none;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    border-radius: 999px;
    border-width: 1.5px;
  }

  .fd-toggle__box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border-width: 1.5px;
  }

  .fd-toggle__box svg { width: 11px; height: 11px; }

  .fd-toggle__label { font-size: 14px; }

  .fd-toggle__note { display: none; }

  .fd-price {
    flex: none;
    gap: 6px;
    padding: 3px 3px 3px 12px;
    border-radius: 999px;
    border-width: 1.5px;
  }

  .fd-price__field {
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
  }

  .fd-price__field input {
    width: 44px;
    /* Below 16px iOS Safari zooms the page on focus. */
    font-size: 16px;
  }

  .fd-bar { margin-top: 16px; }

  /* The select reads "Newest" on its own; keep "Sort" for screen readers only, so
     the control fits beside the count and Clear all instead of wrapping. */
  .fd-sort > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------- filters panel */

/* items/feed/_filters. On desktop the panel's wrapper takes no space, so the
   toggles and price stay one row under the search; its header and footer, the
   backdrop and the Filters button only exist on a phone. */
.fd-sheet { display: contents; }

.fd-sheet__head,
.fd-sheet__foot,
.fd-sheet-backdrop,
.fd-filterbtn { display: none; }

/* On a phone that row was the busiest thing above the listings. It becomes a
   panel sliding in from the right, opened by the Filters button in the results
   bar (feed#openFilters). The one transition on these pages: it's a panel that
   moves, and without it the panel would just appear over the page. */
@media (max-width: 639px) {
  .fd-filterbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--cm-surface);
    border: 1.5px solid var(--cm-border);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cm-ink);
    cursor: pointer;
  }

  .fd-filterbtn--on { border-color: var(--cm-ink); }

  .fd-filterbtn__count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cm-ink);
    color: var(--cm-yellow);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .fd-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(88vw, 360px);
    display: flex;
    flex-direction: column;
    background: var(--cm-ground);
    border-left: 1.5px solid var(--cm-ink);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .fd-sheet--open {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
  }

  .fd-sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(34, 34, 34, 0.4);
  }

  .fd-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-divider);
  }

  .fd-sheet__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--cm-ink);
  }

  .fd-sheet__close {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1.5px solid var(--cm-border);
    background: var(--cm-surface);
    color: var(--cm-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Inside the panel: a column of full-width rows instead of the pill row. */
  .fd-sheet .fd-filters {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
    padding: 16px;
    overflow-x: visible;
    overflow-y: auto;
  }

  .fd-sheet .fd-toggle {
    padding: 12px 14px;
    border-radius: 12px;
    border-width: 2px;
  }

  .fd-sheet .fd-toggle__note { display: inline; }

  .fd-sheet .fd-price {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border-width: 2px;
  }

  .fd-sheet .fd-price__label { flex-basis: 100%; }

  .fd-sheet .fd-price__field {
    flex: 1;
    height: 40px;
    border-radius: 8px;
  }

  .fd-sheet .fd-price__field input { width: 100%; }

  .fd-sheet__foot {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--cm-divider);
  }

  .fd-sheet__foot .fd-btn {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .fd-sheet,
  .fd-sheet--open { transition: none; }
}