/* ============================================================
   WooCommerce 樣式覆寫 — Cart / Checkout / My Account / Shop
   ============================================================ */

/* ---------- 整體容器 ---------- */
.wc-section {
  padding: clamp(48px, 6vw, 88px) 0 clamp(60px, 8vw, 110px);
  background: #fff;
}

.wc-container {
  width: min(calc(100% - 40px), 1100px);
  margin: 0 auto;
}

.woocommerce h1,
.woocommerce h2.product_title,
.woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.wc-container > h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--svc-ink);
}

/* ---------- WC Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  font-family: var(--font-body);
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 24px;
  box-shadow: 0 4px 12px rgba(60, 50, 45, .06);
}

.woocommerce-message {
  background: #faf6ee;
  border-left: 4px solid var(--accent);
  color: var(--svc-ink);
}

.woocommerce-info {
  background: #fbf9f4;
  border-left: 4px solid #6d4d28;
  color: var(--svc-ink);
}

.woocommerce-error {
  background: #fdf2ee;
  border-left: 4px solid #c0392b;
  color: var(--svc-ink);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  /* 隱藏 WC 預設 icon(theme 已有左側色條)*/
  display: none !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-message a.button.wc-forward,
.woocommerce-message a.button.wc-backward {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  padding: 6px 18px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  letter-spacing: 0.12em !important;
  margin: 0 !important;
  font-weight: 600 !important;
  flex-shrink: 0;
}

.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  background: rgba(138, 90, 40, .08) !important;
  filter: none !important;
}

/* ---------- WC Button(全套到主題)---------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-page .button,
.woocommerce input.button,
.woocommerce-page button.button[type="submit"],
.woocommerce #respond input#submit {
  background: var(--brand-gradient);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-family: var(--font-body);
  transition: filter .2s ease, transform .2s ease;
  text-shadow: none;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  filter: brightness(1.06);
  background: var(--brand-gradient);
  color: #fff !important;
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce-page #payment #place_order {
  background: #000;
  color: #fff !important;
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce a.button.alt:visited,
.woocommerce-page #payment #place_order:hover {
  background: var(--brand-gradient);
  color: #fff !important;
  filter: brightness(1.06);
}

/* ---------- 表單 input ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--svc-rail);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--svc-ink);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid rgba(138, 90, 40, .25);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* 驗證狀態:WC 預設只套到 input/textarea,補 select */
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea {
  border-color: #69BF29;
}

.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea {
  border-color: #a00;
}

.woocommerce form .form-row label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--svc-ink);
  margin-bottom: 6px;
  display: block;
}

.woocommerce form .form-row {
  margin-bottom: 16px;
}

/* ---------- shop_table(cart / checkout 訂單明細表)---------- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--svc-rail);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 28px;
  font-family: var(--font-body);
}

.woocommerce table.shop_table th {
  padding: 16px 18px;
  background: #4a433f;
  color: #f5f0e8;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-align: left;
  border: 0;
}

.woocommerce table.shop_table td {
  padding: 16px 18px;
  border-top: 1px solid var(--svc-rail);
  font-size: 14px;
  color: var(--svc-ink);
}

.woocommerce table.shop_table td.product-thumbnail img {
  width: 70px;
  height: auto;
  border-radius: 4px;
}

.woocommerce table.shop_table .product-name a {
  color: var(--accent);
  font-weight: 600;
}

.woocommerce table.shop_table .product-quantity .qty {
  width: 64px;
  padding: 8px 10px;
  border: 1px solid var(--svc-rail);
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-body);
}

.woocommerce table.shop_table .product-remove a.remove {
  background: transparent;
  color: #c0392b !important;
  width: 24px;
  height: 24px;
  line-height: 22px;
  font-size: 18px;
  border-radius: 50%;
  text-align: center;
}

.woocommerce table.shop_table .product-remove a.remove:hover {
  background: #fdf2ee;
  color: #c0392b !important;
}

/* ---------- Cart 區塊 ---------- */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart-form {
  margin-bottom: 32px;
}

.woocommerce-cart .cart_totals {
  background: #fbf9f4;
  border: 1px solid var(--svc-rail);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 36px);
}

.woocommerce-cart .cart_totals h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--svc-ink);
}

.woocommerce-cart .cart_totals .order-total .amount {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent);
  font-weight: 700;
}

/* Cart 合計表:沿用 checkout #order_review 的淺色卡片風格,不用深色 th 背景 */
.woocommerce-cart .cart_totals table.shop_table {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  overflow: visible;
}

.woocommerce-cart .cart_totals table.shop_table th {
  background: transparent;
  color: #8a827a;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-align: left;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(74, 67, 63, .15);
}

.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent;
  border-top: none;
  border-bottom: 1px solid rgba(74, 67, 63, .08);
  padding: 12px 0;
  color: var(--svc-ink);
  font-size: 13px;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  border-bottom: none;
  border-top: 1px solid rgba(74, 67, 63, .25);
  padding-top: 16px;
  font-weight: 700;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--svc-ink);
}

.woocommerce-cart .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.woocommerce-cart .coupon .input-text {
  flex: 1;
}

.woocommerce-cart-form__cart-item.cart_item {
  background: #fff;
}

/* ---------- Checkout 區塊 ----------
   結構:
     <form class="checkout">
       <div class="col2-set" id="customer_details">
         <div class="col-1">[帳單詳細資料]</div>
         <div class="col-2">[其他資訊 / 訂單備註]</div>
       </div>
       <h3 id="order_review_heading">您的訂單</h3>
       <div id="order_review">[商品明細 + 付款方式 + 送出訂單]</div>
     </form>

   設計:用 grid 把 form 變成 2 欄,左邊 customer_details + col-2,右邊 #order_review(sticky)
*/
.woocommerce-checkout form.checkout {
  display: block;
}

.woocommerce-checkout form.checkout::after {
  content: "";
  display: block;
  clear: both;
}

.woocommerce-checkout #customer_details {
  float: left;
  width: calc(58% - 24px);
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  max-width: none !important;
  padding: 0 !important;
}

/* 取消 WC 預設 col-1 / col-2 浮動 */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding: 0 !important;
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* 帳單內欄位 grid(姓 / 名 / 電話 / Email)*/
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

/* 強過 WC 預設 .form-row-first { width: 47%; float: left } */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
  width: 100% !important;
  float: none !important;
  margin: 0 0 16px !important;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes {
  grid-column: 1 / -1;
}

/* 訂單摘要(右欄,float right 形成兩欄)*/
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  float: right;
  clear: right;
  width: calc(42% - 24px);
  background: #fbf9f4;
  border: 1px solid var(--svc-rail);
}

.woocommerce-checkout #order_review_heading {
  margin: 0;
  padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 32px) 0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.woocommerce-checkout #order_review {
  margin-top: 0;
  padding: 16px clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

/* 訂單摘要表格:跟米色容器融合(不要搶眼的深色 header / 白底)*/
.woocommerce-checkout #order_review table.shop_table {
  background: transparent;
  border: none;
  margin: 0;
  box-shadow: none;
}

.woocommerce-checkout #order_review table.shop_table th {
  background: transparent;
  color: #8a827a;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid rgba(74, 67, 63, .15);
}

.woocommerce-checkout #order_review table.shop_table td {
  background: transparent;
  border-top: none;
  border-bottom: 1px solid rgba(74, 67, 63, .08);
  padding: 12px 0;
  color: var(--svc-ink);
  font-size: 13px;
}

.woocommerce-checkout #order_review table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td {
  background: transparent;
  border-bottom: none;
  border-top: 1px solid rgba(74, 67, 63, .15);
  padding: 12px 0;
  color: var(--svc-ink);
  font-weight: 500;
  font-size: 14px;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-top: 1px solid rgba(74, 67, 63, .25);
  padding-top: 16px;
}

.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td .amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
}

/* Coupon toggle 區(已移到 order_review 內、付款方式之前)*/
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin: 16px 0 12px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border-left: none;
  box-shadow: none;
  padding: 10px 0;
  margin: 0;
  font-size: 13px;
  color: #5c5650;
  border-top: 1px solid var(--svc-rail);
  border-bottom: 1px solid var(--svc-rail);
  border-radius: 0;
  display: block;
  text-align: center;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon {
  color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
}

/* checkout_coupon form 預設 inline style="display:none",WC JS toggle 控制顯隱。
   防呆:除非 inline style 含「block」,否則強制隱藏 */
.woocommerce-checkout .checkout_coupon:not([style*="block"]):not([style*="flex"]) {
  display: none !important;
}

.woocommerce-checkout .checkout_coupon {
  margin: 0 0 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--svc-rail);
  border-radius: 6px;
  font-size: 0;  /* 消除 inline-block 之間的縫隙 */
}

.woocommerce-checkout .checkout_coupon .form-row-first,
.woocommerce-checkout .checkout_coupon .form-row-last {
  display: inline-block !important;
  float: none !important;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.woocommerce-checkout .checkout_coupon .form-row-first {
  width: calc(100% - 120px) !important;
}

.woocommerce-checkout .checkout_coupon .form-row-last {
  width: 110px !important;
  margin-left: 10px;
}

.woocommerce-checkout .checkout_coupon .form-row-last button {
  width: 100%;
  padding: 10px 0 !important;
  font-size: 13px !important;
}

.woocommerce-checkout .checkout_coupon .clear {
  display: none !important;
}

.woocommerce-checkout-payment {
  background: transparent !important;
  padding: 20px 0 0 !important;
  border-radius: 0 !important;
}

.woocommerce-checkout-payment ul.payment_methods {
  padding: 0 !important;
  border: none !important;
  background: transparent;
}

.woocommerce-checkout-payment ul.payment_methods li {
  background: #fff;
  border: 1px solid var(--svc-rail);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px !important;
  list-style: none;
}

.woocommerce-checkout-payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--svc-ink);
}

.woocommerce #place_order {
  width: 100%;
  padding: 16px;
  font-size: 15px;
  letter-spacing: 0.28em;
  margin-top: 18px;
}

/* ---------- 隱藏「運送到不同的地址?」與運費列 ---------- */
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout .woocommerce-shipping-fields {
  display: none !important;
}

.woocommerce-checkout #order_review tr.shipping,
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals,
.woocommerce-cart tr.shipping,
.woocommerce-cart .woocommerce-shipping-totals {
  display: none !important;
}

/* ---------- Empty cart ---------- */
.cart-empty.woocommerce-info {
  text-align: center;
  padding: 60px 20px;
  background: #fbf9f4;
  border-left: none;
  font-size: 16px;
}

.return-to-shop a.button {
  margin-top: 18px;
  display: inline-block;
}

/* ---------- My Account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 25%;
  float: left;
  padding-right: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--svc-rail);
  border-radius: 6px;
  overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--svc-rail);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--svc-ink);
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: #fbf9f4;
  color: var(--accent);
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: 75%;
  float: left;
  padding-left: 24px;
}

/* ---------- 響應式 ---------- */
@media (max-width: 980px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    float: none;
    width: 100%;
    clear: both;
  }

  .woocommerce-checkout #order_review_heading {
    margin-top: clamp(20px, 3vw, 32px);
  }
}

@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .woocommerce table.shop_table thead {
    display: none;
  }

  .woocommerce table.shop_table tbody tr {
    display: block;
    padding: 16px;
    border-bottom: 1px solid var(--svc-rail);
  }

  .woocommerce table.shop_table tbody td {
    display: block;
    border: 0;
    padding: 6px 0;
    font-size: 13px;
  }

  .woocommerce table.shop_table tbody td::before {
    content: attr(data-title) ": ";
    font-weight: 600;
    margin-right: 8px;
    color: var(--svc-ink);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    padding: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 24px;
  }
}