/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* brand colour palette */
.b-red {
  background-color: #e63c2e; }

.b-yellow {
  background-color: #f6a704; }

.b-green {
  background-color: #09b775; }

.b-purple {
  background-color: #bc60d0; }

.b-blue {
  background-color: #1cb5ca; }

.b-pink {
  background-color: #f97eb5; }

/* urls to assets hosted by Shopify */
/* nth-*color(): applies the brand colours in order to this selector based on nth-of-type() */
/* button-color*(): applies the brand colours to buttons consistently */
/* common styles and resets */
body {
  margin: 0; }

body, html, button, input, select, textarea, .pure-g [class*="pure-u"] {
  font-family: "Roboto", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif !important;
  font-display: optional;
  font-weight: 400;
  color: #4d4c4d;
  font-size: 12pt; }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

a {
  text-decoration: none;
  color: #4d4c4d;
  font-weight: 700; }
  a:hover {
    text-decoration: underline; }

p a {
  text-decoration: underline; }

p, li {
  line-height: 135%; }

h1, h2, h3 {
  color: #4d4c4d;
  line-height: 115%; }

h1 {
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: -1px;
  margin: 0 0 0.15em 0; }

h2 {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  margin: 0 0 0.5em 0; }

h3 {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.25px;
  margin: 0 0 0.5em 0; }

hr {
  background-color: #9a989a;
  border: 0;
  height: 3px;
  margin: 1em 0; }

img {
  image-rendering: -webkit-optimize-contrast; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

body > div {
  display: grid;
  grid-template-columns: minmax(20px, auto) minmax(0, 1280px) minmax(20px, auto);
  grid-gap: 10px 0;
  height: auto; }

/* mobile overrides for common styles */
@media screen and (max-width: 1023px) {
  h1 {
    font-size: 1.5rem;
    margin: 0 0 0.5em 0; }

  h2 {
    font-size: 1.35rem;
    margin: 0 0 0.25em 0; }

  h3 {
    font-size: 1.2rem; }

  body > div {
    grid-template-columns: minmax(10px, auto) minmax(0, 1280px) minmax(10px, auto); }

  button, a.button {
    padding: 3px 6px 0px 6px !important; }
    button.adjust-quantity, a.button.adjust-quantity {
      padding: 8px 10px !important; }

  #description_content {
    grid-template-columns: 1fr !important; } }
/* buttons */
button, a.button {
  border: 0;
  border-bottom: solid 3px rgba(0, 0, 0, 0.2);
  position: relative;
  outline: none;
  transition: all 0.3s ease;
  display: inline-block;
  line-height: 150%;
  border-radius: 3px;
  cursor: pointer;
  color: white;
  font-weight: 700;
  padding: 6px 13px 3px 13px;
  vertical-align: middle;
  text-transform: uppercase;
  color: #9a989a;
  background-color: rgba(154, 152, 154, 0.15);
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  background-position: center center;
  background-repeat: no-repeat; }
  button span.super, a.button span.super {
    position: absolute;
    top: -8px;
    right: -5px;
    text-align: center;
    border-radius: 5px;
    padding: 1px 4px 0 4px;
    line-height: 120%;
    color: #09b775;
    border: solid 2px #09b775;
    background-color: white;
    font-weight: 700;
    font-size: 0.75rem;
    display: inline-block; }
  button.pre-order span.super, a.button.pre-order span.super {
    color: #1cb5ca;
    border: solid 2px #1cb5ca; }
  button > img, a.button > img {
    display: block; }
  button:disabled, a.button:disabled {
    opacity: 0.5; }
  button.large, a.button.large {
    padding: 0.8em;
    font-size: 1.25em;
    display: block;
    width: 100%; }
  button.page, button.wishlist, a.button.page, a.button.wishlist {
    color: white !important;
    background-color: #9a989a;
    border-bottom: solid 1px rgba(154, 152, 154, 0.35) !important;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button.page:hover, button.wishlist:hover, a.button.page:hover, a.button.wishlist:hover {
      background: #9a989a linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
      color: white !important;
      border-bottom: solid 1px #9a989a !important; }
  button.add-to-cart, button.view, a.button.add-to-cart, a.button.view {
    color: white !important;
    background-color: #09b775;
    border-bottom: solid 1px rgba(9, 183, 117, 0.35) !important;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button.add-to-cart:hover, button.view:hover, a.button.add-to-cart:hover, a.button.view:hover {
      background: #09b775 linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
      color: white !important;
      border-bottom: solid 1px #09b775 !important; }
  button.notify-me, a.button.notify-me {
    color: white !important;
    background-color: #f6a704;
    border-bottom: solid 1px rgba(246, 167, 4, 0.35) !important;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button.notify-me:hover, a.button.notify-me:hover {
      background: #f6a704 linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
      color: white !important;
      border-bottom: solid 1px #f6a704 !important; }
  button.page.active, button.create-account, button.login, button.contact, button.plus, a.button.page.active, a.button.create-account, a.button.login, a.button.contact, a.button.plus {
    color: white !important;
    background-color: #1cb5ca;
    border-bottom: solid 1px rgba(28, 181, 202, 0.35) !important;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button.page.active:hover, button.create-account:hover, button.login:hover, button.contact:hover, button.plus:hover, a.button.page.active:hover, a.button.create-account:hover, a.button.login:hover, a.button.contact:hover, a.button.plus:hover {
      background: #1cb5ca linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
      color: white !important;
      border-bottom: solid 1px #1cb5ca !important; }
  button.error, a.button.error {
    color: white !important;
    background-color: #e63c2e;
    border-bottom: solid 1px rgba(230, 60, 46, 0.35) !important;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button.error:hover, a.button.error:hover {
      background: #e63c2e linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
      color: white !important;
      border-bottom: solid 1px #e63c2e !important; }
  button.departments, a.button.departments {
    color: white !important;
    background-color: #9a989a;
    border-bottom: solid 1px rgba(154, 152, 154, 0.35) !important;
    text-shadow: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button.departments:hover, a.button.departments:hover {
      background: #9a989a linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
      color: white !important;
      border-bottom: solid 1px #9a989a !important; }
  button.checkout, a.button.checkout {
    color: white !important;
    background-color: #f6a704;
    border-bottom: solid 1px rgba(146, 99, 2, 0.5) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button.checkout:hover, a.button.checkout:hover {
      background: #f6a704 linear-gradient(360deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      color: white !important;
      border-bottom: solid 1px rgba(146, 99, 2, 0.35) !important; }
  button.checkout.large, a.button.checkout.large {
    color: white !important;
    background-color: #f6a704;
    border-bottom: solid 1px rgba(146, 99, 2, 0.5) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: white; }
    button.checkout.large:hover, a.button.checkout.large:hover {
      background: #f6a704 linear-gradient(360deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      color: white !important;
      border-bottom: solid 1px rgba(146, 99, 2, 0.35) !important; }
  button.add-to-cart.large, a.button.add-to-cart.large {
    color: white !important;
    background-color: #09b775;
    border-bottom: solid 1px rgba(4, 86, 55, 0.5) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: white; }
    button.add-to-cart.large:hover, a.button.add-to-cart.large:hover {
      background: #09b775 linear-gradient(360deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      color: white !important;
      border-bottom: solid 1px rgba(4, 86, 55, 0.35) !important; }
  button#cart_button, button.add-to-cart, a.button#cart_button, a.button.add-to-cart {
    color: white !important;
    background-color: #09b775;
    border-bottom: solid 1px rgba(4, 86, 55, 0.5) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: white; }
    button#cart_button:hover, button.add-to-cart:hover, a.button#cart_button:hover, a.button.add-to-cart:hover {
      background: #09b775 linear-gradient(360deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      color: white !important;
      border-bottom: solid 1px rgba(4, 86, 55, 0.35) !important; }
  button.pre-order, button#cart_button.pre-order, a.button.pre-order, a.button#cart_button.pre-order {
    color: white !important;
    background-color: #1cb5ca;
    border-bottom: solid 1px rgba(16, 101, 112, 0.5) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: white !important; }
    button.pre-order:hover, button#cart_button.pre-order:hover, a.button.pre-order:hover, a.button#cart_button.pre-order:hover {
      background: #1cb5ca linear-gradient(360deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      color: white !important;
      border-bottom: solid 1px rgba(16, 101, 112, 0.35) !important; }
  button#cart_button.processing, button.processing, a.button#cart_button.processing, a.button.processing {
    background-image: url("//cdn.shopify.com/s/files/1/0174/1800/t/87/assets/ripple.apng?v=289806049675317534") !important;
    color: transparent !important;
    background-color: #f0f0f0 !important;
    border-bottom: solid 1px #e0e0e0 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    button#cart_button.processing img, button.processing img, a.button#cart_button.processing img, a.button.processing img {
      visibility: hidden; }
  button.adjust-quantity, a.button.adjust-quantity {
    border-radius: 0;
    border: none;
    padding: 8px 10px;
    width: 30px;
    text-align: center; }
  button.add-to-wishlist, a.button.add-to-wishlist {
    border: 0;
    background-position: 0 0 !important; }
  button.notify-me input, a.button.notify-me input {
    border: 0;
    margin: -5px -15px -2px -13px;
    padding: 2px 5px;
    font-size: 15px;
    min-width: 15em; }
    button.notify-me input:focus, a.button.notify-me input:focus {
      outline: none; }

.message {
  display: block;
  margin: 10px 0;
  margin-block-end: 0;
  display: block;
  text-align: center;
  color: #9a989a;
  padding: 10px;
  background: white;
  font-weight: 700; }
  .message.yellow {
    color: #f6a704;
    border: solid 2px #f6a704; }
  .message.blue {
    color: #1cb5ca;
    border: solid 2px #1cb5ca; }
  .message.green {
    color: #09b775;
    border: solid 2px #09b775; }
  .message.red {
    color: #e63c2e;
    border: solid 2px #e63c2e; }
  .message.purple {
    color: #bc60d0;
    border: solid 2px #bc60d0; }
  .message.pink {
    color: #f97eb5;
    border: solid 2px #f97eb5; }
  .message > div {
    font-weight: 400;
    margin-top: 5px;
    color: #4d4c4d; }

#tabs {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: solid 1px #e0e0e0; }
  #tabs li, #tabs a {
    display: inline-block;
    border-top: solid 1px #e0e0e0;
    border-right: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
    margin: 0;
    padding: 10px 20px !important;
    background-color: #f5f5f5;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em;
    margin-top: 2px !important;
    padding-bottom: 8px !important;
    top: 1px !important;
    position: relative;
    margin-block-end: 0 !important; }
    #tabs li:first-of-type, #tabs a:first-of-type {
      border-left: solid 1px #e0e0e0; }
    #tabs li.active, #tabs a.active {
      background-color: white;
      border-bottom: solid 1px white; }

#tab_content {
  border-left: solid 1px #e0e0e0;
  border-right: solid 1px #e0e0e0;
  padding: 20px; }
  #tab_content p:first-of-type {
    margin-top: 0; }
  #tab_content > div {
    display: none; }

/* special classes for showing/hiding content on desktop vs mobile */
@media screen and (max-width: 1024px) {
  .desktop-only {
    display: none !important; } }
@media screen and (min-width: 1025px) {
  .mobile-only {
    display: none !important; } }
/*
  header elements
*/
/* brand menu, currency picker and customer account menu */
@media screen and (max-width: 1024px) {
  #brand_menu {
    grid-template-columns: auto auto !important; }
    #brand_menu > div {
      text-align: left !important; } }
#brand_menu {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  background-color: #f0f0f0; }
  #brand_menu > nav:first-child > a {
    padding: 10px 10px 10px 0;
    display: inline-block; }
    #brand_menu > nav:first-child > a:nth-of-type(6n+1) {
      color: #e63c2e; }
    #brand_menu > nav:first-child > a:nth-of-type(6n+2) {
      color: #1cb5ca; }
    #brand_menu > nav:first-child > a:nth-of-type(6n+3) {
      color: #f6a704; }
    #brand_menu > nav:first-child > a:nth-of-type(6n+4) {
      color: #09b775; }
    #brand_menu > nav:first-child > a:nth-of-type(6n+5) {
      color: #bc60d0; }
    #brand_menu > nav:first-child > a:nth-of-type(6n+6) {
      color: #f97eb5; }
  #brand_menu > div {
    padding: 5px 0; }
    #brand_menu > div a {
      padding: 5px 10px;
      display: inline-block;
      background-color: white; }
      #brand_menu > div a span {
        display: inline-block;
        position: relative;
        top: 2px;
        width: 24px;
        height: 16px;
        margin-right: 5px;
        background-image: url(//cdn.shopify.com/s/files/1/0174/1800/t/87/assets/flag-icons.png?v=17095830988206373260); }
      #brand_menu > div a[data-currency="USD"] span {
        background-position: -24px center; }
      #brand_menu > div a[data-currency="EUR"] span {
        background-position: -48px center; }
      #brand_menu > div a[data-currency="JPY"] span {
        background-position: -72px center; }
      #brand_menu > div a[data-currency="AUD"] span {
        background-position: -96px center; }
      #brand_menu > div a[data-currency="NOK"] span {
        background-position: -120px center; }
      #brand_menu > div a[data-currency="CHF"] span {
        background-position: -144px center; }
      #brand_menu > div a[data-currency="NZD"] span {
        background-position: -168px center; }
      #brand_menu > div a[data-currency="CAD"] span {
        background-position: -192px center; }
      #brand_menu > div a[data-currency="BTC"] span {
        background-position: -216px center; }
    #brand_menu > div #currencies {
      display: none;
      grid-template-columns: 1fr 1fr 1fr;
      width: 320px;
      z-index: 100000;
      position: absolute;
      background-color: white;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
      #brand_menu > div #currencies > a {
        padding: 15px 5px 15px 15px;
        display: block; }
        #brand_menu > div #currencies > a:hover {
          background-color: #f0f0f0;
          text-decoration: none; }
      #brand_menu > div #currencies > div {
        padding: 10px;
        grid-column-start: 1;
        grid-column-end: 4;
        background-color: #f6f6f6;
        font-size: 85%;
        text-align: center; }
        #brand_menu > div #currencies > div strong {
          display: block; }
  #brand_menu > nav:last-child {
    text-align: right; }
    #brand_menu > nav:last-child > a {
      padding: 10px 0 10px 10px;
      display: inline-block; }

/* benefits of shopping with Pimoroni */
#benefits {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px; }
  #benefits > a {
    display: block;
    padding: 6px;
    text-align: center;
    overflow: hidden; }
    #benefits > a:nth-of-type(6n+1) {
      background-color: rgba(230, 60, 46, 0.075); }
    #benefits > a:nth-of-type(6n+2) {
      background-color: rgba(28, 181, 202, 0.075); }
    #benefits > a:nth-of-type(6n+3) {
      background-color: rgba(246, 167, 4, 0.075); }
    #benefits > a:nth-of-type(6n+4) {
      background-color: rgba(9, 183, 117, 0.075); }
    #benefits > a:nth-of-type(6n+5) {
      background-color: rgba(188, 96, 208, 0.075); }
    #benefits > a:nth-of-type(6n+6) {
      background-color: rgba(249, 126, 181, 0.075); }
    #benefits > a:nth-of-type(6n+1) {
      color: #e63c2e; }
    #benefits > a:nth-of-type(6n+2) {
      color: #1cb5ca; }
    #benefits > a:nth-of-type(6n+3) {
      color: #f6a704; }
    #benefits > a:nth-of-type(6n+4) {
      color: #09b775; }
    #benefits > a:nth-of-type(6n+5) {
      color: #bc60d0; }
    #benefits > a:nth-of-type(6n+6) {
      color: #f97eb5; }
    #benefits > a:hover {
      text-decoration: none; }
    #benefits > a span {
      display: block; }
      #benefits > a span:first-child {
        text-transform: uppercase;
        font-weight: 700; }
      #benefits > a span:last-child {
        margin-top: 0px;
        font-size: 85%;
        font-weight: 400; }

@media screen and (max-width: 1024px) {
  .benefits-container {
    display: none; } }
/* image and text banners */
#banners {
  margin: 0;
  text-align: center; }
  #banners img {
    width: 100%;
    display: block; }
  #banners picture {
    width: 100%;
    display: block; }
  #banners > div {
    max-width: 1280px;
    margin: 0 auto; }
  #banners #text_banner {
    color: white;
    text-align: center;
    padding: 5px 20px;
    box-sizing: border-box; }

/* logo, search, and cart summary */
#logo_search_cart {
  display: grid;
  grid-gap: 10%;
  align-items: end;
  grid-template-columns: auto 1fr auto;
  background-color: white;
  z-index: 10000;
  padding: 10px;
  margin: -10px; }
  #logo_search_cart > a:first-child {
    text-align: left; }
    #logo_search_cart > a:first-child img {
      max-width: 100%;
      height: 40px;
      max-height: 40px;
      display: block; }
  #logo_search_cart form {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    width: 100%; }
    #logo_search_cart form fieldset {
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2); }
      #logo_search_cart form fieldset #search_input {
        padding: 10px 10px 10px 10px;
        width: 100%;
        background-color: transparent;
        box-sizing: border-box;
        border: 0; }
        #logo_search_cart form fieldset #search_input:focus {
          outline: none; }
      #logo_search_cart form fieldset input[type="submit"] {
        background: #1cb5ca;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        border: 0;
        background-image: url(//cdn.shopify.com/s/files/1/0174/1800/t/87/assets/search-icon.png?v=12804864055385260612);
        background-position: center center;
        background-repeat: no-repeat;
        min-width: 36px; }
  #logo_search_cart > div:last-child {
    display: grid;
    align-items: end;
    grid-template-columns: 1fr auto;
    grid-gap: 5px;
    text-align: right; }
    #logo_search_cart > div:last-child .button.checkout {
      overflow: visible;
      padding: 0 5px;
      margin-bottom: -3px;
      margin-left: 10px; }
      #logo_search_cart > div:last-child .button.checkout span {
        color: #f6a704;
        border: solid 2px #f6a704; }
    #logo_search_cart > div:last-child > div > div {
      font-weight: 700;
      line-height: 70%;
      font-size: 130%; }
    #logo_search_cart > div:last-child a {
      color: #1cb5ca;
      font-size: 85%; }

.shadow {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); }

@media screen and (max-width: 1024px) {
  #logo_search_cart {
    grid-template-columns: auto auto !important;
    grid-gap: 10px !important; }
    #logo_search_cart > form {
      order: 4;
      grid-column-start: 1;
      grid-column-end: 3;
      grid-template-columns: auto 1fr !important; } }
@media screen and (max-width: 1200px) {
  #menu > div:first-child a {
    font-size: 100% !important;
    padding: 7px 8px 5px 8px !important; } }
/* main navigation menu */
#menu {
  margin: 0 -5px; }
  #menu > div:first-child {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    border-radius: 5px;
    overflow: hidden; }
    #menu > div:first-child a {
      color: white;
      display: inline-block;
      padding: 8px 8px 6px 8px;
      text-align: center;
      text-transform: uppercase;
      font-weight: 700;
      white-space: nowrap;
      font-size: 110%;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
      flex-grow: 1;
      border-bottom: solid 3px rgba(0, 0, 0, 0.1); }
      #menu > div:first-child a:nth-of-type(6n+1) {
        background-color: #e63c2e; }
      #menu > div:first-child a:nth-of-type(6n+2) {
        background-color: #1cb5ca; }
      #menu > div:first-child a:nth-of-type(6n+3) {
        background-color: #f6a704; }
      #menu > div:first-child a:nth-of-type(6n+4) {
        background-color: #09b775; }
      #menu > div:first-child a:nth-of-type(6n+5) {
        background-color: #bc60d0; }
      #menu > div:first-child a:nth-of-type(6n+6) {
        background-color: #f97eb5; }
  #menu > div:last-child {
    display: flex;
    padding: 5px 0;
    margin: 0 5px;
    overflow: hidden;
    background: linear-gradient(360deg, #f0f0f0 0%, white 100%);
    box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.2); }
    #menu > div:last-child a {
      display: inline-block;
      padding: 0px 8px;
      font-size: 95%;
      white-space: nowrap;
      font-weight: 300;
      border-right: solid 1px #e0e0e0; }

@media screen and (max-width: 1024px) {
  #menu > div:first-child a {
    flex: 1;
    flex-basis: 100%;
    padding: 15px 10px !important; }
  #menu > div:first-child > span {
    display: none !important; }
  #menu #department_list a:nth-last-of-type(2) {
    order: -2 !important; } }
/* footer */
footer {
  background: linear-gradient(360deg, #594c59 0%, #343334 100%);
  padding-top: 10px;
  padding-bottom: 100px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr; }
  footer > div {
    padding: 10px; }
    footer > div:nth-of-type(6n+1) {
      background-color: rgba(230, 60, 46, 0.2); }
    footer > div:nth-of-type(6n+2) {
      background-color: rgba(28, 181, 202, 0.2); }
    footer > div:nth-of-type(6n+3) {
      background-color: rgba(246, 167, 4, 0.2); }
    footer > div:nth-of-type(6n+4) {
      background-color: rgba(9, 183, 117, 0.2); }
    footer > div:nth-of-type(6n+5) {
      background-color: rgba(188, 96, 208, 0.2); }
    footer > div:nth-of-type(6n+6) {
      background-color: rgba(249, 126, 181, 0.2); }
    footer > div:nth-of-type(6n+1) {
      color: #e63c2e; }
    footer > div:nth-of-type(6n+2) {
      color: #1cb5ca; }
    footer > div:nth-of-type(6n+3) {
      color: #f6a704; }
    footer > div:nth-of-type(6n+4) {
      color: #09b775; }
    footer > div:nth-of-type(6n+5) {
      color: #bc60d0; }
    footer > div:nth-of-type(6n+6) {
      color: #f97eb5; }
    footer > div h2 {
      text-transform: uppercase;
      font-size: 110%;
      font-weight: 700;
      color: white; }
    footer > div ul {
      margin: 0;
      padding: 0;
      line-height: 130%; }
      footer > div ul li a {
        color: inherit; }
    footer > div:last-child {
      grid-column: 1 / 5;
      text-align: center;
      padding: 10px;
      font-size: 85%; }
      footer > div:last-child span {
        display: inline-block;
        white-space: nowrap;
        margin: 0 5px; }

@media screen and (max-width: 1023px) {
  footer {
    grid-template-columns: 1fr !important; }
    footer > div {
      grid-column: 1 !important; } }
/*
  content pages
*/
/* homepage */
#home > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px; }
  #home > div article {
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    position: relative;
    padding-bottom: 100%; }
    #home > div article:nth-of-type(6n+1) {
      background-color: #e63c2e; }
    #home > div article:nth-of-type(6n+2) {
      background-color: #1cb5ca; }
    #home > div article:nth-of-type(6n+3) {
      background-color: #f6a704; }
    #home > div article:nth-of-type(6n+4) {
      background-color: #09b775; }
    #home > div article:nth-of-type(6n+5) {
      background-color: #bc60d0; }
    #home > div article:nth-of-type(6n+6) {
      background-color: #f97eb5; }
    #home > div article:nth-of-type(6n+1) {
      color: #e63c2e; }
    #home > div article:nth-of-type(6n+2) {
      color: #1cb5ca; }
    #home > div article:nth-of-type(6n+3) {
      color: #f6a704; }
    #home > div article:nth-of-type(6n+4) {
      color: #09b775; }
    #home > div article:nth-of-type(6n+5) {
      color: #bc60d0; }
    #home > div article:nth-of-type(6n+6) {
      color: #f97eb5; }
    #home > div article > a:nth-of-type(1) {
      display: block;
      height: 100%;
      width: 100%;
      padding: 10px;
      position: absolute;
      box-sizing: border-box; }
      #home > div article > a:nth-of-type(1):hover {
        text-decoration: none; }
      #home > div article > a:nth-of-type(1) > div {
        padding: 0;
        border-radius: 0px;
        color: white; }
        #home > div article > a:nth-of-type(1) > div h2 {
          display: inline-block;
          padding: 6px 10px 5px 10px;
          font-size: 150%;
          font-weight: 700;
          text-transform: uppercase;
          color: white;
          margin: 0;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
        #home > div article > a:nth-of-type(1) > div p {
          margin: 0;
          padding: 6px 10px;
          font-weight: 400;
          display: inline-block;
          background-color: white;
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
    #home > div article a:nth-of-type(2) {
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      background-color: inherit;
      font-weight: 400;
      position: absolute;
      right: -5px;
      bottom: 10px;
      border-radius: 0px;
      color: white;
      padding: 6px 15px 6px 10px;
      display: inline-block; }
      #home > div article a:nth-of-type(2) span {
        font-size: 80%; }
    #home > div article:nth-of-type(1) {
      grid-column: 1 / 3;
      padding-bottom: calc(50% - 5px); }
    #home > div article:nth-of-type(5) {
      grid-column: 2 / 4;
      padding-bottom: calc(50% - 5px); }
    #home > div article:nth-of-type(9) {
      grid-column: 3 / 5;
      padding-bottom: calc(50% - 5px); }
#home article:nth-of-type(6n+1) > a:nth-of-type(1) {
  /*@include home-box-gradient($red);*/ }
  #home article:nth-of-type(6n+1) > a:nth-of-type(1) h2 {
    background-color: #e63c2e; }
  #home article:nth-of-type(6n+1) > a:nth-of-type(1) p {
    color: #e63c2e; }
#home article:nth-of-type(6n+2) > a:nth-of-type(1) {
  /*@include home-box-gradient($blue);*/ }
  #home article:nth-of-type(6n+2) > a:nth-of-type(1) h2 {
    background-color: #1cb5ca; }
  #home article:nth-of-type(6n+2) > a:nth-of-type(1) p {
    color: #1cb5ca; }
#home article:nth-of-type(6n+3) > a:nth-of-type(1) {
  /*@include home-box-gradient($yellow);*/ }
  #home article:nth-of-type(6n+3) > a:nth-of-type(1) h2 {
    background-color: #f6a704; }
  #home article:nth-of-type(6n+3) > a:nth-of-type(1) p {
    color: #f6a704; }
#home article:nth-of-type(6n+4) > a:nth-of-type(1) {
  /*@include home-box-gradient($green);*/ }
  #home article:nth-of-type(6n+4) > a:nth-of-type(1) h2 {
    background-color: #09b775; }
  #home article:nth-of-type(6n+4) > a:nth-of-type(1) p {
    color: #09b775; }
#home article:nth-of-type(6n+5) > a:nth-of-type(1) {
  /*@include home-box-gradient($purple);*/ }
  #home article:nth-of-type(6n+5) > a:nth-of-type(1) h2 {
    background-color: #bc60d0; }
  #home article:nth-of-type(6n+5) > a:nth-of-type(1) p {
    color: #bc60d0; }
#home article:nth-of-type(6n+6) > a:nth-of-type(1) {
  /*@include home-box-gradient($pink);*/ }
  #home article:nth-of-type(6n+6) > a:nth-of-type(1) h2 {
    background-color: #f97eb5; }
  #home article:nth-of-type(6n+6) > a:nth-of-type(1) p {
    color: #f97eb5; }

@media screen and (max-width: 1024px) {
  #home > div {
    grid-template-columns: 1fr !important; }
    #home > div article {
      grid-column: 1 !important;
      padding-bottom: 50% !important; } }
/* product page */
@media screen and (max-width: 800px) {
  #product {
    grid-template-columns: 1fr !important;
    grid-gap: 0 !important; }
    #product #add_to_wishlist {
      top: -8px; }
    #product > div:nth-of-type(3) {
      grid-column: 1 / 2 !important; } }
a.wishlist {
  font-weight: 300; }
  a.wishlist img {
    display: inline-block;
    margin: 3px;
    vertical-align: bottom; }

#product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px; }
  #product > div:nth-of-type(3) {
    grid-column: 1 / 3; }
  #product #teaser {
    margin: 0.5em 0;
    line-height: 135%; }
  #product h1 {
    margin-top: 10px; }
  #product .vat {
    color: #9a989a;
    font-size: 0.8em;
    font-style: italic; }
  #product #add_to_wishlist {
    float: right;
    position: relative;
    margin: 14px 0 0 10px; }
    #product #add_to_wishlist button {
      width: 32px;
      height: 32px;
      background: none;
      padding: 0;
      background-size: cover;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAMAAABMUIWcAAABdFBMVEUAAAD////////+F2DQ0NDU1NT+K2DW1tbY2NjJycnGxsb+DWDOzs7+IGDR0dH+QWDY2Nj////+AGD+BGDPz8/Q0ND+LGDQ0NDT09P+VmD+fn7+ior+d3ff39/+hYX+vLzu7u7d3d3+ZG/c3Nzd3d3+hYX+AGDLy8v+EmD+GGDMzMzQ0ND+ImD+HWD+AWD+KmDR0dH+NGD+HGDR0dH+SmD+T2D+M2D+VGD+AGD+NWDLy8vX19f+X2D+YmLV1dX+HGD+Q2D+RGDR0dHBwcH+gYH+c3Pd3d3k5OT+Z2f+YGDc3Nz+TGDZ2dnX19f+AGDb29vS0tLGxsbV1dX+W2D+T2DIyMjn5+f+UWD+TWD+HGD+mJj+I2D+XWDNzc3+VGD+R2D+PmDl5eX+VmDd3d3Kysr+ZWX+O2D+WWD+kZH+X2DPz8/+RWD+QWD+MWD+FmD+CWD+jY3+Q2Dk5OTCwsL+n5/+h4f+KmDf39/+lZX+enr+YWH+EWAsXYR9AAAAS3RSTlMAKTW3dHKlST7v3dbSxoyLYh712cS2pZNxZmJQNzQyJR0QDAsEBOzb2czKvb24t7WwpaWhoZSRgYB4dHNza2diYFZVT0VFMCogHBcwmtvmAAACjUlEQVRIx63TZ1ejQBQGYLbay1rW3nV77713wp3QhCQEkI2JSUzsbvvzO3MZc8EP+kHflMPhfZhy5qBcUo7MGf45MmdPD7SPDHUP9y+Ky8UP97qHRtpTYOGmXirWinZHG6cddpHHvvGDwFxnychkWEYr6m/69aKW4TFsfaoFuksaEzcZy9p6VkjBS50LEozqGtN4BMnWRK0Joem9ElytMS2z/YvfFQZbzjnujMEX3WDGz+Vlhg1+0TLDbkfQxlfIwUrcYBdHK36MQTzCCjPwLkdyIqPUhmCuI8vXsCIF9jgHy+qzCJSHNt82W+aTGLgE8SdYaVju4utOjfFVSIEEd7wzJYHSr2elYBo+jJvUX9JZjLZEPLjo7RfJ07wgxXbreft86zRJaAwHkD0BEvg49QRI0PgEUoJ6AmlBPYGUoJ5AShjUE0gK6gkk09t77Itz6uD41/+EwQlONAWBd7e7Bq/3fROX3/t6BrtujS0lweQVANjgv6eK8kpeDnwmMAGw7/qRH27Akz7YKDuR7zYAxg/ADEBQtVTXNSs5gGbFtFzXqaoA0xI8grBaD4LAVR0v1zR9FePV4W4Mpgf+mYGz90cNVNXyfUu0KJowg2AMGma4uvs72uJ3XVc9SKUB7xE8h3JlfTW/6XCQTBTCMwSvoSHAWrWcBpUyvEXwCXJe3drMb0ZhCngFmESw1ANuFP7N59f8pPAduCa3OQFN0wlX08LycjAugfIYcqZVFiLaavUFuE9n8UCK3TUrwN7h/Z3kaV6UYs9F4JgFOKdIkBDrkRW4YnzZS0DCWa9TT0DmshAq9QRSY1BPIC0sj3oCJLwq9QQSorBPPYHkSqknkExPl3I0mJ8/BE786s0qx+U/jeAL+2R5KfAAAAAASUVORK5CYII=); }
      #product #add_to_wishlist button.active {
        background-position: 0 -32px !important; }
    #product #add_to_wishlist:hover span {
      display: block; }
    #product #add_to_wishlist span {
      display: none;
      background-color: white;
      white-space: nowrap;
      position: absolute;
      bottom: -30px;
      right: 0;
      font-size: 0.9rem;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      padding: 3px 5px; }
  #product #selected_variant_details {
    display: grid;
    align-items: end;
    grid-template-columns: auto 1fr auto;
    grid-gap: 10px; }
    #product #selected_variant_details .sku {
      font-weight: 700; }
  #product #variant_selector {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    margin: 10px 0; }
    #product #variant_selector > div {
      border: solid 2px #9a989a;
      cursor: pointer; }
      #product #variant_selector > div label {
        display: block;
        position: relative;
        font-weight: 700;
        padding: 10px;
        cursor: pointer; }
        #product #variant_selector > div label input {
          display: none; }
        #product #variant_selector > div label .price {
          display: block;
          margin-top: 5px; }
          #product #variant_selector > div label .price small {
            font-size: 100%;
            color: #9a989a;
            position: relative;
            display: inline-block;
            margin-left: 5px; }
            #product #variant_selector > div label .price small:after {
              content: "";
              border-bottom: 2px solid #e63c2e;
              transform: rotate(-12deg);
              position: absolute;
              left: -5px;
              right: -5px;
              top: 50%; }
      #product #variant_selector > div.active {
        background-color: #1cb5ca;
        border: solid 2px #1cb5ca; }
        #product #variant_selector > div.active label {
          color: white; }
          #product #variant_selector > div.active label small {
            color: rgba(255, 255, 255, 0.8); }
            #product #variant_selector > div.active label small:after {
              border-bottom: 2px solid white; }
      #product #variant_selector > div.out-of-stock {
        opacity: 0.5; }
  #product #product_bullets a {
    font-weight: 400;
    text-decoration: underline; }
  #product #add_to_cart {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-gap: 10px; }
    #product #add_to_cart > * {
      align-self: center; }
    #product #add_to_cart fieldset {
      display: inline-block;
      vertical-align: middle;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2); }
      #product #add_to_cart fieldset input {
        text-align: center;
        outline: none;
        background-color: transparent;
        padding: 10px 0;
        border: 0; }
    #product #add_to_cart > button {
      padding: 4px 30px 0 30px;
      font-size: 1.1em; }
      #product #add_to_cart > button img {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin: -4px 0 0 -4px; }
    #product #add_to_cart input {
      text-align: center;
      padding: 10px; }
  #product #oos_notify {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10px; }
    #product #oos_notify > * {
      align-self: center; }
    #product #oos_notify input[type="text"] {
      border-radius: 10px;
      border: 0;
      padding: 10px;
      box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2); }
  #product ul {
    padding-left: 30px;
    list-style-type: square;
    margin: 1em 0; }
    #product ul li {
      margin-block-end: 0.5em; }
  #product #description_content {
    display: block; }
  #product #accessories_content #grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    align-self: start; }
    #product #accessories_content #grid article {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 0;
      position: relative;
      grid-auto-rows: auto 1fr; }
      #product #accessories_content #grid article::after {
        box-shadow: inset 0 0 30px -10px rgba(0, 0, 0, 0.1);
        pointer-events: none;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%; }
      #product #accessories_content #grid article:nth-of-type(-n+3) {
        padding-top: 0; }
      #product #accessories_content #grid article > a {
        padding-bottom: 100%;
        background-size: cover;
        background-position: center center; }
      #product #accessories_content #grid article form {
        position: absolute;
        right: 8px;
        bottom: 8px; }
        #product #accessories_content #grid article form button {
          padding: 0;
          box-shadow: 0 0 0 3px white; }
          #product #accessories_content #grid article form button img {
            margin: -2px; }
      #product #accessories_content #grid article > div {
        font-weight: 700;
        padding: 10px; }
        #product #accessories_content #grid article > div .price {
          float: right;
          margin: 0 0 0 20px;
          display: inline-block;
          text-align: center;
          line-height: 100%;
          font-size: 140%; }
          #product #accessories_content #grid article > div .price.offer {
            top: -0.4rem; }
          #product #accessories_content #grid article > div .price > span {
            display: block;
            letter-spacing: -1px; }
          #product #accessories_content #grid article > div .price small {
            font-size: 75%;
            color: #9a989a;
            position: relative;
            display: inline-block; }
            #product #accessories_content #grid article > div .price small:after {
              content: "";
              border-bottom: 2px solid #e63c2e;
              transform: rotate(-12deg);
              position: absolute;
              left: -5px;
              right: -5px;
              top: 50%; }
    #product #accessories_content #grid > div {
      padding: 20px; }
      #product #accessories_content #grid > div span {
        font-weight: 300; }
  #product #description_content {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 3fr 2fr; }
  #product #gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    align-self: start; }
    #product #gallery img {
      width: 100%;
      display: block; }
    #product #gallery a {
      cursor: zoom-in;
      position: relative; }
      #product #gallery a::after {
        box-shadow: inset 0 0 30px -10px rgba(0, 0, 0, 0.1);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%; }
  #product #featured_image {
    position: relative; }
    #product #featured_image img {
      width: 100%;
      display: block; }
    #product #featured_image a {
      cursor: zoom-in;
      position: relative;
      display: block; }
      #product #featured_image a::after {
        box-shadow: inset 0 0 60px -20px rgba(0, 0, 0, 0.1);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%; }
  #product #description img, #product #description iframe, #product #description video {
    max-width: 100%;
    display: block;
    margin: 0 auto; }
  #product #description h2 {
    margin-top: 1.5em; }
  #product #description code {
    display: inline-flex;
    white-space: normal;
    word-break: break-word;
    background-color: #4d4c4d;
    color: white;
    padding: 1px 5px 2px 5px;
    border-radius: 3px;
    font-weight: 400; }
  #product #description blockquote {
    background: linear-gradient(360deg, #f0f0f0 0%, #f8f8f8 100%);
    position: relative;
    border-radius: 1em;
    padding: 1em;
    margin: 1em 0;
    box-shadow: inset 0 0 30px -10px rgba(0, 0, 0, 0.1);
      /*
	
      &:before {
        content: "\201c"; position: absolute; left: 10px; top: 0px; font-size: 75px;
      }

      &:after {
        content: "\201d"; position: absolute; right: 10px; bottom: -40px; font-size: 75px;
      }*/ }
    #product #description blockquote p:last-of-type {
      margin-bottom: 0; }
  #product #description > p:first-child {
    font-size: 150%;
    margin-block-end: 0.5em;
    line-height: 130%; }
  #product #description table {
    border-collapse: collapse;
    min-width: 70%;
    margin: 0.5em 0;
    empty-cells: show;
    box-shadow: inset 0 0 60px -20px rgba(0, 0, 0, 0.1); }
    #product #description table th {
      padding: 5px 10px;
      border-bottom: solid 3px #4d4c4d;
      font-weight: bold; }
      #product #description table th:first-of-type {
        text-align: left; }
    #product #description table td {
      padding: 5px 10px;
      border-top: solid 1px #4d4c4d;
      border-right: solid 1px #4d4c4d;
      text-align: center; }
      #product #description table td:first-of-type {
        text-align: left; }
      #product #description table td:last-of-type {
        border-right: none; }
  #product h3 + p {
    margin-top: 0;
    font-size: 95%;
    color: #9a989a; }
  #product h3 span {
    background-color: white;
    padding: 0 0.5em 0 0;
    top: 0.6em;
    position: relative; }
  #product .hide {
    display: none; }
  #product .big-price {
    margin-top: 10px;
    font-size: 175%;
    font-weight: 700;
    letter-spacing: -1px; }
    #product .big-price small {
      font-size: 75%;
      color: #9a989a;
      position: relative;
      display: inline-block;
      margin-left: 5px; }
      #product .big-price small:after {
        content: "";
        border-bottom: 2px solid rgba(230, 60, 46, 0.8);
        transform: rotate(-12deg);
        position: absolute;
        left: -3px;
        right: -6px;
        top: 50%; }
  #product #social {
    margin-top: 20px; }
  #product #reviews > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 10px; }
    #product #reviews > div > div {
      box-sizing: border-box;
      max-width: 100%;
      background-color: #fafafa;
      padding: 10px;
      box-shadow: inset 0 0 30px -10px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      margin-left: 90px;
      position: relative; }
      #product #reviews > div > div > img:first-child {
        position: absolute;
        left: -90px;
        top: 0;
        border-radius: 5px; }
      #product #reviews > div > div > div {
        font-weight: 700; }
      #product #reviews > div > div > p {
        margin: 5px 0 0 0;
        font-size: 85%;
        overflow: hidden;
        overflow-wrap: break-word; }
      #product #reviews > div > div span {
        display: inline-block;
        font-weight: 400;
        font-size: 85%; }
  #product #reviews #load_more_reviews {
    margin: 20px;
    text-align: center;
    display: block; }

@media screen and (max-width: 768px) {
  #product > div:nth-of-type(2) #variant_selector {
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-gap: 5px !important; }
  #product > div:nth-of-type(2) div.active span {
    padding: 5px 0 0 0 !important; }
  #product > div:nth-of-type(2) label {
    font-size: 85%; }
    #product > div:nth-of-type(2) label span {
      padding-bottom: 3px !important; }
    #product > div:nth-of-type(2) label .price {
      float: none !important;
      margin: 0 !important;
      display: inline-block; }

  #extras p {
    margin-bottom: 5px !important;
    font-size: 80% !important; } }
#lightbox {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 50000;
  text-align: center;
  display: none;
  align-items: center;
  padding: 20px;
  cursor: zoom-out; }
  #lightbox > div {
    display: inline-block;
    margin: 0 auto;
    line-height: 1024px;
    cursor: zoom-out; }
    #lightbox > div img {
      vertical-align: middle;
      height: 100vh;
      width: 100vw;
      object-fit: contain;
      max-width: 100%;
      cursor: zoom-out; }

#search {
  display: none; }
  #search #no_results {
    font-size: 150%;
    padding: 30px;
    text-align: center;
    color: #9a989a; }

/* collection page */
#collection #hero, #search #hero {
  grid-column: 1 / 5;
  height: 200px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-position: center center; }
#collection h1, #search h1 {
  margin-bottom: 10px; }
#collection #load_more_results, #search #load_more_results {
  display: none;
  text-align: center; }
  #collection #load_more_results > a, #search #load_more_results > a {
    padding: 20px;
    margin: 20px;
    background-color: #f0f0f0;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer; }
#collection #view, #search #view {
  display: flex;
  flex-flow: row wrap;
  border-radius: 10px;
  background: linear-gradient(360deg, #f0f0f0 0%, #f8f8f8 100%);
  overflow: hidden; }
  #collection #view > div, #search #view > div {
    margin: 0;
    padding: 10px 5px;
    text-align: center;
    flex-grow: 1;
    border-right: solid 1px #e0e0e0; }
    #collection #view > div:last-child, #search #view > div:last-child {
      border-right: 0; }
    #collection #view > div.active, #search #view > div.active {
      background: linear-gradient(360deg, #1cb5ca 0%, rgba(28, 181, 202, 0.6) 100%);
      border-right: 0; }
      #collection #view > div.active a, #search #view > div.active a {
        color: white; }
#collection #filters .mobile, #search #filters .mobile {
  display: none; }
#collection #filters select, #search #filters select {
  border: 0;
  box-shadow: inset 0 0 30px -10px rgba(0, 0, 0, 0.1);
  background: linear-gradient(310deg, #f8f8f8 0%, white 100%);
  border-radius: 5px;
  overflow: hidden;
  margin: 0 0 0 0;
  padding: 5px 5px;
  cursor: pointer;
  outline: none; }
#collection #filters input[type="checkbox"], #search #filters input[type="checkbox"] {
  margin-left: 0;
  margin-right: 6px; }
#collection #filters label, #search #filters label {
  cursor: pointer; }
#collection #filters > div > label, #search #filters > div > label {
  display: block;
  margin: 20px 0; }
  #collection #filters > div > label:first-child, #search #filters > div > label:first-child {
    margin-top: 0; }
#collection #filters section h2, #search #filters section h2 {
  color: #9a989a;
  padding: 5px 0;
  margin-bottom: 5px;
  font-size: 12pt; }
#collection #filters section ul, #search #filters section ul {
  /*max-height: 500px; overflow: auto;*/ }
  #collection #filters section ul li, #search #filters section ul li {
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 5px;
    background: linear-gradient(310deg, #f8f8f8 0%, white 100%);
    box-shadow: inset 0 0 30px -10px rgba(0, 0, 0, 0.1); }
    #collection #filters section ul li a, #search #filters section ul li a {
      font-weight: normal; }
    #collection #filters section ul li small, #search #filters section ul li small {
      color: #9a989a;
      display: inline-block;
      margin-left: 5px; }
    #collection #filters section ul li label input[type="checkbox"], #search #filters section ul li label input[type="checkbox"] {
      display: none; }
    #collection #filters section ul li.active, #search #filters section ul li.active {
      background-color: #1cb5ca;
      color: white;
      background: linear-gradient(310deg, #1cb5ca 0%, #1fc9e0 100%);
      box-shadow: none; }
      #collection #filters section ul li.active small, #search #filters section ul li.active small {
        color: rgba(255, 255, 255, 0.75); }
#collection h3, #search h3 {
  font-weight: 700;
  border-bottom: solid 1px #f0f0f0; }
#collection h3 span, #search h3 span {
  background-color: white;
  padding: 0 0.5em 0 0;
  top: 0.6em;
  position: relative; }
#collection > a, #search > a {
  justify-self: center;
  align-self: center;
  padding: 20px;
  margin: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: inline-block; }

#products > div:first-child h1 {
  font-weight: 300;
  margin-bottom: 10px; }
  #products > div:first-child h1 span {
    font-weight: 700; }

#products {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-gap: 20px; }

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  align-self: start;
  margin-bottom: 5rem; }
  .product-grid.three-up {
    grid-template-columns: 1fr 1fr 1fr; }
  .product-grid #sort {
    padding: 0; }
  .product-grid article {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    position: relative;
    grid-auto-rows: auto auto 1fr auto; }
    .product-grid article:nth-of-type(-n+3) {
      padding-top: 0; }
    .product-grid article > a {
      padding-bottom: 100%;
      background-size: cover;
      background-position: center center;
      box-shadow: inset 0 0 30px -10px rgba(0, 0, 0, 0.1); }
    .product-grid article > div {
      position: relative; }
      .product-grid article > div p {
        margin: 0; }
      .product-grid article > div .price {
        position: absolute;
        right: 0;
        font-size: 165%;
        font-weight: 700;
        letter-spacing: -1px;
        text-align: center; }
        .product-grid article > div .price.offer {
          top: -0.4rem; }
        .product-grid article > div .price > span {
          display: block; }
        .product-grid article > div .price small {
          font-size: 65%;
          color: #9a989a;
          position: relative;
          top: -0.7rem;
          display: inline-block; }
          .product-grid article > div .price small:after {
            content: "";
            border-bottom: 2px solid #e63c2e;
            transform: rotate(-12deg);
            position: absolute;
            left: -5px;
            right: -5px;
            top: 50%; }
  .product-grid > div {
    padding: 20px; }
    .product-grid > div span {
      font-weight: 300; }

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #products {
    grid-template-columns: 1fr 3fr !important; }

  .product-grid {
    grid-template-columns: 1fr 1fr 1fr !important; }

  #accessories_content #grid {
    grid-template-columns: 1fr 1fr 1fr !important; } }
@media screen and (max-width: 767px) {
  #products {
    grid-template-columns: 1fr 2fr !important; }

  .product-grid {
    grid-template-columns: 1fr 1fr !important; }

  #accessories_content #grid {
    grid-template-columns: 1fr 1fr !important; } }
@media screen and (max-width: 511px) {
  #products {
    grid-template-columns: 1fr !important;
    grid-gap: 0 !important; }

  #filters.mobile {
    display: block !important; }
  #filters.desktop {
    display: none !important; }

  #products .product-grid {
    grid-template-columns: 1fr !important;
    grid-gap: 0 !important; }
    #products .product-grid > * {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      border-bottom: solid 1px #f0f0f0 !important; } }
.stock-coming-soon, .stock-pre-order, .stock-none, .stock-low, .stock-ok {
  color: white;
  font-weight: 700;
  border-radius: 3px; }

.stock-coming-soon {
  color: #f6a704; }

.stock-pre-order {
  color: #1cb5ca; }

.stock-none {
  color: #e63c2e; }

.stock-low {
  color: #f6a704; }

.stock-ok {
  color: #09b775; }

.rating {
  display: inline-block; }
  .rating > span {
    display: inline-block;
    color: grey;
    font-size: 85%; }
    .rating > span > span {
      display: inline-block;
      position: relative;
      top: 2px;
      margin-right: 5px; }
      .rating > span > span > span {
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden; }

.errors {
  grid-column: 1 / 3 !important;
  color: #e63c2e;
  margin: 20px; }
  .errors ul {
    list-style-type: none;
    margin: 0;
    padding: 0; }

.badge {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 10px;
  margin: 10px;
  color: white;
  font-weight: 700;
  font-size: 125%; }
  .badge.big {
    font-size: 175%;
    padding: 7px 14px 7px 10px;
    border-radius: 0 0 2px 0; }
  .badge.new {
    background-color: #1cb5ca; }
  .badge.coming-soon {
    background-color: #f6a704;
    display: none; }
  .badge.pre-order {
    background-color: #1cb5ca; }
  .badge.percentage-off {
    color: white;
    background-color: #f6a704; }

#cart {
  margin: 10px; }
  #cart #cart_container {
    display: grid;
    grid-template-columns: 8fr 4fr;
    grid-gap: 40px; }
  #cart #cart_error {
    margin-bottom: 20px; }
  #cart #cart_contents {
    display: grid;
    grid-template-columns: 1fr; }
    #cart #cart_contents > div {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-gap: 20px;
      border-bottom: solid 1px #f0f0f0;
      padding-bottom: 10px;
      margin-bottom: 10px; }
      #cart #cart_contents > div > div:nth-of-type(2) a {
        font-weight: 700;
        font-size: 120%; }
      #cart #cart_contents > div > div:nth-of-type(2) #teaser {
        margin: 0.5em 0;
        line-height: 135%; }
      #cart #cart_contents > div > div:nth-of-type(3) {
        text-align: right;
        align-self: end; }
        #cart #cart_contents > div > div:nth-of-type(3) .line-price {
          font-size: 120%;
          display: block;
          margin-bottom: 10px;
          font-weight: 700;
          letter-spacing: -1px; }
          #cart #cart_contents > div > div:nth-of-type(3) .line-price > div {
            display: inline-block; }
          #cart #cart_contents > div > div:nth-of-type(3) .line-price.offer {
            top: -0.4rem; }
          #cart #cart_contents > div > div:nth-of-type(3) .line-price small {
            float: left;
            font-size: 85%;
            color: #9a989a;
            position: relative;
            display: inline-block;
            margin-right: 10px; }
            #cart #cart_contents > div > div:nth-of-type(3) .line-price small:after {
              content: "";
              border-bottom: 2px solid #e63c2e;
              transform: rotate(-12deg);
              position: absolute;
              left: -5px;
              right: -5px;
              top: 50%; }
        #cart #cart_contents > div > div:nth-of-type(3) .unit-price {
          position: relative;
          top: -8px;
          font-size: 85%;
          color: #9a989a; }
          #cart #cart_contents > div > div:nth-of-type(3) .unit-price > div {
            display: inline-block; }
          #cart #cart_contents > div > div:nth-of-type(3) .unit-price small {
            display: none; }
  #cart #checkout #terms_agree {
    background-color: #f0f0f0;
    padding: 10px; }
  #cart #checkout h3 {
    font-weight: 700;
    border-bottom: solid 1px #f0f0f0;
    margin-bottom: 20px; }
  #cart #checkout h3 span {
    background-color: white;
    padding: 0 0.5em 0 0;
    top: 0.6em;
    position: relative; }
  #cart #checkout #guest_checkout {
    vertical-align: middle;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px; }
    #cart #checkout #guest_checkout button {
      box-sizing: border-box; }
    #cart #checkout #guest_checkout a {
      box-sizing: border-box; }
  #cart #checkout .total {
    font-size: 150%;
    font-weight: 700;
    text-align: right; }
  #cart #checkout .shipping {
    text-align: right;
    font-weight: 400;
    font-size: 85%; }
  #cart #checkout .vat {
    font-size: 85%;
    text-align: right; }
  #cart #checkout .shipping-note {
    font-size: 85%;
    margin-top: 10px; }
  #cart #checkout .currency-warning > div {
    margin-bottom: 10px; }
  #cart #checkout .currency-warning .note {
    color: #9a989a;
    font-size: 85%; }
  #cart #checkout .additional-checkout-button {
    margin: 0 !important; }

@media screen and (max-width: 1023px) {
  #cart #cart_container {
    grid-template-columns: 1fr !important; }
    #cart #cart_container > div:first-child {
      order: 2; }
  #cart #cart_contents > div {
    grid-template-columns: auto auto; }
    #cart #cart_contents > div > div:nth-of-type(2) {
      order: 3;
      grid-column: 1 / 3; } }
#page article h2 {
  background-color: #4d4c4d;
  color: white;
  font-weight: 700;
  font-size: 125%;
  margin: 30px 0 20px 0px;
  padding: 5px 10px;
  display: inline-block;
  text-transform: uppercase; }
#page article h2 + p {
  margin-top: 5px; }
#page article h2 + h3 {
  margin-top: 0; }
#page article h3 {
  margin: 30px 0 0 0;
  font-weight: 700;
  font-size: 100%;
  text-decoration: underline; }
#page article h3 + p {
  margin-top: 5px; }
#page article a {
  font-weight: 700; }
#page article ul {
  list-style-type: square;
  padding-left: 40px; }
#page article address {
  margin: 1em 0 1em 1em; }
#page article h4 {
  background-color: #4d4c4d;
  color: white;
  font-weight: 700;
  font-size: 125%;
  margin: 20px 0 10px 0px;
  padding: 5px 10px;
  display: inline-block;
  text-transform: uppercase; }
#page article table {
  border: 0;
  width: 100%; }
  #page article table .left {
    text-align: left; }
  #page article table .right {
    text-align: right; }
  #page article table td:first-child, #page article table th:first-child {
    padding-left: 0; }
  #page article table td:last-child, #page article table th:last-child {
    padding-right: 0; }
  #page article table th {
    padding: 5px 10px;
    border-bottom: solid 1px #f0f0f0;
    text-align: center;
    vertical-align: top; }
  #page article table td {
    padding: 5px 10px;
    border-bottom: solid 1px #f0f0f0;
    text-align: center; }
  #page article table .section-head th {
    text-transform: uppercase;
    border-bottom: solid 1px #4d4c4d;
    text-align: left !important; }
#page article form {
  display: grid;
  grid-template-columns: 10em 1fr;
  max-width: 640px; }
  #page article form fieldset {
    display: contents; }
    #page article form fieldset label {
      font-weight: 700;
      display: block;
      margin: 20px;
      text-align: right; }
    #page article form fieldset input, #page article form fieldset textarea {
      margin: 10px 0;
      padding: 10px;
      border-radius: 10px;
      border: 0;
      box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2); }
  #page article form button {
    margin-top: 10px; }

@media screen and (max-width: 768px) {
  form {
    grid-template-columns: 1fr !important; }
    form fieldset label {
      margin: 10px 0 0 0 !important;
      text-align: left !important; }
    form button {
      margin-top: 0 !important; } }