/* markdown_sale 组（markdown-sales 貨架 + postal 頁的價格塊 / 訂單備註）專屬樣式。
 * 全部用 app.css 的 token；class 用 mks- 前綴。兼容 iOS Safari 14：不用 inset / flex gap / aspect-ratio / :is() / dvh / color-mix。
 * 深色模式靠 token 自動切換（tint / red-ink / label-2 在深色下已有對應值）。
 */

/* ---------------------------------------------------------------- 價格塊（LQ.mks.priceHtml，貨架卡與 postal 列表卡 / 詳情頁共用） */
.mks-price { display: block; margin-top: var(--sp-1); word-break: break-word; }
.mks-price__head { display: block; }
.mks-price__now {
  color: var(--tint);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.mks-price__now--plain { color: var(--label); }
.mks-price__was {
  display: inline-block;
  margin-left: var(--sp-2);
  color: var(--label-2);
  font-size: 13px;
  font-weight: 400;
  text-decoration: line-through;
}
.mks-badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--red-soft);
  color: var(--red-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.mks-price__line { display: block; margin-top: 2px; color: var(--label-2); }
.mks-item-price { margin-top: var(--sp-2); }
.mks-item-price .mks-price { margin-top: 0; }
.mks-item-price .mks-price__now { font-size: 22px; }
.mks-item-price .mks-price__was { font-size: 15px; }
.mks-item-price .mks-badge { font-size: 14px; }
.mks-item-price .mks-price__line { margin-top: var(--sp-1); font-size: 14px; }

/* postal 列表卡內的價格塊：不要再被卡片自己的價格色 / 字重蓋掉 */
.pst-card__body .mks-price { margin-top: var(--sp-1); }

/* 詳情頁底欄：被擋住時（遞減銷售尚未開始 / 已結束）說明文字放在按鈕上方，整條底欄折成兩行 */
.action-bar.mks-bar--blocked { flex-wrap: wrap; }
.mks-blocked {
  flex: 0 0 100%;
  order: -1;
  margin: 0 0 var(--sp-2);
  color: var(--orange-ink);
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}
.pst-bar-room.mks-room { margin-bottom: calc(112px + var(--safe-bottom)); }

/* 訂單備註（LQ.mks.orderNoteHtml） */
.mks-note { display: block; margin-top: 2px; color: var(--label-2); word-break: break-word; }
.pst-ocard .mks-note { margin-top: var(--sp-1); }

/* ---------------------------------------------------------------- 貨架（markdown-sales） */
.mks-intro {
  margin: var(--sp-2) var(--gutter) var(--sp-3);
  color: var(--label-2);
}
.mks-seg { margin: 0 var(--gutter) var(--sp-3); }

.mks-grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.mks-card {
  display: block;
  width: calc((100% - var(--sp-3)) / 2);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-small);
}
.mks-card:active { opacity: 0.8; }
.mks-card.is-dim { opacity: 0.55; }
.mks-card__img {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 圖區占位（不用 aspect-ratio） */
  overflow: hidden;
  background: var(--fill);
}
.mks-card__pic,
.mks-card__ph {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mks-card__pic { display: block; object-fit: cover; }
.mks-card__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-3);
  font-size: 24px;
}
.mks-card__body { display: block; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.mks-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.7em;
  overflow: hidden;
  color: var(--label);
  word-break: break-word;
}
.mks-card__sub { display: block; margin-top: 2px; color: var(--label-2); word-break: break-word; }
.mks-card__body .tag { margin-top: var(--sp-1); }

@media (prefers-reduced-motion: reduce) {
  .mks-card,
  .mks-card:active { transition: none; }
}