.pickup-page,
.pickup-page * {
  box-sizing: border-box;
}

.pickup-page {
  width: auto !important;
  max-width: min(100%, calc(100vw - 24px)) !important;
  margin-inline: 0 !important;
  overflow-x: clip;
}

.pickup-page :where(
  .pickup-panel,
  .pickup-create,
  .pickup-shell,
  .pickup-side,
  .pickup-card-grid,
  .pickup-form-grid,
  .pickup-add-row,
  .pickup-add-form,
  .pickup-section-head,
  .pickup-head,
  .pickup-head-actions,
  .pickup-filter-bar,
  .pickup-mobile-card,
  .pickup-mobile-card__grid,
  .pickup-share-card,
  .pickup-public-link,
  .pickup-row-actions,
  .billing-summary,
  .billing-summary__actions
) {
  min-width: 0;
  max-width: 100%;
}

.pickup-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .input, .btn) {
  max-width: 100%;
}

.pickup-page :where(.pickup-panel, .pickup-share-card, .pickup-mobile-card, .pickup-fact) {
  overflow-wrap: anywhere;
}

.pickup-list-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.pickup-list-summary__item {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(71, 85, 105, 0.54);
  border-radius: 8px;
  padding: 12px;
  background: rgba(2, 6, 23, 0.32);
}

.pickup-list-summary__item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pickup-list-summary__item b {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pickup-list-summary__item small {
  min-height: 16px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickup-list-state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.pickup-list-state strong {
  color: var(--text);
}

.pickup-field--wide,
.pickup-panel--wide {
  grid-column: 1 / -1;
}

.pickup-panel--spaced {
  margin-top: 16px;
}

.pickup-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  min-width: 0;
}

.pickup-section-head h2 {
  margin: 0;
}

.pickup-submit-warning {
  color: var(--danger);
}

.pickup-code-note b {
  color: var(--text);
}

.pickup-line-card {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.pickup-lines-table {
  min-width: 680px;
}

.pickup-line-title,
.pickup-source {
  overflow-wrap: anywhere;
}

.pickup-btn-center {
  justify-content: center;
}

.pickup-code-note,
.pickup-side-form,
.pickup-stack-form,
.pickup-popular-title,
.pickup-popular-empty {
  margin-top: 10px;
}

.pickup-popular-title {
  font-weight: 800;
}

.pickup-stack-form {
  display: grid;
  gap: 8px;
}

.pickup-popular-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.pickup-popular-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pickup-page .sku-suggest {
  max-width: min(720px, calc(100vw - 24px));
}

@media (max-width: 1180px) {
  .pickup-page .pickup-create,
  .pickup-page .pickup-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pickup-page .pickup-side {
    position: static !important;
  }
}

@media (max-width: 960px) {
  .pickup-list-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pickup-page .pickup-filter-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .pickup-page {
    max-width: calc(100vw - 20px) !important;
  }

  .pickup-page .pickup-table-shell {
    display: none !important;
  }

  .pickup-page .pickup-mobile-cards {
    display: grid !important;
  }

  .pickup-page .pickup-mobile-empty:not([hidden]) {
    display: block !important;
  }
}

@media (max-width: 560px) {
  .pickup-list-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .pickup-page .pickup-card-grid,
  .pickup-page .pickup-form-grid,
  .pickup-page .pickup-add-row,
  .pickup-page .pickup-add-form,
  .pickup-page .pickup-section-head,
  .pickup-page .pickup-head,
  .pickup-page .pickup-head-actions,
  .pickup-page .billing-summary,
  .pickup-page .billing-summary__actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pickup-page .pickup-actions,
  .pickup-page .pickup-head-actions,
  .pickup-page .pickup-recipient-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pickup-page :where(.pickup-actions .btn, .pickup-head-actions .btn, .pickup-section-head .btn, .pickup-add-form .btn, .pickup-recipient-actions .btn) {
    width: 100%;
    justify-content: center;
  }

  .pickup-lines-table {
    min-width: 620px;
  }
}