:root {
  --bg: #ffffff;
  --ink: #15171b;
  --muted: #676b73;
  --line: #e6e7ea;
  --surface: #f1f2f4;          /* chips, tabs, buttons */
  --surface-raised: #ffffff;   /* selected tab */
  --well: #f1f2f4;             /* behind product photos; white photo backgrounds blend into it */
  --accent: #c8102e;
  --note: #fff5dc;
  --note-line: #f0dca6;
  --raise: 0 1px 2px rgb(0 0 0 / .1), 0 0 0 1px rgb(0 0 0 / .04);
  --radius: 14px;
  --gutter: 16px;
  --brand-row: 52px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131417;
    --ink: #eceef2;
    --muted: #9ba0a8;
    --line: #27292e;
    --surface: #1f2125;
    --surface-raised: #373a41;
    --well: #e4e5e8;             /* stays light: shop photos are shot on white */
    --note: #2b2517;
    --note-line: #4d4122;
    --raise: none;
  }
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }

/* Header: brand left, page tabs right. On phones the tabs drop under the brand and
   the header sticks with a negative top, so the brand scrolls away and the tabs stay. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.tabs { display: flex; padding: 3px; border-radius: 11px; background: var(--surface); }
.tabs a { padding: .4rem .95rem; border-radius: 8px; color: var(--muted); font-size: .9375rem; font-weight: 600; text-align: center; white-space: nowrap; }
.tabs a:hover, .tabs:not(:has([aria-current])) a { color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--raise); }
@media (max-width: 639px) {
  .site-header { top: calc(-1 * var(--brand-row)); }
  .header-inner { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
  .brand { height: var(--brand-row); }
  .tabs { margin-bottom: 10px; }
  .tabs a { flex: 1; }
}

/* Filters: one scrollable line per group on phones, wrapping rows on wider screens. */
.filters { display: grid; gap: .5rem; padding-top: 1.25rem; }
.chip-row { display: flex; align-items: center; gap: .4rem; }
.chip-label { flex: none; min-width: 5.75rem; color: var(--muted); font-size: .8125rem; }
.chip { flex: none; padding: .35rem .8rem; border-radius: 999px; background: var(--surface); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--line); }
.chip[aria-current="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
@media (max-width: 639px) {
  .filters { margin-inline: calc(-1 * var(--gutter)); }
  .chip-row {
    overflow-x: auto; padding: 2px var(--gutter); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 2rem), transparent);
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-label { min-width: 0; margin-right: .25rem; }
}
@media (min-width: 640px) { .chip-row { flex-wrap: wrap; } }

.sale-note { margin-top: 1rem; padding: .75rem 1rem; border: 1px solid var(--note-line); border-radius: 12px; background: var(--note); font-size: .9375rem; }
.sale-note p { margin: 0; }
.sale-note p + p { margin-top: .35rem; }
.sale-note time { white-space: nowrap; }

main { padding-bottom: 3.5rem; }
.section { margin-top: 2rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-head h2 { margin: 0; font-size: 1.375rem; font-weight: 750; letter-spacing: -.015em; }
.see-all { color: var(--muted); font-size: .9375rem; font-weight: 600; }
.see-all:hover { color: var(--ink); }

/* Column counts divide the home page's 12 tiles and the list page's 48, so rows end full. */
.grid { --cols: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.75rem .75rem; }
@media (min-width: 640px) { .grid { --cols: 3; gap: 2.25rem 1.25rem; } }
@media (min-width: 900px) { .grid { --cols: 4; } }
@media (min-width: 1200px) { .grid { --cols: 6; } }
.empty { grid-column: 1 / -1; margin: 0; padding: 2.5rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }

.tile { display: flex; flex-direction: column; min-width: 0; }
.tile:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
.tile-media { position: relative; aspect-ratio: 1; margin-bottom: .7rem; overflow: hidden; border-radius: var(--radius); background: var(--well); }
.tile-media img { width: 100%; height: 100%; padding: 6%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
.tile:hover .tile-media img { transform: scale(1.04); }
.off { position: absolute; top: .55rem; left: .55rem; padding: .15rem .45rem; border-radius: 7px; background: var(--accent); color: #fff; font-size: .875rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.tile-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin: 0 0 .3rem; font-size: .9375rem; font-weight: 500; line-height: 1.3;
}
.tile:hover .tile-name { text-decoration: underline; text-underline-offset: 2px; }
.tile-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; margin: 0 0 .4rem; font-variant-numeric: tabular-nums; }
.price { font-size: 1.0625rem; font-weight: 750; letter-spacing: -.01em; }
.was { color: var(--muted); font-size: .875rem; }
.tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; color: var(--muted); font-size: .8125rem; }
.shop { margin-right: .1rem; }
.gen { padding: 0 .3rem; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font-size: .75rem; font-weight: 600; line-height: 1.5; }
.tile-date { display: flex; flex-wrap: wrap; gap: 0 .75rem; margin: .3rem 0 0; color: var(--muted); font-size: .75rem; }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.page-btn { padding: .55rem 1.1rem; border-radius: 999px; background: var(--surface); font-size: .9375rem; font-weight: 600; }
.page-btn:hover { box-shadow: inset 0 0 0 1px var(--line); }
.page-btn[aria-disabled] { opacity: .4; }
.page-info { color: var(--muted); font-size: .875rem; }

.site-footer { padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; }
.site-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tile-media img { transition: none; }
  .tile:hover .tile-media img { transform: none; }
}