/*! pg-ui internal product profile. Load after pg-tokens.css and pg-brand.css. */

:where(.pg-product, [data-pg-profile="product"]) {
  background: var(--pg-product-surface-app);
  color: var(--pg-product-text);
  color-scheme: var(--pg-product-color-scheme);
  font-family: var(--pg-product-font-body);
  min-height: 100%;
  transition:
    background-color var(--pg-motion-theme) var(--pg-motion-ease),
    color var(--pg-motion-theme) var(--pg-motion-ease);
}

:where(.pg-product, [data-pg-profile="product"]),
:where(.pg-product, [data-pg-profile="product"]) *,
:where(.pg-product, [data-pg-profile="product"]) *::before,
:where(.pg-product, [data-pg-profile="product"]) *::after {
  box-sizing: border-box;
}

:where(.pg-product, [data-pg-profile="product"]) :is(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

:where(.pg-product, [data-pg-profile="product"]) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--pg-product-focus);
  outline-offset: 3px;
}

:where(.pg-product, [data-pg-profile="product"]) a {
  color: var(--pg-color-accent);
  font-weight: var(--pg-font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-container {
  margin-inline: auto;
  max-width: var(--pg-size-container-max);
  padding-inline: var(--pg-space-page-inline);
  width: 100%;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-grid {
  display: grid;
  gap: var(--pg-space-grid);
}

:where(.pg-product, [data-pg-profile="product"]) .pg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pg-space-grid);
}

:where(.pg-product, [data-pg-profile="product"]) .pg-card {
  background: var(--pg-product-surface-card);
  border: 1px solid var(--pg-product-border);
  border-radius: var(--pg-product-radius-card);
  box-shadow: var(--pg-product-shadow-card);
  color: var(--pg-product-text);
  padding: 20px;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-card[data-interactive="true"] {
  transition:
    box-shadow var(--pg-motion-fast) var(--pg-motion-ease),
    transform var(--pg-motion-fast) var(--pg-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  :where(.pg-product, [data-pg-profile="product"]) .pg-card[data-interactive="true"]:hover {
    box-shadow: var(--pg-product-shadow-raised);
    transform: translateY(var(--pg-motion-card-lift));
  }
}

:where(.pg-product, [data-pg-profile="product"]) .pg-button {
  align-items: center;
  background: var(--pg-product-surface-subtle);
  border: 1px solid transparent;
  border-radius: var(--pg-product-radius-pill);
  color: var(--pg-product-text);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--pg-type-body-max);
  font-weight: var(--pg-font-weight-bold);
  gap: 8px;
  justify-content: center;
  min-block-size: var(--pg-product-control-min-size);
  padding: 10px 20px;
  text-decoration: none;
  transition:
    box-shadow var(--pg-motion-fast) var(--pg-motion-ease),
    transform var(--pg-motion-fast) var(--pg-motion-ease);
}

:where(.pg-product, [data-pg-profile="product"]) .pg-button--primary {
  background: var(--pg-product-action);
  box-shadow: var(--pg-shadow-cta);
  color: var(--pg-product-action-text);
}

@media (hover: hover) and (pointer: fine) {
  :where(.pg-product, [data-pg-profile="product"]) .pg-button:hover {
    transform: translateY(-2px);
  }

  :where(.pg-product, [data-pg-profile="product"]) .pg-button--primary:hover {
    box-shadow: var(--pg-shadow-cta-hover);
  }
}

:where(.pg-product, [data-pg-profile="product"]) .pg-button:active {
  transform: scale(var(--pg-motion-active-scale));
}

:where(.pg-product, [data-pg-profile="product"]) .pg-button:is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-chip {
  align-items: center;
  background: var(--pg-product-info-bg);
  border-radius: var(--pg-product-radius-pill);
  color: var(--pg-product-info-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: var(--pg-font-weight-semibold);
  gap: 6px;
  line-height: 1.25;
  min-height: 28px;
  padding: 6px 12px;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-chip[data-tone="success"] {
  background: var(--pg-product-success-bg);
  color: var(--pg-product-success-text);
}

:where(.pg-product, [data-pg-profile="product"]) .pg-field {
  display: grid;
  gap: 6px;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-label {
  color: var(--pg-product-text);
  font-size: 12px;
  font-weight: var(--pg-font-weight-bold);
}

:where(.pg-product, [data-pg-profile="product"]) :is(.pg-input, .pg-select, .pg-textarea) {
  background: var(--pg-product-surface-card);
  border: 1px solid var(--pg-product-control-border);
  border-radius: var(--pg-product-radius-control);
  color: var(--pg-product-text);
  min-block-size: var(--pg-product-control-min-size);
  padding: 10px 12px;
  width: 100%;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-textarea {
  min-block-size: 112px;
  resize: vertical;
}

:where(.pg-product, [data-pg-profile="product"]) :is(.pg-input, .pg-select, .pg-textarea)::placeholder {
  color: var(--pg-product-text-muted);
  opacity: 1;
}

:where(.pg-product, [data-pg-profile="product"]) [aria-invalid="true"] {
  border-style: double;
  border-width: 3px;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-help {
  color: var(--pg-product-text-muted);
  font-size: 13px;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-notice {
  background: var(--pg-product-info-bg);
  border-radius: var(--pg-product-radius-control);
  color: var(--pg-product-info-text);
  padding: 12px 14px;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-notice[data-tone="success"] {
  background: var(--pg-product-success-bg);
  color: var(--pg-product-success-text);
}

:where(.pg-product, [data-pg-profile="product"]) .pg-table-region {
  max-width: 100%;
  overflow-x: auto;
}

:where(.pg-product, [data-pg-profile="product"]) .pg-sr-only {
  block-size: 1px !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  inline-size: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  :where(.pg-product, [data-pg-profile="product"]) .pg-container {
    padding-inline: var(--pg-space-page-inline-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pg-product, [data-pg-profile="product"]),
  :where(.pg-product, [data-pg-profile="product"]) *,
  :where(.pg-product, [data-pg-profile="product"]) *::before,
  :where(.pg-product, [data-pg-profile="product"]) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(.pg-product, [data-pg-profile="product"]) :is(.pg-card, .pg-button, .pg-chip, .pg-input, .pg-select, .pg-textarea, .pg-notice) {
    border: 1px solid CanvasText;
  }
}