:root {
  /* Sizes */
  --max-width: 1216px;
  --horizontal-padding: 16px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  /* Colors */
  --color-primary: #395DB8;
  --color-blue-background: #D7E2FF;
  --color-white: #ffffff;
  --color-green: #8fcc40;
  --color-red: #f85454;
  --color-backdrop: #0c2747b3;
  --color-typo: #0c2747;
  --color-grey-dark: #687687;
  --color-grey-medium: #949CA6;
  --color-grey-light: #D8DCE0;
  --color-danger-base: #F53669;
  --color-danger-background: #FFEAEF;
  --color-danger-dark: #B40030;
  --color-placeholder: #0c2747b3;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:not(i),
*:not(i)::before,
*:not(i)::after {
  font-family: var(--font-body);
}

body {
  background-color: var(--color-primary-background);
  overflow-wrap: anywhere;
}

/* Overriding redactor implementation of separator */
hr::before, hr::after {
  border-top-color: var(--color-border) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading) !important;
}

input {
  font-family: sans-serif;
  color: var(--color-typo);
}

.focal-image {
  opacity: 0;

  transition: opacity 150ms ease;
}

.bq-sidebar-head *,
.bq-branded.bq-title,
.bq-poweredby-container .button-group *,
.bq-selected-dates .bq-branded {
  color: var(--color-accent-foreground) !important;
}

.bq-button {
  border: none;

  cursor: pointer;

  display: inline-block;

  font-weight: var(--font-weight-bold);
  text-align: center;
}

.bq-button--size-sm {
  font-size: 12px;
}

.bq-button--size-md {
  font-size: 14px;
}

.bq-button--size-lg {
  font-size: 16px;
}

.bq-button--solid {
  border-radius: var(--border-radius-sm);

  text-decoration: none;
}

.bq-button--solid.bq-button--size-sm {
  padding: 6px 12px;
}

.bq-button--solid.bq-button--size-md {
  padding: 10px 20px;
}

.bq-button--solid.bq-button--size-lg {
  padding: 14px 28px;
}

.bq-button--solid:hover {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, 0.12);
}

.bq-button.error {
  background-color: var(--color-red);
}

.divider {
  max-width: calc(var(--max-width) + var(--horizontal-padding) * 2);
  width: 100%;

  margin: 0 auto;
  padding: 0 var(--horizontal-padding);
}

.divider .divider__inner {
  margin: 32px 0;

  border-top: 1px solid var(--color-border);
}

.spacer {
  max-width: calc(var(--max-width) + var(--horizontal-padding) * 2);
  width: 100%;

  margin: 0 auto;
  padding: 0 var(--horizontal-padding);
}

.spacer hr {
  border-style: solid;
  border-bottom: none;
}

.spacer__inner--sm {
  padding: 8px 0;
}

.spacer__inner--md {
  padding: 16px 0;
}

.spacer__inner--lg {
  padding: 32px 0;
}

.spacer__inner--preview {
  position: relative;
  margin-top: 16px;
  background-image: repeating-linear-gradient(
    315deg,
    var(--color-primary-background),
    var(--color-primary-background) 6px,
    var(--color-border) 6px,
    var(--color-border) 7px
  );
  border-radius: 12px;
}

.spacer__inner--preview span {
  display: inline-block;

  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);

  padding: 4px 6px;

  background-color: var(--color-primary-background);
  color: var(--color-primary-foreground);
}

.skeleton {
  display: inline-flex;

  background-color: var(--color-image-placeholder);

  padding: 8px 0;

  border-radius: var(--border-radius-sm);
}

.text {
  max-width: calc(var(--max-width) + var(--horizontal-padding) * 2);
  width: 100%;

  margin: 0 auto;

  padding: 12px var(--horizontal-padding);
}

bq-product-availability {
  font-size: 14px;
  line-height: 20px;

  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
}

[data-focus="true"] {
  box-shadow: 0 0 0 3px #395db899;
}