:root {
  --step-gap: 16px;
  --color-primary: #D97B3F;
  --color-primary-dark: #B85C28;
  --color-bg: #FAF6F0;
  --color-card: #FFFFFF;
  --color-text: #2E2621;
  --color-text-muted: #8A7B6C;
  --color-border: #EDE3D6;
  --color-success: #4C8C5C;
  --color-success-bg: #E7F3E9;
  --color-warning: #C9821F;
  --color-warning-bg: #FBF0DD;
  --color-danger: #C0503E;
  --color-danger-bg: #FBEAE6;
  --color-info-bg: #F1E9DD;
  --radius: 14px;
  --radius-sm: 10px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --cartbar-h: 0px;
  --topinfo-h: 0px;
  /* 分類頁籤也是固定區塊，隱藏時由 JS 設回 0px */
  --tabs-h: 0px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  /* 不能用 overflow-x: hidden——瀏覽器規則會把沒明講的 overflow-y 自動升級成
     auto，讓 html/body 變成自己的捲動容器，位在裡面的 position: sticky
     元素（購物車列、品牌識別區）就會整個失效、跟著內容一起被捲走。
     overflow-x: clip 效果一樣（擋住水平溢出），但不會建立捲動容器。 */
  overflow-x: clip;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: 16px;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a { color: inherit; }

#app {
  max-width: 560px;
  margin: 0 auto;
  /* 上方留白改由 .top-info 自己的 padding-top 負責，#app 這裡必須是 0——
     只要 #app 有 padding-top，裡面 sticky 的 .top-info 自然位置就會比它
     卡住的位置低，捲動時就會先往上跑那段距離才鎖住（就是「最上方會滑動」）。 */
  padding: 0 16px calc(32px + var(--safe-bottom));
  /* 100vh 在 iOS Safari 是「網址列收起來時」的高度，比實際看得到的範圍高
     50～60px，所以就算內容其實塞得下，頁面還是會多出那段可以捲的空間——
     使用者不小心滑一下，內容就往上跑到固定區塊底下（步驟標題被購物車列蓋住
     就是這樣來的）。100dvh 用的是「當下實際可視高度」，內容塞得下時就完全
     不能捲。舊瀏覽器不認得 dvh，會沿用前一行的 100vh。 */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- 品牌識別區 + 公告（固定在畫面最上方，不隨捲動消失）---------- */

.top-info {
  position: sticky;
  /* top 必須等於這個元素的自然位置，兩者一致才不會有位移。因為上方留白已經
     改成這個元素自己的 padding-top（#app 的 padding-top 是 0），它的外框
     本來就從畫面最頂端開始，所以 top 是 0，不是 var(--safe-top)。 */
  top: 0;
  padding-top: calc(16px + var(--safe-top));
  z-index: 6;
  background: var(--color-bg);
  display: flow-root;
}

/* 打字時（手機鍵盤跳出來）品牌識別區改成不固定，讓它跟著內容捲走，把螢幕空間
   讓給輸入框——鍵盤跳出後可視高度只剩約 300px，固定區塊佔 268px 的話輸入框
   一定會被蓋住。購物車列維持固定（上一步／下一步要隨時能按）。
   --topinfo-h 一併設回 0：購物車列的 top、各種 scroll-margin-top 都是用這個
   變數算的，品牌區不再固定就不該再算它的高度，不然會多留一大段空白。
   （宣告在 body 上會蓋掉 JS 寫在 html 上的 inline 值——不同元素，自己的宣告
   優先於繼承來的值。） */
body.keyboard-open { --topinfo-h: 0px; }

body.keyboard-open .top-info {
  position: static;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-info-bg);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-primary);
}

.brand-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px;
}

.brand-info {
  flex: 1;
  min-width: 0;
}

.brand-sub {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 0;
  white-space: pre-line;
}

.announcement {
  background: var(--color-info-bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  white-space: pre-line;
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: center;
}

.hidden { display: none !important; }

/* ---------- 狀態區塊（loading / paused / empty / error）---------- */

.state-block {
  text-align: center;
  padding: 40px 12px;
}

.state-icon {
  font-size: 40px;
  margin: 0 0 8px;
  text-align: center;
}

.state-text {
  color: var(--color-text-muted);
  font-size: 15px;
  white-space: pre-line;
  margin: 0 0 16px;
}

.skeleton-line {
  height: 16px;
  border-radius: 6px;
  background: var(--color-border);
  margin: 0 auto 20px;
}

.skeleton-card {
  height: 84px;
  border-radius: var(--radius);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  margin-bottom: 12px;
}

/* ---------- 購物車摘要列（固定在畫面上方）---------- */

.cart-summary {
  position: sticky;
  /* --topinfo-h 取自 offsetHeight，已經含 .top-info 的 padding-top
     （16px + safe-top），這裡不能再加一次 safe-top。 */
  top: var(--topinfo-h);
  z-index: 5;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px 14px 12px;
  margin-bottom: var(--step-gap);
  box-shadow: 0 6px 16px -8px rgba(46, 38, 30, 0.25);
}

.cart-details summary {
  list-style: none;
  cursor: pointer;
}

.cart-details summary::-webkit-details-marker { display: none; }

.cart-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 8px;
}

.cart-summary-row .cart-icon { font-size: 16px; }

.cart-summary-row .cart-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.cart-summary-row .cart-text .amount {
  color: var(--color-primary-dark);
  margin-left: 6px;
}

.cart-summary-row .chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-bg);
  transition: transform 0.15s ease;
}

.cart-summary-row .chevron::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--color-primary-dark);
  border-bottom: 2.5px solid var(--color-primary-dark);
  transform: translateY(-2px) rotate(45deg);
}

.cart-details[open] .chevron { transform: rotate(180deg); }

.cart-detail-list {
  border-top: 1px dashed var(--color-border);
  padding-top: 8px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.cart-detail-row span:first-child { min-width: 0; }

.cart-detail-row span:last-child {
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
}

.cart-detail-row.fee {
  border-top: 1px dashed var(--color-border);
  padding-top: 6px;
  margin-top: 2px;
}

.cart-actions {
  display: flex;
  gap: 16px;
}

.low-stock-banner {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

.cart-cta,
.cart-back-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.cart-cta {
  background: var(--color-primary);
  color: #fff;
  border: none;
}

.cart-back-btn {
  background: var(--color-card);
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-primary);
}

.cart-cta::after,
.cart-back-btn::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.cart-cta::after { transform: rotate(-45deg); }

.cart-back-btn::before { transform: rotate(135deg); }

/* ---------- 分類頁籤（固定在購物車列下方，不隨捲動消失）---------- */

.tabs {
  position: sticky;
  top: calc(var(--topinfo-h) + var(--cartbar-h));
  z-index: 4;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  background: var(--color-bg);
  /* 跟購物車列之間的間距全部做成自己的 padding-top，不用 margin——margin 會讓
     自然位置比卡住的位置低，捲動時就會晃那一段。
     負的 margin-top 抵銷 .cart-summary 的 margin-bottom（--step-gap），讓這個
     元素緊貼在購物車列下方；那段間距改由 padding-top 補回來，視覺完全一樣，
     但這段區域現在屬於 .tabs、會被它的背景蓋住，捲動的內容不會從縫裡穿過去。
     padding-top 是 6px（自身原有）+ --step-gap：原本這裡還有 margin-top: 14px，
     但相鄰的 margin 會折疊成 max(16, 14) = 16px，那個 14px 其實從來沒生效過。 */
  margin-top: calc(-1 * var(--step-gap));
  padding: calc(6px + var(--step-gap)) 0 10px;
  margin-bottom: 4px;
  scrollbar-width: none;
}

/* 購物車是空的時候購物車列會整個隱藏（display: none），上面那個負的 margin-top
   就沒有 margin-bottom 可以抵銷，頁籤的自然位置會比卡住的位置高 --step-gap，
   卡住時等於往下壓在後面的內容上（步驟標題「1. 選商品」就會被蓋掉一半）。
   購物車列一隱藏就把負 margin 拿掉，自然位置跟卡住位置才對得起來。 */
#cart-summary.hidden + .tabs {
  margin-top: 0;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---------- 步驟區塊 ---------- */

.step-title {
  font-size: 17px;
  margin: 0 0 12px;
  /* 步驟標題自己也跟著固定：內容真的比一個畫面長（例如「填寫聯絡資訊」「訂單
     摘要」）時，只要往下捲一點，標題就會滑到購物車列底下被蓋住。改成 sticky
     之後標題會停在購物車列（或分類頁籤）正下方，捲多遠都看得到自己在第幾步。
     top 多加 4px 是為了讓標題跟上面的固定區塊之間留一點縫，不要黏在一起；
     那 4px 的縫由 ::before 補上同色背景，捲動的內容才不會從縫裡穿過去。
     只加 4px 不能再多——選商品那一步標題離分類頁籤的自然距離就只有 3.8px，
     偏移值只要超過它，標題在還沒捲動時就已經是「卡住」狀態、位置會往下掉。
     這裡刻意不用 padding/margin 做間距——標題是 .step 的第一個子元素，改動它的
     margin 會跟 .step 的 margin 折疊、連帶影響捲動落點（scroll-margin-top）；
     用 top + ::before 則完全不動版面，間距與落點跟修正前一模一樣。 */
  position: sticky;
  top: calc(var(--topinfo-h) + var(--cartbar-h) + var(--tabs-h) + 4px);
  /* 比購物車列（5）、分類頁籤（4）低，才不會反過來蓋住它們 */
  z-index: 3;
  background: var(--color-bg);
}

/* 標題自己的背景只有文字那一行那麼高，捲動的內容會從上下兩側的空隙露出來
   （上面 4px 的縫、下面 12px 的 margin），看起來像文字疊字。這個 ::before 把
   標題上下的空隙一起補成同色背景：往上多蓋一段（那一段本來就被購物車列／
   分類頁籤壓在上面，它們的 z-index 比較大，不會被蓋掉），往下蓋掉 margin 的
   12px，內容捲到標題附近就會乾淨地被切掉。
   z-index: -1 是為了讓它待在標題文字的後面（同一個 stacking context 裡）。 */
.step-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  bottom: -12px;
  background: var(--color-bg);
  z-index: -1;
}

/* 打字時（手機鍵盤跳出來）畫面只剩約 300px，標題再固定就是又吃掉一段空間，
   跟品牌識別區一樣讓它跟著捲走，把位置留給輸入框。 */
body.keyboard-open .step-title {
  position: static;
}

/* 標題不再是 positioned 元素，補背景的 ::before 會跑去貼別的祖先元素，直接關掉 */
body.keyboard-open .step-title::before {
  display: none;
}

.done-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  /* 完成頁沒有購物車列，標題的自然位置本來就緊貼在品牌識別區下方（那裡有公告
     自己的 20px 留白當作間距），所以偏移值要設回 0——沿用 .step-title 的 +4px
     的話，標題在還沒捲動時就已經是「卡住」狀態、位置會往下掉 4px。 */
  top: var(--topinfo-h);
}

.step {
  margin-bottom: 28px;
  /* 自動捲動（scrollIntoView）的落點要把「所有」固定區塊的高度都算進來，不然
     步驟標題會落在固定區塊底下被蓋住。選商品那一步分類頁籤是顯示的，所以
     --tabs-h 一定要算——只算品牌區+購物車列的話，標題會整個被頁籤蓋掉。 */
  scroll-margin-top: calc(var(--topinfo-h) + var(--cartbar-h) + var(--tabs-h) + var(--step-gap));
}

/* ---------- 商品卡片（單一規格）---------- */

.product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 68px;
}

.product-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-info-bg);
  flex-shrink: 0;
  position: relative;
}

.product-thumb::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--color-bg);
}

.product-info { flex: 1; min-width: 0; }

.product-name {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 4px;
}

.product-meta {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0;
}

.product-price {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-info-bg);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-btn:disabled {
  opacity: 0.4;
}

.qty-value {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
}

/* ---------- 商品卡片（大／小規格）---------- */

.variant-group {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.variant-group-name {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.variant-row {
  display: flex;
  gap: 8px;
}

.variant-size-box {
  flex: 1;
  background: var(--color-info-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.variant-price-box {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
}

.variant-price-box .price {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.variant-stepper-box {
  flex: 1;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ---------- 取貨方式 ---------- */

.delivery-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.delivery-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.delivery-card.selected {
  border-color: var(--color-primary);
  background: #FCF1E7;
}

.delivery-card input { position: absolute; opacity: 0; pointer-events: none; }

.delivery-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.delivery-text { display: flex; flex-direction: column; gap: 2px; }

.delivery-name { font-size: 14.5px; font-weight: 700; }

.delivery-sub { font-size: 12px; color: var(--color-text-muted); }

/* ---------- 取貨時段 ---------- */

.slot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.slot-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 56px;
}

.slot-option.selected {
  border-color: var(--color-primary);
  background: #FCF1E7;
}

.slot-option input { accent-color: var(--color-primary); }

/* ---------- 表單 ---------- */

.field {
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--color-card);
  color: var(--color-text);
  /* 手機鍵盤跳出來時，瀏覽器會自動捲動頁面讓輸入框保持在鍵盤上方可見，這個
     自動捲動也會被固定區塊（品牌區/購物車列/分類頁籤）擋住視野，讓輸入框
     卡在固定區塊後面看不到——用跟 .step 一樣的 scroll-margin-top 讓瀏覽器
     知道上方有多少空間是被固定區塊佔用的，捲動落點才會留出淨空間。 */
  scroll-margin-top: calc(var(--topinfo-h) + var(--cartbar-h) + var(--tabs-h) + var(--step-gap));
}

.field textarea { resize: vertical; }

.field-hint {
  margin: -6px 0 14px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}


/* ---------- 訂單摘要 ---------- */

.summary-items {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px 14px;
  margin-bottom: 12px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}

.summary-row:last-child { border-bottom: none; }

.summary-row.fee { border-top: 1px dashed var(--color-border); }

.summary-row .sub { color: var(--color-text-muted); }

.summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 700;
  padding: 0 4px 16px;
}

.error-text {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  margin: 0 0 12px;
}

/* ---------- 按鈕 ---------- */

.btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:disabled {
  opacity: 0.45;
}

.btn-secondary {
  background: var(--color-info-bg);
  color: var(--color-text);
}

/* ---------- LINE 官方帳號連結 ---------- */
/* 照 LINE 官方商標使用規範：不能仿製 LINE 的圖示/UI 按鈕造型（規範裡明確列為違規範例），
   所以這裡只用純文字連結，不放任何仿商標圖案；背景色沿用官方指定的識別色 #06C755
   （顏色本身不在禁止範圍，規範限制的是圖案/商標的仿製），文案套用規範 REFERENCE 章節
   列出的正確用法（「加入 LINE 官方帳號」／「加入 LINE 好友」，避免用「加入 LINE」這種
   不明確或「LINE@」這種已停用的服務名稱）。 */

.line-badge {
  flex-shrink: 0;
  background: #06C755;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.btn-line {
  background: #06C755;
  color: #fff;
}

/* ---------- 完成頁 ---------- */

.done-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
}

.done-label {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 6px;
}

.done-order-id {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  color: var(--color-primary-dark);
}

.bank-info {
  text-align: left;
  font-size: 15px;
  line-height: 1.9;
}

.bank-info .row {
  display: flex;
  justify-content: space-between;
}

.bank-info .label { color: var(--color-text-muted); }

.done-card-detail { text-align: left; }

.done-card-detail .done-label { text-align: center; }

.done-meta {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 8px;
}

.done-hint {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0 0 16px;
}

.done-hint-strong {
  color: var(--color-text);
  font-weight: 600;
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

/* ---------- 完成頁：截圖／分享步驟 ---------- */

.save-steps { text-align: left; }

.save-steps .done-label { text-align: center; }

.save-steps-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.save-steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.6;
}

.save-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ---------- 警示彈窗（例如宅配地址是離島）---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(46, 38, 30, 0.45);
  animation: overlay-fadein 0.15s ease-out;
}

@keyframes overlay-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.overlay-card {
  width: 100%;
  max-width: 360px;
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 12px 32px -8px rgba(46, 38, 30, 0.35);
}

.overlay-icon {
  font-size: 28px;
  margin: 0 0 10px;
}

.overlay-text {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.overlay-actions .btn:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}