.commerce-section { min-height: 72vh; padding-block: clamp(28px, 5vw, 58px) clamp(70px, 8vw, 110px); }
.commerce-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--text-2); font-size: 12px; }
.commerce-breadcrumb a:hover { color: var(--red); }
.commerce-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 38px; }
.commerce-heading h1 { margin: 0; color: var(--text); font-size: clamp(30px, 4vw, 46px); line-height: 1.15; letter-spacing: -.03em; }
.commerce-heading p { margin-top: 7px; color: var(--text-2); font-size: 14px; }
.commerce-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; align-items: start; }
.commerce-list { display: grid; gap: 14px; }

.commerce-select-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.commerce-select-bar__all { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; }
.commerce-select-bar__all input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; }
.commerce-select-bar__delete { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border: none; background: none; color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.commerce-select-bar__delete svg { width: 16px; height: 16px; }
.commerce-select-bar__delete:hover { color: var(--red); }

.commerce-store-group { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--bg); }
.commerce-store-group__header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.commerce-store-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--text); }
.commerce-store-badge::before { content: ""; width: 8px; height: 16px; background: var(--red); transform: skewX(-14deg); border-radius: 2px; }

.commerce-row { display: grid; grid-template-columns: 22px 100px minmax(0, 1fr) 110px 120px 120px; grid-template-areas: "check visual info price qty total"; gap: 16px; align-items: center; padding: 18px; border-bottom: 1px solid var(--border); background: var(--bg); }
.commerce-row:last-child { border-bottom: 0; }
.commerce-item-checkbox { grid-area: check; width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; }
.commerce-row__visual { grid-area: visual; --bike-color: #d9232e; --bike-accent: #24272b; width: 100px; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: radial-gradient(circle, #fff, #e7e7e5); color: var(--text-2); }
.commerce-row__visual > img { width: 100%; height: 100%; object-fit: cover; }
.commerce-row__visual > svg:not(.motorcycle-preview) { width: 42%; }
.commerce-row__visual .motorcycle-preview { width: 112%; max-width: none; filter: drop-shadow(0 8px 8px rgba(15,17,18,.12)); }
.commerce-row__visual .motorcycle-preview__body-light,
.wishlist-card__visual .motorcycle-preview__body-light { stop-color: color-mix(in srgb, var(--bike-color) 65%, white); }
.commerce-row__visual .motorcycle-preview__body,
.wishlist-card__visual .motorcycle-preview__body { stop-color: var(--bike-color); }
.commerce-row__visual .motorcycle-preview__body-dark,
.wishlist-card__visual .motorcycle-preview__body-dark { stop-color: color-mix(in srgb, var(--bike-color) 68%, black); }
.commerce-row__visual .motorcycle-preview__accent-light,
.wishlist-card__visual .motorcycle-preview__accent-light { stop-color: color-mix(in srgb, var(--bike-accent) 68%, white); }
.commerce-row__visual .motorcycle-preview__accent,
.wishlist-card__visual .motorcycle-preview__accent { stop-color: var(--bike-accent); }
.commerce-row__info { grid-area: info; min-width: 0; }
.commerce-row__info > span { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.commerce-row__info h2 { margin: 4px 0 2px; font-size: 15px; line-height: 1.4; }
.commerce-row__info h2 a:hover { color: var(--red); }
.commerce-row__info p { color: var(--text-2); font-size: 11px; }
.commerce-row__price { grid-area: price; }
.commerce-row__price strong { color: var(--text); font-size: 14px; font-weight: 700; white-space: nowrap; }
.commerce-row__quantity { grid-area: qty; }
.commerce-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.commerce-stepper__btn { width: 30px; height: 32px; display: grid; place-items: center; border: none; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; }
.commerce-stepper__btn:hover:not(:disabled) { background: var(--ink); color: var(--on-ink); }
.commerce-stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.commerce-stepper__value { min-width: 34px; text-align: center; font-size: 13px; font-weight: 700; }
.commerce-stepper--locked { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 32px; border: 1px solid var(--border); border-radius: 6px; font-weight: 700; font-size: 13px; color: var(--text-2); }
.commerce-row__total { grid-area: total; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.commerce-row__total strong { color: var(--red); font-size: 16px; white-space: nowrap; }
.commerce-remove,
.wishlist-remove { display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.commerce-remove svg { width: 17px; height: 17px; }
.commerce-remove:hover,
.wishlist-remove:hover { color: var(--red); background: var(--red-tint); }
.wishlist-remove { width: auto; height: auto; padding: 0; margin-top: 8px; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; background: none; }
.wishlist-remove:hover { background: none; }

.commerce-summary { position: sticky; top: 90px; padding: 28px; border: 1px solid var(--border); border-top: 4px solid var(--red); border-radius: 5px; background: var(--surface); }
.commerce-summary__kicker { display: block; margin-bottom: 18px; color: var(--text); font-size: 15px; font-weight: 800; }
.commerce-summary > div { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 12px; }
.commerce-summary > div strong { color: var(--text); text-align: right; }
.commerce-summary > .commerce-summary__total { padding-block: 20px; border: 0; color: var(--text); font-size: 15px; font-weight: 700; }
.commerce-summary__total strong { color: var(--red) !important; font-size: 22px; }
.commerce-summary .industrial-button { width: 100%; padding-inline: 22px; text-align: center; }
.commerce-summary .industrial-button.is-disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }
.commerce-summary > small { display: block; margin-top: 14px; color: var(--text-2); font-size: 10px; line-height: 1.6; text-align: center; }
.commerce-empty { display: grid; justify-items: center; max-width: 700px; margin: 18px auto 0; padding: clamp(48px, 8vw, 86px) 24px; border: 1px dashed var(--border); background: var(--surface); text-align: center; }
.commerce-empty > svg { width: 64px; color: var(--red); }
.commerce-empty h2 { margin-top: 18px; font-size: clamp(22px, 3vw, 30px); }
.commerce-empty p { max-width: 48ch; margin: 8px 0 24px; color: var(--text-2); }
.wishlist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wishlist-card { overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); box-shadow: var(--shadow-sm); }
.wishlist-card__visual { --bike-color: #d9232e; --bike-accent: #24272b; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #fff, #e5e5e3); color: var(--text-2); }
.wishlist-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.wishlist-card__visual > svg:not(.motorcycle-preview) { width: 28%; }
.wishlist-card__visual .motorcycle-preview { width: 94%; filter: drop-shadow(0 10px 10px rgba(15,17,18,.13)); }
.wishlist-card__content { padding: 20px; }
.wishlist-card__content > span { display: block; overflow: hidden; color: var(--text-2); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.wishlist-card h2 { min-height: 48px; margin: 5px 0 12px; font-size: 17px; line-height: 1.45; }
.wishlist-card h2 a:hover { color: var(--red); }
.wishlist-card__content > strong { color: var(--red); font-size: 21px; }
.wishlist-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.wishlist-card__actions .industrial-button { min-height: 40px; padding: 9px 15px; font-size: 10px; }
.wishlist-remove { margin: 0; }
.wishlist-card__unavailable { color: var(--warn); font-size: 11px; font-weight: 700; }

@media (max-width: 1100px) {
  .commerce-layout { grid-template-columns: 1fr; }
  .commerce-summary { position: static; }
  .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .commerce-row {
    grid-template-columns: 22px 90px minmax(0, 1fr);
    grid-template-areas:
      "check visual info"
      "check visual price"
      "qty qty total";
    row-gap: 10px;
  }
  .commerce-row__visual { width: 90px; }
  .commerce-row__price { align-self: start; }
  .commerce-row__quantity,
  .commerce-row__total { padding-top: 12px; border-top: 1px solid var(--border); }
  .commerce-row__total { justify-content: space-between; }
}

@media (max-width: 620px) {
  .commerce-heading { display: block; }
  .commerce-heading .home-text-link { margin-top: 16px; }
  .commerce-row { grid-template-columns: 20px 78px minmax(0, 1fr); gap: 12px; }
  .commerce-row__visual { width: 78px; }
  .commerce-select-bar { padding: 12px 14px; }
  .commerce-store-group__header { padding: 12px 14px; }
  .wishlist-grid { grid-template-columns: 1fr; }
}

/* Shared card / form primitives — used by checkout, address book and the
   add/edit address page so all three stay visually identical. */
.checkout-card {
  min-width: 0;
  background: var(--bg);
  border-radius: var(--r-lg, 12px);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
}
.checkout-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.checkout-card__header svg { width: 22px; height: 22px; color: var(--red); }

.checkout-table { width: 100%; border-collapse: collapse; }
.checkout-table th {
  text-align: left;
  padding: 12px;
  font-size: 0.85rem;
  color: var(--text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.checkout-table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

@media (max-width: 560px) {
  /* Below 560px an HTML table barely shrinks — columns crush the product
     name/price/qty together instead of wrapping cleanly. Reflow each row
     into a stacked block instead of relying on horizontal scroll. */
  .checkout-table thead { display: none; }
  .checkout-table, .checkout-table tbody, .checkout-table tr, .checkout-table td {
    display: block;
    width: 100%;
  }
  .checkout-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .checkout-table tr:last-child { border-bottom: none; }
  .checkout-table td {
    padding: 4px 0;
    border-bottom: none;
    text-align: left !important;
  }
  .checkout-table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 78px;
  }
  .checkout-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 600;
  }
}

.address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.address-grid .full-width { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .address-grid { grid-template-columns: 1fr; }
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm, 8px);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent);
}
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
  cursor: pointer;
}
select.form-control:disabled {
  background-color: var(--surface);
  color: var(--text-2);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Clearable text inputs — small "x" appears once the field has a value,
   mirroring Lazada's address-book inputs. */
.mx-input-clearable { position: relative; }
.mx-input-clearable .form-control { padding-right: 36px; }
.mx-input-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-2, var(--surface));
  color: var(--text-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.mx-input-clearable.has-value .mx-input-clear { display: flex; }
.mx-input-clear:hover { background: var(--border); color: var(--text); }

/* Address type toggle — ທີ່ທຳງານ / ທີ່ບ້ານ pill buttons. */
.mx-address-type-toggle { display: flex; gap: 12px; flex-wrap: wrap; }
.mx-address-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm, 10px);
  background: var(--bg);
  color: var(--text-2);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mx-address-type-btn svg { width: 18px; height: 18px; }
.mx-address-type-btn:hover { border-color: var(--text-2); }
.mx-address-type-btn.is-active {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-tint);
}
.mx-address-type-btn.is-active:hover { border-color: var(--red); }

/* Payment method selector — radio "cards", same visual language as the
   address-type toggle and the existing .address-item:has(input:checked)
   pattern already used for the saved-address picker. */
.mx-payment-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mx-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mx-payment-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--red);
}
.mx-payment-option__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
}
.mx-payment-option__icon svg { width: 20px; height: 20px; }
.mx-payment-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-payment-option__body strong { font-size: 0.92rem; color: var(--text); }
.mx-payment-option__body small { font-size: 0.8rem; color: var(--text-2); }
.mx-payment-option:has(input:checked) { border-color: var(--red); background: var(--red-tint); }
.mx-payment-option:has(input:checked) .mx-payment-option__icon { color: var(--red); }