/* 價格方案：依方案數決定欄數，推薦方案加強調框（不改變版面寬度） */
.lws-pricing .lws-pricing__grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
  margin-inline: auto;
}
.lws-pricing .lws-pricing__grid--1 {
  --cols: 1;
  max-width: var(--layout-card-single);
}
.lws-pricing .lws-pricing__grid--2 {
  --cols: 2;
  max-width: var(--layout-card-pair);
}
.lws-pricing .lws-pricing__grid--4 {
  --cols: 4;
}
.lws-pricing .lws-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lws-pricing .lws-plan.is-featured {
  border-color: var(--s-strong);
  box-shadow:
    0 0 0 1px var(--s-strong),
    var(--shadow-md);
}
.lws-pricing .lws-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.lws-pricing .lws-plan__name {
  margin: 0;
  color: var(--s-fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-snug);
}
/* 付款方式固定在價格正下方：放右邊時，窄卡與寬卡一個放得下、一個被擠下去，位置會不一致 */
.lws-pricing .lws-plan__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
}
.lws-pricing .lws-plan__amount {
  color: var(--s-fg);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
/* 3、4 欄時卡片較窄，價格縮小一級避免換行 */
.lws-pricing .lws-pricing__grid--3 .lws-plan__amount,
.lws-pricing .lws-pricing__grid--4 .lws-plan__amount {
  font-size: var(--text-xl);
}
/* 優惠券：橘色虛線框，底色用區段底色（白卡上是米色、深底卡上是深藍），放在價格正下方；折扣碼粗體加大，不用橘字（淺底對比不足） */
.lws-pricing .lws-plan__promo {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 2px dashed var(--s-accent);
  border-radius: var(--radius-sm);
  background: var(--s-bg);
  color: var(--s-fg);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.lws-pricing .lws-plan__promo strong {
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
}
.lws-pricing .lws-plan__period,
.lws-pricing .lws-plan__desc {
  margin: 0;
  color: var(--s-soft);
  font-size: var(--text-base);
}
/*
 * 優惠價：劃掉的原價在價格上方，倒數在付款方式下方。截止後（sale.js 或伺服器加 is-expired 在卡片上）
 * 只顯示原價（不劃掉），倒數收起。倒數在腳本沒執行時是空的，用 :empty 隱藏。
 */
.lws-pricing .lws-plan__was {
  color: var(--s-muted);
  font-size: var(--text-base);
}
.lws-pricing .lws-sale__ended {
  display: none;
}
.lws-pricing .lws-plan.is-expired .lws-sale__live,
.lws-pricing .lws-plan.is-expired .lws-sale__count,
.lws-pricing .lws-plan.is-expired .lws-sr-only {
  display: none;
}
.lws-pricing .lws-plan.is-expired .lws-sale__ended {
  display: inline;
}
.lws-pricing .lws-plan__count {
  color: var(--s-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.lws-pricing .lws-plan__count:empty {
  display: none;
}
/* 給螢幕報讀的截止日說明，畫面上看不到 */
.lws-pricing .lws-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* 區段層級的價目表卡：放在方案卡上方，寬度跟著方案格（單一方案時同寬） */
.lws-pricing .lws-pricing__values {
  display: grid;
  gap: var(--space-4);
  margin: 0 auto var(--space-5);
}
.lws-pricing .lws-pricing__values--1 {
  max-width: var(--layout-card-single);
}
.lws-pricing .lws-pricing__values--2 {
  max-width: var(--layout-card-pair);
}
/* 價目表：名稱靠左、價值靠右，列與列之間細線；總價值那一列用強調底色 */
.lws-pricing .lws-plan__values {
  display: grid;
  gap: var(--space-3);
}
.lws-pricing .lws-plan__value-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-base);
}
.lws-pricing .lws-plan__value-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.lws-pricing .lws-plan__value-list li + li {
  border-top: 1px solid var(--s-line);
}
.lws-pricing .lws-plan__value-amount {
  flex: none;
  color: var(--s-muted);
  font-variant-numeric: tabular-nums;
}
.lws-pricing .lws-plan__value-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--s-accent);
  color: var(--s-accent-fg);
  font-size: var(--text-base);
  font-weight: 700;
}
.lws-pricing .lws-plan__value-total .lws-plan__value-amount {
  color: inherit;
}
.lws-pricing .lws-plan__features {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--s-line);
  list-style: none;
  font-size: var(--text-base);
}
.lws-pricing .lws-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.lws-pricing .lws-plan__check {
  flex: none;
  width: var(--text-base);
  height: var(--text-base);
  margin-top: calc(var(--space-1) / 2);
  color: var(--s-fg);
}
.lws-pricing .lws-plan .lws-btn,
.lws-pricing .lws-plan .lws-btn-wrap {
  margin-top: auto;
}
/* 按鈕正下方的一行小字（退費、分期）：置中、貼近按鈕 */
.lws-pricing .lws-plan__note {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--s-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-align: center;
}
@media (max-width: 1023px) {
  .lws-pricing .lws-pricing__grid--3,
  .lws-pricing .lws-pricing__grid--4 {
    --cols: 2;
  }
}
@media (max-width: 767px) {
  .lws-pricing .lws-pricing__grid {
    --cols: 1;
    max-width: none;
  }
  .lws-pricing .lws-pricing__values {
    max-width: none;
  }
  /* 單欄時卡片滿版寬，價格改回原本字級（與 3、4 欄的縮小規則同特異度，靠後蓋過） */
  .lws-pricing .lws-pricing__grid--3 .lws-plan__amount,
  .lws-pricing .lws-pricing__grid--4 .lws-plan__amount {
    font-size: var(--text-2xl);
  }
}