/* 各分頁專屬樣式。共用元件與 token 在 base.css / tokens.css。 */

/* ---- 服務項目文字 ----
   目前只有 /custom 的服務卡在用。首頁曾經有一張同樣版式的信任投影片，
   0822 改版把它降級成 hero 底部一列（.hero-trust，在 deck.css），
   deck.css 那組 .slide--trust 放大版規則已經跟著刪掉。 */
.trust__num { font-family: var(--font-en); color: var(--neon); letter-spacing: 0.2em; font-size: var(--step-xs); margin: 0; }
.trust__en { font-size: var(--step-lg); margin-top: 0.75rem; }
.trust__zh { font-size: var(--step-md); color: var(--grey-500); margin: 0.25rem 0 1rem; }
.trust__body { font-size: var(--step-sm); line-height: 1.9; max-width: 34ch; margin: 0; }

/* ---- 商品卡 ---- */
.card { display: block; }
.card__media { position: relative; background: var(--ink); aspect-ratio: 1; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  font-size: var(--step-xs);
  letter-spacing: 0.08em;
  background: var(--paper);
  color: var(--ink);
  padding: 0.35rem 0.75rem;
}
.tag--stock { background: var(--stock); color: #06301A; }
/* 發聲機芯徽章。位置錯開現貨標籤，兩個同時出現時不重疊。 */
.tag--sound { top: auto; bottom: 0.5rem; background: var(--ink); color: var(--paper); }
.card__body { padding-top: 1.25rem; }
.card__en { font-family: var(--font-en); font-size: var(--step-xs); letter-spacing: 0.18em; color: var(--grey-500); margin: 0; }
.card__zh { font-family: var(--font-zh); font-size: var(--step-md); margin: 0.4rem 0; }
.card__price { font-family: var(--font-en); font-size: var(--step-sm); letter-spacing: 0.06em; margin: 0; }

/* 商品頁的原廠授權徽章 */
.trust-badge {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--grey-500);
  border-radius: 4px;
  margin: 0;
}
.trust-badge__zh { font-size: var(--step-sm); font-weight: 700; }
.trust-badge__en { font-size: var(--step-xs); color: var(--grey-700); font-style: italic; }

/* 頁尾授權聲明 */
.footer__auth { font-size: var(--step-xs); color: var(--grey-500); margin: 0; }

/* ---- 內頁共用標題 ---- */
.page-head { padding-top: calc(var(--nav-h) + 6vh); padding-bottom: 4rem; }
.page-head__title { font-family: var(--font-zh); font-size: var(--step-xl); margin-top: 0.75rem; line-height: 1.25; }
.page-head__lead { color: var(--grey-700); max-width: 46ch; margin-top: 1rem; }

/* ---- 篩選 ---- */
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; padding-bottom: 3rem; }
.filters__item {
  font-size: var(--step-sm);
  letter-spacing: 0.06em;
  color: var(--grey-500);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.filters__item.is-active { color: var(--ink); border-bottom-color: var(--neon); }
.filters__item:hover { color: var(--ink); }

/* ---- 商品網格：不對稱瀑布流 ---- */
.grid { display: grid; gap: 3rem 1.5rem; padding-bottom: var(--section-y); }

/* ---- 商品內頁 ---- */
.pdp { display: grid; padding-top: var(--nav-h); }
.pdp__media { display: grid; gap: 0.5rem; background: var(--ink); }
.pdp__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pdp__panel { padding: 3rem var(--gutter) var(--section-y); display: grid; gap: 1rem; align-content: start; }
.pdp__title { font-family: var(--font-zh); font-size: var(--step-lg); line-height: 1.3; }
.pdp__tagline { color: var(--grey-500); margin: 0; }
.pdp__price { font-family: var(--font-en); font-size: var(--step-lg); letter-spacing: -0.01em; margin: 0; }
.tag--inline { position: static; display: inline-block; width: fit-content; }
.pdp__desc { font-size: var(--step-sm); line-height: 1.95; margin: 0; }
.pdp__actions { display: grid; gap: 0.75rem; margin-block: 1rem; }

.accordion details { border-top: 1px solid rgba(0,0,0,0.12); padding-block: 1.15rem; }
.accordion summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--step-sm);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-en); }
.accordion details[open] summary::after { content: "−"; }
.accordion p, .specs { font-size: var(--step-sm); padding-top: 1rem; }
.accordion p { margin: 0; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0; }
.specs dt { color: var(--grey-500); }
.specs dd { margin: 0; }

/* ---- 智販機據點 ---- */
.spots { background: var(--black); color: var(--paper); }
.spots__title { font-family: var(--font-zh); font-size: var(--step-lg); margin-top: 0.6rem; line-height: 1.3; }
.spots__list { display: grid; gap: 2.5rem; padding-top: 3.5rem; }
.spot { display: grid; gap: 1.25rem; align-content: start; }
.spot__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--ink); }
.spot__name { font-family: var(--font-zh); font-size: var(--step-md); }
.spot__meta { font-size: var(--step-sm); color: var(--grey-500); margin: 0.2rem 0; }
.spot__note { font-size: var(--step-xs); color: var(--grey-700); margin-block: 0.75rem; }
.spot__body .btn { margin-top: 0.5rem; }
.spots__perk { color: var(--neon); font-size: var(--step-sm); padding-top: 3rem; }

/* 販賣機籌備中的照片牆 */
.soon__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.soon__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
@media (max-width: 899px) { .soon__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 市集時間軸 ---- */
.timeline__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--ink);
  margin-bottom: 1.25rem;
}
.timeline__body { display: grid; gap: 0.2rem; }
.timeline { list-style: none; margin: 3rem 0 0; padding: 0; }
.timeline__item { border-top: 1px solid rgba(0,0,0,0.12); padding-block: 2rem; }
.timeline__item.is-past { opacity: 0.45; }
.timeline__date { font-family: var(--font-en); font-size: var(--step-sm); letter-spacing: 0.1em; color: var(--grey-500); margin: 0; }
.timeline__name { font-family: var(--font-zh); font-size: var(--step-lg); margin: 0.4rem 0; }
.timeline__loc { font-size: var(--step-sm); margin: 0; }
.timeline__time { font-size: var(--step-sm); color: var(--grey-700); margin: 0.15rem 0 0; }
.timeline__tag { font-size: var(--step-xs); letter-spacing: 0.16em; color: var(--grey-500); margin: 0.5rem 0 0; }
/* 籌備中要跳出來，跟灰掉的「已結束」是相反的訊號：一個是別再看了，
   一個是把日期記下來。用主色底黑字，跟站上其他 CTA 同一個語彙。 */
.timeline__tag--soon {
  /* .timeline__body 是 grid，格子預設 stretch，光靠 inline-block 收不起來，
     黃底會拉成一條橫貫整欄的色帶。要收成標籤大小得用 justify-self。 */
  justify-self: start;
  background: var(--neon);
  color: var(--ink);
  padding: 0.2rem 0.6rem;
  font-weight: 600;
}

/* ---- 企業客製 ---- */
.custom-hero { position: relative; min-height: 70svh; display: flex; align-items: flex-end; }
.custom-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.custom-hero::after { content: ""; position: absolute; inset: 0; background: rgba(10,10,10,0.6); }
.custom-hero__inner { position: relative; z-index: 1; color: #fff; padding: var(--gutter); padding-bottom: 8vh; }
.custom-hero__title { font-family: var(--font-zh); font-size: var(--step-xl); margin-block: 0.75rem; max-width: 18ch; line-height: 1.25; }

.services { display: grid; gap: 3rem; }

/* ---- 詢價表單 ---- */
.inquiry__ok { color: var(--stock); font-size: var(--step-sm); margin-top: 1.5rem; }
.inquiry__errors { color: #C0392B; font-size: var(--step-sm); padding-left: 1.1rem; }
.inquiry__form { display: grid; gap: 1.75rem; margin-top: 3rem; max-width: 720px; }
.inquiry__form label { display: grid; gap: 0.6rem; font-size: var(--step-sm); color: var(--grey-700); }
.inquiry__form input,
.inquiry__form textarea {
  font: inherit;
  font-size: var(--step-md);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding: 0.6rem 0;
  border-radius: 0;
}
.inquiry__form input:focus,
.inquiry__form textarea:focus { outline: none; border-bottom-color: var(--neon); }
.inquiry__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry__submit { justify-self: start; }

@media (min-width: 768px) {
  .services { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .inquiry__form { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
  .inquiry__wide, .inquiry__submit { grid-column: 1 / -1; }
  .spots__list { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 5rem 2.5rem; }
  .grid > .card:nth-child(4n + 2) { margin-top: 6rem; }
}

/* ---- 詢價名單管理頁 ---- */
.admin-table-wrap { overflow-x: auto; padding-bottom: var(--section-y); }
.admin-table { border-collapse: collapse; width: 100%; font-size: var(--step-sm); }
.admin-table th, .admin-table td {
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.admin-table th { font-family: var(--font-en); letter-spacing: 0.08em; color: var(--grey-500); }
.admin-table td:last-child { white-space: normal; min-width: 18rem; }

/* ---- 品牌故事 ---- */
.story { display: grid; gap: 3rem; align-items: start; }
.story__text p { font-size: var(--step-md); line-height: 2; margin-block: 0 1.75rem; }
.story__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--ink); }
.faq__list { margin-top: 2.5rem; max-width: 820px; }

@media (min-width: 1024px) {
  .story { grid-template-columns: 1.1fr 1fr; gap: 5rem; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  /* 先歸零兩欄版的位移，再套三欄版的錯落，避免兩條規則同時命中同一張卡片。 */
  .grid > .card { margin-top: 0; }
  .grid > .card:nth-child(3n + 2) { margin-top: 8rem; }
  .pdp { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .pdp__panel { position: sticky; top: var(--nav-h); padding-top: 5rem; }
}