/* ==========================================================================
   GALAXY GADGETZ · productoverzicht (shop, categorie, zoeken)
   Gedeeld door shop.html, categorie.html en zoeken.html. Prefix .lst-
   Mobiel eerst (390), breakpoints 600 / 900 / 1200.
   ========================================================================== */

/* ---------- paginakop ---------- */
.lst-head { padding-block: 12px 16px; }
.lst-head .gg-breadcrumb { margin-bottom: 8px; }
.lst-kicker { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 500; letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.lst-title { margin-top: 6px; font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); }
.lst-lead { margin-top: 10px; max-width: 58ch; color: var(--gg-muted); font-size: var(--gg-fs-sm); line-height: var(--gg-lh-body); }
@media (min-width: 600px) { .lst-lead { font-size: var(--gg-fs-base); } }
@media (min-width: 900px) {
  .lst-head { padding-block: 28px 32px; }
  .lst-head .gg-breadcrumb { margin-bottom: 20px; }
  .lst-title { margin-top: 10px; }
  .lst-lead { margin-top: 14px; font-size: var(--gg-fs-md); }
}

/* ---------- categorie-ingangen ---------- */
.lst-cats { margin-top: 16px; }
.lst-cats__list { display: flex; gap: 8px; list-style: none; margin: 0 calc(-1 * var(--gg-gutter)); padding: 2px var(--gg-gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.lst-cats__list::-webkit-scrollbar { display: none; }
.lst-cats__list > li { flex: 0 0 auto; scroll-snap-align: start; }
.lst-cat { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 16px 4px 4px; border: 1px solid var(--gg-line-strong); border-radius: var(--gg-r-pill); background: var(--gg-paper); color: var(--gg-ink); text-decoration: none; transition: border-color var(--gg-dur-1), background var(--gg-dur-1); }
.lst-cat:hover { border-color: var(--gg-ink); }
.lst-cat__thumb { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--gg-surface); }
.lst-cat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lst-cat__text { display: grid; min-width: 0; }
.lst-cat__name { font-size: var(--gg-fs-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.lst-cat__full { display: none; }
.lst-cat__meta { display: none; font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); letter-spacing: .02em; }
.lst-cat__arrow { display: none; }
.lst-cat[aria-current="page"] { background: var(--gg-ink); border-color: var(--gg-ink); color: #fff; }
@media (min-width: 900px) {
  .lst-cats { margin-top: 28px; }
  .lst-cats__list { display: grid; grid-template-columns: repeat(var(--lst-cats, 4), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; overflow: visible; }
  .lst-cat { gap: 14px; min-height: 0; padding: 10px 14px 10px 10px; border-radius: var(--gg-r-lg); border-color: var(--gg-line); background: var(--gg-surface); }
  .lst-cat:hover { background: var(--gg-surface-2); border-color: var(--gg-line-strong); }
  .lst-cat__thumb { width: 60px; height: 60px; border-radius: var(--gg-r-md); }
  .lst-cat__text { flex: 1; gap: 4px; }
  .lst-cat__name { white-space: normal; font-size: var(--gg-fs-base); }
  .lst-cat__full { display: inline; }
  .lst-cat__short { display: none; }
  .lst-cat__meta { display: block; }
  .lst-cat__arrow { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--gg-paper); transition: transform var(--gg-dur-2) var(--gg-ease); }
  .lst-cat:hover .lst-cat__arrow { transform: translateX(3px); }
}

/* ---------- resultaatgebied ---------- */
.lst-results { padding-bottom: var(--gg-section-y); }
.lst-layout { display: block; }
@media (min-width: 1200px) {
  .lst--side .lst-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "side bar" "side main"; column-gap: 48px; align-items: start; }
  .lst--side .lst-side { grid-area: side; }
  .lst--side .lst-bar { grid-area: bar; }
  .lst--side .lst-main { grid-area: main; }
}

/* ---------- sticky balk ---------- */
.lst-bar { position: sticky; top: var(--lst-top, 0px); z-index: var(--gg-z-sticky); margin-inline: calc(-1 * var(--gg-gutter)); padding: 8px var(--gg-gutter); background: rgba(255, 255, 255, .97); border-bottom: 1px solid transparent; transition: border-color var(--gg-dur-2), box-shadow var(--gg-dur-2); }
.lst-bar.is-stuck { border-bottom-color: var(--gg-line); box-shadow: 0 6px 16px rgba(17, 17, 20, .04); }
.lst-bar__inner { display: flex; align-items: center; gap: 8px; }
.lst-bar__btn { flex: 1 1 0; min-height: var(--gg-tap); padding: 0 14px; font-size: var(--gg-fs-sm); }
.lst-bar__btn .gg-icon { width: 18px; height: 18px; }
.lst-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--gg-r-pill); background: var(--gg-ink); color: #fff; font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 600; }
.lst-badge[hidden] { display: none; }
.lst-bar__count { display: none; font-size: var(--gg-fs-sm); color: var(--gg-muted); }
.lst-bar__count b { color: var(--gg-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lst-bar__sort { display: none; align-items: center; gap: 8px; margin-left: auto; }
.lst-sortlabel { font-size: var(--gg-fs-sm); color: var(--gg-muted); white-space: nowrap; }
.lst-sortsel { width: auto; min-height: 40px; padding-block: 0; font-size: var(--gg-fs-sm); font-weight: 600; }
@media (pointer: coarse) { .lst-sortsel { min-height: var(--gg-tap); } }
@media (min-width: 600px) {
  .lst-bar__btn { flex: 0 0 auto; }
  .lst-bar__btn--sort { display: none; }
  .lst-bar__count { display: block; margin-left: 8px; }
  .lst-bar__sort { display: flex; }
}
@media (min-width: 1200px) {
  .lst--side .lst-bar { position: static; margin: 0 0 4px; padding: 0 0 16px; background: none; border: 0; box-shadow: none; }
  .lst--side .lst-bar__btn { display: none; }
  .lst--side .lst-bar__count { margin-left: 0; font-size: var(--gg-fs-base); }
}

/* samenvatting (live regio). Zichtbaar op mobiel, alleen voor schermlezers vanaf 600. */
.lst-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 10px; font-size: var(--gg-fs-sm); color: var(--gg-ink); outline: none; }
.lst-summary b { font-weight: 600; }
.lst-summary__sort { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: .04em; text-transform: uppercase; color: var(--gg-muted); }
@media (min-width: 600px) {
  .lst-summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* actieve filters */
.lst-active { margin: 0 0 16px; }
.lst-active[hidden] { display: none; }
.lst-active__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lst-active .gg-chip--remove .gg-icon { width: 14px; height: 14px; }
.lst-active__clear { min-height: 40px; padding: 0 4px; font-size: var(--gg-fs-sm); }
@media (min-width: 600px) { .lst-active { margin-top: 4px; } }

/* grid */
.lst-grid { position: relative; }
.lst-grid[aria-busy="true"] .gg-card.is-skeleton { pointer-events: none; }
.lst-grid.is-empty { display: block; }
.lst-break { grid-column: 1 / -1; margin-block: 12px; }
@media (min-width: 900px) { .lst-break { margin-block: 20px; } }
.lst-break--empty { margin: 0; }
.lst-empty { padding-block: 48px; }
.lst-empty .gg-state__text { max-width: 46ch; }
@media (min-width: 900px) and (max-width: 1199.98px) { .lst-grid.gg-grid--products { --gg-cols: 3; } }
@media (min-width: 1200px) { .lst--side .lst-grid.gg-grid--products { --gg-cols: 3; --gg-grid-gap: 36px 20px; } }

/* meer laden */
.lst-more { margin-top: 40px; }
.lst-more:empty { display: none; }
.lst-more .gg-load-more__count b { color: var(--gg-ink); font-weight: 600; }
.lst-more__end { text-align: center; font-size: var(--gg-fs-sm); color: var(--gg-muted); }
.lst-more .gg-btn { min-width: 200px; }

/* ---------- filterformulier (sidebar + sheet) ---------- */
.lst-form { display: grid; }
.lst-group { border: 0; margin: 0; padding: 16px 0 12px; border-top: 1px solid var(--gg-line); min-width: 0; }
.lst-group:first-child { border-top: 0; padding-top: 4px; }
.lst-group__title { float: left; width: 100%; display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 4px; font-size: var(--gg-fs-sm); font-weight: 700; letter-spacing: -0.005em; color: var(--gg-ink); }
.lst-group__title .gg-tip { font-weight: 400; }
.lst-group__title + * { clear: both; }
.lst-opt { display: flex; width: 100%; font-size: var(--gg-fs-sm); }
.lst-opt .gg-check__text, .lst-opt .gg-radio__text { flex: 1; min-width: 0; }
.lst-opt .gg-check__text small { font-size: var(--gg-fs-xs); margin-top: 1px; }
.lst-opt .gg-delivery__dot { margin-right: 6px; }
.lst-opt__meta { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--gg-r-xs); box-shadow: inset 0 0 0 1px var(--gg-line-strong); font-family: var(--gg-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--gg-muted); vertical-align: 1px; }
.lst-opt .gg-check__count { padding-top: 2px; }
.lst-opt.is-empty { cursor: not-allowed; }
.lst-group--stock { padding-bottom: 8px; }
.lst-group--stock .lst-group__title { float: none; }
.lst-switch { display: flex; width: 100%; justify-content: space-between; flex-direction: row-reverse; gap: 16px; font-size: var(--gg-fs-sm); font-weight: 600; }
.lst-switch__text { display: grid; gap: 2px; }
.lst-switch__text small { font-weight: 400; color: var(--gg-muted); font-size: var(--gg-fs-xs); }
.lst-sortlist { display: grid; }

/* sidebar (vanaf 1200) */
.lst-side { display: none; }
@media (min-width: 1200px) {
  .lst--side .lst-side { display: block; position: sticky; top: calc(var(--lst-top, 0px) + 20px); max-height: calc(100vh - var(--lst-top, 0px) - 40px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; margin-right: -8px; scrollbar-width: thin; }
  .lst-side__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--gg-ink); }
  .lst-side__title { font-size: var(--gg-fs-base); font-weight: 700; }
  .lst-clear { min-height: 32px; padding: 0; font-size: var(--gg-fs-sm); }
  .lst-clear[hidden] { display: none; }
  .lst-side .lst-group:first-child { padding-top: 12px; }
}

/* sheet */
.lst-sheet .gg-layer__body { padding-top: 8px; }
.lst-sheet__foot { grid-template-columns: 1fr 1.7fr; }
.lst-sheet__foot .gg-btn { padding-inline: 12px; }
.lst-only-m { display: inline; }
@media (min-width: 600px) {
  .lst-only-m { display: none; }
  .lst-sheet .lst-group--sort { display: none; }
  .lst-sheet .lst-group--sort + .lst-group { border-top: 0; padding-top: 4px; }
}
@media (max-width: 599.98px) {
  .lst-sheet.is-sort-first .lst-group--sort { background: none; }
}

/* ---------- redactionele blokken in het grid (gedeeld) ---------- */
.lst-guide { display: grid; gap: 24px; padding: 24px 20px; border-radius: var(--gg-r-xl); background: var(--gg-surface); }
.lst-guide__title { margin-top: 10px; font-size: var(--gg-fs-2xl); line-height: var(--gg-lh-snug); }
.lst-guide__lead { margin-top: 10px; color: var(--gg-muted); font-size: var(--gg-fs-sm); max-width: 48ch; }
.lst-guide__links { margin-top: 18px; --gg-cluster: 16px; }
.lst-guide__steps { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.lst-guide__steps li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--gg-line-strong); }
.lst-guide__steps li:first-child { border-top: 0; padding-top: 0; }
.lst-guide__num { grid-row: span 2; font-family: var(--gg-mono); font-size: var(--gg-fs-sm); font-weight: 600; color: var(--gg-pink-strong); padding-top: 1px; }
.lst-guide__step-title { font-weight: 600; font-size: var(--gg-fs-base); line-height: 1.35; }
.lst-guide__step-text { color: var(--gg-ink-2); font-size: var(--gg-fs-sm); line-height: 1.5; }
.lst-guide__spec { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: var(--gg-r-xs); background: var(--gg-paper); box-shadow: inset 0 0 0 1px var(--gg-line-strong); font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: .02em; color: var(--gg-ink); }
@media (min-width: 900px) {
  .lst-guide { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 40px; }
  .lst-guide__steps li:first-child { padding-top: 4px; }
}