.test {
    color: red;
}

:root {
  /* color-scheme */
  --base-hue-1: 360;
  --base-saturation-1: 99%;
  --base-luminance-1: 50%;

  /* color: hsl(360, 99%, 50%);
  color: hsl(180, 37%, 51%); */
  /* color: hsl(300, 100%, 10%); */

  /* --background-image: linear-gradient(to right, #222 0%, black 100%); */

  /* logo */
  --header-logo-image: url('/env/images/shinybeast_logo.png');
  --header-logo-width: 13vw;

  /* font sizes */
  --base-size: 16px;
  --type-scale: 1.2;
  --my-font-family-normal: sans-serif;
  --my-font-family-special: helvetica, arial;


  /* padding and margins */
  /* --site-body-width: clamp(800px, 80vw, 1600px); */

  /* borders */
  --border-radius: 4px;
  --border-radius--large: 9px;


  /* colors */
  /* --text-primary: black;
  --text-primary-inverse: white; // cloud be calculated hsla */

}




/* @font-face {
  font-family: "mexcellent";
  font-style: normal;
  font-weight: normal;
  src: url("/env/fonts/mexcellent/mexcellent_rg.otf") format("opentype");
}
bottom-footer main
@font-face {
  font-family: "noto_sans";
  font-style: normal;
  font-weight: normal;
  src: url("/env/fonts/noto_sans/NotoSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "noto_sans";
  font-style: italic;
  font-weight: normal;
  src: url("/env/fonts/noto_sans/NotoSans-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "noto_sans";
  font-style: normal;
  font-weight: bold;
  src: url("/env/fonts/noto_sans/NotoSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "noto_sans";
  font-style: italic;
  font-weight: bold;
  src: url("/env/fonts/noto_sans/NotoSans-BoldItalic.ttf") format("truetype");
} */

/*
  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 {
    --clearred : hsl(0, 90%, 49%);
    --clearblack: #222;
    --cleargrey: #f4f4f4;
    --background-primary: white;
    --background-secondary: var(--clearblack);
    --text-primary: var(--clearblack);
    --text-secondary: white;
    --color-contrast: var(--clearred);
    --color-inverse: var(--color-contrast);
    --text-primary-inverse: var(--clearred);

    --button-background:var(--clearred);
    --button-text:var(--text-secondary);
    --input-text:var(--text-primary);
    --link-text: var(--color-contrast);

    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);

    /* background: url(https://cdn.wallpapersafari.com/30/69/75JpaY.jpg);
    background-repeat: repeat-y;
    background-size: contain; */
}

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

.block--grey {
    --background-primary: var(--cleargrey);
    --background-secondary: white;
    --text-secondary: black;
    --color-contrast: var(--clearred);
    background-color: var(--background-primary);
    color: var(--text-primary);
}

.mobile-header {
  --background-primary: white;
  --button-background:#222;
  --text-primary: #222;
  --button-text: var(--text-secondary);
  /* --text-primary: white; */
  --text-secondary: white;
  color: var(--text-primary);

}

.mobile-header--background {
  --background-primary : white;
  background-color: var(--background-primary);
  border: 1px dotted black;
}

.article,
.block--transparent {
  --text-secondary: var(--clearred);
  --color-contrast: var(--clearred);
}



/* Show hide content different sites*/
.shinybeast .hide-shinybeast,
.shinybeast .show-clearspot {
  display: none;
}
.clearspot .hide-clearspot,
.clearspot .show-shinybeast {
  display: none;
}

.pill, .categories li .total-items {
    color: var(--clearblack);
    background-color: white;
    border: 1px solid var(--text-primary);
}

h1 .pill {
    font-size: 0.7em;
}

#mobile-menu {
    background-color: white;
    --text-primary: var(--clearblack);
}

#mobile-search {
    background-color: white;
    --text-primary: var(--clearblack);
    --color-border: var(--clearblack);
    border-bottom: 1px solid var(--clearblack);
}

#mobile-search-input {
    max-width: 100%;
}

#mobile-search button {
    background-color: red;
    --button-text: white;
}
/* #mobile-menu .main-menu-buttons {
    --button-background: white;
    --button-text: var(--clearblack);
    --link-text: var(--clearblack);  
} */

.main-menu-buttons {
  --button-background: var(--background-primary);
  --button-text: var(--text-primary);
  --link-text: var(--text-primary);
}

#desktop-menu ul.main-menu-buttons a:hover, #desktop-menu ul.main-menu-links a:hover {
    --button-text: var(--clearred);
    color: var(--clearred);
}
.main-menu-buttons .btn {
    padding: 0.4em .4em;
    white-space: nowrap;
}

.count
{
  background-color: var(--background-secondary);
  --text-secondary: var(--color-darker);
  --color-contrast: var(--color-important);

}

#desktop-search {
    /* margin-right: 1em; */
}

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

#desktop-search button {
  /* display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  justify-self: flex-end; */
  position: relative;
  right: 33px;
  border-radius: 3px 50px 50px 3px;
  background-color: none;
  color: white;
}



h1.wrapper-heading {
  border-bottom: 1px dotted #222;
  padding: 0.2em 0;
}

.article-details__delivery-text {
  color: #a6a6a6;
}

.bottom-footer main {
  background-color: #222;
}

.footer .footer__content-block p.contrast {
  color: var(--color-contrast);
}

.footer input{
  color: var(--color-contrast);
  background-color: var(--background-primary);
  border: 1px solid black;
}

.footer button{
  color: white;
  background-color: var(--color-contrast);
  border: 1px solid var(--color-contrast);
}

.footer .customer-service a {
    color: var(--text-primary);
}

.article__image {
    border-radius: var(--border-radius);
    background-color: var(--cleargrey);
}

.article__image--overlay i {
    color: black;
}

.track-listing__container {
    background-color: var(--clearblack);
    opacity: 90%;
    /* border-radius: var(--border-radius--large); */

    /* 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*/
.track-listing__container > * {
    max-width: var(--site-body-width); 
    margin: 0 2em;
    padding: var(--base-padding);
}

.track-listing__container > h4 {
    color: var(--text-secondary);
    border: 0;
    /* font-size: 3em; */
    /* font-weight: bold; */
}

.track-listing .disk, .track-listing .disk .important {
    background-color: transparent;
    color: var(--text-secondary);
}

.categories {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 2em;
}

.categories .article__image {
    border-radius: 100%;
    border: 1px solid rgb(236, 236, 236);
    background-color: rgb(236, 236, 236);
}


.pagination {
    --button-text: var(--text-secondary);
    --button-background: var(--clearblack);
}

.pagination li {
    margin: 0 1px;
}

.product-detail form {
    padding: .5em;
    /* background-color: #efefef; */
    border-radius: var(--border-radius);
    border: 1px dotted #222;
}

.product-detail img {
    border-radius: var(--border-radius--large);
}

.product-detail form a {
    color: var(--text-primary);
}

.product-detail input.amount {
    color: var(--text-primary);
    background-color: var(--background-primary);
    border: 1px solid black;
}


select, textarea, input {
    --background-secondary: white;
    --input-text: var(--text-primary);
    border: 1px solid var(--clearblack);
    border-radius: var(--border-radius);
}

.login-menu-form {
    --text-primary: var(--clearblack);
    --background-primary: white;
    --input-text: var(--text-primary);
    border: 1px dotted var(--clearblack);
}

.login-menu-form button {
    background-color: var(--clearred);
}

/* .article-list {
    border: 1px dotted #222;
    padding: 1em;
    border-radius: var(--border-radius--large);
} */


.shopping-cart {
    background-color: white;
    border: 1px solid var(--clearblack);
    border-radius: var(--border-radius--large);
}

.shopping-cart .shopping-cart__number .important {
    background-color: white;
    color: var(--clearblack);
    border: 1px solid var(--clearblack);
}

.form-block {
    border: 1px dotted var(--clearblack);
    border-radius: var(--border-radius--large);
}

.form-block h4, .form-block h3 {
    color: var(--text-primary);
}

.form-block th {
    color: var(--text-primary);
    /* border-bottom: 1px solid var(--clearblack); */
    font-weight: bold;
}

.shopping-cart--submit, .checkout-buttons input {
    font-size: 1.1em;
}

.article .article-price {
    color: var(--clearblack);
}