:root {
  --bb-primary: #087F5B;
  --bb-primary-hover: #066649;
  --bb-primary-soft: #EAF5F0;
  --bb-canvas: #F6F7F9;
  --bb-surface: #FFFFFF;
  --bb-heading: #182230;
  --bb-text: #475467;
  --bb-muted: #667085;
  --bb-border: #E4E7EC;
  --bb-control-border: #667085;
  --bb-focus: #182230;
  --bb-font: YekanBakhFaNum, Tahoma, sans-serif;
  --bb-content: 1360px;
  --bb-radius-control: 8px;
  --bb-radius-section: 12px;
}

/*
 * Buy actions use --bb-primary. This stage does not restyle existing
 * .single_add_to_cart_button or other legacy buttons.
 */
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 24px;
  border-radius: var(--bb-radius-control);
  border: 1px solid transparent;
  font-family: var(--bb-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

.bb-btn--primary {
  background: var(--bb-primary);
  color: #fff;
}

.bb-btn--primary:hover {
  background: var(--bb-primary-hover);
  color: #fff;
}

.bb-btn--secondary {
  background: var(--bb-surface);
  color: var(--bb-heading);
  border-color: var(--bb-control-border);
}

.bb-btn--secondary:hover {
  color: var(--bb-primary);
  border-color: var(--bb-primary);
}

.bb-btn:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 2px;
}