@charset "UTF-8";
.orderPage .backLink a, .orderPage .orderPayment .payBtn, .checkoutEmpty .checkoutEmptyLink, .checkoutPage [data-checkout-addon-add],
.checkoutPage [data-checkout-coupon-apply], .checkoutPage [data-checkout-item-remove],
.checkoutPage [data-checkout-addon-remove], .checkoutSubmitButton, .checkoutContinueLink::before, .checkoutContinueLink, .checkoutStore .checkoutStoreSelect,
.checkoutStore .checkoutStoreReselect,
.checkoutStore .checkoutStoreSoon, .checkoutShippingOption,
.checkoutPaymentOption, .checkoutCouponItemBtn, .checkoutCouponBrowse button, .checkoutTabs .checkoutTabButton, .checkoutPage input[type=text],
.checkoutPage input[type=email],
.checkoutPage input[type=tel],
.checkoutPage select {
  transition: all 0.4s ease-in-out;
}

/*
shop.scss:結帳流程前台頁面的內容區樣式
涵蓋 checkout/index(結帳頁)、checkout/complete(訂單完成頁),
以及 member/order_detail —— 會員訂單明細與完成頁共用 .orderPage 那套排版,故一併住在本檔。
頁框(header/footer)由 master.css 負責,本檔只補內容區。
沿用 _setting.scss 變數與 mixin;紅色 #e5533d 僅用於「折扣 / 移除 / 錯誤」等負向語意。

商品列表與商品內頁(含 promotion/ins 用到的 .specPromo*)的樣式已拆至 product.scss。
兩檔之間沒有選擇器或變數耦合 —— 本檔的選擇器一律帶 checkout / orderPage 前綴,
結帳段自用的尺度與色彩變數($checkout*)亦只定義於本檔,唯一的交集是
_setting.scss 的共用變數、mixin 與 %ts placeholder。
*/
body.checkoutPage {
  background-color: #fff;
}

.checkoutPage input[type=text],
.checkoutPage input[type=email],
.checkoutPage input[type=tel],
.checkoutPage select {
  width: 100%;
  min-height: clamp(42px, 3.4vw, 48px);
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
  padding: 10px clamp(12px, 1.2vw, 16px);
  font-size: clamp(14px, 1vw, 16px);
  color: #4a4a4a;
}
.checkoutPage input[type=text]::-moz-placeholder, .checkoutPage input[type=email]::-moz-placeholder, .checkoutPage input[type=tel]::-moz-placeholder, .checkoutPage select::-moz-placeholder {
  color: #b3b3b3;
}
.checkoutPage input[type=text]::placeholder,
.checkoutPage input[type=email]::placeholder,
.checkoutPage input[type=tel]::placeholder,
.checkoutPage select::placeholder {
  color: #b3b3b3;
}
.checkoutPage input[type=text]:focus,
.checkoutPage input[type=email]:focus,
.checkoutPage input[type=tel]:focus,
.checkoutPage select:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(25, 50, 47, 0.55);
  outline: none;
}
.checkoutPage input[type=text]:disabled,
.checkoutPage input[type=email]:disabled,
.checkoutPage input[type=tel]:disabled,
.checkoutPage select:disabled {
  background-color: #ebebeb;
  color: #888;
  cursor: not-allowed;
}
.checkoutPage input[type=text][readonly]:not(:disabled),
.checkoutPage input[type=email][readonly]:not(:disabled),
.checkoutPage input[type=tel][readonly]:not(:disabled),
.checkoutPage select[readonly]:not(:disabled) {
  cursor: pointer;
}
.checkoutPage select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: clamp(34px, 3.2vw, 46px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a4a4a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(12px, 1.4vw, 18px) center;
  background-size: 12px 8px;
  cursor: pointer;
}
.checkoutPage select:disabled {
  opacity: 0.6;
}
.checkoutPage input[type=number] {
  width: clamp(56px, 5vw, 68px);
  min-height: clamp(34px, 2.8vw, 38px);
  border: 1px solid #cecece;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  font-size: clamp(12px, 0.9vw, 14px);
}
.checkoutPage input[type=number]:disabled {
  background-color: #ebebeb;
  color: #999;
}
.checkoutPage button {
  cursor: pointer;
  font-family: inherit;
}

.checkoutFlash {
  border-radius: 4px;
  padding: clamp(10px, 1.1vw, 14px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.6;
}

.checkoutFlashError {
  background-color: #fdecea;
  border: 1px solid #f5c6cb;
  color: #b02a37;
}

.checkoutFlashList {
  padding-left: 18px;
}
.checkoutFlashList li {
  list-style: disc;
}

.checkoutMain {
  width: 100%;
  background-color: #f6f6f6;
  border-radius: 6px;
  padding: clamp(16px, 2.4vw, 28px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.checkoutMain > :last-child {
  margin-bottom: 0;
}

.checkoutSide {
  width: 100%;
}

.checkoutBlock {
  margin-bottom: clamp(20px, 2.2vw, 30px);
  transition: opacity 0.15s ease;
}
.checkoutBlock[hidden] {
  display: none;
}

.checkoutPage[data-checkout-busy] .checkoutBlock,
.checkoutPage[data-checkout-busy] .checkoutSubmitBar {
  opacity: 0.5;
  pointer-events: none;
}

.checkoutSubmitBar {
  transition: opacity 0.15s ease;
}

.checkoutBlockTitle {
  color: #4a4a4a;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 500;
  margin-bottom: clamp(10px, 1.1vw, 14px);
}

.checkoutBlockHead {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px clamp(10px, 1.2vw, 15px);
  margin-bottom: clamp(10px, 1.1vw, 14px);
}
.checkoutBlockHead .checkoutBlockTitle {
  margin-bottom: 0;
}

.checkoutEmptyHint {
  color: #999;
  font-size: clamp(12px, 0.9vw, 14px);
  padding: 8px 0;
}

@media (max-width: 768px) {
  .checkoutItems .checkoutItemTableWrap {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .checkoutItems .checkoutItemTableWrap::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
    background-color: #f1f1f1;
  }
  .checkoutItems .checkoutItemTableWrap::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #f1f1f1;
  }
  .checkoutItems .checkoutItemTableWrap::-webkit-scrollbar-thumb {
    background: #19322f;
  }
  .checkoutItems .checkoutItemTable {
    min-width: 500px;
  }
  .checkoutItems .checkoutItemTable thead th,
  .checkoutItems .checkoutItemTable tbody td {
    padding: 8px 6px;
  }
}

.checkoutTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: clamp(10px, 1.1vw, 14px);
}
.checkoutTabs[hidden] {
  display: none;
}
.checkoutTabs .checkoutTabButton {
  background-color: transparent;
  border: none;
  color: #666;
  font-size: clamp(14px, 1vw, 16px);
  padding: clamp(10px, 1.1vw, 14px) clamp(14px, 1.6vw, 24px);
  position: relative;
}
@media (min-width: 1181px) {
  .checkoutTabs .checkoutTabButton:hover {
    color: #19322f;
  }
}
.checkoutTabs .checkoutTab.is-active .checkoutTabButton {
  color: #19322f;
  font-weight: 700;
}
.checkoutTabs .checkoutTab.is-active .checkoutTabButton::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: #19322f;
}

.checkoutItemTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-size: clamp(14px, 1vw, 16px);
}
.checkoutItemTable col.checkoutColPic {
  width: clamp(72px, 7vw, 96px);
}
.checkoutItemTable col.checkoutColPrice {
  width: 16%;
}
.checkoutItemTable col.checkoutColQty {
  width: 15%;
}
.checkoutItemTable col.checkoutColSubtotal {
  width: 16%;
}
.checkoutItemTable col.checkoutColAction {
  width: 15%;
}
.checkoutItemTable thead th {
  background-color: #19322f;
  color: #fff;
  font-weight: 500;
  text-align: center;
  padding: clamp(10px, 1.1vw, 14px) 10px;
}
.checkoutItemTable thead th + th {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.checkoutItemTable tbody tr {
  box-shadow: 0 1px 0 0 #e5e5e5;
}
.checkoutItemTable tbody td {
  background-color: #fff;
  padding: clamp(10px, 1.1vw, 14px) 10px;
  vertical-align: middle;
  text-align: center;
  word-break: break-word;
}
.checkoutItemTable tbody .checkoutColName {
  text-align: left;
}
.checkoutItemTable thead th:first-child,
.checkoutItemTable tbody td:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.checkoutItemTable thead th:last-child,
.checkoutItemTable tbody td:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.checkoutItemTable .checkoutItemPicLink {
  display: block;
}
.checkoutItemTable .checkoutItemPic {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.checkoutItemTable .checkoutItemInfo > .checkoutItemName,
.checkoutItemTable .checkoutItemInfo > .checkoutItemSpec {
  display: block;
}
.checkoutItemTable .checkoutItemInfo > * + * {
  margin-top: 4px;
}
.checkoutItemTable .checkoutItemInfo .checkoutPromoTag {
  margin-left: 0;
}
.checkoutItemTable .checkoutItemName {
  color: #4a4a4a;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 500;
  text-decoration: none;
}
.checkoutItemTable a.checkoutItemName:hover {
  color: #19322f;
}
.checkoutItemTable .checkoutItemSpec {
  color: #888;
  font-size: clamp(12px, 0.9vw, 14px);
}
.checkoutItemTable .checkoutItemKind {
  display: block;
  color: #888;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 400;
}
.checkoutItemTable .checkoutGiftRow .checkoutColPrice {
  color: #888;
}

.checkoutPromoTag {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #f0efec;
  color: #4a4a4a;
  border-radius: 4px;
  font-size: clamp(11px, 0.8vw, 13px);
  line-height: 1.4;
  padding: 3px 8px;
  margin-left: 6px;
}

.checkoutPromoTag--pending {
  background-color: transparent;
  color: #888;
  border: 1px solid #ccc;
  padding: 2px 7px;
}

.checkoutItemInfo .checkoutPromoTag {
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.checkoutDiscountRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: clamp(14px, 1vw, 16px);
}
.checkoutDiscountRow[hidden] {
  display: none;
}
.checkoutDiscountRow .checkoutDiscountLabel {
  color: #555;
}
.checkoutDiscountRow .checkoutDiscountAmount {
  color: #e5533d;
  flex-shrink: 0;
}

.checkoutAddonList {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
}
.checkoutAddonList.slick-initialized {
  margin: 0;
}
.checkoutAddonList.slick-initialized .slick-list {
  padding: 0;
}
.checkoutAddonList.slick-initialized .slick-track {
  display: flex;
  align-items: stretch;
  margin: unset;
}
.checkoutAddonList.slick-initialized .slick-slide {
  margin: 0;
  height: auto;
}
.checkoutAddonList.slick-initialized .slick-slide + .slick-slide {
  border-left: 1px solid #e5e5e5;
}
.checkoutAddonList.slick-initialized .slick-slide > div {
  height: 100%;
}
.checkoutAddonList .checkoutAddonCard {
  height: 100%;
}
.checkoutAddonList .checkoutAddonCard--locked .item {
  opacity: 0.5;
}
.checkoutAddonList .checkoutAddonCard .item {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1.1vw, 14px);
}
.checkoutAddonList .checkoutAddonCard .Img {
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
}
.checkoutAddonList .checkoutAddonCard .Img img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.checkoutAddonList .checkoutAddonCard .Txt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  -moz-column-gap: 4px;
       column-gap: 4px;
  row-gap: 6px;
  padding-top: clamp(10px, 1.1vw, 14px);
  margin-top: auto;
}
.checkoutAddonList .checkoutAddonCard .checkoutAddonTitle {
  grid-column: 1;
  color: #4a4a4a;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkoutAddonList .checkoutAddonCard .checkoutAddonPrice {
  grid-column: 2;
  color: #4a4a4a;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 700;
  white-space: nowrap;
}
.checkoutAddonList .checkoutAddonCard .checkoutAddonUnit {
  grid-column: 3;
  color: #888;
  font-size: clamp(12px, 0.9vw, 14px);
  white-space: nowrap;
}
.checkoutAddonList .checkoutAddonCard .checkoutAddonRemaining,
.checkoutAddonList .checkoutAddonCard .checkoutAddonGapHint {
  grid-column: 1/-1;
  color: #999;
  font-size: clamp(11px, 0.8vw, 13px);
  text-align: right;
}
.checkoutAddonList .checkoutAddonCard .checkoutAddonActions {
  grid-column: 1/-1;
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}
.checkoutAddonList .checkoutAddonCard .checkoutAddonActions .checkoutAddonQty {
  flex: 0 0 clamp(64px, 6vw, 88px);
}
.checkoutAddonList .checkoutAddonCard .checkoutAddonActions [data-checkout-addon-add] {
  flex: 1;
}
.checkoutAddonList .checkoutEmptyHint {
  padding: clamp(10px, 1.1vw, 14px);
}

.checkoutAddonCartRow.is-invalid td:not(.checkoutColAction) {
  opacity: 0.55;
}
.checkoutAddonCartRow.is-adjusted {
  background-color: #fff8ec;
}
.checkoutAddonCartRow .checkoutAddonCartReason {
  color: #e5533d;
  font-size: clamp(12px, 0.9vw, 14px);
}

.checkoutCartSummary {
  margin-top: clamp(20px, 2.2vw, 30px);
  margin-left: auto;
  max-width: clamp(280px, 42%, 420px);
}
.checkoutCartSummary .checkoutCartSummaryRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: clamp(14px, 1vw, 16px);
}
.checkoutCartSummary .checkoutCartSummaryRow dt {
  color: #666;
}
.checkoutCartSummary .checkoutCartSummaryRow dd {
  color: #4a4a4a;
  font-weight: 500;
}
.checkoutCartSummary [data-cart-sum-discount] {
  color: #e5533d;
}
.checkoutCartSummary .checkoutCartSummaryTotal {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}
.checkoutCartSummary .checkoutCartSummaryTotal dt {
  color: #4a4a4a;
  font-weight: 700;
}
.checkoutCartSummary .checkoutCartSummaryTotal dd {
  color: #4a4a4a;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 700;
}
@media (max-width: 768px) {
  .checkoutCartSummary {
    max-width: none;
  }
}

.checkoutCoupon {
  background-color: #f6f6f6;
  border-radius: 6px;
  padding: clamp(16px, 2.4vw, 28px);
}
.checkoutCoupon input[type=text] {
  background-color: #fff;
}

.checkoutCouponInput {
  display: flex;
  gap: 8px;
}
.checkoutCouponInput input[type=text] {
  flex: 1;
}

.checkoutCouponBrowse button {
  background: none;
  border: none;
  color: #19322f;
  cursor: pointer;
  font-size: clamp(12px, 0.9vw, 14px);
  padding: 0;
  text-decoration: underline;
}
@media (min-width: 1181px) {
  .checkoutCouponBrowse button:hover {
    color: #4a4a4a;
  }
}

.checkoutCouponReason {
  color: #e5533d;
  font-size: clamp(12px, 0.9vw, 14px);
  margin-top: 8px;
}

.checkoutCouponModal [hidden] {
  display: none;
}

.checkoutCouponModalLoading,
.checkoutCouponModalEmpty {
  color: #666;
  font-size: clamp(14px, 1vw, 16px);
  padding: clamp(10px, 1.1vw, 14px) 0;
  text-align: center;
}

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

.checkoutCouponItemBtn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  cursor: pointer;
  padding: clamp(10px, 1.1vw, 14px);
  text-align: left;
}
@media (min-width: 1181px) {
  .checkoutCouponItemBtn:hover {
    border-color: #19322f;
    background-color: rgba(25, 50, 47, 0.05);
  }
}
.checkoutCouponItemBtn:disabled {
  background-color: #f7f7f7;
  border-color: #e5e5e5;
  cursor: not-allowed;
}
.checkoutCouponItemBtn:disabled .checkoutCouponItemCode,
.checkoutCouponItemBtn:disabled .checkoutCouponItemTitle,
.checkoutCouponItemBtn:disabled .checkoutCouponItemDesc {
  color: #999;
}

.checkoutCouponItemCode {
  color: #19322f;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 700;
}

.checkoutCouponItemTitle {
  color: #333;
  font-size: clamp(14px, 1vw, 16px);
}

.checkoutCouponItemDesc {
  color: #666;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.7;
  white-space: pre-line;
}

.checkoutCouponItemNote {
  color: #e5533d;
  font-size: clamp(12px, 0.9vw, 14px);
}

[data-checkout-shipping-list],
[data-checkout-payment-list] {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
}

.checkoutShippingOption,
.checkoutPaymentOption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 1.1vw, 14px) clamp(12px, 1.4vw, 18px);
  cursor: pointer;
}
@media (min-width: 1181px) {
  .checkoutShippingOption:hover,
  .checkoutPaymentOption:hover {
    background-color: rgba(25, 50, 47, 0.04);
  }
}
.checkoutShippingOption + .checkoutShippingOption,
.checkoutShippingOption + .checkoutPaymentOption,
.checkoutPaymentOption + .checkoutShippingOption,
.checkoutPaymentOption + .checkoutPaymentOption {
  border-top: 1px solid #e5e5e5;
}
.checkoutShippingOption input[type=radio],
.checkoutPaymentOption input[type=radio] {
  flex-shrink: 0;
  cursor: pointer;
}
.checkoutShippingOption .checkoutShippingTitle,
.checkoutShippingOption .checkoutPaymentTitle,
.checkoutPaymentOption .checkoutShippingTitle,
.checkoutPaymentOption .checkoutPaymentTitle {
  flex: 1;
}
.checkoutShippingOption .checkoutShippingFee,
.checkoutShippingOption .checkoutPaymentFee,
.checkoutPaymentOption .checkoutShippingFee,
.checkoutPaymentOption .checkoutPaymentFee {
  color: #666;
  font-size: clamp(12px, 0.9vw, 14px);
  flex-shrink: 0;
}
[data-checkout-shipping-list] .checkoutEmptyHint,
[data-checkout-payment-list] .checkoutEmptyHint {
  padding: clamp(10px, 1.1vw, 14px) clamp(12px, 1.4vw, 18px);
}

.checkoutOptionDesc {
  background-color: #f7f7f7;
  border-radius: 4px;
  color: #555;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  padding: clamp(10px, 1.1vw, 14px);
  margin-top: clamp(10px, 1.2vw, 15px);
  white-space: pre-line;
}
.checkoutOptionDesc[hidden] {
  display: none;
}

.checkoutDeliveryDate .checkoutField {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: clamp(16px, 2.4vw, 28px);
}

.checkoutForm .checkoutFieldset {
  border: 0;
  padding: 0;
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.checkoutForm .checkoutFieldset:last-child {
  margin-bottom: 0;
}
.checkoutForm .checkoutFieldset legend {
  float: left;
  width: 100%;
  padding: 0;
  color: #4a4a4a;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 500;
  margin-bottom: clamp(10px, 1.1vw, 14px);
}
.checkoutForm .checkoutFieldsetBody {
  clear: both;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: clamp(16px, 2.4vw, 28px);
}
.checkoutForm .checkoutField {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(10px, 1.2vw, 15px);
  margin-bottom: clamp(10px, 1.2vw, 15px);
}
.checkoutForm .checkoutField[hidden] {
  display: none;
}
.checkoutForm .checkoutField:last-child {
  margin-bottom: 0;
}
.checkoutForm .checkoutField > label {
  color: #4a4a4a;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  margin: 0;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
}
.checkoutForm .checkoutField:not(:has(> label)) {
  grid-template-columns: minmax(0, 1fr);
}
.checkoutForm .checkoutField.checkoutSameAsReceiver {
  grid-template-columns: minmax(0, 1fr);
}
.checkoutForm .checkoutField:has(.checkoutAddressGroup), .checkoutForm .checkoutField:has(.checkoutInvoiceAddressFields) {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}
.checkoutForm .checkoutField:has(.checkoutAddressGroup) > label, .checkoutForm .checkoutField:has(.checkoutInvoiceAddressFields) > label {
  text-align: left;
  -moz-text-align-last: left;
       text-align-last: left;
}
@media (max-width: 768px) {
  .checkoutForm .checkoutField {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .checkoutForm .checkoutField > label {
    text-align: left;
    -moz-text-align-last: left;
         text-align-last: left;
  }
}
.checkoutForm .checkoutAddressGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.checkoutForm .checkoutAddressGroup .city,
.checkoutForm .checkoutAddressGroup .town,
.checkoutForm .checkoutAddressGroup .zipcode {
  flex: 1;
  min-width: clamp(90px, 22%, 140px);
}
.checkoutForm .checkoutAddressGroup .address {
  flex: 0 0 100%;
}
.checkoutForm .checkoutInvoiceAddressFields {
  margin-top: 10px;
}
.checkoutForm .checkoutSameAsReceiver .checkoutCheckLabel {
  width: -moz-max-content;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #555;
  font-size: clamp(14px, 1vw, 16px);
  cursor: pointer;
}
.checkoutForm .checkoutSameAsReceiver input[type=checkbox] {
  cursor: pointer;
}
.checkoutForm .checkoutInvoiceFields {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.2vw, 15px);
  margin-top: clamp(10px, 1.2vw, 15px);
}
.checkoutForm .checkoutInvoiceFields[hidden] {
  display: none;
}
.checkoutForm .checkoutInvoiceFields label {
  color: #4a4a4a;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  margin: 0;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
}
@media (max-width: 768px) {
  .checkoutForm .checkoutInvoiceFields {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .checkoutForm .checkoutInvoiceFields label {
    text-align: left;
    -moz-text-align-last: left;
         text-align-last: left;
  }
}

.checkoutPage .checkoutField input.is-error,
.checkoutPage .checkoutField input.is-error:focus,
.checkoutPage .checkoutField select.is-error,
.checkoutPage .checkoutField select.is-error:focus,
.checkoutPage .checkoutInvoiceFields input.is-error,
.checkoutPage .checkoutInvoiceFields input.is-error:focus {
  border-color: #e5533d;
}
.checkoutPage .checkoutFieldError {
  grid-column: 1/-1;
  color: #e5533d;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.5;
  margin-top: 5px;
}

.checkoutStore .checkoutStoreSelected {
  margin-bottom: 10px;
}
.checkoutStore .checkoutStoreSelectedLabel {
  display: inline-block;
  color: #555;
  font-size: clamp(12px, 0.9vw, 14px);
  margin-bottom: 4px;
}
.checkoutStore .checkoutStoreName {
  display: block;
  font-weight: 500;
}
.checkoutStore .checkoutStoreAddress {
  display: block;
  color: #666;
  font-size: clamp(12px, 0.9vw, 14px);
  margin-bottom: 8px;
}
.checkoutStore .checkoutStoreSelect,
.checkoutStore .checkoutStoreReselect,
.checkoutStore .checkoutStoreSoon {
  background-color: #4a4a4a;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: clamp(14px, 1vw, 16px);
  padding: 10px clamp(14px, 1.8vw, 22px);
  margin-top: 4px;
}
@media (min-width: 1181px) {
  .checkoutStore .checkoutStoreSelect:hover,
  .checkoutStore .checkoutStoreReselect:hover,
  .checkoutStore .checkoutStoreSoon:hover {
    background-color: #19322f;
  }
}
.checkoutStore .checkoutStoreSelect:disabled,
.checkoutStore .checkoutStoreReselect:disabled,
.checkoutStore .checkoutStoreSoon:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.checkoutSummary {
  background-color: #f6f6f6;
  border-radius: 6px;
  margin-top: clamp(20px, 2.2vw, 30px);
  padding: clamp(16px, 2.4vw, 28px);
}
.checkoutSummary .checkoutSummaryRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: clamp(14px, 1vw, 16px);
}
.checkoutSummary .checkoutSummaryRow dt {
  color: #666;
}
.checkoutSummary .checkoutSummaryRow dd {
  color: #4a4a4a;
  font-weight: 500;
}
.checkoutSummary [data-sum-discount] {
  color: #e5533d;
}
.checkoutSummary .checkoutSummaryTotal {
  border-top: 1px solid #e5e5e5;
  margin-top: 8px;
  padding-top: clamp(10px, 1.1vw, 14px);
  justify-content: flex-end;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.checkoutSummary .checkoutSummaryTotal dt {
  font-size: 500px;
  color: #4a4a4a;
  font-size: clamp(16px, 1vw, 18px);
}
.checkoutSummary .checkoutSummaryTotal dd {
  color: #19322f;
  font-size: clamp(20px, 1.25vw, 24px);
  line-height: 1;
}

.checkoutSubmitBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 15px) clamp(20px, 2.2vw, 30px);
  margin-top: clamp(20px, 2.2vw, 30px);
}
@media (max-width: 768px) {
  .checkoutSubmitBar {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

.checkoutContinueLink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4a4a4a;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  padding: 16px 10px;
  border-bottom: 1px solid #a2a2a2;
}
.checkoutContinueLink::before {
  content: "←";
  font-size: 1.5em;
  line-height: 1;
  transform-origin: right center;
}
@media (min-width: 1181px) {
  .checkoutContinueLink:hover {
    color: #19322f;
  }
  .checkoutContinueLink:hover::before {
    transform: translateX(-10px);
  }
}
@media (max-width: 768px) {
  .checkoutContinueLink {
    justify-content: center;
  }
}

.checkoutSubmitButton {
  min-width: clamp(150px, 17vw, 210px);
  background-color: #19322f;
  border: 1px solid #19322f;
  border-radius: 4px;
  color: #fff;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 500;
  letter-spacing: 1px;
  padding: clamp(12px, 1.2vw, 16px) clamp(22px, 2.8vw, 40px);
}
@media (min-width: 1181px) {
  .checkoutSubmitButton:hover {
    background-color: #fff;
    color: #19322f;
  }
}
.checkoutSubmitButton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 768px) {
  .checkoutSubmitButton {
    width: 100%;
  }
}

.checkoutPage [data-checkout-item-remove],
.checkoutPage [data-checkout-addon-remove] {
  display: inline-block;
  background: none;
  border: none;
  border-radius: 0;
  color: #888;
  font-size: clamp(12px, 0.9vw, 14px);
  padding: 6px 0 3px;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.checkoutPage [data-checkout-item-remove]::before,
.checkoutPage [data-checkout-addon-remove]::before {
  content: "✕";
  padding-right: 4px;
}
@media (min-width: 1181px) {
  .checkoutPage [data-checkout-item-remove]:hover,
  .checkoutPage [data-checkout-addon-remove]:hover {
    color: #e5533d;
  }
}
.checkoutPage [data-checkout-addon-add],
.checkoutPage [data-checkout-coupon-apply] {
  flex-shrink: 0;
  background-color: #19322f;
  border: 1px solid #19322f;
  border-radius: 4px;
  color: #fff;
  font-size: clamp(12px, 0.9vw, 14px);
  padding: 7px clamp(12px, 1.4vw, 20px);
  white-space: nowrap;
}
@media (min-width: 1181px) {
  .checkoutPage [data-checkout-addon-add]:hover,
  .checkoutPage [data-checkout-coupon-apply]:hover {
    background-color: #4a4a4a;
    border-color: #4a4a4a;
  }
}
.checkoutPage [data-checkout-addon-add]:disabled,
.checkoutPage [data-checkout-coupon-apply]:disabled {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}

.checkoutEmpty {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 2.4vw, 28px);
}
.checkoutEmpty .checkoutEmptyText {
  color: #666;
  font-size: clamp(20px, 1.25vw, 24px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.checkoutEmpty .checkoutEmptyLink {
  display: inline-block;
  background-color: #19322f;
  border-radius: 4px;
  color: #fff;
  letter-spacing: 1px;
  padding: clamp(10px, 1.1vw, 14px) clamp(26px, 3.4vw, 44px);
}
@media (min-width: 1181px) {
  .checkoutEmpty .checkoutEmptyLink:hover {
    background-color: #4a4a4a;
  }
}

.orderPage .completeHint {
  color: #444;
  font-size: clamp(16px, 1vw, 18px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.orderPage .completeAlert {
  background-color: #fdf3f3;
  border-left: 3px solid #c0392b;
  border-radius: 2px;
  color: #c0392b;
  font-size: clamp(14px, 1vw, 16px);
  padding: clamp(10px, 1.1vw, 14px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.orderPage h3 {
  color: #4a4a4a;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 500;
  margin-bottom: clamp(10px, 1.1vw, 14px);
}
.orderPage .orderMeta,
.orderPage .orderItems,
.orderPage .orderAmounts,
.orderPage .orderContact,
.orderPage .orderInvoice,
.orderPage .orderPayment {
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.orderPage .orderBlockBody {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: clamp(16px, 2.4vw, 28px);
}
.orderPage .orderMeta {
  background-color: #f6f6f6;
  border-radius: 6px;
  padding: clamp(16px, 2.4vw, 28px);
}
.orderPage .orderMeta p {
  font-size: clamp(14px, 1vw, 16px);
  padding: 4px 0;
}
.orderPage .orderMeta [data-order-no] {
  color: #19322f;
  font-weight: 700;
}
.orderPage .orderItems li,
.orderPage .orderItems .itemHead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.1vw, 14px) 12px;
  font-size: clamp(14px, 1vw, 16px);
}
.orderPage .orderItems .itemHead {
  background-color: #19322f;
  border-radius: 4px;
  color: #fff;
  font-size: clamp(12px, 0.9vw, 14px);
  margin-bottom: 10px;
}
.orderPage .orderItems .itemHead .itemQty,
.orderPage .orderItems .itemHead .itemPrice {
  color: inherit;
}
.orderPage .orderItems li {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
}
.orderPage .orderItems li + li {
  margin-top: 10px;
}
.orderPage .orderItems .itemPic {
  flex: none;
  width: 60px;
}
.orderPage .orderItems .itemPic img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.orderPage .orderItems .itemInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.orderPage .orderItems .itemTitle {
  font-weight: 500;
  line-height: 1.5;
}
.orderPage .orderItems .itemKind {
  color: #888;
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 400;
}
.orderPage .orderItems .itemSpec {
  color: #666;
  font-size: clamp(12px, 0.9vw, 14px);
}
.orderPage .orderItems .itemQty {
  flex: none;
  width: 56px;
  text-align: center;
  color: #666;
}
.orderPage .orderItems .itemPrice {
  flex: none;
  width: 90px;
  text-align: right;
  font-weight: 500;
}
.orderPage .orderItems .itemPreorder {
  display: inline-block;
  background-color: #f0ad4e;
  border-radius: 4px;
  color: #fff;
  font-size: clamp(11px, 0.8vw, 13px);
  line-height: 1;
  padding: 3px 8px;
}
@media (max-width: 768px) {
  .orderPage .orderItems .itemTable {
    overflow-x: auto;
  }
  .orderPage .orderItems .itemTable::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
    background-color: #f1f1f1;
  }
  .orderPage .orderItems .itemTable::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #f1f1f1;
  }
  .orderPage .orderItems .itemTable::-webkit-scrollbar-thumb {
    background: #19322f;
  }
  .orderPage .orderItems .itemHead,
  .orderPage .orderItems ul {
    min-width: 380px;
  }
  .orderPage .orderItems li,
  .orderPage .orderItems .itemHead {
    gap: 8px;
    padding: 10px 8px;
  }
  .orderPage .orderItems .itemPic {
    width: 48px;
  }
  .orderPage .orderItems .itemQty {
    width: 40px;
  }
  .orderPage .orderItems .itemPrice {
    width: 76px;
  }
}
.orderPage .orderAmounts {
  background-color: #f6f6f6;
  border-radius: 6px;
  padding: clamp(16px, 2.4vw, 28px);
}
.orderPage .orderAmounts h3 {
  margin-bottom: clamp(10px, 1.1vw, 14px);
}
.orderPage .orderAmounts .orderAmountRow {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 6px 0;
  font-size: clamp(14px, 1vw, 16px);
}
.orderPage .orderAmounts .orderAmountRow dt {
  color: #666;
  text-align: right;
}
.orderPage .orderAmounts .orderAmountRow dd {
  width: 120px;
  color: #4a4a4a;
  font-weight: 500;
  text-align: right;
}
.orderPage .orderAmounts .orderTotal {
  border-top: 1px solid #e5e5e5;
  margin-top: 10px;
  padding-top: clamp(10px, 1.1vw, 14px);
}
.orderPage .orderAmounts .orderTotal dt,
.orderPage .orderAmounts .orderTotal dd {
  color: #19322f;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 700;
}
.orderPage .orderContact p,
.orderPage .orderInvoice p,
.orderPage .orderPayment p {
  font-size: clamp(14px, 1vw, 16px);
  padding: 5px 0;
}
.orderPage .orderContact [data-shipping-desc],
.orderPage .orderContact [data-payment-desc],
.orderPage .orderInvoice [data-shipping-desc],
.orderPage .orderInvoice [data-payment-desc],
.orderPage .orderPayment [data-shipping-desc],
.orderPage .orderPayment [data-payment-desc] {
  white-space: pre-line;
}
.orderPage .orderPayment .payStatus {
  color: #4a4a4a;
  font-weight: 500;
}
.orderPage .orderPayment .payStatus--alert {
  background-color: #fdf3f3;
  border-left: 3px solid #c0392b;
  border-radius: 2px;
  color: #c0392b;
  padding: clamp(10px, 1.1vw, 14px);
  margin-top: 10px;
}
.orderPage .orderPayment .payInfo {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: clamp(10px, 1.1vw, 14px) clamp(12px, 1.4vw, 18px);
  margin-top: 10px;
}
.orderPage .orderPayment .payInfo p {
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 4px 0;
}
.orderPage .orderPayment .payBtn {
  background-color: #19322f;
  border: 1px solid #19322f;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: clamp(14px, 1vw, 16px);
  padding: clamp(10px, 1.1vw, 14px) clamp(22px, 2.6vw, 36px);
  margin-top: 10px;
}
@media (min-width: 1181px) {
  .orderPage .orderPayment .payBtn:hover {
    background-color: #fff;
    color: #19322f;
  }
}
.orderPage .backLink {
  text-align: center;
  margin-top: clamp(20px, 2.2vw, 30px);
}
.orderPage .backLink a {
  display: inline-block;
  border: 1px solid #19322f;
  border-radius: 4px;
  color: #19322f;
  padding: clamp(10px, 1.1vw, 14px) clamp(22px, 2.6vw, 36px);
}
@media (min-width: 1181px) {
  .orderPage .backLink a:hover {
    background-color: #19322f;
    color: #fff;
  }
}
/*# sourceMappingURL=shop.css.map */