/* KOL 活動頁套件的共用樣式（所有活動頁都載入）：品牌 tokens、按鈕、字體、購買盒、版寬。
   線上主題尚未載入全站設計系統（verzz-design.css），所以品牌 tokens、字體、按鈕都在這裡自帶，
   並限定在 .kol 內，不影響其他頁。色票與字體以 design/ds/colors_and_type.css 為準。
   每個活動的版面在 kol-<slug>.css，載入順序：kol-base.css → kol-<slug>.css。 */
.kol {
  --vz-pink: #F6898C; --vz-pink-hover: #EB767A; --vz-pink-press: #D66065;
  --vz-peach: #F9BC95; --vz-soot: #362E2C; --vz-cream: #FFF9F2; --vz-paper: #FDF3EC;
  --vz-ink-700: #6B615D; --vz-ink-200: #EDE5DE;
  --vz-r-md: 1.4rem; --vz-r-lg: 2rem; --vz-r-xl: 2.8rem; --vz-r-pill: 999px;
  --vz-shadow-sm: 0 2px 6px rgba(53,47,44,.08), 0 1px 2px rgba(53,47,44,.04);
  --vz-shadow-md: 0 6px 18px rgba(53,47,44,.10), 0 2px 4px rgba(53,47,44,.05);
  --vz-ease-out: cubic-bezier(.22, 1, .36, 1);
  background: var(--vz-cream);
  /* 版寬：所有內容（圖、文字、按鈕）都不超出這條置中的軌道；滿版只允許背景。 */
  --kol-max: 1200px;
}

/* 按鈕：珊瑚粉 pill，安靜的實體按鈕回饋（升起↔壓下），不彈跳 */
body .kol .button.button--primary {
  border: none; border-radius: var(--vz-r-pill);
  background-color: var(--vz-pink); color: #fff;
  font-family: var(--vz-font-body); font-weight: 800; letter-spacing: 0.04em;
  box-shadow: none;
  transition: transform .18s var(--vz-ease-out), background-color .18s var(--vz-ease-out), box-shadow .18s var(--vz-ease-out);
}
body .kol .button.button--primary::before,
body .kol .button.button--primary::after { display: none; }
body .kol .button.button--primary:not([disabled]):hover { background-color: var(--vz-pink-hover); transform: translateY(-2px); box-shadow: var(--vz-shadow-md); }
body .kol .button.button--primary:not([disabled]):active { background-color: var(--vz-pink-press); transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: .08s; }
body .kol .button.button--primary:focus-visible { outline: none; box-shadow: 0 0 0 0.3rem var(--vz-cream), 0 0 0 0.5rem var(--vz-soot); }
body .kol .button.button--primary[disabled] { background-color: var(--vz-ink-200); color: var(--vz-soot); }
@media (prefers-reduced-motion: reduce) {
  body .kol .button.button--primary { transition: none; }
  body .kol .button.button--primary:not([disabled]):hover, body .kol .button.button--primary:not([disabled]):active { transform: none; }
}

/* 'Noto Sans TC' 只載了「矽」一個字，排在 JP 之後補缺字 */
.kol {
  --vz-font-display: 'Noto Sans JP', 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
  --vz-font-body: 'Ubuntu', 'Noto Sans JP', 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
  --kol-gap: clamp(2.4rem, 5vw, 6.4rem);
  color: var(--vz-soot);
  font-family: var(--vz-font-body);
  overflow-x: clip;
}
.kol img { display: block; width: 100%; height: auto; }
.kol h1, .kol h2, .kol h3 { font-family: var(--vz-font-display); color: var(--vz-soot); margin: 0; }
.kol p { margin: 0; line-height: 1.85; }

.kol-eyebrow {
  font-family: 'Ubuntu', var(--vz-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--vz-pink-press, #D66065);
  margin-bottom: 1.2rem !important;
}

/* ---- 購買盒 ---- */
.kol-buy {
  display: grid; grid-template-columns: 9.6rem 1fr; gap: 1.6rem; align-items: center;
  margin-top: 2.4rem; padding: 1.6rem;
  background: #fff; border-radius: var(--vz-r-lg); box-shadow: var(--vz-shadow-sm);
}
.kol-buy__media { border-radius: var(--vz-r-md); overflow: hidden; background: var(--vz-paper); }
.kol-buy__media img { aspect-ratio: 1; object-fit: cover; }
.kol-buy__title { font-size: 1.6rem !important; line-height: 1.4; font-weight: 700 !important; }
.kol-buy__title a { color: inherit; text-decoration: none; }
.kol-buy__title a:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
.kol-buy__note { font-size: 1.3rem; color: var(--vz-ink-700); line-height: 1.6 !important; margin-top: 0.4rem !important; }
.kol-buy__price { font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 1.7rem; margin-top: 0.6rem !important; }
.kol-buy__price s { font-weight: 400; color: var(--vz-ink-700); font-size: 1.3rem; margin-left: 0.6rem; }
.kol-buy__form { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.kol-buy__select {
  flex: 1 1 12rem; min-height: 4.4rem; padding: 0 1.2rem;
  border-radius: var(--vz-r-pill); border: 1px solid var(--vz-ink-200); background: var(--vz-cream);
  font: inherit; font-size: 1.4rem; color: var(--vz-soot);
}
.kol-buy__add { flex: 1 1 14rem; min-height: 4.4rem; }
.kol-buy__add.is-loading { opacity: 0.6; cursor: progress; }
.kol-buy__soldout { margin-top: 1rem !important; color: var(--vz-ink-700); font-size: 1.4rem; }

.kol-buy--feature { grid-template-columns: 1fr; padding: 2rem; }
.kol-buy--feature .kol-buy__title { font-size: 2rem !important; }
@media (min-width: 750px) {
  .kol-buy { grid-template-columns: 12rem 1fr; }
  .kol-buy--feature { grid-template-columns: 22rem 1fr; }
}

.kol-buy__add { white-space: nowrap; }
/* grid 子元素預設 min-width:auto，會被不斷行的按鈕撐出視窗；統一歸零 */
.kol-buy > * { min-width: 0; }

/* 找不到路由／商品的標記：預設隱藏（kol-guard 在預覽顯示橫幅），絕不讓版面靜默變空白 */
.kol-problem { padding: 1.2rem 1.6rem; background: #b3261e; color: #fff; font: 600 1.4rem/1.6 system-ui, sans-serif; }
.kol-problem[hidden] { display: none; }