/* General Styling */

/* reset */

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

i.fa,
i.fas {
  font-style: normal;
}

html,
body {
  height: 100%;
  margin: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --h5: calc(var(--base-size) * var(--type-scale));
  --h4: calc(var(--h5) * var(--type-scale));
  --h3: calc(var(--h4) * var(--type-scale));
  --h2: calc(var(--h3) * var(--type-scale));
  --h1: calc(var(--h2) * var(--type-scale));
}

@media (min-width: 1024px) {
  :root :root {
    --type-scale: 1.265;
  }
}

@media (min-width: 200px) {
  :root :root {
    --type-scale: 1.2;
  }
}

:root i {
  font-family: "fontawesome";
}

:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
  font-family: inherit;
  font-weight: normal;
  line-height: 1.1;
  color: inherit;
  letter-spacing: 0;
  font-family: var(--my-font-family-normal);
}

:root h1 {
  font-size: var(--h1);
}

:root h2 {
  font-size: var(--h2);
}

:root h3 {
  font-size: var(--h3);
}

:root h4 {
  font-size: var(--h4);
}

:root h5 {
  font-size: var(--h5);
  font-weight: normal;
}

:root li,
:root ul,
:root p {
  font-size: var(--base-size);
}

:root p {
  margin: 0.5em 0;
}

.important:is(p, h1, h1, h3, h4, h5, h6, span) {
  color: var(--text-primary-inverse);
}

.contrast:is(p, h1, h1, h3, h4, h5, h6, span) {
  color: var(--color-contrast);
}

*:is(table, tr, th, td) {
  color: var(--text-primary);
}

/**common-colors*/

:root {
  /** commonly used saturation/lightness/opacity levels **/
  --saturation-level1: 10%;
  --saturation-level2: 50%;
  /* mid range - normal */
  --saturation-level3: 90%;
  --lightness-level1: min(calc(var(--base-luminance-1) + 25%), 90%);
  --lightness-level2: 50%;
  /* mid range - normal */
  --lightness-level3: max(calc(var(--base-luminance-1) - 15%), 10%);
  --opacity-level1: 100%;
  /* no opacity - normal */
  --opacity-level2: calc(var(--opacity-level1) - 20%);
  --opacity-level3: calc(var(--opacity-level2) - 20%);
  /* triad and complementary base hsl colors*/
  /* set in 'environment' theme.css */
}

:root,
body {
  --base-hue: var(--base-hue-1);
  --base-saturation: var(--base-saturation-1);
  --base-luminance: var(--base-luminance-1);
  --base-hue-inverse: calc(var(--base-hue-1) + 180);
  --base-hue-contrast1: calc(var(--base-hue-1) - 120);
  --base-hue-contrast2: calc(var(--base-hue-1) + 120);
  /* derived tints, shades and tones*/
  --color-normal: hsla(
    var(--base-hue),
    var(--base-saturation),
    var(--base-luminance),
    100%
  );
  --color-light: hsla(
    var(--base-hue),
    var(--base-saturation),
    var(--lightness-level1),
    100%
  );
  --color-darker: hsla(
    var(--base-hue),
    var(--base-saturation),
    var(--lightness-level3),
    100%
  );
  --shade-normal: hsla(
    var(--base-hue),
    var(--saturation-level1),
    var(--base-luminance-1),
    100%
  );
  --shade-light: hsla(
    var(--base-hue),
    var(--saturation-level1),
    var(--lightness-level1),
    100%
  );
  --shade-darker: hsla(
    var(--base-hue),
    var(--saturation-level1),
    var(--lightness-level3),
    100%
  );
  --color-inverse: hsla(
    var(--base-hue-inverse),
    var(--saturation-level3),
    50%,
    100%
  );
  --color-contrast1: hsla(
    var(--base-hue-contrast1),
    var(--saturation-level2),
    var(--base-luminance),
    100%
  );
  --color-contrast2: hsla(
    var(--base-hue-contrast2),
    var(--saturation-level2),
    var(--base-luminance),
    100%
  );
  --highlight-background-light: rgba(255, 255, 255, 0.2);
  --highlight-background-dark: rgba(0, 0, 0, 0.4);
}

/*
  1. Defines some standard color combination schemes (aka blocks)
  2. Map colors variables to blocks variables. This wil set the variables for all children of the block
  3. Map components to blocks. This will apply the style to components like body, header, menu etc.

  Important: Each block needs to apply the color and background to itself to be visible on the block component.
*/

body {
  --background-primary: none;
  --text-primary: white;
  --text-secondary: black;
  --background-secondary: var(--highlight-background-light);
  --text-primary-inverse: var(--color-inverse);
  --button-background: var(--color-darker);
  --button-text: var(--text-primary);
  --color-contrast: var(--color-contrast2);
  background-color: var(--background-primary);
  color: var(--text-primary);
  background-image: var(--background-image);
  font-family: var(--my-font-family-normal);
  font-size: var(--base-size);
  color: var(--text-primary);
}

.block--transparent {
  --button-background: var(--text-primary);
  --button-text: var(--color-darker);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.article,
.block--highlight-dark {
  --button-background: var(--text-primary);
  --button-text: var(--color-darker);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.mobile-header--background,
.block--normal,
.pagination .page-link {
  --background-primary: var(--color-normal);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--light {
  --background-primary: var(--color-light);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--dark,
.login-menu-form {
  --background-primary: var(--color-darker);
  --background-secondary: var(--color-normal);
  --text-secondary: var(--text-primary);
  --button-background: var(--color-light);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--shade-light {
  --background-primary: var(--shade-light);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--shade-normal {
  background-color: var(--background-primary);
  color: var(--text-primary);
  --background-primary: var(--shade-normal);
}

.block--shade-dark {
  --background-primary: var(--shade-darker);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--white {
  --text-primary: black;
  --background-primary: white;
  --text-secondary: var(--color-inverse);
  --background-secondary: var(--highlight-background-dark);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--grey {
  --background-primary: var(--shade-light);
  --color-contrast: var(--color-darker);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--contrast1 {
  --background-primary: var(--color-contrast1);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--contrast2 {
  --background-primary: var(--color-contrast2);
  background-color: var(--background-primary);
  color: var(--text-primary);
  --color-contrast: var(--color-contrast1);
}

div[page-block] > * {
  border-radius: var(--border-radius--large);
}

a,
button {
  transition: 0.4s;
  letter-spacing: 1px;
  line-height: 1.7em;
  text-decoration: none;
  cursor: pointer;
}

a {
  color: var(--link-text);
}

a:hover,
a:active {
  color: var(--link-text);
  text-decoration: none;
}

a.important {
  color: var(--text-primary-inverse);
}

a.important:hover,
a.important:active {
  color: var(--color-lighter);
  text-decoration: none;
}

a.link {
  color: var(--color-lighter);
}

a.link:hover,
a.link:active {
  color: var(--text-primary-inverse);
  text-decoration: none;
}

input[type=submit],
button,
.btn,
.pagination .page-link,
a.btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  outline: none;
  color: var(--button-text);
  background-color: var(--button-background);
  padding: 0.4em 1em;
  border: none;
  border-radius: var(--border-radius);
}

input[type=submit]:active,
input[type=submit]:hover,
button:active,
button:hover,
.btn:active,
.pagination .page-link:active,
.btn:hover,
.pagination .page-link:hover,
a.btn:active,
a.btn:hover {
  filter: drop-shadow(1px 1px 2px var(--text-primary));
  filter: opacity(80%);
}

input[type=submit].important,
button.important,
.btn.important,
.pagination .important.page-link,
a.btn.important {
  background-color: var(--color-inverse);
}

input[type=submit]:disabled,
button:disabled {
  cursor: default;
  text-decoration: none;
  filter: saturate(0);
}

input[type=submit]:disabled:active,
input[type=submit]:disabled:hover,
button:disabled:active,
button:disabled:hover {
  filter: saturate(0);
}

.pagination {
  display: flex;
  margin: 1em auto;
  max-width: -moz-max-content;
  max-width: max-content;
}

.pagination .page-link {
  padding: 0.3em;
  font-size: 1.4em;
}

.pagination li:is(:first-of-type, :last-of-type) :is(span, a) {
  font-weight: bold;
  padding-left: 0.8em;
  padding-right: 0.8em;
}

@media screen and (max-width: 750px) {
  .pagination li.page-item {
    display: none;
  }

  .pagination .page-item:first-child,
  .pagination .page-item:nth-child(2),
  .pagination .page-item:nth-last-child(2),
  .pagination .page-item:last-child,
  .pagination .page-item.active,
  .pagination .page-item.disabled {
    display: block;
  }
}

/* Button animations*/

.button-1 {
  color: #FFCE00;
  border: 3px solid #FFCE00;
}

.button-1:hover {
  color: #FFF;
  background-color: #FFCE00;
}

.button-2 {
  color: #FE4880;
  border: 3px solid #FE4880;
  background-image: linear-gradient(to right, transparent 50%, #FE4880 50%);
  background-size: 200%;
  background-position: 0%;
}

.button-2:hover {
  color: #FFF;
  background-position: 100%;
}

.button-3 {
  color: #68DEA0;
  border: 3px solid #68DEA0;
  background-image: linear-gradient(to top, #68DEA0 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0% 0%;
}

.button-3:hover {
  color: #FFF;
  background-position: 0% 100%;
}

.button-4 {
  color: #FFF;
  background-color: #68A0DE;
  box-shadow: inset 0 -8px 0 0 rgba(0, 0, 0, 0.17);
  transition: 0.1s;
  text-shadow: 0px 3px rgba(0, 0, 0, 0.17);
}

.button-4:hover {
  box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.17);
  text-shadow: 0px 2px rgba(0, 0, 0, 0.17);
}

.button-4:active {
  box-shadow: inset 0 0px 0 0 rgba(0, 0, 0, 0.17);
  text-shadow: 0px 0px rgba(0, 0, 0, 0.17);
}

.button-5 {
  position: relative;
}

.button-5:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
  border-bottom: 3px solid #212121;
  border-right: 3px solid #212121;
  transition: all 0.4s, opacity 0.1s 0.4s;
  opacity: 0;
}

.button-5:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  border-top: 3px solid #212121;
  border-left: 3px solid #212121;
  transition: all 0.4s, opacity 0.1s 0.4s;
  opacity: 0;
}

.button-5:hover:after,
.button-5:hover:before {
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  transition: all 0.4s, opacity 0.1s;
  opacity: 1;
}

.button-6 {
  position: relative;
}

.button-6:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
  border-bottom: 3px solid #212121;
  border-right: 3px solid #212121;
  transition: all 0.4s, opacity 0.1s 0.4s;
  opacity: 0;
}

.button-6:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  border-top: 3px solid #212121;
  border-left: 3px solid #212121;
  transition: all 0.4s, opacity 0.1s 0.4s;
  opacity: 0;
}

.button-6:hover:after,
.button-6:hover:before {
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  transition: all 0.4s, opacity 0.1s;
  opacity: 1;
}

.img-hover-zoom--brightness img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}

.img-hover-zoom--brightness:hover img {
  filter: brightness(100%);
  transform: scale(1.3);
}

.transition-ease-in {
  transition: all 0.2s ease-in;
}

/* #region forms */

form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  align-items: center;
  justify-content: flex-start;
}

form > h1 {
  margin-left: 0.4em;
}

form input,
form label {
  display: block;
}

form input[type=checkbox],
form input[type=checkbox] + label {
  display: inline;
}

form label {
  font-size: 0.9em;
  margin-bottom: 0.1em;
}

.form-block {
  background-color: var(--background-primary);
  margin-bottom: var(--base-padding);
  padding: var(--base-padding);
  position: relative;
  border-radius: var(--border-radius--large);
}

.form-block h1,
.form-block h2,
.form-block h3,
.form-block h4,
.form-block h5,
.form-block h6,
.form-block th {
  margin-bottom: 0.3em;
  color: var(--shade-light);
}

.form-block .close-button {
  position: absolute;
  right: var(--base-padding);
  width: -moz-max-content;
  width: max-content;
}

.form-block .close-button i {
  font-size: var(--h1);
  color: var(--background-secondary);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--base-padding);
}

.form-row > div {
  margin-right: var(--base-padding);
}

.form-buttons {
  display: flex;
  justify-content: space-between;
  padding: var(--base-padding);
}

select,
textarea,
input {
  color: var(--input-text);
  background-color: var(--background-secondary);
  border: 0px solid var(--background-secondary);
}

textarea {
  padding: var(--base-padding);
}

select,
input {
  padding: 0 var(--base-padding);
  height: 2.5em;
  max-width: 14em;
}

select option {
  color: black;
}

input:focus {
  outline: none !important;
  border: 1px solid var(--text-primary);
}

input.is_invalid {
  outline: none !important;
  border: 1px solid var(--color-inverse);
}

/* #endregion forms */

/* #region block-helpers */

.full-screen-width {
  display: none;
}

@media (min-width: 750px) {
  /* to prevent horizontal scrolling with full width content*/

  body {
    overflow-x: hidden;
  }

  .full-screen-width {
    display: block;
    margin-left: calc(-1 * var(--site-margin-width));
    margin-right: calc(-1 * var(--site-margin-width));
    padding-left: var(--site-margin-width);
    padding-right: var(--site-margin-width);
    /* limit content width in full width banner*/
  }

  .full-screen-width > * {
    max-width: var(--site-body-width);
    margin: 0 auto;
  }

  /* depricated */

  .full-screen-width-image {
    display: inherit;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    width: 100vw;
  }
}

/* #endregion block-helpers */

/* sets the background color and text color defined by block1 etc*/

.block {
  padding: var(--base-padding);
}

.center {
  display: grid;
  place-items: center;
}

.flex-push-right {
  margin-left: auto;
}

.round {
  border-radius: var(--border-radius--large);
  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

.margin {
  margin: var(--base-padding);
}

.margin-bottom {
  margin-bottom: var(--base-padding);
}

.margin-top {
  margin-top: var(--base-padding);
}

.margin-left {
  margin-left: var(--base-padding);
}

.margin-right {
  margin-right: var(--base-padding);
}

.padding {
  padding: var(--base-padding);
}

.padding-bottom {
  padding-bottom: var(--base-padding);
}

.padding-top {
  padding-top: var(--base-padding);
}

.padding-left {
  padding-left: var(--base-padding);
}

.padding-right {
  padding-right: var(--base-padding);
}

/* #region colour helper classes */

.highlight-background-light {
  background-color: var(--highlight-background-light);
}

.highlight-background-dark {
  background-color: var(--highlight-background-dark);
}

.round-corners {
  border-radius: var(--border-radius);
}

.round-corners-large {
  border-radius: var(--border-radius--large);
}

/* #endregion colour helper classes */

/* #region content-columns */

.column-content--2 p,
.column-content--3 p,
.column-content--4 p {
  margin: 0.5em 0 0 0;
}

@media (min-width: 640px) {
  .column-content--2 {
    margin: 2em 0;
    padding: 1em;
    -moz-columns: 2 300px;
    columns: 2 300px;
    padding: 1em;
    -moz-column-gap: 4em;
    column-gap: 4em;
    -moz-column-rule: 1px dotted var(--color-contrast);
    column-rule: 1px dotted var(--color-contrast);
  }

  .column-content--3 {
    margin: 2em 0;
    -moz-columns: 3 300px;
    columns: 3 300px;
    padding: 1em;
    -moz-column-gap: 4em;
    column-gap: 4em;
    -moz-column-rule: 1px dotted var(--color-contrast);
    column-rule: 1px dotted var(--color-contrast);
  }

  .column-content--4 {
    margin: 2em 0;
    -moz-columns: 4 300px;
    columns: 4 300px;
    padding: 1em;
    -moz-column-gap: 4em;
    column-gap: 4em;
    -moz-column-rule: 1px dotted var(--color-contrast);
    column-rule: 1px dotted var(--color-contrast);
  }
}

.content-keep-together {
  display: inline-block;
}

.content-inversed {
  background-color: var(--color-font-important);
  color: white;
  padding: 1em;
  -moz-column-gap: 4em;
  column-gap: 4em;
  -moz-column-rule: 1px dotted white;
  column-rule: 1px dotted white;
}

.content-inversed--grey {
  background-color: var(--color-background-highlight);
  color: black;
  padding: 1em;
  -moz-column-gap: 4em;
  column-gap: 4em;
  -moz-column-rule: 1px dotted black;
  column-rule: 1px dotted black;
}

.content-inversed-black {
  background-color: black;
  color: white;
  padding: 1em;
  -moz-column-gap: 4em;
  column-gap: 4em;
  -moz-column-rule: 1px dotted white;
  column-rule: 1px dotted white;
}

/* #endregion content-columns */

/* Columns for block-classes */

div[class*=block-column-] > div,
div[class^=block-column-] > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--base-padding);
  margin: var(--base-padding) 0;
}

@media (min-width: 1024px) {
  div.block-column-2 > div {
    grid-template-columns: repeat(2, 1fr);
  }

  div.block-column-3 > div {
    grid-template-columns: repeat(3, 1fr);
  }

  div.block-column-3 > div {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-3 {
  display: grid;
  grid-gap: var(--base-padding);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  padding: 1em;
}

/* Block-classes for user login state @todo replace with conditions*/

body.user-not-logged-in .show-user-logged-in {
  display: none;
}

body.user-logged-in .show-user-not-logged-in {
  display: none;
}

body.user-logged-in .show-user-logged-in {
  display: init;
}

body.user-not-logged-in .show-user-not-logged-in {
  display: init;
}

/* #region hide-show-on-mobile-desktop */

@media (max-width: 749.99px) {
  /* Should be defined last in stylesheet for correct revert to init*/

  .hide-on-desktop {
    display: init;
  }

  /* old stuff */

  .hide-on-mobile {
    display: none;
  }
}

@media (min-width: 750px) {
  .hide-on-desktop {
    display: none;
  }

  /* old stuff */

  .hide-on-mobile {
    display: init;
  }
}

/* #endregion hide-show-on-mobile-desktop */

.pill {
  color: var(--color-primary);
  background-color: var(--shade-normal);
  border-radius: 10rem;
  width: -moz-max-content;
  width: max-content;
  display: inline-block;
  padding: 0.25em 0.4em;
  padding-right: 0.6em;
  padding-left: 0.6em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}

/* #region mobile layout */

.mobile:where(button:hover, button:active, a:hover, a:active) {
  /*   background-color:  */
}

/* mobile header */

header.mobile-header {
  position: fixed;
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  max-height: var(--offset-top);
  padding: 0;
  z-index: 1000;
}

.mobile-header--background {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--offset-top);
  max-height: var(--offset-top);
  width: 100vw;
  z-index: -1;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--background-primary);
}

.mobile-header__logo-link {
  height: var(--offset-top);
  display: grid;
  align-items: center;
  padding: 0.2em;
}

.mobile-header__logo {
  height: 100%;
  align-self: center;
  background-image: var(--header-logo-image);
  background-repeat: no-repeat;
  background-size: contain;
}

.header-toggle-buttons {
  display: flex;
  gap: var(--base-padding);
  margin-right: var(--base-padding);
  align-items: center;
}

.header-toggle-buttons > form {
  display: none;
}

.header-toggle-buttons .btn,
.header-toggle-buttons .pagination .page-link,
.pagination .header-toggle-buttons .page-link {
  position: relative;
  font-size: 1.4em;
  border-radius: 50%;
  height: 1.8em;
  width: 1.8em;
  padding: auto;
}

/* desktop search */

#desktop-search {
  display: none;
}

#desktop-search {
  width: auto;
  justify-content: center;
  width: 20em;
  height: 2.5em;
  align-items: center;
}

#desktop-search input {
  width: 100%;
  box-sizing: border-box;
  border: 0px solid var(--color-border);
  height: 2.5em;
  background-color: var(--highlight-background-light);
  color: var(--text-primary);
  padding: 0 1em;
}

#mobile-search-input:focus,
#desktop-search input:focus {
  outline: none;
}

#desktop-search button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  justify-self: flex-end;
}

/* mobile search */

#mobile-search {
  padding: var(--base-padding-mobile);
  border-top: 1px solid #eee;
}

#mobile-search div {
  width: 100%;
  display: flex;
}

#mobile-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  height: 25px;
  border-radius: var(--border-radius);
}

#mobile-search button {
  display: block;
  padding: 0;
  width: 3em;
  height: 25px;
}

.mobile-header label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3em;
  border-radius: var(--border-radius);
}

.count {
  position: absolute;
  background-color: var(--color-inverse);
  font-size: 0.6em;
  top: -1px;
  left: 21px;
  z-index: 1;
  width: auto;
  line-height: 1em;
  min-height: 1em;
  border-radius: 50%;
  padding: 2px;
}

/* mobile nav-bar menu and toggle*/

@media (max-width: 360px) {
  header.mobile-header label {
    height: 2em;
  }
}

nav:is(#mobile-menu, #user-menu, #shopping-cart) {
  height: calc(100vh - var(--offset-top));
  overflow-y: auto;
}

.btn.user-logged-in,
.pagination .user-logged-in.page-link {
  color: var(--color-inverse);
}

#mobile-menu-toggle,
#mobile-menu-toggle ~ #mobile-menu,
#shopping-cart-toggle,
#shopping-cart-toggle ~ #shopping-cart,
#user-menu-toggle,
#user-menu-toggle ~ #user-menu,
#mobile-search-toggle,
#mobile-search-toggle ~ #mobile-search,
#mobile-search,
#desktop-menu {
  /* State: closed. Click to open. */
  /* Hide checkbox */
  display: none;
}

/* State: open. Click to close. */

#mobile-menu-toggle:checked ~ #mobile-menu,
#shopping-cart-toggle:checked ~ #shopping-cart,
#user-menu-toggle:checked ~ #user-menu,
#mobile-search-toggle:checked ~ #mobile-search {
  display: block;
  width: 100vw;
  max-height: 100vh;
  position: absolute;
  top: var(--offset-top);
  left: 0;
}

/* #endregion mobile layout */

/* main content */

main.mobile-main {
  padding: calc(var(--offset-top) + var(--base-padding)) var(--base-padding-mobile) 0 var(--base-padding-mobile);
}

#user-menu-toggle:checked ~ .overlay {
  opacity: 100;
}

header.mobile-header img {
  background-color: var(--color-contrast);
  border-radius: var(--border-radius);
}

.navbar-nav .nav-item {
  border-radius: var(--border-radius);
}

#mobile-menu.main-menu--vertical a.btn,
#mobile-menu.main-menu--vertical .pagination a.page-link,
.pagination #mobile-menu.main-menu--vertical a.page-link {
  color: var(--text-primary);
  text-decoration: none;
  background-color: inherit;
  padding: inherit;
  border: none;
}

@media (min-width: 1024px) {
  header.mobile-header {
    display: grid;
    gap: calc(var(--base-padding) / 2);
    grid-template-columns: auto 1fr;
    grid-template-rows: 3em 3em;
    box-sizing: border-box;
    width: var(--site-body-width);
  }

  .mobile-header__logo-link {
    grid-row: 1/span 2;
    padding: 0.5em;
  }

  .mobile-header__logo {
    width: var(--header-logo-width);
  }

  .mobile-header--background {
    height: var(--offset-top);
  }

  #mobile-menu-toggle:checked ~ #mobile-menu,
  #shopping-cart-toggle:checked ~ #shopping-cart,
  #user-menu-toggle:checked ~ #user-menu {
    display: block;
    position: absolute;
    height: auto;
    right: 0;
    top: var(--offset-top);
    left: auto;
    width: -moz-max-content;
    width: max-content;
    min-width: none;
    overflow: normal;
    border-radius: var(--border-radius);
  }

  nav:is(#mobile-menu, #user-menu, #shopping-cart) {
    /* On desktop menu height is not fullscreen. */
    height: -moz-max-content;
    height: max-content;
    overflow-y: initial;
  }

  .header-toggle-buttons {
    grid-row: 1;
    grid-column: 2;
  }

  .header-toggle-buttons form {
    display: block;
    width: auto;
  }

  #mobile-search-toggle:checked ~ #mobile-search,
  #mobile-search,
  #mobile-menu {
    display: none;
  }

  #desktop-search {
    display: flex;
  }

  #mobile-menu {
    grid-row: 2;
    grid-column: 2;
  }

  #desktop-menu {
    /* On desktop always show menu. */
    display: flex;
    padding: 0;
    border: 0;
    grid-row: 2;
    grid-column: 2;
  }

  #desktop-menu ul {
    display: flex;
    list-style: none;
  }

  #desktop-menu ul.main-menu-buttons {
    padding: 0;
  }

  #desktop-menu ul.main-menu-links {
    gap: var(--base-padding);
    margin-right: var(--base-padding);
  }

  #desktop-menu ul.main-menu-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.8em;
  }

  label[for=mobile-search-toggle] {
    display: none;
  }

  label[for=mobile-menu-toggle] {
    display: none;
  }

  nav#mobile-menu .navbar {
    padding: 0;
  }

  #mobile-menu a.nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  a.nav-link:hover,
  a.nav-link:active {
    border-bottom: 2px solid var(--text-secondary);
    box-sizing: border-box;
  }
}

.banner__content-block {
  border: 1px solid grey;
  padding: 1em;
  background-color: white;
}

.banner__content-block a {
  text-decoration: none;
  color: var(--text-primary);
}

.main-menu--vertical ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-width: 12em;
  font-size: 1.2em;
}

.main-menu--vertical ul li {
  border-bottom: 1px solid var(--shade-light);
}

.main-menu--vertical ul li span,
.main-menu--vertical ul li a,
.main-menu--vertical ul li a.btn,
.main-menu--vertical ul li .pagination a.page-link,
.pagination .main-menu--vertical ul li a.page-link {
  display: block;
  width: 100%;
  height: auto;
  font-size: 1.2em;
  margin: 1em;
  text-decoration: none;
  color: var(--text-primary);
}

.main-menu--vertical ul li a i,
.main-menu--vertical ul li span i {
  margin-right: 0.5em;
  color: var(--shade-light);
  font-size: 1.4em;
  width: 1.5em;
}

.main-menu--vertical ul li.center {
  margin: auto;
  border-bottom: 0;
}

.footer main {
  padding: 2em 0 1.5em 0;
}

.footer .footer__content-block {
  padding: 1em;
  max-width: 75%;
  justify-self: center;
}

.footer .footer__content-block h1 {
  font-size: var(--h3);
  margin-bottom: 0.5em;
  color: var(--color-contrast);
}

.footer .footer__content-block p {
  line-height: 1.6em;
  margin-bottom: 1em;
}

.footer .footer__content-block ul {
  list-style: none;
}

.footer .footer__content-block ul li {
  line-height: 2em;
}

.footer .footer__content-block a {
  text-decoration: none;
}

.footer .footer__content-block p.contrast {
  color: white;
}

.footer .footer__content-block input[type=email] {
  margin-bottom: var(--base-padding);
}

.bottom-footer main {
  background-color: var(--shade-darker);
  color: white;
  padding: calc(2 * var(--base-padding)) var(--base-padding);
}

.bottom-footer .payment-options {
  display: grid;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  margin: auto;
}

.bottom-footer .payment-options div {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 1em 0 0 0;
  justify-self: center;
}

.bottom-footer .payment-options--small,
.bottom-footer .payment-options--small div {
  justify-content: flex-start;
}

.bottom-footer .payment-options img {
  height: 30px;
}

.bottom-footer .copyright-and-legal {
  display: grid;
  justify-content: center;
  grid-gap: 0.5em;
  font-size: 0.9em;
  margin: 1em auto;
  width: -moz-max-content;
  width: max-content;
  color: white;
}

@media (min-width: 1024px) {
  .bottom-footer .copyright-and-legal {
    font-size: 1em;
  }
}

.bottom-footer .copyright-and-legal a {
  color: white;
}

/* components */

/* #region picture-grid */

.picture-grid img {
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.picture-grid img:hover {
  opacity: 0.7;
}

.picture-grid {
  margin: 2em 0;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
}

@media (min-width: 320px) {
  .picture-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 30vw 30vw;
    align-items: stretch;
  }

  .picture-grid img {
    max-width: 100%;
    height: auto;
  }
}

@media (min-width: 640px) {
  .picture-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 15vw;
    align-items: stretch;
  }
}

/* #endregion picture-grid */

.article-list footer {
  display: flex;
  padding: var(--base-padding);
  justify-content: center;
}

.page-item.active .page-link {
  background-color: var(--background-secondary);
  border-color: var(--background-secondary);
}

.article__button a {
  background-color: var(--cool-blue);
}

.collection-options {
  position: relative;
  top: -14px;
  height: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
  margin-right: 0.3em;
}

.collection-options a {
  text-decoration: none;
}

.collection-options .grid-style {
  display: flex;
  gap: 1em;
  align-items: center;
}

.article-list[class*=rows-] .article-list__articles {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-rows: 0;
  overflow: hidden;
  box-sizing: border-box;
  grid-row-gap: 0;
  padding: 0;
}

.article-list.rows-1 .article-list__articles,
.article-list.rows-2 .article-list__articles,
.article-list.rows-3 .article-list__articles,
.article-list.rows-4 .article-list__articles,
.article-list.rows-5 .article-list__articles {
  grid-template-rows: repeat(5, auto);
}

.article-list.rows-1 .article-list__articles article.article,
.article-list.rows-2 .article-list__articles article.article,
.article-list.rows-3 .article-list__articles article.article,
.article-list.rows-4 .article-list__articles article.article,
.article-list.rows-5 .article-list__articles article.article {
  margin-bottom: var(--base-padding);
}

@media (min-width: 750px) {
  .article-list[class*=rows-] .article-list__articles {
    display: grid;
    grid-auto-rows: 0;
    overflow: hidden;
    box-sizing: border-box;
    grid-row-gap: 0;
    padding: 0;
  }

  .article-list.rows-1 .article-list__articles {
    grid-template-rows: auto;
  }

  .article-list.rows-2 .article-list__articles {
    grid-template-rows: auto auto;
  }

  .article-list.rows-2 .article-list__articles article.article {
    margin-bottom: var(--base-padding);
  }

  .article-list.rows-3 .article-list__articles {
    grid-template-rows: auto auto auto;
  }

  .article-list.rows-3 .article-list__articles article.article {
    margin-bottom: var(--base-padding);
  }

  .article-list.rows-4 .article-list__articles {
    grid-template-rows: auto auto auto auto;
  }

  .article-list.rows-4 .article-list__articles article.article {
    margin-bottom: var(--base-padding);
  }

  .article-list.rows-5 .article-list__articles {
    grid-template-rows: auto auto auto auto auto;
  }

  .article-list.rows-5 .article-list__articles article.article {
    margin-bottom: var(--base-padding);
  }
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--base-padding);
  padding: var(--base-padding);
}

.product-detail .product-detail__description {
  max-width: 60rem;
}

.product-detail .product-detail__description a {
  text-decoration: none;
}

.product-detail .product-detail__artist {
  font-size: 2em;
  font-weight: bold;
  margin: var(--base);
  margin: 0;
  color: var(--color-inverse);
}

.product-detail .product-detail__title {
  color: var(--text-primary);
  font-size: 1.2em;
  margin: 0 0 var(--base-padding) 0;
  letter-spacing: 2px;
}

.product-detail .product-detail__image {
  width: clamp(150px, 50%, 300px);
}

.product-detail .product-detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: var(--base-padding);
  margin: 1em 0;
}

.product-detail .product-detail__facts a {
  --link-text: var(--color-light);
}

.product-detail .product-detail__facts div {
  font-weight: inherit;
  font-size: 0.9em;
}

.product-detail .product-detail__facts div:nth-child(odd) {
  color: var(--shade-light);
}

.product-detail .product-detail__facts div:nth-child(even) {
  color: var(--text-primary);
}

.product-detail .product-detail__facts div.header {
  grid-column: span 2;
  color: var(--text-primary);
  background: var(--shade-darker);
}

.product-detail form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
}

.product-detail form .product-detail__added-msg {
  color: var(--color-inverse);
  text-align: center;
  margin: var(--base-padding) 0;
}

.track-listing__container {
  padding: var(--base-padding);
}

.track-listing__container > h4 {
  border-bottom: 2px solid var(--shade-darker);
  padding: 0.3em;
  color: var(--shade-light);
}

.track-listing {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--base-padding);
  padding: var(--base-padding) 0;
}

.track-listing .disk {
  background-color: var(--shade-darker);
  padding: 1em;
}

.track-listing .disk .important {
  color: var(--shade-light);
}

.product-detail form a {
  text-align: center;
}

.product-detail form .reference,
.product-detail form .number {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--base-padding);
}

.product-detail form input[type=submit] {
  max-width: 100%;
}

@media (min-width: 700px) {
  .product-detail {
    grid-template-columns: minmax(300px, 600px) auto;
    grid-template-rows: auto auto;
    grid-gap: calc(3 * var(--base-padding));
  }

  .product-detail form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: -moz-max-content;
    width: max-content;
    grid-row: 3;
    grid-column: 2;
  }

  .product-detail form .product-detail__added-msg {
    text-align: none;
  }

  .product-detail form .reference,
  .product-detail form .number {
    display: block;
  }

  .product-detail form a {
    font-size: 0.8em;
    white-space: nowrap;
    margin: 0.3em 0;
  }

  .product-detail form input[type=submit] {
    justify-self: flex-end;
    max-width: 25em;
  }

  .product-detail .product-detail__description {
    min-width: 400px;
  }

  .product-detail .product-detail__facts {
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .product-detail__image {
    width: clamp(150px, 50%, 300px);
  }

  .track-listing {
    grid-template-columns: 1fr 1fr;
  }
}

.checkout-page {
  padding: var(--base-padding);
}

.checkout-page > h1 {
  margin-left: 0.4em;
}

.checkout-page .delivery-address label#show-delivery-label,
.checkout-page .delivery-address label#show-delivery-close {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  width: 100%;
}

.checkout-page .delivery-address i {
  font-size: var(--h1);
  color: var(--background-secondary);
  margin: 0.2em 0.3em;
}

.checkout-page .delivery-address label:hover i {
  color: var(--color-inverse);
}

.checkout-page .delivery-address .show-delivery-container,
.checkout-page .delivery-address #show-delivery-close {
  display: none;
}

.checkout-page .delivery-address #show-delivery-label {
  display: block;
}

.checkout-page .delivery-address #show-delivery {
  display: none;
}

.checkout-page .delivery-address #show-delivery:checked ~ .show-delivery-container {
  display: block;
}

.checkout-page .delivery-address #show-delivery:checked ~ #show-delivery-label {
  display: none;
}

.checkout-page .delivery-address #show-delivery:checked ~ #show-delivery-close {
  display: block;
}

.checkout-page .delivery-address #show-delivery:checked ~ #show-delivery-label {
  display: none;
}

.checkout-page .checkout-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--base-padding);
}

.checkout-page .checkout-container .form-block {
  margin-bottom: 0;
}

.checkout-page .pickup-location-container {
  display: flex;
  flex-wrap: wrap;
}

.checkout-page .pickup-location-container .pickup-location {
  cursor: pointer;
  min-width: 250px;
  max-width: 400px;
  padding: 16px;
  margin-right: 4px;
  margin-bottom: 4px;
  border: 1px solid var(--background-primary);
}

.checkout-page .pickup-location-container .pickup-location.selected {
  background: var(--background-secondary);
}

.show-notes {
  display: grid;
  position: relative;
  align-items: left;
}

.show-notes label#show-note-label,
.show-notes label#show-note-close {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  width: 100%;
}

.show-notes i {
  font-size: var(--h1);
  color: var(--background-secondary);
  margin: 0.2em 0.3em;
}

@media (min-width: 1024px) {
  .show-notes i {
    margin: 0.4em 0.3em;
  }
}

.show-notes label:hover i {
  color: var(--color-inverse);
}

.show-notes .remark-container,
.show-notes #show-note-close {
  display: none;
}

.show-notes #show-note-label {
  display: block;
}

.show-notes #show-note {
  display: none;
}

.show-notes #show-note:checked ~ .remark-container {
  display: block;
}

.show-notes #show-note:checked ~ #show-note-label {
  display: none;
}

.show-notes #show-note:checked ~ #show-note-close {
  display: block;
}

.show-notes #show-note:checked ~ #show-note-label {
  display: none;
}

.checkout-buttons {
  display: grid;
  gap: var(--base-padding);
  padding: var(--base-padding);
}

.checkout-buttons input {
  height: auto;
}

@media (min-width: 750px) {
  .checkout-buttons {
    display: flex;
    justify-content: space-between;
  }
}

.payment-options label {
  display: inline-block;
  padding: 0.5em;
}

.payment-options input[type=radio] {
  /* remove standard background appearance... */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radio button appearance */
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  background-clip: content-box;
  border: 1px solid var(--color-inverse);
  border-radius: 50%;
  margin-right: 0;
}

.payment-options input[type=radio]:checked {
  background-color: var(--color-inverse);
}

.order-overview .form-block {
  margin: var(--base-padding) 0;
  display: grid;
  gap: var(--base-padding);
  grid-template-columns: auto 1fr auto;
}

.order-overview .form-block .btn,
.order-overview .form-block .pagination .page-link,
.pagination .order-overview .form-block .page-link {
  height: -moz-min-content;
  height: min-content;
  padding: 0.4em 1em;
}

.order-overview .form-block .btn .details-text,
.order-overview .form-block .pagination .page-link .details-text,
.pagination .order-overview .form-block .page-link .details-text {
  display: none;
}

@media (min-width: 400px) {
  .order-overview .form-block .btn .details-text,
  .order-overview .form-block .pagination .page-link .details-text,
  .pagination .order-overview .form-block .page-link .details-text {
    display: inline-block;
  }
}

.shopping-cart-menu {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--base-padding);
}

.shopping-cart {
  margin-top: var(--base-padding);
  font-size: 0.8em;
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto;
  grid-template-rows: 1fr 1fr;
  grid-gap: var(--base-padding);
  background-color: var(--shade-darker);
  padding: var(--base-padding);
  justify-content: center;
  align-items: center;
}

.shopping-cart .shopping-cart__image {
  grid-row: span 2;
  align-self: start;
}

.shopping-cart .shopping-cart__image img {
  width: 100%;
}

.shopping-cart .amount {
  text-align: center;
  display: inline-block;
  width: 45px;
}

.shopping-cart .reference {
  display: none;
}

.shopping-cart .shopping-cart__article {
  grid-column: span 4;
  align-self: top;
}

.shopping-cart .shopping-cart__article .shopping-cart__artist {
  color: var(--color-inverse);
}

.shopping-cart .shopping-cart__article .shopping-cart__title {
  color: var(--color-lighter);
}

.shopping-cart .shopping-cart__format {
  text-align: right;
}

.shopping-cart .shopping-cart__number .btn,
.shopping-cart .shopping-cart__number .pagination .page-link,
.pagination .shopping-cart .shopping-cart__number .page-link {
  padding: 0.4em 0.4em;
}

@media (min-width: 600px) {
  .shopping-cart {
    grid-template-columns: 80px 1fr repeat(5, auto);
    grid-template-rows: 1fr;
  }

  .shopping-cart .shopping-cart__image {
    grid-row: span 1;
  }

  .shopping-cart .shopping-cart__article {
    grid-column: span 1;
  }

  .shopping-cart .amount {
    width: 60px;
  }

  .shopping-cart .reference {
    display: block;
    position: relative;
    top: -10px;
  }
}

a.shopping-cart--submit {
  max-width: -moz-max-content;
  max-width: max-content;
  justify-self: right;
}

.shoppingcart-table {
  width: 100%;
  border: 1px solid var(--background-primary);
  border-collapse: collapse;
}

.shoppingcart-table thead th {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--background-primary);
}

.shoppingcart-table td {
  padding: 8px;
}

.shoppingcart-table .product {
  width: 80%;
}

.shoppingcart-table .amount {
  white-space: nowrap;
}

.shoppingcart-table form {
  margin: 0;
  padding: 0;
}

.shopping-cart__empty {
  display: flex;
  padding: var(--base-padding);
  text-align: center;
  justify-content: center;
}

.shopping-cart__empty > div {
  max-width: 400px;
}

.shopping-cart__empty p {
  color: grey;
}

.shopping-cart__empty i.fa-shopping-cart {
  font-family: "fontawesome";
  font-size: 6em;
}

.shopping-cart__empty a.btn,
.shopping-cart__empty .pagination a.page-link,
.pagination .shopping-cart__empty a.page-link {
  margin-top: var(--base-padding);
  display: block;
}

.shopping-cart__empty a.home-link {
  color: var(--text-primary);
}

@media (min-width: 800px) {
  .login-page-container {
    height: 100%;
    display: grid;
    grid-gap: 0.5em;
    align-items: center;
    justify-content: center;
  }
}

.login-page-container .login-menu-form {
  border-radius: var(--border-radius);
}

.login-menu-form {
  width: 100%;
  display: block;
  padding: var(--base-padding);
}

@media (min-width: 800px) {
  .login-menu-form {
    max-width: 500px;
    width: 500px;
  }
}

.login-menu-form label {
  display: block;
}

.login-menu-form .form-check {
  display: flex;
  font-size: 0.9em;
  align-items: center;
}

.login-menu-form .btn,
.login-menu-form .pagination .page-link,
.pagination .login-menu-form .page-link {
  position: relative;
  font-size: var(--base-size);
  border-radius: var(--border-radius);
  height: initial;
  width: initial;
  width: 100%;
}

.login-menu-form .login-menu-form__buttons {
  text-align: center;
}

.login-menu-form .request-password {
  color: var(--text-primary);
  font-size: 0.8em;
  margin-top: var(--base-padding);
  display: block;
}

.login-menu-form input#email,
.login-menu-form input#password {
  width: 100%;
  max-width: inherit;
}

.login-menu-form .invalid-feedback {
  font-size: 0.8em;
  margin: 0 0 0 1em;
  color: var(--text-primary-inverse);
}

@media (min-width: 1024px) {
  .login-menu-form #email,
  .login-menu-form #password {
    width: 300px;
  }
}

main .categories-title {
  font-size: var(--h3);
}

.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  grid-gap: 1em;
  margin: 1em 0;
}

.categories li {
  display: grid;
  text-align: center;
}

.categories li .total-items {
  color: var(--color-primary);
  background-color: var(--shade-normal);
  margin: 0 auto;
}

.categories .article {
  grid-template-columns: 1fr;
}

@media (min-width: 750px) {
  .categories {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 2.5em;
  }

  .categories.min-results {
    grid-template-columns: repeat(auto-fit, minmax(150px, 300px));
  }

  .article {
    grid-template-columns: 25% 1fr;
  }
}

.more-products {
  padding: var(--base-padding);
}

.more-products a {
  text-decoration: none;
}

.page-not-found {
  display: grid;
  align: center;
  justify-content: center;
  grid-template-columns: 1fr;
  text-align: center;
  gap: 2em;
  margin-bottom: 2em;
}

.page-not-found h1 {
  font-size: 4em;
  font-weight: bold;
  margin-top: 1em;
}

.page-not-found h4 {
  margin-top: 1em;
}

.page-not-found .page-not-found--image {
  height: 25vw;
  background-image: url("/images/404-record.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: auto;
}

.back-order-report h2 {
  margin: 1em 0;
}

.back-order-report h3 {
  margin: 1em 0;
}

.back-order-report table {
  width: 100%;
  border-collapse: collapse;
}

.back-order-report table th {
  background-color: #f5f5f5;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  padding: 10px 20px;
}

.back-order-report table tr {
  border-bottom: 1px solid #f5f5f5;
}

.back-order-report table tr:last-child {
  border-bottom: none;
}

.back-order-report table tr td {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.back-order-report table tr .col-date {
  width: 10em;
}

.back-order-report table tr .col-itemid {
  width: 7em;
}

.back-order-report table tr .col-title {
  width: 14em;
  text-align: left;
}

.back-order-report table tr .col-qty {
  width: 7em;
  text-align: center;
}

.back-order-report table tr .col-price {
  width: 7em;
  text-align: right;
}

.back-order-report table tr .col-ref {
  width: 7em;
}

.back-order-report table tr .col-reason {
  width: 7em;
  text-align: center;
}

/* extra */

.my-tabs {
  display: flex;
  padding: 0;
  margin: 0;
}

.my-tabs > * {
  border: 3px solid var(--background-secondary);
  border-bottom: none;
  padding: 8px 16px;
  list-style: none;
  display: block;
  cursor: pointer;
}

.my-tabs .active {
  background: var(--background-secondary);
}

.my-tabs-container .wrapper-heading {
  display: none;
}

.flux-styler {
  display: grid;
  grid-gap: 1em;
}

.flux-styler ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 10px;
  list-style: none;
}

.flux-styler li {
  margin: 10px;
}

.flux-styler [class*=box] {
  width: 200px;
  height: 70px;
  margin: 0 1em;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 1em;
}

.flux-styler .box:nth-child(1) {
  background: var(--color-inverse);
}

.flux-styler .box:nth-child(2) {
  background: var(--color-light);
}

.flux-styler .box:nth-child(3) {
  background: var(--color-normal);
}

.flux-styler .box:nth-child(4) {
  background: var(--color-darker);
}

.flux-styler .box:nth-child(5) {
  background: var(--shade-light);
}

.flux-styler .box:nth-child(6) {
  background: var(--shade-normal);
}

.flux-styler .box:nth-child(7) {
  background: var(--shade-darker);
}

.flux-styler .controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  padding: 2em;
}

.flux-styler .controls div {
  display: grid;
  gap: 1em;
  background-color: #ccc;
  padding: 0.5em;
}

.flux-styler .flux-style-examples {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin: 2em 0;
}

.flux-styler .flux-style-examples .example {
  border-radius: 30px;
  padding: 2em;
  max-width: 400px;
}

.flux-styler .flux-style-examples .example form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--base-padding);
  justify-content: flex-start;
  margin-bottom: var(--base-padding);
}

/*
  VSCode regions:
  - Fold all regions: CMD +k CMD + 8
  - Unfold all regions: CMD +k CMD + 9
  - Fold all       : <CMD> K <CMD> 0
  - Fold top level : <CMD> K <CMD> 1

*/

:root {
  --margin-right: var(--base-size);
  --header-margin: 0 0 1rem 2rem;
  --base-padding: var(--base-padding-mobile);
  --base-padding-desktop: 1em;
  --base-padding-mobile: 0.6em;
  --offset-top: var(--offset-top-padding-mobile);
  --offset-top-padding-desktop: 108px;
  --offset-top-padding-mobile: 56px;
  --site-margin-width: 0;
  --site-body-width: 100vw;
  --header-logo-width: 200px;
}

@media (min-width: 1024px) {
  :root {
    --header-margin: 0 0 1rem 8rem;
    --base-padding: var(--base-padding-desktop);
    --offset-top: var(--offset-top-padding-desktop);
    --site-margin-width: calc(var(--site-margin-width-double) / 2);
    --site-margin-width-double: calc(100vw - var(--site-body-width));
    --site-body-width: clamp(800px, 80vw, 1600px);
  }
}

@media (min-width: 1024px) and (min-width: 200px) {
  :root {
    --type-scale: 1.2;
  }
}

.site-container {
  margin: 0 var(--site-margin-width);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

.page-is-draft {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  border-bottom: 1px solid black;
  background: red;
  color: white;
  z-index: 10000;
}

body {
  line-height: 1.6;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.page-container .page-title {
  font-size: var(--h3);
}

div[page-block] > * {
  border-radius: var(--border-radius--large);
}

article.article .article__footer {
  display: none;
}

.flash-messages,
.app-signal {
  display: grid;
  grid-gap: var(--base-padding);
}

.flash-messages .message,
.flash-messages .alert,
.app-signal .message,
.app-signal .alert {
  padding: var(--base-padding);
  margin-bottom: var(--base-padding);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: var(--base-padding);
  border-radius: var(--border-radius);
  align-items: center;
}

.flash-messages .message i,
.flash-messages .alert i,
.app-signal .message i,
.app-signal .alert i {
  font-size: 3rem;
}

.flash-messages .alert-info,
.app-signal .alert-info {
  padding: var(--base-padding);
  background-color: var(--color-light);
  color: white;
}

.flash-messages .alert-warning,
.flash-messages .alert-danger,
.app-signal .alert-warning,
.app-signal .alert-danger {
  padding: var(--base-padding);
  background-color: var(--color-inverse);
  color: white;
}

.flash-messages .alert-success,
.app-signal .alert-success {
  padding: var(--base-padding);
  background-color: var(--color-contrast1);
  color: white;
}

.flash-messages .alert-error,
.app-signal .alert-error {
  padding: var(--base-padding);
  background-color: var(--color-contrast2);
  color: white;
}

h1.wrapper-heading {
  font-size: var(--h5);
  border-bottom: 1px solid white;
  padding: 0.2em;
  border-radius: 0;
}

@media (min-width: 700px) {
  h1.wrapper-heading {
    font-size: var(--h4);
  }
}

@media (min-width: 1024px) {
  h1.wrapper-heading {
    font-size: var(--h3);
  }
}

.pageheader {
  margin-bottom: var(--base-padding);
}

.sort-results {
  display: grid;
  text-align: left;
  margin: 0.5em 0;
}

.sort-results select {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 600px) {
  .sort-results {
    display: block;
    text-align: right;
    position: relative;
    top: 2em;
  }

  .sort-results select {
    width: auto;
    max-width: 14em;
  }
}

/**
 * @meta(['bundle:include:css' => true]);
 **/

.article-list {
  margin: 0.4em 0 var(--base-padding) 0;
}

.article-list .link:hover,
.article .link:hover {
  text-decoration: none;
}

.article-list .article__content .product-card__artist,
.article .article__content .product-card__artist {
  font-size: 1.2;
  color: var(--text-secondary);
}

.article-list .article__content .product-card__title,
.article .article__content .product-card__title {
  font-size: var(--base-size);
  color: var(--text-primary);
}

.article-list .article__content .mobile-article-details,
.article .article__content .mobile-article-details {
  color: var(--shade-light);
  font-size: 0.8em;
  display: flex;
  gap: var(--base-padding);
  margin-top: var(--base-padding-mobile);
  border-top: 1px solid var(--shade-normal);
  padding: 0.2em;
  align-items: center;
}

.article-list main,
.article main {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
}

@media (min-width: 750px) {
  .article-list main,
  .article main {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 2.5em;
  }

  .article-list main.min-results,
  .article main.min-results {
    grid-template-columns: repeat(auto-fit, 165px);
  }
}

.article-details__delivery-text {
  font-size: 0.8em;
  color: var(--shade-normal);
}

.article-details__delivery-text:before {
  font-family: fontawesome;
  content: "\F0D1";
  margin-right: 0.5em;
  color: var(--shade-light);
}

.article-list__description img,
.article-list__description iframe {
  max-width: 100%;
}

.article__content-group {
  align-self: flex-start;
}

.article-list .article__content-group {
  align-self: flex-end;
}

.article-details .article__content-group {
  align-self: flex-start;
}

.article-removed {
  color: var(--color-font-contrast);
  font-weight: bold;
  text-align: center;
}

.article-details {
  margin-bottom: 1em;
}

.article-details .article {
  grid-template-columns: 1fr;
  grid-gap: 1em;
}

@media (min-width: 750px) {
  .article-details .article {
    grid-template-columns: 300px 400px;
    grid-gap: 2em;
  }
}

.article-details .article .article__content .product-card__artist {
  font-size: var(--h5);
}

.article-details .article .article__content .product-card__title {
  font-size: var(--base-size);
}

.article-details .article .article-details__text {
  display: block;
  font-size: 0.9em;
}

.article-details .article .article-details__text:last-of-type {
  margin-bottom: 1em;
}

.article-details .article .article-details__delivery-text {
  margin: 1em 0;
}

.article {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-gap: 0.5em;
  margin: 0;
  padding: 0;
  background-color: var(--background-primary);
}

@media (min-width: 750px) {
  .article {
    grid-template-columns: 1fr;
  }
}

.article .article-details__text {
  display: none;
}

.article .article__image {
  padding: 0;
  position: relative;
  border-radius: var(--border-radius);
  background-size: cover;
  background-position: center;
}

.article .article-image__button-center,
.article .article-image__buttons-bottom,
.article .article__image--overlay {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease-in;
  z-index: 3;
}

.article .article__image:hover > .article-image__button-center,
.article .article__image:hover > .article-image__buttons-bottom {
  opacity: 70%;
  transition: opacity 0.3s ease-out;
}

.article .article__image > .article-image__button-center {
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 4.2rem;
  line-height: 0.8rem;
  color: var(--text-secondary);
  opacity: 0;
}

@media (min-width: 750px) {
  .article .article__image > .article-image__button-center {
    font-size: 5.2rem;
    line-height: 0.8rem;
  }
}

.article .article__image > .article-image__buttons-bottom {
  display: flex;
  justify-content: space-around;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--highlight-background-dark);
  color: var(--text-secondary);
  padding: 0.2em;
  font-size: 2em;
}

.article .article__image > .article-image__buttons-bottom:hover {
  color: var(--color-font-contrast);
}

.article .article__image:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.article .article__content {
  display: grid;
  padding: 0 0.3em;
}

.article .article__content a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.article .article__content .product-card__artist,
.article .article__content .product-card__title {
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 1.2em;
}

.article .article__content .product-card__artist {
  font-size: var(--base-size);
  margin: 0 0 0.05em 0;
  padding: 0;
  color: var(--text-secondary);
}

.article .article__content .product-card__title {
  font-size: var(--text-primary);
}

.article .article__footer {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  grid-row: 3;
  grid-column: 1;
}

.article .article__footer .article__order {
  border-top: 1px solid var(--color-border);
  display: grid;
  justify-content: start;
  align-items: center;
  grid-template-columns: auto 1fr auto;
}

.article .article__footer .article__order .article__medium {
  padding: 0.5em;
  color: var(--color-font-softer);
}

.article .article__footer .article__order .article__price {
  padding: 0.5em;
  text-align: right;
  border-left: 1px solid var(--color-border);
}

.article .article__footer .article__order .article__button {
  width: 6em;
  justify-self: flex-end;
}

.article .article__footer .article__order .article__button a {
  background-color: var(--background-secondary);
  padding: 0.5em;
  border-radius: var(--border-radius);
  color: var(--text-primary);
  display: block;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 700px) {
  .article .article__footer .article__order .article__button a .article__button-text {
    display: none;
  }
}

.article .article__footer .article__order .article__button a:hover {
  font-weight: bold;
}

.article .article__footer .article__order .article__button--disabled a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  background-color: var(--color-border);
}

@media (min-width: 700px) {
  .article .article__footer .article__order {
    grid-template-columns: auto 1fr;
  }

  .article .article__footer .article__order .article__button {
    grid-column: 1/3;
    max-width: 100%;
    width: 100%;
  }
}

.article .article__discount {
  display: block;
  text-align: center;
  z-index: 3;
  font-size: 0.6em;
  font-weight: bold;
  background-color: var(--color-contrast2);
  position: absolute;
  margin-top: 8px;
  margin-left: -10px;
  padding: 0.2em;
  color: var(--text-inverse);
}

@media (min-width: 500px) {
  .article .article__discount {
    font-size: 1.2em;
  }
}

.article .article__delivery-time.instock {
  color: var(--color-contrast);
}

.article .delayed {
  color: var(--color-important);
}

.article .article__delivery-time {
  margin-bottom: 0.5em;
  grid-column: 1/3;
  grid-row: 1;
  padding: 0.25em;
  color: var(--text-secondary);
  text-align: right;
}

@media (min-width: 700px) {
  .article .article__delivery-time {
    grid-row: 2;
    text-align: center;
  }
}

/* #region ribbons */

.ribbon-container {
  position: absolute;
  right: 0;
  top: 0;
  border: 3px solid green;
}

.ribbon {
  display: inline-block;
  border-radius: var(--border-radius);
  padding: 4px;
  font-size: 90%;
  background: var(--color-contrast);
  margin-bottom: 2px;
  margin-right: 2px;
  text-transform: uppercase;
  color: white;
  text-shadow: 2px 2px 3px #999;
}

/* #endregion ribbons */

.show-more-link {
  color: var(--text-primary);
}