/* ------------------------------------------------------------------
   結帳第一頁（checkout.html）專用樣式

   為什麼另開一支而不是寫進 styles.css：
   styles.css 是全站共用的，改它要把版本號 +1 並掃過全站每一個引用點；
   而這裡的規則只有結帳第一頁的頁首用得到。同樣的取捨先前已經做過一次
   （program/program-report.css）。

   ★ 這支檔案裡不可以出現 :root ★
   全站的 design token 只有 styles.css 那一份。在這裡重新宣告同名變數，
   會讓別的頁面的顏色跟著變，而改動看起來與那些頁面完全無關 ——
   沒有錯誤訊息，只有「不知道什麼時候開始顏色就不對了」。
   下面一律「使用」既有 token（var(--line) 等），不重新定義它們。
   ------------------------------------------------------------------ */

/* 頁首：左邊文案、右邊包裝照。
   .checkout-hero 與 .section-shell 的內距、背景、字級全部沿用 styles.css，
   這裡只負責把裡面切成兩欄。 */
.checkout-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 44px;
}

/* 左欄不需要任何規則：eyebrow／h1／price 那三行的樣式在 styles.css 裡，
   而 .checkout-hero p:last-child 那條靠的是「p 是父層最後一個子元素」，
   包進 .checkout-hero-copy 之後仍然成立。留一條空的宣告只會是噪音，
   所以這裡刻意什麼都不寫。 */

.checkout-hero-photo {
  margin: 0;                       /* figure 的預設左右邊距要清掉 */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: 0 22px 55px rgba(21,49,67,.12);
}

/* 刻意不裁切：原圖是 900×900，盒子在左上、衣服在下半部，
   套 object-fit: cover 折成寬扁比例會把盒子的上緣切掉。
   讓它照原比例縮放，欄寬決定大小。 */
.checkout-hero-photo img {
  width: 100%;
  height: auto;
}

/* 平板：照片欄收窄，把寬度讓給標題。
   1040px 是 styles.css 裡 --shell 換算式改變的那一個斷點。 */
@media (max-width: 1040px) {
  .checkout-hero-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
  }
}

/* 手機：收成單欄，照片排到文案下面。
   760px 是 .checkout-layout 從兩欄 grid 收成 block 的同一個斷點 ——
   刻意對齊，不自己另訂一個數字。兩者不一致的話，中間那段寬度會出現
   「這一格已經換排列、下面整頁還是兩欄」的歪版，而且畫面上不會報錯。

   照片壓上限並置中：手機寬度下讓一張正方形照片整片撐開，
   會把下面的步驟列整個推出第一屏。 */
@media (max-width: 760px) {
  .checkout-hero-grid {
    display: block;
  }
  .checkout-hero-photo {
    max-width: 320px;
    margin: 26px auto 0;
    border-radius: 18px;
  }
}

/* 購買組數：− 數字 ＋（2026-10-16）。
   .form-field input 在 styles.css 是 width:100%，這裡要讓數字那一格只佔中間一小段，
   所以選擇器多帶 [type="number"] 把特異度拉高一級，不靠載入順序取勝。
   加減鈕高度跟其他輸入框同為 50px，手指點得到（≥ 44px）。 */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  max-width: 100%;
}
.qty-stepper input[type="number"] {
  width: 5.5em;
  text-align: center;
  font-weight: 800;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-stepper__btn {
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fffdf8;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.qty-stepper__btn:focus-visible {
  outline: none;
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(107,135,108,.13);
}
/* 到了上限／下限就不能再按：用 disabled 本身（換元素語意），不用 pointer-events。 */
.qty-stepper__btn:disabled {
  color: var(--ink-soft);
  cursor: not-allowed;
  opacity: .45;
}