/* jdtheme26 - cart + checkout in the site's own look (operator 2026-09-30: 「購物車和結帳有些方框像舊站的UI … 全部套用woodmart的 … 購物和結帳流程全部UI優化」).
   Nothing of the old site theme is active; the mixed look came from (1) WoodMart's Theme Settings form style "square" next to the theme's
   rounded dropdowns (assets/css/jd-forms.css), (2) the wp-711-shipping plugin, which moves the payment block out of the order summary
   to right after the customer details, where WoodMart's rule form.woocommerce-checkout>*{order:-1;width:100%} puts it ABOVE everything,
   (3) the pale page-title banner framing only the three steps. Plugins and templates are not changed - layout and look only.
   Vocabulary = the product page: 48px fields, radius 14px, 1px var(--jd-border), white; cards = .jd-card (white, #f2eeef, radius 20,
   soft two-layer shadow); pill buttons; teal (var(--jd-accent)) only for focus / the chosen option. Loaded on cart + checkout. */

/* ---- steps line instead of the tall banner ---- */
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title { padding: 36px 0 12px; aspect-ratio: auto; min-height: 0; }   /* the banner's aspect-ratio 2010/408 (page-title artwork) kept the band 297px tall */
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title .wd-page-title-bg { display: none; }
body:is(.woocommerce-cart, .woocommerce-checkout) .wd-checkout-steps { font-size: 15px; letter-spacing: .12em; }

/* ---- notices: soft rounded cards instead of full-colour bars ---- */
body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  border: 1px solid #efe6da;
  border-radius: 14px;
  background: #faf7f2;
  color: var(--jd-ink-700, #5c4a3c);
  line-height: 1.6;
  box-shadow: none;
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce-message { border-color: #d7ebe6; background: #f2f9f7; color: #3f5d58; }
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce-error { border-color: #f4d9d9; background: #fdf3f3; color: #a8453f; }
body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a { color: var(--jd-ink-900, #3b2a1f); }

/* ---- cards: cart totals, checkout order summary, payment ---- */
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout .checkout-order-review:not(#jd-x),   /* :not(#jd-x) = ID weight: WoodMart's panel colour rule has an ID inside :is() - the only ID-weight hack kept in the cart / checkout sheet */
body.woocommerce-checkout form.woocommerce-checkout > #payment {
  border: 1px solid var(--jd-card-border, #f2eeef);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 8px 24px rgba(60, 30, 40, .06);
}
body.woocommerce-cart .cart_totals { padding: 26px 28px; }
body.woocommerce-cart .cart_totals .cart-totals-inner { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }   /* WoodMart's inner beige frame */
body.woocommerce-cart .cart_totals table th { white-space: nowrap; padding-right: 16px; }                   /* 運送方式 / 消費金額 on one line */
body.woocommerce-checkout .checkout-order-review { padding: 28px; }
/* !important: WoodMart's zigzag receipt edges are drawn by a rule with ID weight */
body.woocommerce-checkout .checkout-order-review::before,
body.woocommerce-checkout .checkout-order-review::after { content: none !important; }
body.woocommerce-checkout .checkout-order-review #order_review { padding: 0; background: transparent; }
body.woocommerce-checkout .checkout-order-review .wd-table-wrapper { padding: 0; background: transparent; box-shadow: none; }   /* WoodMart's inner framed table */

/* ---- checkout layout: details left; order summary + payment right (WoodMart's intended arrangement) ---- */
@media (min-width: 1025px) {
  body.woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "cust review" "cust pay";
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    row-gap: 24px;
    align-items: start;
  }
  body.woocommerce-checkout form.woocommerce-checkout > * { grid-column: 1 / -1; width: auto; max-width: none; margin: 0; }
  body.woocommerce-checkout form.woocommerce-checkout > #customer_details { grid-area: cust; }
  body.woocommerce-checkout form.woocommerce-checkout > .checkout-order-review { grid-area: review; }
  body.woocommerce-checkout form.woocommerce-checkout > #payment { grid-area: pay; }
}
@media (max-width: 1024px) {
  body.woocommerce-checkout form.woocommerce-checkout { display: flex; flex-direction: column; gap: 24px; }
  body.woocommerce-checkout form.woocommerce-checkout > * { order: 0; width: 100%; margin: 0; }
  body.woocommerce-checkout form.woocommerce-checkout > .checkout-order-review { order: 1; }   /* order summary above the customer details on one column (operator 2026-10-01) */
  body.woocommerce-checkout form.woocommerce-checkout > #customer_details { order: 2; }
  body.woocommerce-checkout form.woocommerce-checkout > #payment { order: 3; }
  body.woocommerce-checkout .checkout-order-review { padding: 22px 18px; }
}

/* ---- payment block: methods as selectable rounded rows ---- */
body.woocommerce-checkout form.woocommerce-checkout > #payment { padding: 26px 28px; }
@media (max-width: 767.98px) {
  body.woocommerce-checkout form.woocommerce-checkout > #payment { padding: 10px; }   /* phones (operator 2026-10-03) */
}
body.woocommerce-checkout #payment ul.payment_methods { margin: 0 0 18px; padding: 0; border: 0; list-style: none; }
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid var(--jd-border);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(> input:checked) {
  border-color: var(--jd-accent);
  box-shadow: 0 0 0 3px rgba(128, 202, 203, .15);
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label { font-weight: 600; color: var(--jd-ink-900, #3b2a1f); }
body.woocommerce-checkout #payment .payment_box {
  margin: 12px 0 0;
  padding: 16px;
  border-radius: 12px;
  background: #faf7f2;
  box-shadow: none;
}
body.woocommerce-checkout #payment .payment_box::before { display: none; }      /* WoodMart's little speech-bubble arrow */
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method { transition: none; }
}

/* ---- e-invoice choice (plugin woocommerce-invoice-system, production only - new.justdog.tw has no such plugin; markup
   tpl/html_checkout_field.php: div.e-checkout__order_review > h3 + ul.woocommerce-invoice-options > li > radio + label [+ field]) ----
   Operator 2026-10-01 (iPhone): bullets, radio above its word. Now the payment methods' look: one rounded row per choice, radio and
   word on one line, the chosen row in teal; the carrier / tax-number field opens inside its row. */
body.woocommerce-checkout .e-checkout__order_review { margin: 22px 0 0; }
body.woocommerce-checkout .e-checkout__order_review > h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--jd-ink-900, #3b2a1f); }
body.woocommerce-checkout ul.woocommerce-invoice-options { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.woocommerce-checkout ul.woocommerce-invoice-options > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--jd-border);
  border-radius: 14px;
  background: #fff;
  list-style: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.woocommerce-checkout ul.woocommerce-invoice-options > li::marker { content: none; }
body.woocommerce-checkout ul.woocommerce-invoice-options > li::before { content: none; }
body.woocommerce-checkout ul.woocommerce-invoice-options > li:has(> input:checked) {
  border-color: var(--jd-accent);
  box-shadow: 0 0 0 3px rgba(128, 202, 203, .15);
}
body.woocommerce-checkout ul.woocommerce-invoice-options > li > input[type="radio"] { grid-column: 1; margin: 0; }
body.woocommerce-checkout ul.woocommerce-invoice-options > li > label {
  grid-column: 2;
  display: block;
  margin: 0;
  padding: 0;
  font-weight: 600;
  line-height: 1.4;
  color: var(--jd-ink-900, #3b2a1f);
  cursor: pointer;
}
body.woocommerce-checkout ul.woocommerce-invoice-options > li > :not(input, label) { grid-column: 1 / -1; }
body.woocommerce-checkout ul.woocommerce-invoice-options .collapse input.input-text { width: 100%; margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) {
  body.woocommerce-checkout ul.woocommerce-invoice-options > li { transition: none; }
}

/* ---- buttons: pill, 52px, the theme's yellow ---- */
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
body.woocommerce-checkout #place_order {
  min-height: 52px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
}
body.woocommerce-cart .shop_table .actions .button,
body.woocommerce-cart .coupon .button {
  min-height: 44px;
  padding-inline: 22px;
  border: 1px solid var(--jd-border);
  border-radius: 999px;
  background: #fff;
  color: var(--jd-ink-900, #3b2a1f);
  box-shadow: none;
}
body.woocommerce-cart .shop_table .actions .button:hover { border-color: var(--jd-accent); }

/* ---- cart table: quiet lines, rounded quantity box like the product page ---- */
body.woocommerce-cart .shop_table { border: 0; }
body.woocommerce-cart .shop_table :is(th, td) { border-color: #f2eeef; }
body.woocommerce-cart .shop_table .product-thumbnail img { border-radius: 12px; }
body.woocommerce-cart .shop_table .quantity {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 2px;
  border: 1px solid var(--jd-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
body.woocommerce-cart .shop_table .quantity :is(.minus, .plus) {
  width: 28px;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--jd-ink-700, #5c4a3c);
  box-shadow: none;
}
body.woocommerce-cart .shop_table .quantity :is(.minus, .plus):hover { color: var(--jd-accent); }
body.woocommerce-cart .shop_table .quantity input.qty {
  width: 34px;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  box-shadow: none;
}

/* (the 70px under every cart / checkout / order-received page comes from jd-layout.css, section 2) */

/* phones (operator 2026-10-01): steps line 10px above and below, 22px text */
@media (max-width: 767px) {
  body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title { padding: 10px 0; font-size: 22px; }
  body:is(.woocommerce-cart, .woocommerce-checkout) .wd-page-title .wd-checkout-steps { font-size: inherit; }
}

/* ---- coupons: every coupon field hidden (operator 2026-09-30: 「折價券所有相關欄位都隱藏不要顯示」); an applied discount line still shows ---- */
/* !important: WooCommerce's coupon-toggle script shows and hides these with an inline display style */
body:is(.woocommerce-cart, .woocommerce-checkout) :is(.woocommerce-form-coupon-toggle, form.checkout_coupon, .woocommerce-cart-form .coupon, .cart-actions .coupon, .wd-coupon-form) { display: none !important; }

/* ---- 「老顧客？點擊這裡登入」: plain line, no rounded frame ---- */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ---- order received (thank-you) page: one column of cards like the rest of the checkout ---- */
body.woocommerce-order-received .woocommerce-order { max-width: 880px; margin-inline: auto; }
body.woocommerce-order-received .woocommerce-notice.woocommerce-thankyou-order-received {   /* + .woocommerce-notice: outweighs WoodMart's notice margin */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 22px 24px;
  border: 1px solid #d7ebe6;
  border-radius: 20px;
  background: #f2f9f7;
  color: #3f5d58;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: center;
  outline: 0;
}
body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jd-accent, #80cacb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
body.woocommerce-order-received .woocommerce-thankyou-order-received:empty { display: none; }

/* order that still needs payment (pending + failed): one "action needed" notice - text, accent Pay pill, secondary My account pill.
   Pending = calm cream + clock icon; failed = the soft error colours of the cart/checkout notices + exclamation icon (operator 2026-10-02: unify). */
body.woocommerce-order-received .woocommerce-notice.jd-thankyou-action {   /* + .woocommerce-notice: outweighs WoodMart's notice colours and margin */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 0 0 24px;
  padding: 22px 24px;
  border: 1px solid var(--jd-ta-border, var(--jd-cream-200, #eadfcc));
  border-radius: 20px;
  background: var(--jd-ta-bg, var(--jd-cream-50, #fbf6ec));
  color: var(--jd-ta-fg, var(--jd-ink-900, #3b2a1f));
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: left;
  outline: 0;
}
body.woocommerce-order-received .jd-thankyou-action::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jd-ta-icon-bg, var(--jd-butter-300, #fbe08a)) var(--jd-ta-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b2a1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5V12l3.5 2'/%3E%3C/svg%3E")) center / 18px no-repeat;
}
body.woocommerce-order-received .jd-thankyou-action--failed {
  --jd-ta-border: #f4d9d9;
  --jd-ta-bg: #fdf3f3;
  --jd-ta-fg: #a8453f;
  --jd-ta-icon-bg: #f4d9d9;
  --jd-ta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8453f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6.5v6.5M12 17.5v.01'/%3E%3C/svg%3E");
}
body.woocommerce-order-received .jd-thankyou-action__text { flex: 1 1 280px; margin: 0; }
body.woocommerce-order-received .jd-thankyou-action__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; margin: 0; }
body.woocommerce-order-received .jd-thankyou-action .button {
  min-height: 48px;
  margin: 0;
  padding-inline: 28px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}
body.woocommerce-order-received .jd-thankyou-action .jd-thankyou-action__secondary {
  border: 1px solid var(--jd-border, #eadfcc);
  background: #fff;
  color: var(--jd-ink-900, #3b2a1f);
}
@media (hover: hover) {
  body.woocommerce-order-received .jd-thankyou-action .jd-thankyou-action__secondary:hover { background: var(--jd-cream-0, #fffdf8); color: var(--jd-ink-900, #3b2a1f); }
}
body.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details {   /* + .woocommerce-order-overview: outweighs WoodMart's list margin */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 24px;
  padding: 0;
  border: 1px solid var(--jd-card-border, #f2eeef);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 8px 24px rgba(60, 30, 40, .06);
  overflow: hidden;
}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: none;
  margin: 0;
  padding: 20px 22px;
  border: 0;
  border-inline-end: 1px solid #f2eeef;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--jd-ink-500, #8a7a6c);
  text-align: left;
}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li:last-child { border-inline-end: 0; }
body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--jd-ink-900, #3b2a1f);
}
body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li strong .amount { color: inherit; }
body.woocommerce-order-received .woocommerce-order-details {
  margin: 0 0 24px;
  padding: 26px 28px;
  border: 1px solid var(--jd-card-border, #f2eeef);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 8px 24px rgba(60, 30, 40, .06);
}
body.woocommerce-order-received .woocommerce-order-details__title {
  margin: 0 0 16px;
  font-size: 18px;
  letter-spacing: .12em;
}
body.woocommerce-order-received .woocommerce-order-details .shop_table { margin: 0; border: 0; }
body.woocommerce-order-received .woocommerce-order-details .shop_table :is(th, td) { padding: 12px 0; border-color: #f2eeef; font-size: 14px; }
body.woocommerce-order-received .woocommerce-order-details .shop_table :is(th, td):last-child { text-align: right; }
body.woocommerce-order-received .woocommerce-order-details .shop_table tfoot tr:last-child :is(th, td) { font-size: 16px; font-weight: 700; color: var(--jd-ink-900, #3b2a1f); }
body.woocommerce-order-received .woocommerce-order-details .wc-item-meta { margin: 6px 0 0; font-size: 12px; color: var(--jd-ink-500, #8a7a6c); }
body.woocommerce-order-received .woocommerce-order-details .wc-item-meta li { display: block; margin: 2px 0 0; }   /* one meta line per row (label + value) */
body.woocommerce-order-received .woocommerce-order-details .wc-item-meta p { display: inline; margin: 0; }
@media (max-width: 768px) {
  body.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li { padding: 16px 18px; border-bottom: 1px solid #f2eeef; }
  body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li:nth-child(even) { border-inline-end: 0; }
  body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li:nth-last-child(-n+2):nth-child(odd),
  body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li:last-child { border-bottom: 0; }
  body.woocommerce-order-received .woocommerce-order-details { padding: 22px 18px; }
  body.woocommerce-order-received .woocommerce-notice.woocommerce-thankyou-order-received { justify-content: flex-start; padding: 10px; font-size: 12px; font-weight: normal; text-align: left; }
  body.woocommerce-order-received .woocommerce-notice.jd-thankyou-action { padding: 10px; font-size: 12px; font-weight: normal; }
  body.woocommerce-order-received .jd-thankyou-action__actions { flex: 1 1 100%; flex-direction: column; }
  body.woocommerce-order-received ul.woocommerce-thankyou-order-details > li strong { font-size: 13px; }
}

/* ---- order received: the earned-points line sits above the order details card (the 70px under the page is the site-wide content padding) ---- */
body.woocommerce-order-received .woocommerce-order .jd-thankyou-points { margin: 0 0 24px; text-align: center; }
@media (max-width: 767px) {
  body.woocommerce-order-received .woocommerce-order .jd-thankyou-points { font-size: 12px; text-align: left; }
}