/*
 * Product list / category / search results (renewal).
 * Contract: docs/renewal/pages/catalog-top.md §2 + DESIGN.md.
 */

.lx-list {
  display: grid;
  gap: var(--lx-s-6);
  padding-block: var(--lx-s-6) var(--lx-s-10);
}

.lx-list__header {
  margin-bottom: 0;
}

.lx-list__kicker.lx-tone {
  color: var(--lx-tone);
}

.lx-list__title {
  word-break: auto-phrase;
  text-wrap-style: pretty;
  overflow-wrap: anywhere;
}

.lx-list__count {
  font-variant-numeric: tabular-nums;
}

.lx-list-ingredients {
  display: grid;
  gap: var(--lx-s-3);
  padding-block: var(--lx-s-4);
  border-block: var(--lx-hairline);
}

.lx-list-ingredients__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lx-s-3);
}

.lx-list-ingredients__head h2 {
  margin: 0;
  color: var(--lx-ink);
  font-size: var(--lx-text-body);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.lx-list-ingredients__chips {
  display: flex;
  gap: var(--lx-s-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--lx-s-4);
}

.lx-list-ingredients__chips::-webkit-scrollbar {
  display: none;
}

.lx-list-ingredients__chips .lx-tag {
  flex: 0 0 auto;
  min-height: var(--lx-touch);
  text-decoration: none;
  background: var(--lx-paper);
}

.lx-list-ingredients__chips .lx-tag:hover {
  background: var(--lx-mist);
}

.lx-list-ingredients__chips .lx-tag.is-selected {
  border-color: var(--lx-deep);
  color: var(--lx-deep);
  background: var(--lx-mist);
}

/* Refine bar: child-category chips + sort/display selects.
   On SP the controls are disclosed from the mobile search row so browsing keeps
   only the header + search in the fixed chrome. */
.lx-list__controls {
  background: transparent;
}

.lx-list__sort-panel {
  display: grid;
  gap: var(--lx-s-3);
  overflow: hidden;
  padding: var(--lx-s-3) 0;
  border-block: var(--lx-hairline);
  background: var(--lx-paper);
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height var(--lx-dur) var(--lx-ease),
    opacity var(--lx-dur) var(--lx-ease),
    padding var(--lx-dur) var(--lx-ease),
    transform var(--lx-dur) var(--lx-ease);
  visibility: visible;
}

.lx-search__filter-button {
  display: none;
}

.lx-search__filter-button[hidden] {
  display: none !important;
}


.lx-list__chips {
  display: flex;
  gap: var(--lx-s-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--lx-s-4);
}

.lx-list__chips::-webkit-scrollbar {
  display: none;
}

/* Chips are links, not tags: keep them tappable and quiet. */
.lx-list__chips .lx-tag {
  text-decoration: none;
}

.lx-list__chips .lx-tag:hover {
  background: var(--lx-mist);
}

.lx-list__sort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lx-s-2);
  width: 100%;
}

.lx-list__sort-select {
  min-width: 0;
  min-height: var(--lx-touch);
  padding-inline: var(--lx-s-4) var(--lx-s-7);
  font-size: var(--lx-text-small);
}

/* JS auto-submits sort/count changes; this button is rendered only inside <noscript>. */
.lx-list__sort-submit {
  flex: none;
  min-height: var(--lx-touch);
  padding: 0 var(--lx-s-4);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-pill);
  color: var(--lx-ink);
  background: var(--lx-paper);
  font-size: var(--lx-text-small);
  font-weight: 700;
  cursor: pointer;
}

.lx-list__sort-submit:hover {
  background: var(--lx-mist);
}


.lx-list__pager {
  margin-block-start: var(--lx-s-4);
}

.lx-list__mapped-note {
  margin: var(--lx-s-4) 0 0;
  color: var(--lx-body);
  font-size: var(--lx-text-small);
  line-height: var(--lx-lh-body);
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-list__mapped-note a {
  color: var(--lx-link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.lx-list__mapped-note a:hover {
  text-decoration-thickness: 0.12em;
}


/* -- Empty result ------------------------------------------------------------ */
.lx-list-empty {
  display: grid;
  gap: var(--lx-s-5);
  justify-items: start;
  padding: var(--lx-s-7);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-panel);
  background: var(--lx-fog);
}

.lx-list-empty__title {
  margin: 0;
  color: var(--lx-ink);
  font-size: var(--lx-text-h2);
  font-weight: var(--lx-w-display);
  line-height: var(--lx-lh-heading);
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-list-suggest {
  display: grid;
  gap: var(--lx-s-2);
  width: 100%;
  padding: var(--lx-s-4);
  border: var(--lx-hairline);
  border-radius: var(--lx-radius-card);
  background: var(--lx-paper);
}

.lx-list-suggest__label {
  margin: 0;
  color: var(--lx-body);
  font-size: var(--lx-text-body);
  font-weight: var(--lx-w-label);
  line-height: var(--lx-lh-heading);
}

.lx-list-suggest__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
}

.lx-list-suggest__links .lx-tag {
  text-decoration: none;
}

.lx-list-suggest__links .lx-tag:hover {
  background: var(--lx-mist);
  text-decoration: none;
}

.lx-list-empty__text {
  margin: 0;
  color: var(--lx-body);
  font-size: var(--lx-text-body);
  line-height: var(--lx-lh-body);
  word-break: auto-phrase;
  text-wrap-style: pretty;
}

.lx-list-empty__search {
  width: min(100%, 560px);
  min-height: var(--lx-control-h);
}

.lx-list-empty__cats-title {
  margin: var(--lx-s-3) 0 0;
  color: var(--lx-ink);
  font-size: var(--lx-text-h3);
  font-weight: 700;
}

/* Empty state uses the same curated groups as header/home/category index.
   The full live tree remains reachable through the 「すべての商品」 tag. */
.lx-list-empty__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-2);
  width: 100%;
}

.lx-list-empty__cats .lx-tag {
  text-decoration: none;
}

.lx-list-empty__cats .lx-tag:hover {
  background: var(--lx-mist);
  text-decoration: none;
}

.lx-list-empty__all {
  border-color: var(--lx-deep);
  background: var(--lx-paper);
}

@media (min-width: 768px) {
  .lx-list {
    padding-block-start: var(--lx-s-8);
  }

  .lx-list__controls {
    position: static;
  }

  .lx-list__sort-panel {
    grid-template-columns: 1fr auto;
    align-items: center;
    max-height: none;
  }

  .lx-list__sort {
    display: flex;
    gap: var(--lx-s-3);
    justify-content: end;
  }

  .lx-list__sort-select {
    flex: none;
    width: auto;
    min-width: 150px;
    min-height: var(--lx-control-h);
  }

  .lx-list__grid.lx-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lx-list__grid.lx-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


@media (max-width: 767px) {
  /* One compact layout for the whole phone range: switching to a longer label
     or wider spacing at any breakpoint makes the input narrower on a wider
     screen (#254). The toggle is an icon with its name in aria-label, so the
     input keeps >= 170px and its whole hint from 320px up (#258). */
  .lx-list-page .lx-search--mobile {
    gap: 2px;
    padding-inline: 6px;
  }

  .lx-list-page .lx-search--mobile .lx-search__input {
    min-width: 120px;
  }

  .lx-list-page .lx-search--mobile .lx-search__button {
    min-width: 48px;
    padding-inline: var(--lx-s-2);
    white-space: nowrap;
  }

  .lx-search__filter-button {
    width: var(--lx-touch);
    height: var(--lx-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1.5px solid var(--lx-line);
    border-radius: var(--lx-radius-pill);
    color: var(--lx-deep);
    background: var(--lx-paper);
    cursor: pointer;
  }

  .lx-search__filter-button[aria-expanded='true'] {
    border-color: var(--lx-deep);
    background: var(--lx-mist);
  }

  /* `.lx-search svg` places the input's search glyph; this icon sits in its button. */
  .lx-search .lx-search__filter-icon {
    position: static;
    width: 20px;
    height: 20px;
    color: currentColor;
  }

  .lx-list__controls {
    /* Focus scrolling uses --lx-header-offset. The list controls use their
       own top so the phone search row can stack above them without changing
       keyboard scroll-margin behavior on checkout pages (#161/#173). */
    position: sticky;
    top: var(--lx-sticky-top, var(--lx-header-offset, calc(var(--lx-header-h) + 60px)));
    z-index: 40;
  }

  /* Folding only hides the panel: it keeps its height in the flow, so the grid
     never moves when it folds or unfolds after a scroll (#258, CLS). list.js
     folds it only while the controls are stuck under the header, where the
     transparent box lets taps through to the cards below. */
  .lx-list__controls.is-folded {
    pointer-events: none;
  }

  .lx-list__controls.is-folded .lx-list__sort-panel {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
      opacity var(--lx-dur) var(--lx-ease),
      transform var(--lx-dur) var(--lx-ease),
      visibility 0s linear var(--lx-dur);
    visibility: hidden;
  }

  /* Opened from the header toggle after a scroll, the panel is a sheet over
     the grid. */
  .lx-list__controls.is-stuck .lx-list__sort-panel {
    box-shadow: var(--lx-shadow-float);
  }

  .lx-list-ingredients__chips,
  .lx-list__chips {
    padding-inline-end: var(--lx-s-7);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }

  .lx-list__sort-select {
    font-size: var(--lx-text-body);
  }
}

/* ---------- v3 award pass phase 3: the category's drawing beside its title (2026-10-05) ----------
   Same original line drawing as the home category tile; it draws itself in when the page opens. */
.lx-list__header {
  position: relative;
}

.lx-list__art {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  color: var(--lx-tone, var(--lx-deep));
}

.lx-list__art .lx-cat-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lx-list__art .lx-cat-art__disc {
  fill: var(--lx-tone-bright, var(--lx-mint));
  opacity: 0.4;
}

@media (prefers-reduced-motion: no-preference) {
  .lx-list__art .lx-cat-art__line path {
    stroke-dasharray: 1;
    animation: lx-list-draw 1.1s 0.2s var(--lx-ease) both;
  }

  .lx-list__art .lx-cat-art__line path:nth-child(2) { animation-delay: 0.3s; }
  .lx-list__art .lx-cat-art__line path:nth-child(3) { animation-delay: 0.4s; }
  .lx-list__art .lx-cat-art__line path:nth-child(4) { animation-delay: 0.5s; }
}

@keyframes lx-list-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (min-width: 768px) {
  .lx-list__art {
    width: 104px;
    height: 104px;
  }
}