/*
Styles for the Wordpress block editor.
*/
:root {
  --ratio: 1.3;
  --ms--1: calc(var(--ms-0) / var(--ratio));
  --ms-0: clamp(13px, calc(0.15vw + 0.8rem), 15px);
  --ms-1: calc(var(--ms-0) * var(--ratio));
  --ms-2: calc(var(--ms-1) * var(--ratio));
  --ms-3: calc(var(--ms-2) * var(--ratio));
  --ms-4: calc(var(--ms-3) * var(--ratio));
  --header-height: calc(var(--baseline) * 1.4);
  --index-row-height: calc(var(--baseline) * 1.2);
  --padding: var(--ms-0);
  --padding-large: var(--ms-4);
  --baseline: calc(var(--ms-0) * 1.45);
  --sans: atlas, "Lucida Console", monospace;
  --helvetica: "helvetica-now", "Helvetica", Arial, sans-serif;
  --lightgray: #ededed;
  --gray: #bcbcbc;
  --darkgray: #777777;
  --black: black;
  --red: rgb(160, 40, 3);
  --text: rgb(8, 6, 5);
  --text-hover: rgb(37, 37, 37);
  --background: #dad7cf;
  --background-hover: rgba(255, 255, 255, 0.125);
  --fast: 150ms;
  --br-small: 2px;
  --highlight: rgb(109, 4, 165);
  --border-color: var(--text);
  --border-color-hover: var(--text-hover);
  --br: 0;
}
@media (min-width: 800px) {
  :root {
    --br: 0;
  }
}
@media (min-resolution: 120dpi) {
  :root {
    font-size: 0.85rem;
  }
}

.site_mode--a {
  --border-color: var(--border-a);
  --border-color-hover: var(--border-hover-a);
  --background: var(--background-a);
  --background-hover: rgba(255, 255, 255, 0.025);
  --background-button: var(--catalogue-hover-a);
  --button-hover: var(--catalogue-hover-a);
  --text-button: white;
  --text: var(--text-a);
  --text-hover: var(--text-hover-a);
  --highlight: var(--text-hover-a);
}

.site_mode--b {
  --border-color: var(--border-b);
  --border-color-hover: var(--border-hover-b);
  --background: var(--background-b);
  --background-hover: rgba(255, 255, 255, 0.025);
  --background-button: var(--text-b);
  --button-hover: var(--text-hover);
  --text-button: var(--background-b);
  --text: var(--text-b);
  --text-hover: var(--text-hover-b);
  --highlight: var(--text-hover-b);
}

/*
Styles for the Wordpress block editor.
*/
.button, .newsletter__button, .button--secondary, .newsletter__success {
  background: var(--text);
  color: var(--background);
  border: 1px solid var(--text);
  border-radius: var(--br);
  padding: 0em 0.5em;
  border: 0;
  text-decoration: none !important;
  display: inline-flex;
  height: calc(var(--baseline) + 0.1em);
  word-spacing: -0.15em;
  position: relative;
  line-height: var(--baseline);
}
@media (min-width: 800px) {
  .button, .newsletter__button, .button--secondary, .newsletter__success {
    padding: 0 0.35em;
  }
}
.button .price__deleted, .newsletter__button .price__deleted, .button--secondary .price__deleted, .newsletter__success .price__deleted {
  margin-right: 0.5em;
}
.button .spinner, .newsletter__button .spinner, .button--secondary .spinner, .newsletter__success .spinner {
  position: relative;
  top: 0.35em;
}

.button__label {
  pointer-events: none;
}

a.button, a.newsletter__button, a.button--secondary, a.newsletter__success,
button.button,
button.newsletter__button,
button.button--secondary,
button.newsletter__success,
input.button,
input.newsletter__button,
input.button--secondary,
input.newsletter__success {
  cursor: pointer;
}
a.button:hover, a.newsletter__button:hover, a.button--secondary:hover, a.newsletter__success:hover, a.button:focus-visible, a.newsletter__button:focus-visible, a.button--secondary:focus-visible, a.newsletter__success:focus-visible,
button.button:hover,
button.newsletter__button:hover,
button.button--secondary:hover,
button.newsletter__success:hover,
button.button:focus-visible,
button.newsletter__button:focus-visible,
button.button--secondary:focus-visible,
button.newsletter__success:focus-visible,
input.button:hover,
input.newsletter__button:hover,
input.button--secondary:hover,
input.newsletter__success:hover,
input.button:focus-visible,
input.newsletter__button:focus-visible,
input.button--secondary:focus-visible,
input.newsletter__success:focus-visible {
  color: var(--background);
  background: var(--text-hover);
}

.spinner {
  justify-content: center;
  align-items: center;
  transform-origin: center;
  margin-left: 0.5em;
  width: 0.8em;
  height: 0.8em;
  position: relative;
  color: var(--background);
  display: none;
}
.is-loading .spinner {
  display: inline-flex;
}
.spinner svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 0.35s steps(4) infinite;
}
.spinner path {
  fill: currentColor;
  stroke: 0;
}

.button--loading {
  background: var(--text-hover);
  cursor: progress;
  pointer-events: none;
}
.button--loading:hover, .button--loading:focus-visible {
  background: var(--black-hover);
}

.button--error {
  background: rgb(243, 56, 49);
}
.button--error:hover, .button--error:focus-visible {
  background: rgb(243, 56, 49);
}

.button--secondary, .newsletter__success {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}
.button--secondary:hover, .newsletter__success:hover, .button--secondary:focus-visible, .newsletter__success:focus-visible {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-color-hover);
}
.button--secondary[aria-disabled=true], [aria-disabled=true].newsletter__success {
  color: var(--border-color);
  cursor: default;
  text-decoration: line-through !important;
}
.button--secondary[aria-disabled=true]:hover, [aria-disabled=true].newsletter__success:hover, .button--secondary[aria-disabled=true]:focus-visible, [aria-disabled=true].newsletter__success:focus-visible {
  border: 1px solid var(--border-color);
}

/*
Styles for the Wordpress block editor.
*/
.newsletter__form-container.is-success .submit {
  display: none;
}
.newsletter__form-container.is-success .newsletter__success {
  display: block;
}

.newsletter__success {
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  padding: 0 0.25em;
  display: none;
  pointer-events: none;
}

.newsletter__form {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  height: calc(var(--baseline) + 0.2em);
}
.newsletter__form.is-loading .spinner {
  display: block;
}

.newsletter__label {
  font-size: 0;
  position: absolute;
}

.newsletter__input {
  max-width: 9em;
  background: transparent;
  position: relative;
  padding-left: 0.25em;
  appearance: none;
  border: 0;
  border-radius: 0;
  padding-bottom: 0.25em;
  height: 100%;
}
@media (min-width: 800px) {
  .newsletter__input {
    max-width: 12em;
  }
}
.newsletter__input::placeholder {
  color: inherit;
  opacity: 0.5;
}
.newsletter__input:focus {
  outline: 0;
  background: transparent;
}

.newsletter__field.submit {
  display: contents;
}

.newsletter__button {
  height: 100%;
  padding-top: 0.05em;
}

.newsletter__errors {
  padding-top: 0.25em;
  opacity: 0;
}
.newsletter__errors.active {
  opacity: 1;
}
