/* 螯界 CLAWVERSE — 分類頁共用樣式 */
:root {
  --ink: #0d0d0d;
  --paper: #f5f0e8;
  --rust: #c4451a;
  --rust-light: #e8602a;
  --teal: #1a6e6e;
  --gold: #c9a84c;
  --muted: #8a8070;
  --line: rgba(13,13,13,.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Sans TC', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }

/* ── Nav ────────────────────────────────────────────── */
.cat-nav {
  position: sticky; top: 0; z-index: 100;
  background: white; border-bottom: 1px solid var(--line);
  padding: .9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.cat-nav .logo {
  font-family: 'Bebas Neue', 'Noto Serif TC', serif;
  font-weight: 900; font-size: 2.4rem;
  letter-spacing: .12em; color: var(--ink);
  visibility: hidden; /* 等 floating-contact.js 設店名後才顯示 */
}
.cat-nav .logo span { color: var(--rust); }
.cat-nav-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.cat-nav-links a {
  font-size: .9rem; color: var(--ink);
  padding: .35rem .2rem; transition: color .2s;
  border-bottom: 2px solid transparent;
}
.cat-nav-links a:hover { color: var(--rust); }
.cat-nav-links a.active {
  color: var(--rust); border-bottom-color: var(--rust); font-weight: 700;
}
.cat-nav-actions { display: flex; gap: .8rem; font-size: 1.2rem; }
.cat-nav-actions a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background .2s;
  font-size: 1.4rem;
}
.cat-nav-actions a:hover { background: rgba(13,13,13,.06); }

/* ── 漢堡選單 ── */
.cat-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  cursor: pointer; padding: 4px;
  background: none; border: none; color: var(--ink);
  width: 42px; height: 42px; align-items: center; justify-content: center;
}
.cat-hamburger span { display: block; width: 24px; height: 2px; background: currentColor; transition: all .3s; }
.cat-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cat-hamburger.open span:nth-child(2) { opacity: 0; }
.cat-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cat-ham-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 1.5rem 2rem; flex-direction: column; gap: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); z-index: 99;
}
.cat-ham-menu.open { display: flex; }
.cat-ham-menu a {
  font-family: 'Noto Serif TC', serif; font-size: 1.1rem; font-weight: 700;
  letter-spacing: .04em; color: var(--ink); text-decoration: none; transition: color .2s;
  /* 覆蓋 .cat-nav-actions a 的固定尺寸 */
  width: auto; height: auto; min-width: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: .4rem;
  border-radius: 0; background: none;
}
.cat-ham-menu a:hover { color: var(--rust); background: none; }
.cat-ham-sep { height: 1px; background: var(--line); }

@media (max-width: 720px) {
  .cat-nav { padding: .8rem 1rem; position: relative; }
  .cat-nav .logo { font-size: 1.8rem; }
  .cat-nav-links { display: none; }
  .cat-hamburger { display: flex; }
}

/* ── Header ─────────────────────────────────────────── */
.cat-header {
  max-width: 1100px; margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  text-align: center;
}
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--rust); }
.cat-tag {
  display: inline-block;
  font-size: .7rem; letter-spacing: .25em;
  background: var(--rust); color: white;
  padding: .3rem 1rem; margin-bottom: 1.2rem;
}
.cat-header h1 {
  font-family: 'Noto Serif TC', serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 1.2rem; line-height: 1.2;
}
.cat-intro {
  max-width: 720px; margin: 0 auto 1.5rem;
  font-size: 1rem; color: #444; line-height: 1.85;
}
.cat-intro strong { color: var(--rust); font-weight: 700; }
.cat-quick-info {
  display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--muted);
  margin-top: 1.2rem;
}
.cat-quick-info span {
  background: white; padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ── Filter bar ────────────────────────────────────── */
.cat-products { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.filter-bar {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 1rem; background: white;
  border: 1px solid var(--line);
}
.filter-input, .filter-select {
  padding: .55rem .8rem;
  border: 1px solid var(--line); border-radius: 4px;
  font-size: .9rem; font-family: inherit; background: white;
}
.filter-input { flex: 1; min-width: 180px; }
.filter-count { color: var(--muted); font-size: .82rem; margin-left: auto; }

/* ── Product grid ─────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 480px) {
  .product-grid { gap: .75rem; }
}
.loading-msg, .empty-msg {
  grid-column: 1 / -1;
  text-align: center; padding: 4rem 1rem;
  color: var(--muted); font-size: .95rem;
}
.empty-msg .empty-emoji { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-msg a { color: var(--rust); text-decoration: underline; }

.cat-product-card {
  background: white; border: 1px solid var(--line);
  overflow: hidden; cursor: pointer;
  transition: box-shadow .25s, transform .25s;
  position: relative;
}
.cat-product-card:hover { box-shadow: 0 8px 32px rgba(13,13,13,.08); transform: translateY(-2px); }
.cat-product-card.is-soldout { opacity: .55; }
.card-image-wrap {
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  background: linear-gradient(135deg, #e8f4fd, #b3d9f2);
  overflow: hidden;
}
.card-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-badges {
  position: absolute; top: .8rem; left: .8rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.card-badge {
  background: var(--rust); color: white;
  font-size: .68rem; letter-spacing: .1em;
  padding: .25rem .6rem; font-weight: 600;
}
.card-badge.badge-rare { background: #6b46c1; }
.card-badge.badge-hot { background: #d94926; }
.card-badge.badge-new { background: var(--teal); }
.card-badge.badge-soldout { background: #555; }
.card-badge.badge-low { background: var(--gold); color: #4a3500; }
.card-badge.badge-preorder { background: #1a6e6e; }
.card-body { padding: 1rem 1.2rem 1.2rem; }
.card-name {
  font-family: 'Noto Serif TC', serif;
  font-weight: 700; font-size: 1.05rem;
  margin-bottom: .35rem; line-height: 1.4;
}
.card-desc {
  color: #666; font-size: .82rem;
  line-height: 1.6; margin-bottom: .8rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: .6rem; border-top: 1px solid var(--line);
}
.card-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem; letter-spacing: .04em;
  color: var(--rust); line-height: 1.2;
}
.price-was {
  display: block;
  font-family: 'Noto Sans TC', sans-serif;
  text-decoration: line-through;
  color: #a5a5a5; font-size: .78rem; font-weight: 400;
  letter-spacing: .02em; margin-bottom: .12rem;
}
.price-was::before {
  content: '原價 ';
  font-size: .72rem; color: #b5b5b5;
  text-decoration: none; display: inline-block;
  margin-right: .15rem; letter-spacing: .04em;
}
.price-off {
  display: inline-block;
  background: var(--rust); color: #fff;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: .7rem; font-weight: 700;
  padding: .12rem .45rem; border-radius: 3px;
  margin-left: .45rem; vertical-align: 4px;
  letter-spacing: .04em; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(196,69,26,.25);
}
.price-unit {
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--muted); font-weight: 300;
  font-size: .82rem; margin-left: .35rem;
}
.card-detail {
  position: relative;
  background: var(--rust); color: #fff;
  border: 0; border-radius: 6px;
  padding: 0 1.2rem; height: 38px;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .1em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 1px 2px rgba(196,69,26,.18), inset 0 1px 0 rgba(255,255,255,.2);
  white-space: nowrap;
}
.card-detail::after {
  content: '→';
  font-size: .95rem; font-weight: 700;
  transform: translateX(-2px);
  transition: transform .25s ease;
}
.card-detail:hover {
  background: var(--rust-light, var(--rust));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(196,69,26,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.card-detail:hover::after { transform: translateX(3px); }
.card-detail:active { transform: translateY(0); filter: brightness(.95); }
@media (max-width: 720px) {
  .card-price { font-size: 1.5rem; }
  /* 讓有/無原價的卡片，「選購」按鈕都貼底對齊：cat-product-card 與 card-body 都用 flex column，footer margin-top:auto 推到底 */
  .cat-product-card { display: flex; flex-direction: column; }
  .card-body { display: flex; flex-direction: column; flex: 1; }
  .card-footer { flex-direction: column; align-items: stretch; gap: .4rem; margin-top: auto; }
  .card-detail, .card-notify { align-self: flex-end; }
}

.card-notify {
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 6px;
  padding: .45rem .9rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.card-notify:hover {
  background: var(--ink); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.card-notify:active { transform: translateY(0); }

/* ── Related (Blog) ───────────────────────────────── */
.cat-related {
  max-width: 1100px; margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  border-top: 1px solid var(--line);
}
.cat-related h2 {
  font-family: 'Noto Serif TC', serif;
  font-weight: 700; font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .8rem;
}
.related-grid a {
  background: white; padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  transition: border-color .2s, transform .15s;
}
.related-grid a:hover { border-color: var(--rust); transform: translateY(-2px); }
.related-grid .rel-tag {
  font-size: .7rem; letter-spacing: .1em;
  color: var(--rust); margin-bottom: .3rem;
}
.related-grid .rel-title {
  font-weight: 700; font-size: .92rem; line-height: 1.5;
}

/* ── Footer ───────────────────────────────────────── */
footer {
  background: var(--ink); color: rgba(245,240,232,.8);
  text-align: center; padding: 2rem 1rem; font-size: .85rem;
}
footer a { color: var(--rust-light); }
footer a:hover { text-decoration: underline; }