.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/clearspot_red.svg');
  --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(--cleargrey);
    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-primary);
    border: 0;
    /* font-size: 3em; */
    /* font-weight: bold; */
}

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

.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;
}

.order-overview .heading {
    font-weight: bold;
    border-bottom: 1px dotted var(--clearblack);
}

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

.article .article__image {
    border-radius: var(--border-radius--large);
}

.product-card__artist, .product-card__title {
    text-transform: uppercase;
}

.article.article .article__content .product-card__artist {
    font-size: 0.9em;
}

.article .article__content .product-card__title {
    font-size: 0.8em;
}

.article .article__content .article-details__delivery-text {
    font-size: 0.7em;
}

.pageheader__title {
    text-transform: uppercase;
}