.commerce-ux-polish {
  --ar-commerce-bg: var(--ar-page-bg, var(--ar-page-bg-commerce, #eef2f8));
  --ar-commerce-surface: var(--ar-ds-color-surface, #ffffff);
  --ar-commerce-soft: var(--ar-ds-color-surface-soft, #f7faff);
  --ar-commerce-border: var(--ar-ds-color-border, #e5ebf3);
  --ar-commerce-brand: var(--ar-ds-color-brand, #003986);


  --ar-commerce-shadow: var(--ar-ds-shadow-card, 0 18px 42px rgba(18, 51, 88, 0.08));
  --ar-commerce-radius-lg: var(--ar-ds-radius-lg, 18px);
  --ar-commerce-radius-md: var(--ar-ds-radius-md, 12px);
  color: var(--ar-ds-color-ink, #16244a);
  font-family: var(--ar-ds-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.commerce-ux-polish.single-product-page,
.commerce-ux-polish.order-dashboard-page,
.commerce-ux-polish.service-requests-body {
  background: var(--ar-commerce-bg);
}

.commerce-ux-polish .service-request-primary-button {
  align-items: center;
  border-radius: var(--ar-ds-radius-pill, 999px);
  display: inline-flex;
  justify-content: center;
  min-height: 40px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.commerce-ux-polish .service-request-primary-button:focus-visible {
  box-shadow: var(--ar-ds-focus-ring, 0 0 0 3px rgba(0, 57, 134, 0.14));
  outline: 0;
}

.commerce-ux-polish .table-responsive {
  border: 1px solid var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.commerce-ux-polish .table {
  color: var(--ar-ds-color-ink, #16244a);
}

.commerce-ux-polish .table th {
  background: var(--ar-commerce-soft);
  color: #334760;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.commerce-ux-polish .service-request-control {
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-ds-radius-sm, 8px);
}

.commerce-ux-polish .service-request-control:focus {
  border-color: var(--ar-commerce-brand);
  box-shadow: var(--ar-ds-focus-ring, 0 0 0 3px rgba(0, 57, 134, 0.14));
  outline: 0;
}

.commerce-ux-polish .service-request-panel {
  background: var(--ar-commerce-surface);
  border-color: var(--ar-commerce-border);
  border-radius: var(--ar-commerce-radius-lg);
  box-shadow: var(--ar-commerce-shadow);
}

@media (max-width: 640px) {
.commerce-ux-polish .service-request-panel {
    border-radius: var(--ar-ds-radius-md, 12px);
}

.commerce-ux-polish .service-request-primary-button {
    width: 100%;
}
}