/* plp.css — MONO. product-listing pages (best-sellers + collections). AAA pass.
   Page-scoped: loaded only from best-sellers.html + collections.html via
   {% block head_extra %}. Monochrome only — no hue anywhere. Relies on the
   tokens + easings in styles.css (--dur-*, --ease-*, --pat, --pat2). */

/* ══ 1 · Toolbar (filter chips + sort + view) ══════════════════════════════ */
.plp-toolbar {
  position: sticky;
  top: 4rem;                 /* clears the 4rem header */
  z-index: 30;
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 12px 32px -24px var(--pat2);
}
.plp-toolbar__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.plp-toolbar__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* category chips */
.plp-chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  .plp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }
  .plp-chips::-webkit-scrollbar { display: none; }
  .plp-chip { flex-shrink: 0; white-space: nowrap; }
}
.plp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0.5rem 1.05rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-utility),
    background var(--dur-fast) var(--ease-utility),
    color var(--dur-fast) var(--ease-utility),
    transform var(--dur-fast) var(--ease-utility);
}
.plp-chip:hover { border-color: var(--ink); }
.plp-chip:active { transform: translateY(1px); }
.plp-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.plp-chip b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 9999px;
  background: var(--chip);
  min-width: 1.4rem;
  text-align: center;
}
.plp-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.plp-chip[aria-pressed="true"] b { color: var(--ink); background: var(--bg); opacity: 1; }

/* sort + view controls */
.plp-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.plp-sort {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0.5rem 2.1rem 0.5rem 1.05rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-utility);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}
.plp-sort:hover { border-color: var(--ink); }
.plp-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.plp-view {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9999px;
  overflow: hidden;
}
.plp-view button {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.15rem;
  color: var(--muted);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-utility), color var(--dur-fast) var(--ease-utility);
}
.plp-view button:hover { color: var(--ink); }
.plp-view button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.plp-view button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* product count */
.plp-count {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* secondary AI pills */
.plp-ai {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.plp-ai button {
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0.4rem 0.95rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-utility), color var(--dur-fast) var(--ease-utility),
    background var(--dur-fast) var(--ease-utility);
}
.plp-ai button:hover { color: var(--ink); border-color: var(--ink); }
.plp-ai button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.plp-ai button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ══ 2 · Product card typography hierarchy ═════════════════════════════════ */
/* card surface — every product is a clearly bounded, tappable region.
   A hairline frame + subtle surface read as a discrete card in both themes
   (cardHTML ships the same geometry as utilities so rails outside .pgrid —
   PDP related/recent — share the exact card; these rules only refine it). */
.pgrid article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.75rem;
}
/* image container — reserved aspect ratio prevents layout shift */
.pgrid article > div:first-child {
  background: var(--chip);
  border-radius: 0.4rem;
  overflow: hidden;
}
/* hover zoom = transform on the img ONLY; the monochrome drain (filter)
   lives on the .card-media wrapper — never filter + transform on one
   element (raster blur). */
.pgrid article .card-img {
  transition: transform var(--dur-slow) var(--ease-cinematic);
}
.pgrid article .card-media {
  transition: filter var(--dur-slow) var(--ease-utility);
}
/* mono-brand: image drains to grayscale on hover (desktop only) */
@media (hover: hover) {
  .dark .pgrid article:hover .card-media { filter: grayscale(1) brightness(0.92); }
}
/* imageless products: intentional placeholder, centered mark on --chip */
.pgrid article .card-ph { border-radius: 0.4rem; }

/* title — primary text, Inter 500, clamped to 2 lines with a clean CSS
   ellipsis; a fixed min-height keeps every card in a row aligned. */
.pgrid article h2,
.pgrid article .card-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.pgrid article h2 a,
.pgrid article a[href^="/products/"] { text-decoration: none; }
.pgrid article h2 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* muted subline (category · condition) — quiet secondary metadata */
.pgrid article .card-sub,
.pgrid article .card-variants {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.pgrid article .card-variants { display: block; margin-top: 2px; }
/* star rating — quiet, secondary (only rendered when reviews exist) */
.pgrid article .text-\[11px\] { color: var(--muted); }
/* price — JetBrains Mono, tabular figures */
.pgrid article .card-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.pgrid article s {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-variant-numeric: tabular-nums;
}

/* quick-add — full-width, high-contrast, slides up on hover */
.pgrid article .js-add {
  letter-spacing: 0.14em;
  will-change: transform;
}
.pgrid article .js-add:hover { opacity: 0.9; }

/* wishlist / quick-view / quick-add reveal is owned by utilities on the
   buttons in cardHTML (hidden below md — clean media on touch; opacity /
   translate reveal at md+) so PLP, home and PDP rails behave identically.
   Only transition timing is refined here. */
.pgrid article .js-wish,
.pgrid article .js-quickview {
  transition: opacity var(--dur-base) var(--ease-utility),
    border-color var(--dur-fast) var(--ease-utility), background var(--dur-fast) var(--ease-utility);
}

/* card hover — SSENSE restraint: hairline darkens, image zooms, quick-add
   reveals. No lift/translate on the card itself (transform stays on img). */
.pgrid article {
  transition: border-color var(--dur-fast) var(--ease-utility);
}
@media (hover: hover) {
  .pgrid article:hover { border-color: var(--e4); }
}

/* ══ 3 · Staggered reveal ══════════════════════════════════════════════════ */
.pgrid article.card-reveal {
  animation: plp-reveal 0.55s var(--ease-cinematic) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes plp-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══ 4 · Collections page — header + category tiles ═══════════════════════ */
/* header — homepage section rhythm: hairline eyebrow, black headline,
   muted subline; mono family count pinned to the right edge. */
.col-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.col-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.col-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--line); }
.col-head__meta { text-align: right; line-height: 1; padding-bottom: 0.25rem; }
.col-head__meta b {
  display: block;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.col-head__meta span {
  display: block;
  margin-top: 0.5rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* grid — deliberate rhythm: stacked at 360, 2×2 at sm, one full-width
   feature tile + three across at lg. Gaps stay on the 8px grid. */
.col-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.col-grid > .col-empty { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .col-grid { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
  .col-grid > .cat-tile { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .col-grid > .cat-tile { grid-column: span 2; }
  .col-grid > .cat-tile--feature { grid-column: span 6; }
}

/* tile — same card language as the product cards: surface, hairline,
   rounded, padded. Media sits inside with a locked aspect ratio, so
   nothing shifts while images stream in. */
.cat-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.75rem;
  transition: border-color var(--dur-fast) var(--ease-utility);
}
.cat-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .cat-tile:hover { border-color: var(--e4); }
}
.cat-tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--chip);
  transition: filter var(--dur-base) var(--ease-utility);
}
@media (min-width: 640px) { .cat-tile__media { aspect-ratio: 3 / 2; } }
@media (min-width: 1024px) { .cat-tile--feature .cat-tile__media { aspect-ratio: 16 / 9; } }
.cat-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-cinematic), opacity var(--dur-base) var(--ease-utility);
}
/* theme-aware crossfade — a = light variant, b = dark variant; the base
   image follows the theme, hover reveals the opposite. Zoom = transform
   on the img only; the grayscale drain stays on the media wrapper —
   never filter + transform on the same element. */
.cat-tile__img--b { opacity: 0; }
.dark .cat-tile__img--a { opacity: 0; }
.dark .cat-tile__img--b { opacity: 1; }
@media (hover: hover) {
  .cat-tile:hover .cat-tile__img,
  .cat-tile:focus-visible .cat-tile__img { transform: scale(1.05); }
  .cat-tile:hover .cat-tile__img--a,
  .cat-tile:focus-visible .cat-tile__img--a { opacity: 0; }
  .cat-tile:hover .cat-tile__img--b,
  .cat-tile:focus-visible .cat-tile__img--b { opacity: 1; }
  .dark .cat-tile:hover .cat-tile__img--a,
  .dark .cat-tile:focus-visible .cat-tile__img--a { opacity: 1; }
  .dark .cat-tile:hover .cat-tile__img--b,
  .dark .cat-tile:focus-visible .cat-tile__img--b { opacity: 0; }
  .cat-tile:hover .cat-tile__media,
  .cat-tile:focus-visible .cat-tile__media { filter: grayscale(1); }
  .dark .cat-tile:hover .cat-tile__media,
  .dark .cat-tile:focus-visible .cat-tile__media { filter: grayscale(1) brightness(0.92); }
}

/* label row under the media — name left, mono count right, arrow on hover */
.cat-tile__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.25rem 0.125rem;
}
.cat-tile__name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.cat-tile__meta {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cat-tile__meta b {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cat-tile__go {
  flex: none;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-utility), transform var(--dur-fast) var(--ease-utility);
}
@media (hover: hover) {
  .cat-tile:hover .cat-tile__go,
  .cat-tile:focus-visible .cat-tile__go { opacity: 1; transform: translateX(0); }
}
/* empty collections — no fake counts, no ghost-dimming; the "new in"
   meta is the only signal, honest and quiet. */

/* branded monochrome placeholder when a collection has no image yet —
   inverted ink tile so it reads as an intentional editorial card, not a void */
.cat-tile__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--ink);
}
.cat-tile__word {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bg);
  user-select: none;
}
.cat-tile__tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bg);
  opacity: 0.55;
  max-width: 26ch;
  text-align: center;
}

/* ══ 5 · Skeleton (matches card geometry — zero layout shift) ══════════════ */
.skeleton-card {
  content-visibility: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.75rem;
}
.skeleton-card > .skeleton { border-radius: 0.4rem; }

/* ══ 6 · Reduced motion ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pgrid article.card-reveal { animation: none; opacity: 1; transform: none; }
  .pgrid article,
  .pgrid article > div:first-child { transition: none; }
  .cat-tile__img,
  .cat-tile__media,
  .cat-tile__go,
  .pgrid article .card-img,
  .pgrid article .card-media,
  .pgrid article .js-wish,
  .pgrid article .js-quickview { transition: none; }
  /* quick-add: no slide — always visible at md+ under reduced motion */
  .pgrid article .js-add { transition: none; transform: none; }
  .cat-tile:hover .cat-tile__img,
  .cat-tile:hover .cat-tile__go { transform: none; }
}