/* ============================================================================
   L4 · components.css — 通用可複用元件
   職責：.c-* 與慣例名元件；可跨頁使用
   禁止：頁面專屬定位（歸 pages.css）
   ========================================================================== */

/* ==========================================================================
   按鈕 .c-btn
   變體：primary / ghost / text / plain     尺寸：sm / md / lg
   狀態：預設 / hover / active / disabled / loading
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 42px;
  padding-inline: var(--sp-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease),
              border-color     var(--t-fast) var(--ease),
              color            var(--t-fast) var(--ease),
              transform        var(--t-fast) var(--ease),
              box-shadow       var(--t-fast) var(--ease);
}

.c-btn:active { transform: translateY(1px); }

.c-btn--primary {
  background-color: var(--c-brand);
  color: var(--c-white);
}
.c-btn--primary:hover {
  background-color: var(--c-brand-hover);
  color: var(--c-white);
}
.c-btn--primary:active { background-color: var(--c-brand-active); }

/* 用於照片滿版區塊上的白色實心鈕 */
.c-btn--light {
  background-color: rgba(255, 255, 255, .94);
  border-color: transparent;
  color: var(--c-brand);
}
.c-btn--light:hover {
  background-color: var(--c-white);
  color: var(--c-brand-hover);
}

.c-btn--ghost {
  background-color: transparent;
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.c-btn--ghost:hover {
  background-color: var(--c-brand);
  color: var(--c-white);
}

.c-btn--plain {
  background-color: var(--c-white);
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}
.c-btn--plain:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  box-shadow: var(--sh-1);
}

.c-btn--sand {
  background-color: var(--c-sand);
  border-color: transparent;
  color: var(--c-ink);
}
.c-btn--sand:hover { background-color: var(--c-sand-deep); color: var(--c-ink); }

.c-btn--text {
  height: auto;
  padding: 0;
  background: none;
  color: var(--c-muted);
  border-radius: var(--r-xs);
}
.c-btn--text:hover { color: var(--c-brand); }

.c-btn--sm { height: 32px; padding-inline: var(--sp-4); font-size: var(--fs-sm); }
.c-btn--lg { height: 50px; padding-inline: var(--sp-8); font-size: var(--fs-md); }
.c-btn--block { width: 100%; }
.c-btn--icon { width: 40px; padding-inline: 0; }
.c-btn--icon.c-btn--sm { width: 32px; }

.c-btn[disabled],
.c-btn.is-disabled {
  opacity: .5;
  pointer-events: none;
}

.c-btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.c-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--c-white);
  animation: c-spin .7s linear infinite;
}

@keyframes c-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   卡片 .c-card
   ========================================================================== */
.c-card {
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.c-card--pad { padding: var(--sp-5); }

.c-card--hover {
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.c-card--hover:hover {
  border-color: var(--c-sand-deep);
  box-shadow: var(--sh-1);
  transform: translateY(-2px);
}

/* ==========================================================================
   商品卡 .c-pcard
   ========================================================================== */
.c-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.c-pcard:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-1);
  transform: translateY(-3px);
}

.c-pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(145deg, var(--c-sage-soft), var(--c-sand-soft));
}
.c-pcard__media::after {
  /* 占位：以文字替代未到位的商品圖，換真圖時移除 */
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--c-sage-deep);
  letter-spacing: var(--ls-wide);
}
.c-pcard__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.c-pcard:hover .c-pcard__media img { transform: scale(1.05); }

.c-pcard__flag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-white);
  background-color: var(--c-brand);
  border-radius: var(--r-xs);
}
.c-pcard__flag--clay { background-color: var(--c-clay); }

.c-pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  flex: 1 1 auto;
}

.c-pcard__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  line-height: var(--lh-snug);
}

.c-pcard__origin {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* --- 社群數據列（多商戶 · ADR-14）---
   數值對應 fa_shop_goods 的 sales / star / comments 三個真實欄位，
   靜態示範先行；接 api\Goods::lists 後由後端回填即可，結構不變。 */
.c-pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.c-pcard__rate { color: var(--c-clay); }

/* 賣家列：小頭像 + 店名，取代原本泛用的「來自本地農場」 */
.c-pcard__shop {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  transition: color var(--t-fast) var(--ease);
}
.c-pcard__shop:hover { color: var(--c-brand); }
.c-pcard__shop-av {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--r-pill);
  object-fit: cover;
  background-color: var(--c-sand-soft);
}
.c-pcard__shop span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
}

.c-pcard__price {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-brand);
  line-height: 1;
}
.c-pcard__price i {
  font-style: normal;
  font-size: var(--fs-sm);
  margin-right: 1px;
}
.c-pcard__price s {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--c-muted);   /* [修正] 原 --c-faint，划線原價屬內容 */
}

/* 方形加購物車圖標鈕 */
.c-cartbtn {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-brand);
  color: var(--c-white);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.c-cartbtn svg { width: 18px; height: 18px; }
.c-cartbtn:hover { background-color: var(--c-brand-hover); }
.c-cartbtn:active { transform: scale(.94); }

.c-pcard.is-out .c-pcard__media { filter: grayscale(1); opacity: .6; }
.c-pcard.is-out .c-pcard__foot { pointer-events: none; }

/* ==========================================================================
   帖子卡 .c-post —— 稿面「桌面端·社區」為直向：圖在上、標題在中、統計在下
   （原橫向小卡在 2 欄 242px 寬度下僅剩 74px 給文字，會逐字斷行）
   ========================================================================== */
.c-post {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.c-post:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-1);
}

/* 作者列：行動版才出現 */
.c-post__head {
  display: none;
  align-items: center;
  gap: var(--sp-3);
}

.c-post__avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--c-sand);
}

.c-post__meta { flex: 1 1 auto; min-width: 0; }
.c-post__author {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.c-post__time {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.c-post__more {
  width: 28px; height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--c-faint);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.c-post__more:hover { background-color: var(--c-cream-2); color: var(--c-ink); }

.c-post__cover {
  flex: none;
  width: 100%;
  aspect-ratio: 2 / 1;          /* 稿面量得卡片圖約 2.1:1 */
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: linear-gradient(145deg, var(--c-sand-soft), var(--c-sage-soft));
}
.c-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.c-post__cover--text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-5);
  color: var(--c-ink);
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(145deg, var(--c-sand-soft), var(--c-sage-soft));
}
.c-post__cover-kicker {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.c-post__cover-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

.c-post__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: 2px;
}

.c-post__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  line-height: var(--lh-snug);
}
a:hover .c-post__title { color: var(--c-brand); }

.c-post__excerpt {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-post__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-2);
}

.c-post__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.c-post__stat svg { width: 15px; height: 15px; }

/* ==========================================================================
   標籤 .c-tag / 角標 .c-badge
   ========================================================================== */
.c-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding-inline: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--c-body);
  background-color: var(--c-sand-soft);
  border: 1px solid var(--c-sand);
  border-radius: var(--r-xs);
}
.c-tag--brand { color: var(--c-brand); background-color: var(--c-brand-soft); border-color: transparent; }
.c-tag--clay  { color: var(--c-clay-deep); background-color: var(--c-clay-soft); border-color: transparent; }
.c-tag--solid { color: var(--c-white); background-color: var(--c-brand); border-color: transparent; }

.c-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--c-white);
  background-color: var(--c-clay);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-cream-3);
}
.c-badge--brand { background-color: var(--c-brand); }

/* ==========================================================================
   表單 .c-field / .c-input / .c-search / .c-select
   ========================================================================== */
.c-field { display: grid; gap: var(--sp-2); }

.c-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.c-label i { color: var(--c-clay); font-style: normal; margin-left: 2px; }

.c-input,
.c-select,
.c-textarea {
  width: 100%;
  height: 42px;
  padding-inline: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--c-ink);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.c-textarea { height: auto; padding-block: var(--sp-3); min-height: 96px; resize: vertical; }
.c-input::placeholder, .c-textarea::placeholder { color: var(--c-faint); }
.c-input:hover, .c-select:hover, .c-textarea:hover { border-color: var(--c-sand-deep); }
.c-input:focus, .c-select:focus, .c-textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--sh-ring);
}
.c-input.is-error { border-color: var(--c-danger); }
.c-input:disabled, .c-select:disabled {
  background-color: var(--c-cream-2);
  color: var(--c-faint);
}

.c-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 46px;
  padding-inline: var(--sp-5);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.c-search:focus-within { border-color: var(--c-brand); box-shadow: var(--sh-ring); }
.c-search__icon { width: 18px; height: 18px; flex: none; color: var(--c-muted); }
.c-search__input { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); background: none; border: 0; }
.c-search__input::placeholder { color: var(--c-faint); }

.c-hint  { font-size: var(--fs-xs); color: var(--c-muted); }
.c-error { font-size: var(--fs-xs); color: var(--c-danger); }

/* ==========================================================================
   切換 .c-tabs（排序 / 分類）
   ========================================================================== */
.c-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.c-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding-inline: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.c-tab:hover { background-color: var(--c-cream-2); color: var(--c-ink); }
.c-tab.is-active {
  background-color: var(--c-brand);
  color: var(--c-white);
  font-weight: var(--fw-medium);
}
.c-tab__arrow { font-size: 10px; line-height: 1; }
.c-tab__chevron { width: 10px; height: 6px; opacity: .75; }

/* 對應面板。ui/components.js 的 tabs() 以 .c-tabpanel[data-panel] 對應
   .c-tab[data-panel]，並用 hidden 屬性切換顯示。
   必須明寫 [hidden]{display:none}：面板常同時帶 .pgrid / .coupon-panel
   等會設定 display 的類別，UA 樣式表的 [hidden] 會被蓋掉。 */
.c-tabpanel[hidden] { display: none; }

/* ==========================================================================
   側欄項目 .c-side-item
   ========================================================================== */
.c-side-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  color: var(--c-body);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.c-side-item__icon { width: 18px; height: 18px; flex: none; opacity: .8; }
.c-side-item__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-muted);   /* [修正] 商品數屬內容 */
}
.c-side-item:hover { background-color: var(--c-cream-2); color: var(--c-ink); }
.c-side-item.is-active {
  background-color: var(--c-sand);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}
/* 選中態為沙棕底，輔助色對比降至 3.63，需加深（實測 5.81） */
.c-side-item.is-active .c-side-item__count { color: var(--c-body); }

/* 實名認證狀態：未認證顯示橙色提示，已認證顯示綠色 */
.c-side-item__count--cert {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background-color: var(--c-warning);
  color: #fff;
}
.c-side-item__count--cert[hidden] { display: none; }
.c-side-item--certified .c-side-item__count--cert {
  background-color: var(--c-success);
  color: #fff;
}

/* ==========================================================================
   分頁 .c-pagination
   ========================================================================== */
.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
}

.c-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-body);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease);
}
.c-page:hover { border-color: var(--c-brand); color: var(--c-brand); }
.c-page.is-current {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-white);
  font-weight: var(--fw-medium);
}
.c-page.is-disabled,
.c-page[disabled] { opacity: .45; pointer-events: none; }

.c-page--slot { flex: 0 0 36px; }
.c-page--ellipsis {
  border: 0;
  background: transparent;
  color: var(--c-muted);
  cursor: default;
  min-width: 24px;
}
.c-page--ellipsis[hidden] { display: none; }

.c-pagination__total {
  margin-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* ==========================================================================
   空狀態 .c-empty
   ========================================================================== */
.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-20);
  text-align: center;
}
.c-empty__icon {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background-color: var(--c-cream-2);
  border-radius: 50%;
  color: var(--c-sage-deep);
}
.c-empty__text { font-size: var(--fs-md); color: var(--c-muted); }
.c-empty__sub  { font-size: var(--fs-sm); color: var(--c-muted); }

/* ==========================================================================
   提示條 .c-alert（審核狀態用）
   ========================================================================== */
.c-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  border: 1px solid transparent;
  border-radius: var(--r-md);
}
.c-alert__icon { flex: none; font-size: var(--fs-md); line-height: 1.4; }
.c-alert__body { flex: 1 1 auto; min-width: 0; }
.c-alert__title { font-weight: var(--fw-semibold); color: var(--c-ink); display: block; }

.c-alert--info    { background-color: #EEF4F6; border-color: #CFE0E6; color: #35606F; }
.c-alert--success { background-color: var(--c-brand-soft); border-color: #CFE0CC; color: var(--c-brand); }
.c-alert--warn    { background-color: #FBF3E2; border-color: #EBD9AE; color: #8A6417; }
.c-alert--error   { background-color: #FBEDEB; border-color: #EFCFCB; color: var(--c-danger); }

/* ==========================================================================
   評計數 .c-rate
   ========================================================================== */
.c-rate {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.c-rate__num { font-variant-numeric: tabular-nums; }
.c-rate svg { width: 15px; height: 15px; flex: none; color: var(--c-clay); }
.c-rate.is-on { color: var(--c-clay); }

/* ==========================================================================
   麵包屑 .c-breadcrumb
   ========================================================================== */
.c-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  flex-wrap: wrap;
}
.c-breadcrumb a:hover { color: var(--c-brand); }
.c-breadcrumb__sep { color: var(--c-faint); }
.c-breadcrumb__current { color: var(--c-ink); }

/* ==========================================================================
   排行榜 .c-rank
   ========================================================================== */
.c-rank {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--c-line-soft);
}
.c-rank:last-child { border-bottom: 0; }
.c-rank__no {
  width: 22px; height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  background-color: var(--c-cream-2);
  border-radius: var(--r-xs);
}
.c-rank__no.is-top {
  color: var(--c-white);
  background-color: var(--c-clay);
}
.c-rank__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-rank:hover .c-rank__title { color: var(--c-brand); }
.c-rank__likes {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--c-muted);   /* [修正] 讚數屬內容 */
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   用戶條目 .c-user-row（推薦用戶）
   ========================================================================== */
.c-user-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}
.c-user-row__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-pill);
  background-color: var(--c-sand-soft);
}
.c-user-row__meta { flex: 1 1 auto; min-width: 0; }
.c-user-row__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-user-row__bio {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-user-row__btn {
  flex: none;
  height: 26px;
  padding-inline: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-brand);
  background-color: transparent;
  border: 1px solid var(--c-brand);
  border-radius: var(--r-pill);
  transition: all var(--t-fast) var(--ease);
}
.c-user-row__btn:hover { background-color: var(--c-brand); color: var(--c-white); }
.c-user-row__btn.is-followed {
  color: var(--c-muted);
  border-color: var(--c-line-strong);
}
.c-user-row__btn.is-followed:hover { color: var(--c-danger); border-color: var(--c-danger); background: none; }

/* ==========================================================================
   側欄面板 .c-panel（社區左右欄共用容器）
   ========================================================================== */
.c-panel {
  padding: var(--sp-5);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.c-panel + .c-panel { margin-top: var(--sp-6); }

.c-panel__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line-soft);
}

/* ==========================================================================
   表單組 .c-form（登錄 / 聯繫 / 發佈 / 評論 共用）
   ========================================================================== */
.c-form { display: grid; gap: var(--sp-5); }

/* 兩欄以上的一列欄位；窄版自動退回單欄 */
.c-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}
.c-form__row > * { flex: 1 1 220px; min-width: 0; }

/* ==========================================================================
   勾選框 .c-check ／ 文字連結 .c-link
   ========================================================================== */
.c-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  cursor: pointer;
  user-select: none;
}
.c-check input {
  width: 15px;
  height: 15px;
  flex: none;
  accent-color: var(--c-brand);
  cursor: pointer;
}
.c-check:hover { color: var(--c-ink); }

.c-link {
  font-size: inherit;
  color: var(--c-brand);
  text-decoration: none;
}
.c-link:hover { color: var(--c-brand-hover); text-decoration: underline; }

/* ==========================================================================
   即將上線 .is-soon（ADR-14）
   ---------------------------------------------------------------------------
   user.html 的入口先於內容建置，12 個目標頁（GAP 一期 11 頁 + 二期 5 頁中的
   若干）尚未落地。為避免交付物出現死鏈，這些連結的 href 已由
   _neutralise_dead_links.ps1 移除 —— 無 href 即不進入 Tab 焦點序、也不可點擊，
   再以本組樣式明示「未啟用」，而不是讓使用者點了才發現沒反應。
   目標頁建立後，重跑該腳本的逆向即可還原，或直接補回 href。
   ========================================================================== */
.is-soon,
a.is-soon {
  color: var(--c-muted);
  opacity: .62;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}
/* 按鈕型態（.c-btn）沿用同一降調，但保留原本的框線輪廓以維持視覺結構 */
a.is-soon.c-btn { border-style: dashed; }

/* ==========================================================================
   數量步進器 .c-qty（購物車 / 商品詳情 共用）
   ========================================================================== */
.c-qty {
  display: inline-flex;
  align-items: stretch;
  height: 34px;
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.c-qty__btn {
  width: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--c-muted);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.c-qty__btn:hover { background-color: var(--c-cream-2); color: var(--c-brand); }
.c-qty__btn:disabled { color: var(--c-faint); pointer-events: none; }
.c-qty__input {
  width: 46px;
  flex: none;
  text-align: center;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  background: none;
  border: 0;
  border-inline: 1px solid var(--c-line);
  -moz-appearance: textfield;
  appearance: textfield;
}
.c-qty__input::-webkit-outer-spin-button,
.c-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-qty--lg { height: 42px; }
.c-qty--lg .c-qty__btn { width: 38px; font-size: var(--fs-lg); }
.c-qty--lg .c-qty__input { width: 56px; font-size: var(--fs-md); }

/* ==========================================================================
   訂單狀態步驟條（GAP §7.2 #7 order-detail 依賴，一期新增）
   只有這一個是「新發明」的元件，其餘一期頁面全部用既有 .c-* 組裝。
   標記：.c-steps[data-current="n"] > .c-step（由 ui/components.js 上狀態）
   ========================================================================== */
.c-steps {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-top: 34px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
/* 連接線：置於文字上方的圓點之間，最後一段不畫 */
.c-step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--c-line);
}
.c-step:first-child::before { left: 50%; }
.c-step:last-child::before { right: 50%; }
.c-step::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  border: 2px solid var(--c-line-strong);
  box-sizing: border-box;
}
.c-step.is-done { color: var(--c-body); }
.c-step.is-done::before { background-color: var(--c-brand); }
.c-step.is-done::after { background-color: var(--c-brand); border-color: var(--c-brand); }
.c-step.is-current { color: var(--c-brand); font-weight: var(--fw-semibold); }
.c-step.is-current::after {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px var(--c-brand-soft);
}

/* 金額強調（GAP §7.2 預估新增的 .c-amount）：結算與支付頁的實付數字 */
.c-amount {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-brand);
  white-space: nowrap;
}
.c-amount i {
  font-style: normal;
  font-size: .6em;
  margin-right: 2px;
}
.c-amount--sm { font-size: var(--fs-xl); }
.c-amount--ink { color: var(--c-ink); }

/* ==========================================================================
   全站回饋：顆粒 Toast 與確認框（由 ui/dom.js 動態建立）
   ========================================================================== */
.gc-toast {
  position: fixed;
  top: var(--sp-6);
  left: 50%;
  z-index: var(--z-toast);
  transform: translateX(-50%);
  display: grid;
  gap: var(--sp-2);
  width: max-content;
  max-width: min(90vw, 420px);
  pointer-events: none;
}
.gc-toast__item {
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--c-ink);
  color: var(--c-white);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  text-align: center;
  box-shadow: var(--sh-2);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.gc-toast__item--ok { background-color: var(--c-brand); }
.gc-toast__item--bad { background-color: var(--c-danger); }
.gc-toast__item.is-out { opacity: 0; transform: translateY(-6px); }

.gc-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background-color: rgba(30, 43, 32, .45);
}
.gc-modal__card {
  width: min(400px, 100%);
  padding: var(--sp-6);
  background-color: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.gc-modal__card--wide { width: min(520px, 100%); }
.gc-modal__head { margin-bottom: var(--sp-3); }
.gc-modal__hint { margin-bottom: var(--sp-3); }
.gc-modal__msg {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-body);
}
.gc-modal__acts {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* ==========================================================================
   觸控目標（≤639px）
   WCAG 2.5.5 建議 44×44；Apple HIG 44pt。桌面版維持稿面實測尺寸不動，
   僅在手機斷點放大——規範稿是 1536×1024 桌面圖，小屏沒有對照依據。
   規則置於檔尾，以載入順序勝過上方各元件的同特異度宣告，不使用 !important。
   ========================================================================== */
@media (max-width: 639px) {

  /* —— 商品卡內的賣家列（多商戶）：18px 高的文字連結，
       以內距撐出命中區，視覺尺寸與間距不變 —— */
  .c-pcard__shop {
    min-height: var(--tap-min);
    padding-block: var(--sp-1);
  }

  /* —— 表單：iOS Safari 對 font-size < 16px 的輸入框會在聚焦時強制放大頁面。
       所有可輸入元件統一提升到 16px，同時把高度撐到 44px —— */
  .c-input,
  .c-select,
  .c-textarea,
  .c-search__input,
  .c-qty__input {
    font-size: 16px;
  }
  .c-input,
  .c-select { height: 44px; }
  /* .c-search 容器 46px、上下各 1px 邊框 → 內容盒 44px；
     輸入框 stretch 恰好吃滿。注意：不可再加 padding-block，會反過來把
     stretch 的高度壓縮（加 4px 上下後實測只剩 37px）。 */

  /* —— 分頁切換 .c-tab：34px 高 → 44px —— */
  .c-tab { height: 44px; padding-inline: var(--sp-5); }

  /* —— 分頁器 .c-page：36×36 → 44×44 —— */
  .c-page { min-width: 44px; height: 44px; }

  /* —— 數量步進器：容器與按鈕同步放大，避免按鈕凸出容器 —— */
  .c-qty { height: 44px; }
  .c-qty__btn { width: 44px; }
  .c-qty__input { width: 52px; }
  .c-qty--lg { height: 48px; }
  .c-qty--lg .c-qty__btn { width: 48px; }
  .c-qty--lg .c-qty__input { width: 56px; }

  /* —— 勾選框：15px 的方塊連同整列標籤一起撐高，
       使命中區達 44px（方塊本身 24px，符合 WCAG 2.5.8 的 24px 下限） —— */
  .c-check { padding-block: var(--sp-3); }
  .c-check input { width: 24px; height: 24px; }

  /* —— 小型按鈕：32px 高 → 40px —— */
  .c-btn--sm { height: 40px; padding-inline: var(--sp-5); }
  .c-btn--icon.c-btn--sm { width: 40px; }

  /* —— 搜尋框：容器 46px，但輸入框以 align-items:center 置中後僅 28px 高。
       改為 stretch 讓輸入框吃滿容器，命中區隨之變成 44px —— */
  .c-search__input { align-self: stretch; }

  /* —— 標籤 .c-tag：24px → 40px —— */
  .c-tag { height: 40px; padding-inline: var(--sp-3); }

  /* —— 麵包屑連結：非句子中的內文連結，不適用 WCAG 2.5.8 的 inline 豁免。
         padding-block 補足高度（原 21px→45px）；
         padding-inline 需 sp-2 才補足寬度——「首頁」僅 26px，sp-1 只能補到 34px —— */
  .c-breadcrumb a {
    display: inline-flex;
    align-items: center;
    padding-block: var(--sp-3);
    padding-inline: var(--sp-2);
  }

  /* —— 無框文字鈕 .c-btn--text：預設 height:auto、padding:0，
         購物車的「刪除選中商品」實測僅 91×16 —— */
  .c-btn--text {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: var(--sp-2);
  }

  /* —— 圓形圖示鈕 —— */
  .c-cartbtn    { width: 44px; height: 44px; }
  .c-post__more { width: 44px; height: 44px; }

  /* —— 追蹤鈕：與使用者名稱同行，拉高但不撐破列 —— */
  .c-user-row__btn { height: 40px; padding-inline: var(--sp-4); }
}

/* ---------------------------------------------------------------------------
   全站右下角客服入口（由 site.js 注入；客服頁本身不顯示）
   --------------------------------------------------------------------------- */
.site-service {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--c-white);
  text-decoration: none;
  background-color: var(--c-brand);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.site-service:hover {
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}
.site-service:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}
.site-service svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 639px) {
  .site-service {
    right: var(--sp-4);
    bottom: calc(64px + var(--sp-3));
    padding: 12px;
  }
  .site-service__text { display: none; }
}