/* =========================================================
   Chao Visuals — WooCommerce 暗色版型
   商店 / 商品 / 購物車 / 結帳 / 帳號 全部套用網站暗色設計
   ========================================================= */

/* 容器：避開固定導覽、置中 */
.shop-wrap{max-width:1200px;margin:0 auto;padding:22vh var(--pad) 12vh}
.woocommerce,.woocommerce-page{color:var(--ink)}
.shop-wrap a{color:var(--ink)}

/* 商店頁標題 */
.woocommerce-products-header__title{text-align:center;font-size:clamp(2rem,5vw,3.4rem);
  font-weight:300;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.term-description{text-align:center;color:var(--muted);max-width:560px;margin:0 auto 30px}

/* 結果數 / 排序 */
.woocommerce .woocommerce-result-count{color:var(--muted);font-size:13px}
.woocommerce .woocommerce-ordering select{background:var(--bg-soft);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);padding:8px 12px}

/* ---------- 商品網格 ---------- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:26px;margin:40px 0 0}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;text-align:left}
.woocommerce ul.products li.product a img{border-radius:var(--r-card);margin-bottom:16px;aspect-ratio:4/5;
  object-fit:cover;transition:transform .6s var(--ease),filter .6s;filter:grayscale(.1) brightness(.95)}
.woocommerce ul.products li.product a:hover img{transform:translateY(-4px);filter:none}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px;font-weight:400;
  color:var(--ink);padding:0;margin:0 0 6px}
.woocommerce ul.products li.product .price{color:var(--accent);font-size:15px}
.woocommerce ul.products li.product .price del{color:var(--muted);opacity:.6;margin-right:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none}

/* ---------- 按鈕 ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:var(--r-pill);
  padding:12px 26px;font-size:14px;letter-spacing:.03em;font-weight:500;transition:.3s var(--ease)}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:transparent;color:var(--accent)}
.woocommerce ul.products li.product .button{margin-top:12px;display:inline-block}
.woocommerce ul.products li.product .add_to_cart_button{background:transparent;color:var(--muted);border-color:var(--line)}
.woocommerce ul.products li.product .add_to_cart_button:hover{color:var(--ink);border-color:var(--accent)}

/* 特價標籤 */
.woocommerce span.onsale{background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);min-height:auto;
  min-width:auto;padding:5px 14px;font-size:12px;line-height:1;top:12px;right:12px;left:auto;margin:0}

/* ---------- 單一商品 ---------- */
/* 兩欄各只有一半寬的那個 bug（1.66.1）。
   ─────────────────────────────────────────────────────────
   容器是 grid，但 WooCommerce 自己的 woocommerce-layout.css 仍然對
   div.images 與 div.summary 寫著 float:left/right 與 width:48%。
   在 grid 裡 float 會被忽略，width 不會——48% 算的是「格線軌道的 48%」，
   於是每一欄縮成軌道的一半，中間空出約 270px 的洞，
   右欄的 h1 被擠成八行（實測 246px 寬、430px 高）。

   下面兩行本來就想擋這件事，但它們寫的是 div.images / div.summary，
   強度輸給 WooCommerce 帶 #content 的那一組（本主題的 <main> 正好是
   id="content"，所以那組 (1,3,2) 的選擇器真的會命中）。
   改成子選擇器 + !important：對手是後載入、帶 ID 的第三方樣式表，
   這是少數 !important 比繼續疊選擇器誠實的場合。

   minmax(0,1fr) 而不是 1fr：格線軌道的預設最小寬度是 auto，
   商品說明裡只要有一個不換行的長字串（網址、SKU），軌道就會被撐開。 */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.woocommerce div.product > div.images,
.woocommerce div.product > div.summary{margin:0;float:none!important;width:auto!important;max-width:none}
.woocommerce div.product div.images img{border-radius:var(--r-card)}
/* 標題：上限從 2.8rem 降到 2.2rem。
   中文標題沒有西文的空格斷點，一行放不下就整個詞掉到下一行；
   在半欄寬裡 2.8rem 的中文只放得下五六個字。 */
.woocommerce div.product .product_title{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:300;
  line-height:1.35;letter-spacing:.01em;margin:0 0 14px}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--accent);font-size:24px;font-weight:300}
.woocommerce div.product .woocommerce-product-details__short-description{color:#cfcfcc;font-size:15px;
  line-height:1.9;margin:18px 0}
.woocommerce div.product form.cart{margin:26px 0}
.woocommerce div.product form.cart div.quantity input,.woocommerce .quantity .qty{background:var(--bg-soft);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);padding:12px;width:74px}
.woocommerce div.product .product_meta{color:var(--muted);font-size:13px;border-top:1px solid var(--line);
  padding-top:18px;margin-top:24px}
.woocommerce div.product .product_meta a{color:var(--accent)}
@media(max-width:760px){.woocommerce div.product{grid-template-columns:1fr}}

/* 變體選擇（尺寸 / 畫框） */
.woocommerce div.product form.cart .variations{border:0;margin-bottom:18px}
.woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{padding:8px 0;border:0}
.woocommerce div.product form.cart .variations label{color:var(--muted);font-size:13px;letter-spacing:.05em}
.woocommerce div.product form.cart .variations select{background:var(--bg-soft);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;min-width:220px}
.woocommerce div.product .woocommerce-variation-price .price{font-size:22px}

/* 分頁標籤 */
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:20px}
.woocommerce div.product .woocommerce-tabs ul.tabs{border:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--muted);padding:12px 0;margin-right:30px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before{display:none}
/* 商品說明分頁（1.66.1）。
   這是整個商品頁字最多的地方，卻一直沿用 WooCommerce 的預設間距：
   段落之間沒有呼吸、標題跟前一段黏在一起。
   沿用 Journal 內文那一組數字（17px／1.9／段距 22px），
   欄寬也一樣壓在 820px——說明文字跟文章是同一種東西。 */
.woocommerce-Tabs-panel{color:#cfcfcc;line-height:1.9;padding-top:20px;max-width:820px}
.woocommerce-Tabs-panel h2{font-weight:300;font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--ink);margin:2.6em 0 .8em}
.woocommerce-Tabs-panel h2:first-child{margin-top:0}
.woocommerce-Tabs-panel h3{font-weight:400;font-size:1.02rem;color:var(--ink);margin:1.9em 0 .5em}
.woocommerce-Tabs-panel p{margin:0 0 22px;font-size:17px;letter-spacing:.02em}
.woocommerce-Tabs-panel ul{margin:0 0 22px;padding-left:1.15rem}
.woocommerce-Tabs-panel li{margin:0 0 10px}
.woocommerce-Tabs-panel strong{color:var(--ink);font-weight:500}
.woocommerce-Tabs-panel a{color:var(--accent)}
.woocommerce .related>h2,.woocommerce .upsells>h2{font-weight:300;font-size:1.6rem;margin:6vh 0 30px}

/* ---------- 購物車 / 表格 ---------- */
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-soft);border-collapse:separate}
.woocommerce table.shop_table th{color:var(--ink);border-top:0}
.woocommerce table.shop_table td{border-top:1px solid var(--line);color:#cfcfcc}
.woocommerce-cart table.cart img{width:70px;border-radius:var(--r-img)}
.woocommerce .cart_totals{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:6px 24px}
.woocommerce a.remove{color:var(--accent)!important}
.woocommerce a.remove:hover{background:var(--accent);color:var(--on-accent)!important}

/* ---------- 結帳表單 ---------- */
.woocommerce form .form-row label,.woocommerce-checkout label{color:var(--muted);font-size:13px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce-checkout input,.woocommerce-checkout textarea,
.select2-container--default .select2-selection--single{background:var(--bg-soft)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-card)!important;padding:12px 14px!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:1.6}
.select2-dropdown{background:var(--bg-soft);color:var(--ink);border-color:var(--line)}
.woocommerce #order_review,.woocommerce-checkout #order_review{background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--r-card);padding:8px 24px}
.woocommerce-info,.woocommerce-message,.woocommerce-error{background:var(--bg-soft);
  border-top:3px solid var(--accent);color:var(--ink)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--accent)}
.woocommerce-error{border-top-color:#c85050}

/* ---------- 帳號頁 ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{color:var(--muted);padding:12px 0;display:block}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--accent)}

/* ---------- 分頁 / 麵包屑 ---------- */
.woocommerce nav.woocommerce-pagination ul,.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  color:var(--muted);border:1px solid var(--line);border-radius:var(--r-img);padding:6px 12px;margin:0 3px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.woocommerce-breadcrumb{color:var(--muted);font-size:13px;letter-spacing:.05em;margin-bottom:30px}
.woocommerce-breadcrumb a{color:var(--accent)}

/* =========================================================
   區塊版購物車與結帳（1.40.0）

   為什麼要單獨寫這一段
   --------------------
   這個檔案原本只涵蓋 WooCommerce 的「傳統」樣板（.woocommerce-cart table.cart、
   #order_review 那一套）。但 WooCommerce 8.3 之後新站台建立的購物車與結帳頁
   預設是**區塊**版：整組 DOM 換成 .wc-block-* ，一條舊選擇器都對不上。

   結果不是「有點醜」，是深色網站上突然出現一整頁白底白字的表單——
   而且發生的位置正好是唯一會收錢的兩頁。

   下面把區塊版拉回站上的暗色系。原則跟其他地方一樣：
   顏色一律用 token，強調色只給「可互動或代表狀態」的東西。
   ========================================================= */

/* ---- 容器與標題 ---- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout{color:var(--ink)}

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-checkout__actions_row,
.wc-block-components-checkout-step__title{color:var(--ink)}
.wc-block-components-checkout-step__description,
.wc-block-components-product-metadata,
.wc-block-components-product-details{color:var(--muted)}

/* Woo 的區塊表格與面板預設吃 #fff／#f7f7f7 的底，逐一換掉。 */
.wc-block-cart-items,
.wc-block-cart-items__row,
.wc-block-components-sidebar,
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar{background:transparent}
.wc-block-components-sidebar-layout .wc-block-components-sidebar{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:22px}

/* ---- 商品列 ---- */
.wc-block-cart-items__header{color:var(--muted);font-size:12px;letter-spacing:.08em;
  border-bottom:1px solid var(--line)}
.wc-block-cart-items__row{border-bottom:1px solid var(--line)}
.wc-block-cart-item__image img{border-radius:var(--r-img)}
.wc-block-components-product-name{color:var(--ink);text-decoration:none;font-weight:400}
.wc-block-components-product-name:hover{color:var(--accent)}
.wc-block-components-formatted-money-amount,
.wc-block-components-product-price{color:var(--ink)}
.wc-block-components-product-price__value.is-discounted{color:var(--accent)}
.wc-block-components-product-price del{color:var(--muted);opacity:.7}

/* ---- 數量選擇 ---- */
.wc-block-components-quantity-selector{border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--bg-soft)}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  background:transparent;color:var(--ink)}
.wc-block-components-quantity-selector__button{color:var(--muted);background:transparent}
.wc-block-components-quantity-selector__button:hover:not(:disabled){color:var(--accent)}

/* ---- 金額列 ---- */
.wc-block-components-totals-item{color:var(--pf-ink-2,#c3c3c0)}
.wc-block-components-totals-item__label{color:var(--muted)}
.wc-block-components-totals-item__value{color:var(--ink)}
.wc-block-components-totals-wrapper{border-top:1px solid var(--line)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--accent);font-size:22px;font-weight:400}

/* ---- 表單欄位 ---- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-address-form input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"]{
  background:var(--bg-soft)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-card)!important}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-textarea:focus{border-color:var(--accent)!important;box-shadow:none!important}
.wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label{color:var(--muted)}
.wc-block-components-text-input.is-active label{color:var(--accent)}
.wc-block-components-select select{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line)}

/* ---- 付款與運送選項 ---- */
.wc-block-components-radio-control__option{border-color:var(--line)}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option--checked-option-highlighted{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card)}
.wc-block-components-radio-control__option--checked-option-highlighted{border-color:var(--accent)}
.wc-block-components-radio-control__input:checked{border-color:var(--accent);background:var(--accent)}

/* ---- 按鈕 ---- */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
  border-radius:var(--r-pill);font-weight:400;letter-spacing:.05em;
  min-height:48px;padding:0 28px;
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{background:transparent;color:var(--accent)}
.wc-block-components-button.is-link,
.wc-block-cart__submit-container a,
.wc-block-components-totals-coupon-link{color:var(--accent)}

/* ---- 折扣碼 ---- */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input{background:var(--bg-soft)}
.wc-block-components-panel__button{color:var(--ink)}
.wc-block-components-panel__button:hover{color:var(--accent)}

/* ---- 通知 ---- */
.wc-block-components-notice-banner{background:var(--bg-soft);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card)}
.wc-block-components-notice-banner.is-error{border-color:rgba(224,102,102,.5)}
.wc-block-components-notice-banner.is-success{border-color:rgba(201,163,91,.5)}
.wc-block-components-notice-banner a{color:var(--accent)}
.wc-block-components-validation-error{color:#e08a8a}

/* ---- 空車 ---- */
.wc-block-cart__empty-cart__title{color:var(--ink);font-weight:300}
.wp-block-woocommerce-empty-cart-block p{color:var(--muted)}

/* ---- 載入骨架：預設是淺灰方塊，暗底上會閃一片白 ---- */
.wc-block-components-skeleton,
.wc-block-components-loading-mask__children{background:var(--bg-soft)}

/* =========================================================
   區塊版結帳的三個實際故障（1.68.0）

   這一段修的都不是「不夠好看」，是三個會讓人買不下去的東西。
   ========================================================= */

/* ---- 1. 浮動標籤壓在輸入值上 ----

   區塊版結帳的欄位標籤是 position:absolute，欄位有值時縮到 0.82 倍浮到
   上緣（top:6px），Woo 自己因此把輸入框寫成 padding:24px 9px 8px，
   留出上面那一條給標籤站。

   但本檔上方那條「.woocommerce-checkout input … padding:12px 14px !important」
   是寫給傳統版結帳的，`.woocommerce-checkout input` 這個選擇器連區塊版一起蓋掉，
   而且帶 !important。結果：標籤浮上去了，值還停在 12px，兩行疊在一起。
   使用者看到的就是「欄位裡有兩層字」。

   這裡把上緣重新讓出來。順帶把水平內距與標籤的 left 對齊到同一個數字，
   不然標籤和值會差 1~2px，那種歪掉最惱人也最難指出來。 */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input.components-combobox-control__input{
  padding:24px 12px 8px!important;
  line-height:22px!important;
  height:auto!important;
  min-height:52px}
.wc-block-components-text-input label,
.wc-block-components-combobox-control label{left:12px}
.wc-block-components-textarea{min-height:96px}

/* ---- 2. 數量圓點是白底白字 ----

   Woo 寫的是 background:currentcolor——在淺色版型上 currentcolor 是深色，
   圓點會是深底白字。這個站的文字色是 #f4f4f2，於是底色和字色變成同一個值，
   訂單摘要裡那顆「1」就完全看不見，只剩一個白圓圈浮在縮圖角上。 */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary-item__quantity{
  background:var(--bg-soft);color:var(--ink);
  border:1px solid var(--line);box-shadow:none}

/* ---- 3. 錯誤訊息是白底白字 ----

   本檔原本只給 .is-error 換了框線顏色，背景留給上面那條單一類別的規則。
   但 Woo 的 `.wc-block-components-notice-banner.is-error` 是兩個類別，
   權重比較高，背景維持它的 #fff0f0；文字色則沿用本站的近白色。
   於是最重要的那一則訊息——「沒有可用的付款方式」——在畫面上是一片空白的紅框。

   這正是站主截圖裡看到的那個「空的紅色方塊」。 */
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success{
  background:var(--bg-soft);color:var(--ink)}
.wc-block-components-notice-banner.is-error{border-color:rgba(224,102,102,.55)}
.wc-block-components-notice-banner.is-error svg{fill:#e08a8a}
.wc-block-components-notice-banner.is-warning{border-color:rgba(224,178,102,.5)}
.wc-block-components-notice-banner.is-warning svg{fill:#e0b266}
.wc-block-components-notice-banner.is-info svg{fill:var(--muted)}
.wc-block-components-notice-banner.is-success{border-color:rgba(201,163,91,.5)}
.wc-block-components-notice-banner.is-success svg{fill:var(--accent)}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content{color:var(--ink)}

/* ---- 4. 訂單摘要裡同一個金額出現兩次 ----

   Woo 在每一列同時輸出「單價」與「小計」。數量是 1 的時候兩個數字一模一樣，
   一上一下並排，看起來像重複輸出的錯誤。這個站幾乎每一筆都是數量 1
   （每一張輸出都是為那一次的尺寸與紙材算出來的），所以這裡把單價收起來，
   保留右側的小計與縮圖上的數量圓點。
   代價寫在這裡免得以後忘記：數量大於 1 時，看不到單價，
   要自己用小計除以數量。若哪天開始賣同規格多張，把這條拿掉。 */
.wc-block-components-order-summary-item__individual-prices{display:none}

/* ---- 5. 規格那幾行太小 ----
   訂單摘要裡的「規格：影像 45 × 30 cm／紙材…」是這筆訂單唯一寫著
   買了什麼的地方，11px 太小。 */
.wc-block-components-order-summary-item .wc-block-components-product-details{
  font-size:12.5px;line-height:1.85}
.wc-block-components-order-summary-item .wc-block-components-product-details__name{color:var(--ink-3)}

/* ---- 6. 國家欄的下拉也被壓到 ----

   國家用的是另一組類別（wc-blocks-components-select，注意是 blocks 不是 block），
   上面那一條沒有涵蓋到。它的標籤同樣浮在上緣（6px 到 24px），
   而 select 的內距是 16px 0，所以「台灣」剛好蓋在「國家/地區或區域」上。 */
.wc-blocks-components-select__select{
  padding:24px 12px 6px!important;
  height:auto!important;min-height:52px;
  background:var(--bg-soft)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important;border-radius:var(--r-card)!important}
.wc-blocks-components-select__label{left:12px;color:var(--muted)}
.wc-blocks-components-select__select option{background:var(--bg-soft);color:var(--ink)}

/* =========================================================
   傳統版結帳的付款區與原生下拉（1.69.2）

   為什麼又回到傳統版
   ------------------
   藍新金流 1.0.12（官方最新版）沒有做區塊結帳整合：它不註冊
   AbstractPaymentMethodType、不掛 woocommerce_blocks_payment_method_type_registration，
   只宣告了 HPOS 相容。而區塊結帳只顯示「有向它註冊過」的付款方式，
   所以那一頁的付款區永遠是「沒有可用的付款方式」——設定全對，就是不顯示。
   2026-08-26 把 /checkout/ 與 /cart/ 換回 [woocommerce_checkout]、[woocommerce_cart]。

   傳統版的欄位、#order_review、select2 上面那一段本來就有樣式，
   唯獨這兩塊沒有，因為區塊版時期用不到：
     ‧ 付款區：WooCommerce 預設塞 #ebe9eb 這種淺灰紫，深色站上是一塊亮斑
     ‧ 原生 <select>：上面那條輸入框規則只認 input.input-text 與 textarea
   ========================================================= */

.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment{
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-card)}

.woocommerce-checkout #payment ul.payment_methods{
  margin:0;padding:14px 24px;border-bottom:1px solid var(--line)}
.woocommerce-checkout #payment ul.payment_methods li{
  list-style:none;border-bottom:0;color:var(--ink)}
.woocommerce-checkout #payment ul.payment_methods li + li{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* 整個 label 都能按，不是只有那顆小圓鈕。44px 是站上一致的最小點擊高度。 */
.woocommerce-checkout #payment ul.payment_methods li label{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;margin:0;color:var(--ink);font-size:15px;
  letter-spacing:.02em;cursor:pointer}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{
  width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}

/* 付款方式的說明框。
   WooCommerce 會在它上緣用 border-color 畫一個同色小三角形，
   那個三角形不跟著 background 走，要單獨指定，否則深色框上會浮一個淺色箭頭。 */
.woocommerce-checkout #payment div.payment_box{
  background:var(--bg);color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-img);
  font-size:14px;line-height:1.8}
.woocommerce-checkout #payment div.payment_box::before{
  border-bottom-color:var(--line)}

.woocommerce-checkout #payment div.form-row.place-order{padding:18px 24px;margin:0}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{
  color:var(--muted);font-size:13px;line-height:1.8}

/* ---- 原生 <select> ----
   發票欄位（是否需要統一編號、電子發票寄送方式）與金流自己的付款方式選單
   都是原生 select。appearance:none 會把系統箭頭一起拿掉，所以自己補一個；
   顏色用 --muted，跟欄位標籤同一階。
   select2 會把原本的 select 藏起來另外畫一顆，那一顆已經有樣式了，
   :not(.select2-hidden-accessible) 把它排除掉，免得動到隱藏元素的尺寸。 */
/* 選擇器要壓過 WooCommerce 自己的 `.woocommerce form .form-row select`（0-2-2）。
   第一版只寫 `.woocommerce-checkout select:not(...)`＝0-2-1，比它低一分，
   結果整段規則有比對到、卻一條都沒生效——白底黑字原封不動留在那裡。
   下面補到 0-4-2；同時要蓋掉它的 background-image，那是它自己畫的箭頭。 */
.woocommerce-checkout .woocommerce form .form-row select:not(.select2-hidden-accessible),
.woocommerce-cart .woocommerce form .form-row select:not(.select2-hidden-accessible),
.woocommerce-checkout #payment div.payment_box select{
  -webkit-appearance:none;appearance:none;
  background-color:var(--bg-soft);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:12px 38px 12px 14px;min-height:44px;max-width:100%;
  font-size:15px;line-height:1.6;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a92' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}

.woocommerce-checkout .woocommerce form .form-row .woocommerce-input-wrapper select:not(.select2-hidden-accessible){
  width:100%}

/* 金流自己那顆選單長在說明框裡。外觀沿用上面那一組（它也列在那串選擇器裡），
   這裡只把寬度收回來——它不在 .form-row 裡，撐滿整個說明框會很怪。 */
.woocommerce-checkout #payment div.payment_box select{
  width:auto;min-width:180px;margin-top:6px}

.woocommerce-checkout select:focus-visible,
.woocommerce-cart select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}

/* 原生核取方塊與圓鈕（傳統版結帳／購物車）。
   預設是 13px 的小方塊，在深色底上就是一個亮點，勾選狀態還是系統藍。
   放大到 18px 並把 accent-color 交給金色，才跟旁邊的文字與其他控制項同一套。

   padding 要 !important，是因為本檔上方那條
   「.woocommerce-checkout input … padding:12px 14px !important」
   是寫給文字欄位的，但 `input` 這個選擇器連核取方塊一起蓋到。
   真正該做的是把那條規則收窄，不過它同時被購物車與帳號頁依賴，
   這一版先在這裡擋下來，不動上游。 */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-cart input[type="checkbox"],
.woocommerce-cart input[type="radio"]{
  width:18px;height:18px;padding:0!important;
  accent-color:var(--accent);vertical-align:middle;cursor:pointer}

/* 購物車的折價券欄位與數量欄位。
   上面那條輸入框規則兩個都接不到：`.woocommerce form .form-row input.input-text`
   要求外面包一層 .form-row（折價券沒有），`.woocommerce-checkout input` 靠的是
   結帳頁才有的 body class（購物車沒有）。兩個條件都不成立，於是這兩個欄位
   維持瀏覽器預設的白底黑字——深色版面上兩塊突兀的白。 */
.woocommerce-cart input.input-text,
.woocommerce-cart .quantity input[type="number"],
.woocommerce-cart td.actions .coupon input#coupon_code{
  background:var(--bg-soft);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:12px 14px;min-height:44px;font-size:15px}
.woocommerce-cart input.input-text::placeholder{color:var(--muted)}
.woocommerce-cart input.input-text:focus-visible,
.woocommerce-cart .quantity input[type="number"]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}