:root {
  color-scheme: light;
  --app-max-width: 430px;
  --background-grey: #f7f7f7;
  --background-white: #ffffff;
  --background-green-50: #f2fbf7;
  --brand-primary: #00a759;
  --brand-secondary: #007b55;
  --primary-orange: #ff6c40;
  --primary-blue: #006dff;
  --text-primary: #1c1c1c;
  --text-primary-alt: #1c1c25;
  --text-secondary: #575757;
  --text-tertiary: #8b8b8b;
  --text-white: #ffffff;
  --stroke-secondary: #e5e8eb;
  --status-red: #cf062a;
  --delivery-purple: #a35cfd;
  --delivery-purple-bg: #f5efff;
  --delivery-orange: #ff7900;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background-grey);
  color: var(--text-primary);
  font-family: "Poppins", "Noto Sans JP", "PingFang HK", "PingFang TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.product-visual img,
.large-image img,
.merchant-product-image img,
.figma-sku-image img {
  cursor: pointer;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 0;
}

.phone-shell {
  display: grid;
  justify-items: center;
  width: min(var(--app-max-width), 100vw);
}

.phone {
  position: relative;
  width: min(var(--app-max-width), 100vw);
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--background-grey);
  box-shadow: none;
}

.timeslot-toast {
  position: absolute;
  top: 52px;
  left: 50%;
  z-index: 100;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 6px;
  background: rgba(32, 32, 32, 0.96);
  color: var(--text-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -140%);
  transition:
    transform 0.24s ease,
    opacity 0.2s ease;
}

.timeslot-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.status-bar {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 22px 0 30px;
  background: #000;
  color: var(--text-white);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.status-time {
  min-width: 54px;
  text-align: left;
  line-height: 20px;
}

.order-time-control {
  position: relative;
  min-width: 66px;
  height: 28px;
}

.order-time-control select {
  width: 72px;
  height: 28px;
  padding: 0 18px 0 0;
  border: 0;
  border-radius: 6px;
  appearance: none;
  background: transparent;
  color: var(--text-white);
  font-weight: 700;
  line-height: 20px;
}

.order-time-control option {
  color: var(--text-primary);
}

.order-time-control::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-white);
  border-bottom: 1.5px solid var(--text-white);
  transform: rotate(45deg);
  pointer-events: none;
}

.ai-version-toggle {
  position: absolute;
  left: 112px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.ai-version-toggle input#aiVersionToggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: none;
  opacity: 0;
  cursor: pointer;
}

.ai-toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: #666;
  transition: background 0.18s ease;
}

.ai-toggle-track i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease;
}

.ai-version-toggle:has(input:checked) .ai-toggle-track {
  background: var(--brand-primary);
}

.ai-version-toggle:has(input:checked) .ai-toggle-track i {
  transform: translateX(14px);
}

.ai-version-toggle:has(input:focus-visible) .ai-toggle-track {
  outline: 2px solid var(--text-white);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.status-icons {
  display: flex;
  gap: 7px;
  align-items: center;
  color: currentColor;
}

.cellular-signal {
  width: 18px;
  height: 12px;
  display: grid;
  grid-template-columns: repeat(4, 3px);
  gap: 2px;
  align-items: end;
}

.cellular-signal i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
}

.cellular-signal i:nth-child(1) {
  height: 4px;
}

.cellular-signal i:nth-child(2) {
  height: 6px;
}

.cellular-signal i:nth-child(3) {
  height: 9px;
}

.cellular-signal i:nth-child(4) {
  height: 12px;
}

.wifi-signal {
  position: relative;
  width: 17px;
  height: 13px;
  overflow: hidden;
}

.wifi-signal::before,
.wifi-signal::after,
.wifi-signal i {
  position: absolute;
  left: 50%;
  border: 2px solid currentColor;
  border-color: currentColor transparent transparent transparent;
  border-radius: 999px;
  transform: translateX(-50%);
  content: "";
}

.wifi-signal::before {
  top: 1px;
  width: 17px;
  height: 17px;
}

.wifi-signal::after {
  top: 5px;
  width: 11px;
  height: 11px;
}

.wifi-signal i {
  top: 9px;
  width: 5px;
  height: 5px;
}

.battery-icon {
  position: relative;
  width: 25px;
  height: 12px;
  display: block;
  border: 1.4px solid currentColor;
  border-radius: 3px;
}

.battery-icon::after {
  position: absolute;
  top: 3px;
  right: -3.5px;
  width: 2px;
  height: 5px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
  content: "";
}

.battery-icon i {
  position: absolute;
  inset: 2px 4px 2px 2px;
  border-radius: 1.5px;
  background: currentColor;
}

.app-header {
  height: 48px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 0 12px;
  background: var(--background-white);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}

.app-header h2 {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
}

.icon-button.sm {
  width: 28px;
  height: 28px;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-strip {
  height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  background: var(--background-white);
}

.address-pill {
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--background-grey);
  font-size: 14px;
}

.address-pill strong {
  flex: 0 0 auto;
}

.address-pill span:not(.pin) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-pill button,
.text-action {
  border: 0;
  background: transparent;
  color: var(--brand-primary);
  font-size: 14px;
  white-space: nowrap;
}

.address-pill button {
  flex: 0 0 auto;
  margin-left: 4px;
}

.text-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
}

.strip-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  object-fit: contain;
}

.address-pill .strip-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.global-select {
  height: 48px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 10px;
  background: var(--background-white);
  font-size: 13.5px;
}

.phone.ai-version .global-select {
  position: sticky;
  top: 0;
  z-index: 17;
  margin-top: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.phone.ai-version .global-select.is-stuck {
  border-bottom-color: #e1e4e7;
  box-shadow: none;
}

.ai-timeslot-overlay {
  position: sticky;
  top: 48px;
  z-index: 16;
  width: 100%;
  max-width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

#aiTimeslotOverlay .slot-picker.is-ai {
  position: relative;
  top: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 0;
  background: var(--background-white);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition:
    transform 0.22s ease,
    opacity 0.18s ease,
    box-shadow 0.15s ease;
}

#aiTimeslotOverlay.is-revealed .slot-picker.is-ai {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.global-select label span,
.global-select .selected-summary span,
.global-select .selected-summary strong {
  white-space: nowrap;
}

.global-select .selected-summary {
  margin-left: auto;
  justify-content: flex-end;
  gap: 3px;
}

.global-select label,
.selected-summary,
.image-size {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.selected-summary {
  padding-left: 0;
  border-left: 0;
}

.selected-summary strong {
  color: var(--brand-primary);
}

.global-select .select-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 1.5px solid #e5e8eb;
  border-radius: 10px;
  background: var(--background-white);
  font-weight: 600;
  transition: border-color 0.15s ease;
}

.global-select .select-pill input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-size: 20px 20px;
}

.global-select .select-pill:has(input:checked) {
  border-color: var(--brand-primary);
}

.want-1pm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 8px;
  border: 1.5px solid #e5e8eb;
  border-radius: 10px;
  background: var(--background-white);
  color: #5e2de5;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}

.want-1pm[hidden],
.slot[hidden] {
  display: none !important;
}

.want-check {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--background-white);
  border: 1.5px solid #d9dde4;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.want-1pm.is-active {
  border-color: #5e2de5;
}

.want-1pm.is-active .want-check {
  background: #5e2de5;
  border-color: #5e2de5;
}

.want-1pm.is-active .want-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3.5px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.image-size {
  color: var(--text-tertiary);
}

.image-size button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
}

.image-size button.active {
  background: rgba(0, 167, 89, 0.1);
  color: var(--brand-primary);
  font-weight: 800;
}

.content-scroll {
  height: calc(100% - 40px - 48px - 126px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.content-scroll::-webkit-scrollbar {
  display: none;
}

.merchant-card,
.simple-section {
  margin-top: 12px;
  background: var(--background-white);
  border-top: 0;
  border-bottom: 0;
}

.merchant-card {
  margin-left: 0;
  margin-right: 0;
  padding: 16px;
  border-radius: 24px;
}

.secondary-merchant {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 303px;
  padding: 16px;
  border-radius: 24px;
}

.secondary-merchant .merchant-heading,
.secondary-merchant .merchant-heading strong,
.secondary-merchant .merchant-heading .muted {
  color: var(--primary-blue);
}

.secondary-merchant .merchant-heading {
  height: 24px;
  font-size: 16px;
  line-height: 1.4;
}

.secondary-merchant .merchant-heading > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  white-space: nowrap;
}

.secondary-merchant .delivery-note {
  color: var(--primary-blue);
  font-size: 12px;
}

.merchant-heading {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  font-size: 16px;
}

.merchant-heading strong {
  font-size: 16px;
  color: var(--brand-secondary);
}

.muted,
.delivery-note {
  color: var(--text-secondary);
  font-size: 13px;
}

.slot-picker {
  position: sticky;
  top: 0;
  z-index: 15;
  margin-top: 10px;
  display: grid;
  gap: 9px;
  padding: 8px 0 8px 8px;
  border-radius: 12px;
  background: #f7f7f7;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.slot-picker.is-stuck {
  margin-left: -16px;
  margin-right: -16px;
  padding: 8px 16px;
  border-radius: 0;
  background: var(--background-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.slot-picker.is-stuck .ts-pill {
  background: #f2f3f5;
}

.slot-picker.is-stuck .ts-pill.lit-purple {
  background: #f5efff;
}

.slot-picker.is-stuck .ts-pill.lit-green {
  background: #e5f6ee;
}

.slot-picker.is-stuck .ts-pill.lit-orange {
  background: #fcebd7;
}

.slot-picker.is-stuck .ts-pill.lit-pink {
  background: #ffebee;
}

.slot-picker.is-ai {
  position: relative;
  top: auto;
  z-index: 1;
  margin-top: 8px;
  display: grid;
  gap: 0;
  padding: 8px 0 8px 8px;
  border-radius: 12px;
  background: #f7f7f7;
  box-shadow: none;
  transition:
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.timeslot-area-message {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border-radius: inherit;
  background: rgba(247, 247, 247, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.timeslot-area-message.is-visible {
  opacity: 1;
}

.timeslot-message-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.timeslot-message-condition {
  display: flex;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.timeslot-message-condition > span {
  display: inline;
}

.timeslot-message-label {
  display: inline-flex;
  min-width: 70px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 9px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}

.timeslot-message-label.is-1pm {
  background: #a35cfd;
}

.timeslot-message-label.is-6pm {
  min-width: 73px;
  background: #00ad4d;
}

.timeslot-message-and {
  min-width: 14px;
}

.timeslot-message-content small {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.timeslot-message-lit {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

#aiStickySlotPicker .timeslot-area-message {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
}

.slot-picker.is-ai.is-stuck {
  position: relative;
  top: auto;
}

.ts-row {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 4px;
}

.ts-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.ts-pills {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 10px 0 1px;
  margin-top: -9px;
}

.ts-pills::-webkit-scrollbar {
  display: none;
}

.ts-pill {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #e5e8eb;
  color: #9aa0a6;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.ts-pill.lit-purple {
  background: #f5efff;
  border-color: transparent;
  color: #7039c7;
  font-weight: 600;
}

.ts-pill.lit-green {
  background: #e5f6ee;
  border-color: transparent;
  color: var(--brand-primary);
  font-weight: 600;
}

.ts-pill.lit-orange {
  background: #fcebd7;
  border-color: transparent;
  color: #fc7c0a;
  font-weight: 600;
}

.ts-pill.lit-pink {
  background: #ffebee;
  border-color: transparent;
  color: #fc5585;
  font-weight: 600;
}

.slot-picker.is-ai .ts-row {
  grid-template-columns: 50px 1fr;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.slot-picker.is-ai .ts-label {
  align-self: stretch;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  padding-top: 6px;
}

.slot-picker.is-ai .ts-pills {
  width: 100%;
  min-width: 0;
  gap: 0;
  align-items: stretch;
  padding: 3px 0 0;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.slot-picker.is-ai .ts-pill-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-end;
  height: 27px;
  padding-top: 6px;
  scroll-snap-align: start;
}

.slot-picker.is-ai .ts-pill,
.slot-picker.is-ai.is-stuck .ts-pill {
  position: static;
  height: 21px;
  min-width: 0;
  padding: 0 9px;
  border: 0;
  border-right: 1px solid #dde2e7;
  border-radius: 0;
  background: transparent;
  color: #a2a6ab;
  font-size: 14px;
  font-weight: 500;
}

.slot-picker.is-ai .ts-pill:first-child {
  padding-left: 9px;
}

.slot-picker.is-ai .ts-pill-wrap:first-child .ts-pill {
  padding-left: 0;
}

.slot-picker.is-ai .ts-pill-wrap:last-child .ts-pill {
  border-right: 0;
}

.slot-picker.is-ai .ts-pill.lit-purple,
.slot-picker.is-ai.is-stuck .ts-pill.lit-purple {
  background: transparent;
  color: #7039c7;
  font-weight: 500;
}

.slot-picker.is-ai .ts-pill.lit-green,
.slot-picker.is-ai.is-stuck .ts-pill.lit-green {
  background: transparent;
  color: var(--brand-primary);
  font-weight: 500;
}

.slot-picker.is-ai .ts-pill.lit-orange,
.slot-picker.is-ai.is-stuck .ts-pill.lit-orange {
  background: transparent;
  color: #fc7c0a;
  font-weight: 500;
}

.slot-picker.is-ai .ts-pill.lit-pink,
.slot-picker.is-ai.is-stuck .ts-pill.lit-pink {
  background: transparent;
  color: #fc5585;
  font-weight: 500;
}

.slot-picker.is-ai .ts-pill-badge {
  top: -3px;
  right: -4px;
  z-index: 2;
  height: 15px;
  padding: 0 6px;
  border-radius: 8px 8px 8px 2px;
  font-size: 9px;
}

.ts-pill-badge {
  position: absolute;
  top: -9px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: #e4483f;
  color: var(--text-white);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 0 0 0.5px #fff;
}

.ts-pill-badge.is-fastest {
  background: var(--delivery-purple);
}

.ts-empty {
  font-size: 13px;
  color: var(--text-tertiary);
}

.ts-free-badge {
  position: absolute;
  top: -8px;
  left: 42px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px 9px 9px 2px;
  background: #e4483f;
  color: var(--text-white);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 0 0 0.5px #fff;
}

.select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.select-row .select-all {
  flex: 1;
  min-width: 0;
}

.primary-merchant .merchant-heading > div,
.primary-merchant .merchant-heading .muted {
  color: var(--brand-primary);
}

.primary-merchant .merchant-heading > div {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.primary-merchant .merchant-heading .heading-note {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.slot-heading-chevron {
  display: none;
  width: 7px;
  height: 7px;
  margin: 2px 3px 0 8px;
  border-top: 2px solid #5a5a5a;
  border-left: 2px solid #5a5a5a;
  transform: rotate(45deg);
}

.phone.ai-version .primary-merchant .merchant-heading {
  height: auto;
  align-items: center;
  padding: 0 4px;
}

.phone.ai-version .primary-merchant .merchant-heading > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  line-height: 1.15;
}

.phone.ai-version .primary-merchant .merchant-heading strong {
  color: #007f57;
  white-space: nowrap;
}

.phone.ai-version .primary-merchant .merchant-heading .heading-note {
  color: var(--text-primary);
  white-space: nowrap;
}

.phone.ai-version .slot-heading-chevron {
  display: block;
  flex: 0 0 auto;
}

.address-pill button {
  color: var(--brand-primary);
}

.ds-checkbox,
input[type="checkbox"] {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent url("./assets/Checkbox-1.svg") center / 20px 20px no-repeat;
}

.slot .ds-checkbox {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.ds-checkbox.is-on,
input[type="checkbox"]:checked {
  background-image: url("./assets/Checkbox.svg");
}

.slot .ds-checkbox.is-on {
  background-image: url("./assets/Checkbox-segment.svg");
}

.delivery-time {
  grid-column: 1 / -1;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-primary);
  font-size: 14px;
}

.delivery-time span {
  font-weight: 600;
}

.delivery-time strong {
  font-weight: 400;
}

.delivery-time em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ef5350;
  color: var(--text-white);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.delivery-time em[hidden] {
  display: none;
}

.inline-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.threshold {
  position: relative;
  min-height: 32px;
  display: block;
  margin: 8px 0;
  padding: 6px 8px 9px;
  overflow: hidden;
  border-radius: 8px;
  background: #dff4e9;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
}

.phone.delivery-1pm .threshold {
  background: #dff4e9;
}

.threshold.success {
  background: #e5f6ee;
}

.phone.delivery-1pm .threshold.success {
  background: #e5f6ee;
}

.threshold[hidden] {
  display: none;
}

.threshold.is-fulfilled {
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 700;
}

.threshold.is-fulfilled .threshold-progress {
  display: none;
}

.phone.delivery-1pm .threshold.is-fulfilled,
.phone.delivery-1pm .threshold-line.is-ok {
  color: var(--brand-primary);
}

.threshold-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.threshold-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  white-space: nowrap;
}

.threshold-line .inline-icon {
  width: 18px;
  height: 18px;
}

.threshold-line.is-ok {
  color: var(--brand-primary);
}

.threshold-line-main {
  min-width: 0;
}

.threshold strong {
  font-weight: 600;
}

.threshold.split {
  justify-content: space-between;
  background: #f7f8fa;
  color: #5d6673;
}

.threshold.warning {
  justify-content: space-between;
  background: #e5f5fd;
  color: var(--text-primary);
}

.threshold-more {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  min-width: 42px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
}

.threshold-more::after {
  content: "›";
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
}

.threshold-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  padding-right: 40px;
  background: rgba(0, 0, 0, 0.05);
}

.threshold-progress span {
  display: block;
  width: var(--progress, 0%);
  height: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--brand-primary);
}

.phone.delivery-1pm .threshold-progress span {
  background: var(--brand-primary);
}

.select-all {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

.items-list {
  width: 100%;
  min-width: 0;
  padding: 0;
}

.items-grid {
  width: 100%;
  min-width: 0;
}

.items-list.small .items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.items-list.medium .items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.items-list.large .items-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.auto-unselected-note {
  grid-column: 1 / -1;
  min-height: 20px;
  display: flex;
  align-items: center;
  padding: 2px 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.delivery-group-break {
  grid-column: 1 / -1;
  height: 0;
  min-height: 0;
  pointer-events: none;
}

.sku-shell {
  position: relative;
  width: 100%;
  height: 100%;
  --sku-frame: var(--brand-primary);
  background: transparent;
}

.sku-shell.is-unselected {
  --sku-frame: #f2f2f2;
}

.small .sku-shell {
  aspect-ratio: 86 / 138;
  height: auto;
}

.small .sku-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  background: url("./assets/Subtract-small.svg") left top / 100% 100% no-repeat;
  pointer-events: none;
}

.small .sku-shell.is-unselected::before {
  background-image: url("./assets/Subtract-small-gray.svg");
}

.medium .sku-shell {
  aspect-ratio: 117 / 191;
  height: auto;
}

.medium .sku-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  background: url("./assets/Subtract-medium.svg") left top / 100% 100% no-repeat;
  pointer-events: none;
}

.medium .sku-shell.is-unselected::before {
  background-image: url("./assets/Subtract-medium-gray.svg");
}

.large-shell {
  height: 149px;
  min-width: 0;
  isolation: isolate;
}

.large-shell.is-one-line {
  height: 141px;
}

.large-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: var(--panel-bg, #aafd76);
  -webkit-mask: url("./assets/Subtract-large-v2.svg") left top / 100% 100% no-repeat;
  mask: url("./assets/Subtract-large-v2.svg") left top / 100% 100% no-repeat;
  pointer-events: none;
}

.large-shell.is-unselected::before {
  background: var(--panel-bg, #aafd76);
}

.large-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: url("./assets/Subtract-large-v2-border.svg") left top / 100% 100% no-repeat;
  pointer-events: none;
}

.large-shell.is-unselected::after {
  background-image: url("./assets/Subtract-large-v2-border-gray.svg");
}

.large-shell::before,
.large-shell::after {
  content: none;
}

.large-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.large-frame-fill-svg {
  z-index: 0;
}

.large-frame-border-svg {
  z-index: 10;
}

.large-frame-fill {
  fill: var(--panel-bg, #aafd76);
}

.large-frame-border {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.large-shell.is-unselected .large-frame-border {
  stroke: #f2f2f2;
}

.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 84px 1fr;
  gap: 10px;
  min-height: 123px;
  padding: 12px 0;
  border-top: 1px solid var(--stroke-secondary);
}

.cart-item:first-child {
  border-top: 0;
}

.product-visual {
  position: relative;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border: 1px solid #dde2e8;
  border-radius: 7px;
  background: #f5f7fa;
}

.product-visual::before {
  content: "";
  position: absolute;
  inset: 13px 20px 10px;
  border-radius: 7px;
  background: var(--pack, #d71b34);
  box-shadow: inset 0 -12px rgba(0, 0, 0, 0.08);
}

.product-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  border-radius: 10px;
}

.product-visual.with-image::before,
.product-visual.with-image::after {
  content: none;
}

.product-visual::after {
  content: attr(data-label);
  position: absolute;
  left: 20px;
  right: 20px;
  top: 27px;
  color: var(--text-white);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.label {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin-top: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef7ff;
  color: var(--primary-blue);
  font-size: 11px;
  font-weight: 800;
}

.item-info {
  min-width: 0;
}

.item-title {
  margin: 0;
  color: #2a3038;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.38;
}

.spec {
  margin: 4px 0 0;
  color: #7b8390;
  font-size: 11px;
}

.ship {
  margin: 5px 0 0;
  color: #8a6060;
  font-size: 11px;
}

.price-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 7px;
}

.price {
  display: grid;
  color: var(--brand-primary);
  font-weight: 900;
}

.price del {
  color: #9aa1ac;
  font-size: 11px;
  font-weight: 500;
}

.qty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 6px;
  background: var(--background-white);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.qty.is-editing {
  width: 80px;
  justify-content: space-between;
}

.qty-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
}

.qty span {
  text-align: center;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.qty-icon.plus::before,
.qty-icon.plus::after,
.qty-icon.minus::before {
  position: absolute;
  width: 10px;
  height: 1.6px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.qty-icon.plus::after {
  transform: rotate(90deg);
}

.qty-icon.is-disabled {
  opacity: 0.3;
  cursor: default;
}

.promo {
  grid-column: 2 / 4;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #fff5e8;
  color: #a15b00;
  font-size: 12px;
  font-weight: 700;
}

.remove {
  position: absolute;
  right: 0;
  bottom: 11px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #f2f3f5;
  color: #5a616d;
  font-weight: 900;
}

.small .cart-item,
.medium .cart-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--sku-frame);
  background: var(--background-green-50);
}

.small .cart-item.is-selected,
.medium .cart-item.is-selected {
  border: 2px solid var(--brand-primary);
}

.small .cart-item.is-unselected,
.medium .cart-item.is-unselected {
  border: 1px solid #f2f2f2;
}

.small .cart-item,
.small .cart-item.is-selected,
.small .cart-item.is-unselected {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.medium .cart-item,
.medium .cart-item.is-selected,
.medium .cart-item.is-unselected {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.small .item-info,
.medium .item-info {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 18px 6px 6px;
  z-index: 1;
}

.small .item-info {
  position: absolute;
  left: 0;
  top: 62.25%;
  width: 100%;
  height: 37.75%;
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: min(6px, 7%);
  border-radius: 0 0 10px 10px;
  background: var(--background-green-50);
}

.medium .item-info {
  position: absolute;
  left: 0;
  top: 54.63%;
  width: 100%;
  height: 45.37%;
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: min(18px, 15.4%) min(6px, 5.15%) min(6px, 5.15%);
  border-radius: 0 0 10px 10px;
  background: var(--background-green-50);
}

.small .ship,
.small .spec,
.small .item-title,
.small .promo,
.medium .ship,
.medium .spec,
.medium .promo {
  display: none;
}

.medium .item-title {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  margin-bottom: -12px;
  overflow: hidden;
  border-radius: 10px;
  z-index: 2;
}

.small .sku-media {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  margin-bottom: 0;
  border-radius: 0;
  mask: url("./assets/Mask-group-small.svg") left top / 100% 100% no-repeat;
  -webkit-mask: url("./assets/Mask-group-small.svg") left top / 100% 100% no-repeat;
}

.medium .sku-media {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  margin-bottom: 0;
  border-radius: 0;
  mask: url("./assets/Mask-group-medium.svg") left top / 100% 100% no-repeat;
  -webkit-mask: url("./assets/Mask-group-medium.svg") left top / 100% 100% no-repeat;
}

.sku-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  z-index: 1;
}

.small .product-visual,
.medium .product-visual {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

.small .product-visual,
.small .product-visual img {
  border-radius: 0;
}

.medium .product-visual,
.medium .product-visual img {
  border-radius: 0;
}

.medium .cart-item {
  height: 100%;
  min-height: 0;
}

.small .item-check,
.medium .item-check {
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 12;
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  background-size: 24px 24px;
  cursor: pointer;
}

.small .item-check.is-on,
.medium .item-check.is-on,
.large-card .item-check.is-on,
.large-shell .item-check.is-on,
.merchant-product input[type="checkbox"]:checked {
  filter: drop-shadow(0 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(1px 0 0 white) drop-shadow(0 -1px 0 white) drop-shadow(-1px 0 0 white);
}

.small .item-check::before,
.medium .item-check::before {
  content: none;
}

.small .item-check::after,
.medium .item-check::after {
  content: none;
}

.small .label,
.medium .label {
  position: static;
  display: flex;
  align-items: center;
  height: 18px;
  margin: 0 0 2px;
  padding: 0 6px;
  background: var(--label-color, var(--brand-primary));
  color: var(--text-white);
  font-size: 12px;
  line-height: 1.4;
  border-radius: 24px;
  font-weight: 400;
  white-space: nowrap;
}

.small .price-row,
.medium .price-row {
  align-items: center;
  margin-top: 0;
}

.small .price,
.medium .price {
  display: block;
  color: var(--status-red);
  min-width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.small .price del,
.medium .price del {
  display: none;
}

.small .qty,
.medium .qty {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 6px;
  background: var(--background-white);
}

.small .qty.is-editing,
.medium .qty.is-editing {
  right: 8px;
  width: 80px;
  justify-content: space-between;
}

.small .qty:not(.is-editing) .qty-icon,
.medium .qty:not(.is-editing) .qty-icon {
  display: none;
}

.small .qty span,
.medium .qty span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.small .remove,
.medium .remove {
  right: 2px;
  bottom: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0;
  border-radius: 0;
}

.small .remove img,
.medium .remove img {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

.large-card {
  position: absolute;
  inset: 0;
  display: block;
  grid-template-columns: none;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  border-top: 0;
  box-sizing: border-box;
}

.large-card.is-selected,
.large-card.is-unselected {
  border-width: 0;
}

.large-card.is-selected {
  border-color: var(--brand-primary);
}

.merchant-product-grid.large .merchant-product.selected::after,
.large-card.is-selected::after {
  content: none;
}

.large-thumb-panel {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 108px;
  height: calc(100% - 8px);
  z-index: 4;
  margin: 0;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
}

.large-thumb-panel::after {
  content: none;
}

.large-thumb-top {
  position: relative;
  height: 109px;
  padding: 0;
  overflow: hidden;
}

.large-shell .item-check {
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 12;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background-size: 24px 24px;
  cursor: pointer;
}

.large-shell .item-check::before {
  content: none;
}

.large-shell .item-check::after {
  content: none;
}

.large-media-stack {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 84px;
  height: 109px;
  box-sizing: border-box;
}

.large-image {
  position: relative;
  width: 84px;
  height: 84px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  --large-image-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath fill='black' d='M74.2041 0C79.6142 0 84 4.3858 84 9.7959V74.2041C84 79.6142 79.6142 84 74.2041 84H9.7959C4.3858 84 0 79.6142 0 74.2041V26.7985C0 23.5524 2.6315 20.9209 5.8776 20.9209H15.0433C18.2894 20.9209 20.9209 18.2894 20.9209 15.0433V5.8776C20.9209 2.6315 23.5524 0 26.7985 0H74.2041Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--large-image-mask) center / 100% 100% no-repeat;
  mask: var(--large-image-mask) center / 100% 100% no-repeat;
}

.large-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.18);
  transform-origin: center;
}

.large-label {
  position: absolute;
  left: 50%;
  top: 88px;
  z-index: 12;
  transform: translateX(-50%);
  justify-content: center;
  min-width: 77px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 8px;
  border-radius: 24px;
  background: var(--label-color, var(--delivery-purple));
  color: var(--text-white);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  box-sizing: border-box;
}

.delivery-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.rocket-icon {
  fill: var(--text-white);
}

.clock-icon {
  fill: none;
  stroke: var(--text-white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.large-change-qty {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--background-white);
  color: var(--brand-primary);
  font-size: 12px;
  line-height: 1.4;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.large-detail-panel {
  position: absolute;
  left: 114px;
  right: 2px;
  top: 6px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  z-index: 2;
  background: var(--background-white);
  overflow: hidden;
  box-sizing: border-box;
}

.large-shell.is-one-line .large-detail-panel {
  min-height: 0;
}

.large-shell.is-one-line .large-card {
  height: 100%;
}

.large-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 8px 8px 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.large-shell.is-one-line .large-copy {
  min-height: 0;
}

.large-promo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 28px;
  padding: 4px 5px 5px;
  border: 1px solid #e21751;
  border-radius: 3px;
  background: #e21751;
  color: var(--text-white);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.large-title {
  position: relative;
  display: -webkit-box;
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.large-shell.is-one-line .large-title {
  -webkit-line-clamp: 1;
}

.large-spec,
.large-region,
.large-original {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.large-spec-price {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 20px;
  margin-top: 12px;
}

.large-shell.is-one-line .large-spec-price {
  margin-top: 8px;
}

.large-spec-price .large-spec {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.large-region {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.large-price-block {
  display: grid;
  gap: 0;
  margin-top: 0;
}

.large-sale {
  min-width: max-content;
  justify-self: end;
  color: var(--status-red);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

.large-qty-total {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  width: 100%;
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.large-qty-total span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.large-shell.is-one-line .large-qty-total {
  margin-top: auto;
}

.large-qty-total::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  border-top: 1px solid var(--stroke-secondary);
}

.large-qty-total strong {
  min-width: max-content;
  font-size: 14px;
  font-weight: 600;
}

.large-actions {
  position: absolute;
  left: 114px;
  right: 2px;
  bottom: 2px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 105fr) minmax(0, 104.5fr) minmax(0, 39.5fr);
  height: 32px;
  margin: 0;
  border-top: 0.5px solid var(--stroke-secondary);
  border-left: 0;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
}

.large-actions button,
.large-action-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 1px solid var(--stroke-secondary);
  background: var(--background-white);
  color: var(--brand-primary);
  font-size: 12px;
  line-height: 1.4;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.large-actions button:not(.large-remove),
.large-action-slot button {
  text-overflow: ellipsis;
}

.large-action-qty {
  position: relative;
  grid-column: 1;
  left: auto;
  top: auto;
  width: auto;
  height: 32px;
  z-index: 4;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-right: 1px solid var(--stroke-secondary);
}

.large-actions > button:not(.large-remove) {
  grid-column: 2;
}

.large-actions .large-remove {
  grid-column: 3;
}

.large-action-slot .qty {
  position: static;
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.large-action-slot button {
  border-right: 0;
}

.large-actions .large-remove {
  border-right: 0;
  color: var(--text-tertiary);
}

.large-remove img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}

.merchant-delivery-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 66px;
  overflow: hidden;
  padding: 8px 8px 11px;
  border-radius: 8px;
  background: #e6f7ff;
}

.merchant-delivery-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.merchant-delivery-row .inline-icon {
  width: 18px;
  height: 18px;
  color: var(--text-primary);
}

.merchant-delivery-row span {
  min-width: 0;
}

.merchant-delivery-row strong {
  font-weight: 400;
}

.merchant-delivery-row button {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
}

.merchant-delivery-row button::after {
  content: "›";
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
}

.merchant-threshold-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
}

.merchant-threshold-progress span {
  display: block;
  width: var(--merchant-progress, 0%);
  height: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--primary-blue);
}

.merchant-select-all {
  margin-top: 0;
}

.merchant-product-grid {
  display: grid;
  gap: 6px;
  width: 100%;
}

.merchant-product-grid.small {
  grid-template-columns: repeat(4, 85.75px);
  height: 137.75px;
}

.merchant-product-grid.medium {
  grid-template-columns: repeat(3, 120px);
  height: 190.33px;
}

.merchant-product-grid.large {
  grid-template-columns: 1fr;
  height: 221px;
}

.merchant-product {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 85.75px;
  height: 137.75px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #effaff;
}

.merchant-product-grid.medium .merchant-product {
  width: 120px;
  height: 190.33px;
}

.merchant-product-grid.large .merchant-product {
  display: grid;
  grid-template-columns: 138px 1fr;
  grid-template-rows: 176px 45px;
  width: 100%;
  height: 221px;
  border-radius: 8px;
  background: var(--background-white);
  overflow: hidden;
}

.merchant-product.selected {
  border: 2px solid var(--primary-blue);
  padding: 0;
}

.merchant-product-grid.large .merchant-product.selected {
  border-width: 2px;
  border-color: transparent;
}

.merchant-product-grid.large .merchant-product.selected::after {
  border-color: var(--brand-primary);
}

.merchant-product input[type="checkbox"] {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 3;
  width: 32px;
  height: 32px;
  background-size: 24px 24px;
}

.merchant-product-grid.large .merchant-product input[type="checkbox"] {
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
}

.merchant-product-image {
  position: relative;
  width: 100%;
  height: 85.75px;
  overflow: hidden;
  border-radius: 10px;
}

.merchant-product-grid.medium .merchant-product-image {
  height: 120px;
}

.merchant-product-grid.large .merchant-product-image {
  grid-column: 1;
  grid-row: 1;
  height: 176px;
  border-radius: 8px 0 0 0;
  background: #dff5ff;
}

.merchant-product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 50%);
}

.merchant-product-grid.large .merchant-product-image::after {
  content: none;
}

.merchant-product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.merchant-product-grid.large .merchant-product-image img {
  left: 46px;
  top: 12px;
  width: 84px;
  height: 84px;
  border-radius: 8px;
}

.merchant-product-grid.large .merchant-product-image img + img {
  display: none;
}

.merchant-qty {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 6px;
  background: var(--background-white);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.thumb {
  width: 78px;
  height: 78px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e6e9ef, #fdfdfd);
  border: 1px solid #dfe3e9;
}

.merchant-product .thumb {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px 8px 0 0;
}

.thumb.appliance {
  background:
    radial-gradient(circle at 64% 56%, #58318f 0 14%, transparent 15%),
    linear-gradient(135deg, #f4f7fb 0 38%, #cfd6e0 39% 44%, #7d55b7 45% 70%, #f8fafc 71%);
}

.merchant-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 5.86px;
}

.merchant-product-grid.medium .merchant-product-info {
  padding: 6px;
}

.merchant-product-grid.large .merchant-product-info {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  height: 176px;
  gap: 4px;
  padding: 8px;
  border-left: 1px solid var(--stroke-secondary);
  overflow: hidden;
}

.merchant-product-title,
.merchant-product-spec,
.merchant-product-region,
.merchant-original {
  display: none;
  margin: 0;
}

.merchant-product-grid.large .merchant-product-title {
  display: -webkit-box;
  min-height: 39.2px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.merchant-product-grid.large .merchant-product-spec {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: #f2f3f5;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.merchant-product-grid.large .merchant-product-region,
.merchant-product-grid.large .merchant-original {
  display: block;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.merchant-product strong {
  color: var(--status-red);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.merchant-qty-total {
  display: none;
}

.merchant-product-grid.large .merchant-qty-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid var(--stroke-secondary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.merchant-product-grid.large .merchant-qty-total strong {
  color: var(--text-primary);
  font-weight: 600;
}

.merchant-delivery-label {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin: 0;
  padding: 0.5px 6px;
  border-radius: 24px;
  background: #45b1f9;
  color: var(--text-white);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.merchant-remove {
  position: absolute;
  right: 2px;
  bottom: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

.merchant-change-qty,
.merchant-wishlist {
  display: none;
}

.merchant-product-grid.large .merchant-change-qty,
.merchant-product-grid.large .merchant-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 2;
  height: 45px;
  border: 0;
  border-top: 1px solid var(--stroke-secondary);
  background: var(--background-white);
  color: var(--brand-primary);
  font-size: 14px;
  line-height: 1.4;
}

.merchant-product-grid.large .merchant-change-qty {
  grid-column: 1;
  border-right: 1px solid var(--stroke-secondary);
}

.merchant-product-grid.large .merchant-wishlist {
  grid-column: 2;
  padding-right: 58px;
}

.merchant-product-grid.large .merchant-remove {
  right: 0;
  bottom: 0;
  width: 58px;
  height: 45px;
  border-left: 1px solid var(--stroke-secondary);
  border-radius: 0;
  background: var(--background-white);
}

.merchant-product-grid.large .merchant-qty {
  right: 18px;
  bottom: 10px;
}

.merchant-product-grid.large .merchant-delivery-label {
  position: absolute;
  left: 46px;
  top: 104px;
  z-index: 4;
  margin: 0;
  width: 84px;
  justify-content: center;
}

.merchant-product-grid {
  width: 100%;
  height: auto;
  min-width: 0;
}

.merchant-product-grid.small {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: auto;
}

.merchant-product-grid.medium {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto;
}

.merchant-product-grid.large {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
}

.merchant-sku-shell {
  --sku-frame: var(--primary-blue);
}

.merchant-sku-shell.is-selected::before {
  filter: hue-rotate(82deg) saturate(1.15);
}

.merchant-sku-shell.is-unselected::before {
  filter: none;
}

.merchant-sku-shell .item-info {
  background: #effaff;
}

.merchant-sku-shell .merchant-card-label {
  --label-color: var(--primary-blue);
  background: var(--primary-blue);
  color: var(--text-white);
}

.merchant-sku-shell .large-frame-border {
  stroke: var(--primary-blue);
}

.merchant-sku-shell.is-unselected .large-frame-border {
  stroke: #f2f2f2;
}

.merchant-sku-shell .large-change-qty,
.merchant-sku-shell .large-actions button {
  color: var(--primary-blue);
}

.merchant-sku-shell .large-actions .large-remove {
  color: var(--text-tertiary);
}

.merchant-remove img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}

.simple-section {
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
}

.simple-section h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.section-desc {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.4;
}

.simple-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
  padding: 16px 16px 12px;
}

.simple-title-row > div {
  min-width: 0;
}

.section-chevron {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 28px;
  line-height: 20px;
}

.figma-sku-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  overflow-x: auto;
  padding: 0 16px 16px;
  scrollbar-width: none;
}

.figma-sku-row::-webkit-scrollbar {
  display: none;
}

.unavailable-sku,
.recent-sku {
  position: relative;
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.figma-sku-image {
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 16px;
  background: #f7f7f7;
}

.figma-sku-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fav-button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0.4px solid var(--stroke-secondary);
  border-radius: 50%;
  background: var(--background-white);
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
}

.fav-button span {
  transform: translateY(-1px);
}

.unavailable-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 6px;
  background: rgba(28, 28, 37, 0.54);
  backdrop-filter: blur(8px);
  color: var(--text-white);
  font-size: 12px;
  line-height: 1.4;
}

.remove-text {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.remove-text img {
  width: 16px;
  height: 16px;
  opacity: 0.65;
}

.recent-sku {
  padding-bottom: 34px;
}

.promo-ribbon {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 108px;
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 0 25px 25px 0;
  background: #ff6c40;
  color: var(--text-white);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-sku-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sku-title {
  display: -webkit-box;
  min-height: 39.2px;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.sku-spec,
.figma-sku-info del {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.figma-sku-info strong {
  color: var(--status-red);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.green-cart-button {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-white);
}

.green-cart-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-hidden {
  opacity: 0;
}

.checkout-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 126px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 28px 44px 28px;
  gap: 8px 16px;
  align-items: center;
  padding: 10px 16px 0;
  border-top: 1px solid #e5e8eb;
  background: var(--background-white);
  box-shadow: 0 -2px 10px rgba(31, 35, 41, 0.04);
}

.checkout-bar::after {
  content: "";
  grid-column: 1 / -1;
  justify-self: center;
  align-self: end;
  width: 144px;
  height: 5px;
  margin-bottom: 8px;
  border-radius: 100px;
  background: #000;
}

.footer-check {
  display: none;
  justify-items: center;
  gap: 2px;
  color: #5e6672;
  font-size: 11px;
  font-weight: 800;
}

.footer-summary {
  grid-column: 1 / -1;
  height: 28px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.saving-text {
  color: #fc7c0a;
  font-size: 14px;
  white-space: nowrap;
}

.footer-total {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.footer-total strong {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

.detail-toggle {
  border: 0;
  padding: 0;
  background: none;
  color: #8b8b8b;
  font-size: 13px;
  white-space: nowrap;
}

.saving-detail,
.saving-detail span {
  color: var(--primary-orange);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.saving-detail {
  display: flex;
  align-items: center;
  height: 28px;
  justify-self: start;
}

.detail-link {
  color: var(--primary-orange);
}

.detail-divider {
  color: var(--text-tertiary) !important;
}

.share-cart-button,
.checkout-button {
  height: 44px;
  border: 1px solid var(--brand-primary);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}

.share-cart-button {
  background: var(--background-white);
  color: var(--brand-primary);
}

.checkout-button {
  background: var(--brand-primary);
  color: var(--text-white);
}

.checkout-button:disabled {
  background: #b6bcc5;
  cursor: not-allowed;
}

.checkout-page {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  background: #222;
  color: #000;
  font-family: "Noto Sans TC", "PingFang HK", "PingFang TC", "Poppins", sans-serif;
}

.phone.checkout-active > :not(.checkout-page) {
  display: none;
}

.phone.checkout-active .checkout-page {
  display: flex;
}

.checkout-status {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 22px 0 30px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.checkout-modal {
  flex: 1;
  margin: 0 10px 10px;
  overflow: hidden;
  border-radius: 5px;
  background: #f0f0f0;
}

.checkout-titlebar {
  height: 45px;
  display: grid;
  grid-template-columns: 45px 1fr 45px;
  align-items: center;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
}

.checkout-titlebar h2 {
  margin: 0;
  text-align: center;
  color: #222;
  font-size: 16px;
  font-weight: 500;
}

.checkout-back,
.checkout-close {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.checkout-close {
  background: #666;
  border-radius: 0 5px 0 0;
  color: #fff;
}

.checkout-back svg,
.checkout-close svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkout-content {
  height: calc(100% - 45px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 8px;
}

.checkout-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-section h3,
.checkout-section-title h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.checkout-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-section-title button,
.checkout-card button,
.delivery-option button,
.more-payment {
  border: 0;
  background: transparent;
  color: #3a993a;
  font-size: 12px;
}

.checkout-section-title button {
  color: #0d47a1;
  font-size: 14px;
  line-height: 16px;
}

.checkout-card,
.payment-card,
.new-payment,
.delivery-group,
.checkout-summary {
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
}

.checkout-card,
.payment-card {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
}

.selected-card {
  border: 1px solid #3a993a;
  border-radius: 4px;
  background: #f2faf6;
}

.checkout-card-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.checkout-card strong,
.payment-card strong,
.delivery-option strong {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.checkout-card p,
.payment-card p,
.delivery-group p,
.voucher-card p,
.mall-dollar-card p {
  margin: 0;
  color: #000;
  font-size: 14px;
  line-height: 18px;
}

.checkout-radio,
.radio-dot,
.delivery-radio {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid #3a993a;
  border-radius: 50%;
  background: radial-gradient(circle, #3a993a 0 38%, transparent 42%);
}

.delivery-radio {
  margin: 0;
  appearance: none;
}

.delivery-option:not(.selected) .radio-dot,
.delivery-option:not(.selected) .delivery-radio {
  border-color: #c8c8c8;
  background: #fff;
}

.delivery-group {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.delivery-group h4 {
  margin: 0;
  color: #005952;
  font-size: 14px;
  line-height: 18px;
}

.delivery-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
}

.delivery-group.single-option .delivery-option {
  grid-template-columns: minmax(0, 1fr) 24px 12px;
  gap: 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.delivery-group.single-option {
  gap: 12px;
}

.delivery-group.single-option h4 {
  font-size: 15px;
  line-height: 15px;
}

.delivery-group.single-option .delivery-radio {
  display: none;
}

.single-delivery-help {
  display: none;
}

.delivery-group.single-option .single-delivery-help {
  display: grid;
  align-self: center;
  place-items: center;
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background: #0d47a1;
}

.single-delivery-help img {
  display: block;
  width: 6px;
  height: 9px;
}

.delivery-group.single-option .delivery-option[data-checkout-delivery="standard"] .delivery-copy {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 0 8px 12px;
  border: 1px solid #e0e0e0;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: #fff;
}

.delivery-group.single-option .delivery-option[data-checkout-delivery="standard"] strong {
  display: none;
}

.delivery-group.single-option .delivery-option[data-checkout-delivery="standard"] small {
  overflow: hidden;
  color: #000;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-group.single-option .delivery-option[data-checkout-delivery="standard"] [data-open-time-sheet] {
  width: 24px;
  min-height: 38px;
  align-self: stretch;
  padding: 0;
  border: 1px solid #e0e0e0;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: #fff url("./assets/single-delivery-chevron.svg") center / 7px 11px no-repeat;
  color: transparent;
  font-size: 0;
}

.delivery-option[hidden],
.time-row[hidden] {
  display: none !important;
}

.delivery-option.selected {
  border-color: #3a993a;
  background: #f2faf6;
}

.delivery-group.single-option .delivery-option.selected {
  border-color: transparent;
  background: transparent;
}

.delivery-option > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.delivery-option strong {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 0;
  flex-wrap: wrap;
}

.delivery-option .delivery-fee-prefix {
  display: inline;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

.delivery-option .delivery-fee-prefix[hidden],
.delivery-option .delivery-threshold-copy[hidden] {
  display: none;
}

.delivery-option .express-fee-badge {
  color: var(--delivery-purple);
}

.delivery-option .standard-fee-badge {
  color: var(--brand-primary);
}

.delivery-threshold-copy {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.delivery-option small,
.checkout-summary small {
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 16px;
}

.delivery-group.merchant p {
  padding-left: 22px;
  font-size: 14px;
}

.payment-card {
  min-height: 56px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: none;
}

.payment-card.selected-card {
  border-color: #3a993a;
}

.card-thumb {
  width: 48px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #f5f5f5;
  color: #1434cb;
  font-size: 11px;
  font-weight: 800;
}

.card-thumb.citi {
  background: #063f2d;
}

.new-payment {
  display: grid;
  gap: 12px;
  padding: 10px;
}

.new-payment h4 {
  margin: 0;
  color: #005952;
  font-size: 15px;
  line-height: 15px;
}

.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.payment-method-grid button {
  height: 56px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font-weight: 700;
}

.more-payment {
  justify-self: center;
  color: #3a993a;
}

.voucher-card,
.mall-dollar-card {
  display: grid;
  gap: 8px;
  align-items: start;
}

.voucher-card input,
.mall-dollar-card input {
  height: 36px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
}

.mall-dollar-card div {
  display: grid;
  grid-template-columns: auto 1fr 54px;
  gap: 8px;
  align-items: center;
}

.mall-dollar-card button,
.confirm-pay {
  border: 0;
  border-radius: 2px;
  background: #ff6030;
  color: #fff;
}

.mall-dollar-card button {
  height: 28px;
}

.checkout-summary {
  display: grid;
  gap: 8px;
  padding: 0 0 16px;
  box-shadow: none;
  background: transparent;
}

.checkout-summary div {
  display: flex;
  justify-content: space-between;
  color: #000;
  font-size: 14px;
  line-height: 16px;
}

.checkout-summary strong {
  min-width: 120px;
  text-align: right;
  font-weight: 400;
}

#checkoutPlatformFeeRow[hidden] {
  display: none;
}

.checkout-pay-total,
.checkout-pay-total strong {
  color: #ff6030 !important;
}

.checkout-summary p {
  margin: 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 16px;
}

.confirm-pay {
  height: 38px;
  font-size: 14px;
}

.checkout-summary small {
  display: block;
  text-align: center;
}

.time-sheet {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: none;
  align-items: end;
}

.time-sheet.is-open {
  display: flex;
}

.time-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.time-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 554px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #fff;
}

.time-sheet-header {
  height: 48px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding: 0 16px;
  background: #fff;
}

.time-sheet-header h3 {
  margin: 0;
  text-align: center;
  color: #000;
  font-family: Poppins, "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.time-sheet-header button {
  width: 32px;
  height: 32px;
  justify-self: end;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #222;
}

.time-sheet-header svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.time-wheel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 18px 16px;
  overflow-y: auto;
  scroll-padding: 18px;
  background: #fff;
}

.time-wheel::before {
  content: none;
}

.time-row {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #575757;
  font-family: Poppins, "Noto Sans TC", sans-serif;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.time-row.is-selected {
  background: #eef3f1;
  box-shadow: inset 0 0 0 1px #c9ded6;
  color: #000;
  font-weight: 700;
}

.time-row.is-muted-1 {
  opacity: 0.6;
}

.time-row.is-muted-2 {
  opacity: 0.5;
}

.time-row.is-muted-3 {
  opacity: 0.4;
}

.time-row.is-muted-4 {
  opacity: 0.24;
}

.time-sheet-footer {
  padding: 16px 16px 34px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
}

.time-confirm {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #00a759;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.qty-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: end;
}

.qty-sheet.is-open {
  display: flex;
}

.qty-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.qty-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 18px 16px 28px;
  border-radius: 16px 16px 0 0;
  background: var(--background-white);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.16);
}

.qty-sheet-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.qty-sheet-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 2;
  stroke-linecap: round;
}

.qty-sheet-panel h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.qty-sheet-panel p {
  margin: 0;
  padding-right: 32px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qty-stepper {
  height: 48px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  overflow: hidden;
}

.qty-stepper button {
  height: 48px;
  border: 0;
  background: #f7f7f7;
  color: var(--brand-primary);
  font-size: 24px;
  line-height: 1;
}

.qty-stepper strong {
  text-align: center;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

.qty-confirm {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--brand-primary);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 600;
}

.product-detail-popup {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: none;
}

.product-detail-popup.is-open {
  display: block;
}

.product-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
}

.product-detail-panel {
  position: absolute;
  top: 66px;
  left: 36px;
  right: 36px;
  bottom: 66px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--background-grey);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.product-detail-header {
  height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--background-white);
}

.product-detail-header h3 {
  position: absolute;
  left: 56px;
  right: 56px;
  margin: 0;
  overflow: hidden;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-header button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.product-detail-header svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
}

.product-detail-scroll {
  height: calc(100% - 48px);
  overflow: auto;
  padding-bottom: 18px;
}

.product-hero {
  position: relative;
  height: 321px;
  margin-bottom: -49px;
  overflow: hidden;
  background: var(--background-white);
}

.product-hero-bg {
  position: absolute;
  inset: 0 0 40px;
  overflow: hidden;
  background: var(--background-white);
}

.product-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px);
  opacity: 0.2;
  transform: scale(1.18);
}

.product-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 40px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(12px);
}

.product-hero-image {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 1;
  width: 232px;
  height: 232px;
  object-fit: contain;
  transform: translateX(-50%);
}

.product-hero-count {
  position: absolute;
  left: 50%;
  bottom: 61px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.38);
  color: var(--text-white);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
  line-height: 12px;
  transform: translateX(-50%);
}

.product-info-card,
.product-description-card {
  position: relative;
  z-index: 3;
  margin: 0;
  border-radius: 16px;
  background: var(--background-white);
}

.product-info-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.detail-store-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-store-logo {
  width: 78px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0.4px solid var(--stroke-secondary);
  border-radius: 4px;
  background: var(--background-green-50);
  color: var(--brand-primary);
  font-size: 18px;
  font-weight: 700;
}

.detail-store-row p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.detail-store-row span {
  display: inline-flex;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 8px;
  background: linear-gradient(165deg, #a55801 18%, #cf7001 88%);
  color: var(--text-white);
  font-size: 10px;
  line-height: 1;
}

.product-info-card h4 {
  margin: 0;
  overflow: hidden;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.4;
}

.detail-meta-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-rating {
  color: var(--text-primary);
  font-weight: 600;
}

.detail-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-reference {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.detail-price-row del {
  display: block;
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.4;
}

.detail-price-row strong {
  display: block;
  color: var(--status-red);
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
}

.detail-price-row small {
  color: var(--status-red);
  font-size: 14px;
  line-height: 1.4;
}

.detail-delivery-label {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 0.5px solid var(--brand-primary);
  border-radius: 24px;
  background: var(--background-green-50);
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.detail-delivery-label.is-1pm {
  border-color: var(--delivery-purple);
  background: var(--delivery-purple-bg);
  color: var(--delivery-purple);
}

.detail-delivery-label.is-merchant {
  border-color: #14a8dc;
  background: #e8f8ff;
  color: #088fc3;
}

.detail-delivery-label.is-other {
  border-color: var(--delivery-orange);
  background: #fff3e0;
  color: var(--delivery-orange);
}

.product-description-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
}

.product-description-card h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.product-description-card p {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .stage {
    display: block;
    padding: 0;
  }

  .phone-shell {
    width: 100%;
    min-height: 100vh;
  }

  .phone {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}