.delivery-codes .delivery-code-row {
  border-color: var(--ui-border);
  background: var(--ui-bg-soft);
  padding: 14px 16px;
}
.delivery-codes [data-cdk-value] {
  letter-spacing: .025em;
  line-height: 1.8;
}
@media (max-width: 479px) {
  .delivery-codes .delivery-code-row { padding: 12px; }
  .delivery-codes [data-cdk-value] { flex-basis: 100%; }
  .delivery-codes button { width: 100%; }
}
.delivery-redeem-guide {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'title action' 'hint action' 'note note';
  align-items: center;
  column-gap: 28px;
  row-gap: 8px;
  border-color: #dbeafe;
  background: linear-gradient(110deg, #eff6ff 0%, #f8fbff 100%);
}
.delivery-redeem-guide h3 { grid-area: title; color: #1e3a8a; }
.delivery-redeem-guide > p:first-of-type { grid-area: hint; max-width: 42em; }
.delivery-redeem-guide > a {
  grid-area: action;
  justify-content: center;
  max-width: 100%;
  min-height: 46px;
  transition: background-color .15s, box-shadow .15s;
  box-shadow: 0 3px 8px rgb(37 99 235 / .12);
}
.delivery-redeem-guide > p:last-of-type {
  grid-area: note;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgb(59 130 246 / .12);
}
.dark .delivery-redeem-guide {
  border-color: #1e3a5f;
  background: linear-gradient(110deg, rgb(30 58 138 / .22), rgb(15 23 42 / .3));
}
.dark .delivery-redeem-guide h3 { color: #bfdbfe; }
@media (max-width: 639px) {
  .delivery-redeem-guide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'hint' 'action' 'note';
    padding: 16px;
  }
  .delivery-redeem-guide > a { width: 100%; margin-top: 6px; white-space: normal; }
}