:root {
  --gw-mcc-image-size: 84px;
  --gw-mcc-card-bg: #ffffff;
  --gw-mcc-accent: #8b6f47;
  --gw-mcc-bottom-space: 88px;
}

.gw-mcc-mobile .gw-mcc-card-container {
  overflow: visible !important;
  padding-bottom: var(--gw-mcc-bottom-space);
}

.gw-mcc-mobile table.gw-mcc-table {
  display: block;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
}

.gw-mcc-mobile table.gw-mcc-table > thead {
  display: none !important;
}

.gw-mcc-mobile table.gw-mcc-table > tbody {
  display: block;
  width: 100%;
}

.gw-mcc-mobile table.gw-mcc-table tr.gw-mcc-row {
  position: relative;
  display: grid !important;
  grid-template-columns: var(--gw-mcc-image-size) minmax(0, 1fr) auto;
  grid-template-areas:
    "image name name"
    "image model model"
    "image unit total"
    "image quantity quantity";
  column-gap: 14px;
  row-gap: 6px;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px;
  background: var(--gw-mcc-card-bg) !important;
  box-shadow: 0 3px 14px rgba(30, 30, 30, 0.06);
}

.gw-mcc-mobile table.gw-mcc-table tr.gw-mcc-row > td {
  display: block !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  vertical-align: top !important;
}

.gw-mcc-mobile .gw-mcc-image {
  grid-area: image;
  align-self: start;
}

.gw-mcc-mobile .gw-mcc-image img,
.gw-mcc-mobile .gw-mcc-name img {
  width: var(--gw-mcc-image-size) !important;
  height: var(--gw-mcc-image-size) !important;
  max-width: none !important;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 9px;
}

.gw-mcc-mobile .gw-mcc-name {
  grid-area: name;
  padding-right: 34px !important;
  color: #252525;
  font-size: 14px;
  line-height: 1.55;
}

.gw-mcc-mobile .gw-mcc-name > a,
.gw-mcc-mobile .gw-mcc-name .name,
.gw-mcc-mobile .gw-mcc-name .product-name {
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.gw-mcc-mobile .gw-mcc-name small,
.gw-mcc-mobile .gw-mcc-name .text-muted,
.gw-mcc-mobile .gw-mcc-name .option {
  display: block;
  margin-top: 3px;
  color: #707070;
  font-size: 12px;
  line-height: 1.5;
}

.gw-mcc-mobile .gw-mcc-model {
  grid-area: model;
  color: #777;
  font-size: 12px;
  line-height: 1.45;
}

.gw-mcc-mobile .gw-mcc-unit {
  grid-area: unit;
  align-self: center;
  color: #767676;
  font-size: 13px;
  min-width: 0;
}

.gw-mcc-mobile .gw-mcc-total {
  grid-area: total;
  align-self: center;
  color: #202020;
  font-size: 15px;
  font-weight: 700;
  min-width: 0;
  text-align: right !important;
}

.gw-mcc-mobile .gw-mcc-unit::before,
.gw-mcc-mobile .gw-mcc-total::before {
  display: inline-block;
  margin-right: 5px;
  color: #979797;
  font-size: 11px;
  font-weight: 400;
  content: attr(data-gw-label);
}

.gw-mcc-mobile .gw-mcc-quantity {
  grid-area: quantity;
  align-self: center;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  width: 100% !important;
  margin-top: 4px;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.gw-mcc-mobile .gw-mcc-quantity::before {
  display: block;
  margin: 0;
  color: #777;
  font-size: 12px;
  content: attr(data-gw-label);
}

.gw-mcc-mobile .gw-mcc-quantity-host {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  gap: 0 !important;
}

.gw-mcc-mobile .gw-mcc-quantity-host::before,
.gw-mcc-mobile .gw-mcc-quantity-host::after {
  display: none !important;
  content: none !important;
}

.gw-mcc-mobile .gw-mcc-quantity-host > .gw-mcc-quantity-residue,
.gw-mcc-mobile .gw-mcc-quantity-host > :not(.gw-mcc-stepper):not(script):not(style):not(template) {
  display: none !important;
}

.gw-mcc-mobile .gw-mcc-detail {
  grid-column: 2 / -1;
  color: #6d6d6d;
  font-size: 12px;
}

.gw-mcc-mobile .gw-mcc-stepper {
  position: relative !important;
  z-index: 5 !important;
  display: flex;
  flex: 1 1 auto;
  flex-basis: 100%;
  align-items: center;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 38px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #dedede;
  border-radius: 20px !important;
  background: #fff;
  vertical-align: middle;
}

.gw-mcc-mobile .gw-mcc-stepper input {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  color: #252525 !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 36px !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.gw-mcc-mobile .gw-mcc-stepper input::-webkit-outer-spin-button,
.gw-mcc-mobile .gw-mcc-stepper input::-webkit-inner-spin-button,
.gw-mcc-mobile .gw-mcc-quantity input[type="number"]::-webkit-outer-spin-button,
.gw-mcc-mobile .gw-mcc-quantity input[type="number"]::-webkit-inner-spin-button {
  display: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.gw-mcc-mobile .gw-mcc-step-button {
  display: flex !important;
  position: relative !important;
  z-index: 6 !important;
  flex: 0 0 38px !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--gw-mcc-accent) !important;
  font-family: Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.gw-mcc-mobile .gw-mcc-step-button::before,
.gw-mcc-mobile .gw-mcc-step-button::after {
  display: none !important;
  content: none !important;
}

.gw-mcc-mobile .gw-mcc-step-button:first-child {
  border-radius: 19px 0 0 19px !important;
}

.gw-mcc-mobile .gw-mcc-step-button:last-child {
  border-radius: 0 19px 19px 0 !important;
}

.gw-mcc-mobile .gw-mcc-step-button:disabled {
  color: #c7c7c7;
  cursor: not-allowed;
}

.gw-mcc-mobile .gw-mcc-step-button:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gw-mcc-accent) 30%, transparent);
}

.gw-mcc-mobile .gw-mcc-native-update,
.gw-mcc-mobile .gw-mcc-native-remove,
.gw-mcc-mobile .gw-mcc-native-step,
.gw-mcc-mobile .gw-mcc-native-step-group,
.gw-mcc-mobile .gw-mcc-native-quantity-input,
.gw-mcc-mobile .gw-mcc-native-quantity-source {
  display: none !important;
}

.gw-mcc-mobile .gw-mcc-quantity .input-group-btn-vertical,
.gw-mcc-mobile .gw-mcc-quantity .bootstrap-touchspin-up,
.gw-mcc-mobile .gw-mcc-quantity .bootstrap-touchspin-down,
.gw-mcc-mobile .gw-mcc-quantity .quantity-up,
.gw-mcc-mobile .gw-mcc-quantity .quantity-down,
.gw-mcc-mobile .gw-mcc-quantity .qty-up,
.gw-mcc-mobile .gw-mcc-quantity .qty-down,
.gw-mcc-mobile .gw-mcc-quantity [class*="spinner-button"],
.gw-mcc-mobile .gw-mcc-quantity [class*="spinner-buttons"],
.gw-mcc-mobile .gw-mcc-quantity [class*="stepper-vertical"] {
  display: none !important;
}

.gw-mcc-mobile .gw-mcc-quantity input[type="number"] {
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.gw-mcc-mobile .gw-mcc-tax-exclusive {
  display: none !important;
}

.gw-mcc-mobile .gw-mcc-remove {
  position: absolute !important;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  color: #777 !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

.gw-mcc-mobile .gw-mcc-remove:hover,
.gw-mcc-mobile .gw-mcc-remove:focus {
  background: #ececec !important;
  color: #c0392b !important;
}

.gw-mcc-mobile .gw-mcc-remove {
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.gw-mcc-mobile .gw-mcc-remove.gw-mcc-remove-loading {
  opacity: 0.45;
  cursor: wait;
}

.gw-mcc-mobile .gw-mcc-cart-updating .gw-mcc-stepper {
  opacity: 0.62;
  pointer-events: none;
}

.gw-mcc-mobile .gw-mcc-cart-removing {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.gw-mcc-mobile .gw-mcc-gift-badge {
  display: inline-block;
  margin: 6px 0 0 7px;
  padding: 2px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gw-mcc-accent) 12%, #fff);
  color: var(--gw-mcc-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}

.gw-mcc-mobile.gw-mcc-no-image .gw-mcc-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name name"
    "model model"
    "unit total"
    "quantity quantity";
}

.gw-mcc-mobile table.gw-mcc-table tr.gw-mcc-row.gw-mcc-no-image-cell {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name name"
    "model model"
    "unit total"
    "quantity quantity";
}

.gw-mcc-mobile .gw-mcc-no-image-cell .gw-mcc-name img {
  float: left;
  width: var(--gw-mcc-image-size) !important;
  height: var(--gw-mcc-image-size) !important;
  margin: 0 12px 8px 0 !important;
}

.gw-mcc-mobile .gw-mcc-no-image-cell .gw-mcc-name::after {
  display: table;
  clear: both;
  content: "";
}

.gw-mcc-mobile.gw-mcc-no-image .gw-mcc-image,
.gw-mcc-mobile.gw-mcc-no-image .gw-mcc-name img {
  display: none !important;
}

.gw-mcc-mobile.gw-mcc-no-model table.gw-mcc-table tr.gw-mcc-row > td.td-model,
.gw-mcc-mobile.gw-mcc-no-model table.gw-mcc-table tr.gw-mcc-row > td.gw-mcc-model,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-model,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-model-inline,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-model-break,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row .model,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row .product-model,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row .product_model,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row .sku,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row .product-sku,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row .product_sku,
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row [data-model],
.gw-mcc-mobile.gw-mcc-no-model .gw-mcc-row [data-sku],
.gw-mcc-mobile.gw-mcc-no-unit-price .gw-mcc-unit {
  display: none !important;
}

.gw-mcc-mobile .gw-mcc-loose-card {
  position: relative;
  display: grid !important;
  grid-template-columns: var(--gw-mcc-image-size) minmax(0, 1fr);
  gap: 8px 12px;
  margin-bottom: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  background: var(--gw-mcc-card-bg) !important;
  box-shadow: 0 3px 14px rgba(30, 30, 30, 0.06);
}

.gw-mcc-mobile .gw-mcc-loose-card .gw-mcc-stepper {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 8px;
}

.gw-mcc-mobile .gw-mcc-loose-card img {
  width: var(--gw-mcc-image-size) !important;
  height: var(--gw-mcc-image-size) !important;
  object-fit: cover;
  border-radius: 9px;
}

@media (max-width: 420px) {
  .gw-mcc-mobile table.gw-mcc-table tr.gw-mcc-row {
    column-gap: 11px;
    padding: 12px;
  }

  .gw-mcc-mobile .gw-mcc-total {
    font-size: 14px;
  }

  /* 窄手機或系統放大字體時，標題與金額分行，避免兩欄文字互相覆蓋。 */
  .gw-mcc-mobile .gw-mcc-unit,
  .gw-mcc-mobile .gw-mcc-total {
    max-width: 100%;
    white-space: nowrap;
  }

  .gw-mcc-mobile .gw-mcc-unit::before,
  .gw-mcc-mobile .gw-mcc-total::before {
    display: block;
    margin: 0 0 2px;
    line-height: 1.2;
  }
}

@media (max-width: 374px) {
  /* 320／360px 寬度改為單價、總價各一列，金額再長也不會互相重疊。 */
  .gw-mcc-mobile table.gw-mcc-table tr.gw-mcc-row {
    grid-template-areas:
      "image name name"
      "image model model"
      "image unit unit"
      "image total total"
      "image quantity quantity";
  }

  .gw-mcc-mobile .gw-mcc-unit,
  .gw-mcc-mobile .gw-mcc-total {
    width: 100% !important;
    text-align: left !important;
  }

  .gw-mcc-mobile.gw-mcc-no-unit-price table.gw-mcc-table tr.gw-mcc-row {
    grid-template-areas:
      "image name name"
      "image model model"
      "image total total"
      "image quantity quantity";
  }

  .gw-mcc-mobile.gw-mcc-no-image table.gw-mcc-table tr.gw-mcc-row,
  .gw-mcc-mobile table.gw-mcc-table tr.gw-mcc-row.gw-mcc-no-image-cell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "model"
      "unit"
      "total"
      "quantity";
  }

  .gw-mcc-mobile.gw-mcc-no-image.gw-mcc-no-unit-price table.gw-mcc-table tr.gw-mcc-row,
  .gw-mcc-mobile.gw-mcc-no-unit-price table.gw-mcc-table tr.gw-mcc-row.gw-mcc-no-image-cell {
    grid-template-areas:
      "name"
      "model"
      "total"
      "quantity";
  }
}