:root {
  --ink: #25231f;
  --paper: #f3f0e9;
  --sand: #d9cfc0;
  --clay: #9a6249;
  --line: #cbc5b9;
  --muted: #6b665d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", sans-serif;
}
a { color: inherit; }
button, input, select { font: inherit; }

.catalog-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 5vw;
  border-bottom: 1px solid var(--line);
  background: rgb(243 240 233 / 94%);
  backdrop-filter: blur(14px);
}
.catalog-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.catalog-brand span { font: 700 27px serif; letter-spacing: .12em; }
.catalog-brand small { padding-left: 12px; border-left: 1px solid; font-size: 9px; letter-spacing: .24em; }
.catalog-header nav { display: flex; gap: 26px; }
.catalog-header nav a { font-size: 14px; text-decoration: none; }

.catalog-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 6vw;
  padding: 11vh 7vw 8vh;
  border-bottom: 1px solid var(--line);
}
.eyebrow { color: var(--clay); font-size: 11px; font-weight: 700; letter-spacing: .24em; }
.catalog-hero h1 { margin: 22px 0; font: 500 clamp(48px, 6vw, 86px)/1.08 serif; letter-spacing: -.04em; }
.catalog-hero p:not(.eyebrow) { max-width: 600px; color: var(--muted); line-height: 1.9; }
.catalog-guide { align-self: end; padding: 28px; background: var(--ink); color: white; }
.catalog-guide b { display: block; margin-bottom: 12px; color: #c79478; font-size: 11px; letter-spacing: .14em; }
.catalog-guide ol { margin: 0; padding-left: 1.25em; line-height: 2; }

.catalog-main { padding: 7vh 6vw 12vh; }
.catalog-filter {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 26px;
  border: 1px solid var(--line);
  background: #ebe5da;
}
.filter-field { display: grid; gap: 8px; }
.filter-field label { color: var(--muted); font-size: 12px; }
.filter-field input,
.filter-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  color: var(--ink);
}
.catalog-clear {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.catalog-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 38px 0 20px; }
.catalog-summary h2 { margin: 0; font: 500 32px serif; }
.catalog-summary p { margin: 0; color: var(--muted); font-size: 13px; }

.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.product-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--line); background: white; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.product-card:hover,
.product-card:focus-visible { transform: translateY(-4px); box-shadow: 0 15px 32px rgb(37 35 31 / 12%); }
.product-card:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.product-card-image { aspect-ratio: 4 / 3; overflow: hidden; background: #ded8cd; }
.product-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card-copy { display: flex; min-height: 138px; flex-direction: column; padding: 18px; }
.product-card-category { margin-bottom: 8px; color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.product-card h3 { margin: 0 0 10px; font: 500 22px/1.3 serif; }
.product-card-meta { margin-top: auto; color: var(--muted); font-size: 12px; line-height: 1.6; }
.catalog-empty { padding: 70px 20px; border: 1px solid var(--line); text-align: center; }
.catalog-more { display: block; min-width: 220px; margin: 44px auto 0; padding: 15px 22px; border: 0; background: var(--ink); color: white; cursor: pointer; }
.catalog-more[hidden] { display: none; }
.catalog-footer { display: flex; justify-content: space-between; gap: 30px; padding: 44px 6vw; background: #171614; color: white; font-size: 12px; }

@media (max-width: 1050px) {
  .catalog-filter { grid-template-columns: repeat(2, 1fr); }
  .catalog-clear { align-self: stretch; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .catalog-header { padding: 0 20px; }
  .catalog-header nav { display: none; }
  .catalog-hero { grid-template-columns: 1fr; padding: 70px 24px 55px; }
  .catalog-main { padding: 45px 20px 80px; }
  .catalog-filter { grid-template-columns: 1fr; padding: 18px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-footer { flex-direction: column; }
}