:root {
  --heading-color: 13, 13, 13;
  --text-color: 46, 46, 46;
  --background: 255, 255, 255;
  --secondary-background: 245, 245, 245;
  --border-color: 224, 224, 224;
  --border-color-darker: 171, 171, 171;
  --success-color: 60, 110, 113;
  --success-background: 216, 226, 227;
  --error-color: 222, 42, 42;
  --error-background: 253, 240, 240;
  --primary-button-background: 58, 62, 75;
  --primary-button-text-color: 182, 248, 44;
  --secondary-button-background: 219, 209, 180;
  --secondary-button-text-color: 255, 255, 255;
  --product-star-rating: 246, 164, 41;
  --product-on-sale-accent: 28, 173, 75;
  --product-sold-out-accent: 91, 91, 91;
  --product-custom-label-background: 5, 30, 56;
  --product-custom-label-text-color: 255, 255, 255;
  --product-custom-label-2-background: 46, 158, 123;
  --product-custom-label-2-text-color: 255, 255, 255;
  --product-low-stock-text-color: 222, 43, 43;
  --product-in-stock-text-color: 46, 158, 123;
  --loading-bar-background: 46, 46, 46;
  --root-heading-color: 13, 13, 13;
  --root-text-color: 46, 46, 46;
  --root-background: 255, 255, 255;
  --root-border-color: 224, 224, 224;
  --root-primary-button-background: 58, 62, 75;
  --root-primary-button-text-color: 182, 248, 44;
  --base-font-size: 15px;
  --heading-font-family: Poppins, sans-serif;
  --heading-font-weight: 600;
  --heading-font-style: normal;
  --heading-text-transform: uppercase;
  --text-font-family: Poppins, sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --text-font-bold-weight: 600;
  --heading-xxsmall-font-size: 11px;
  --heading-xsmall-font-size: 11px;
  --heading-small-font-size: 12px;
  --heading-large-font-size: 36px;
  --heading-h1-font-size: 36px;
  --heading-h2-font-size: 30px;
  --heading-h3-font-size: 26px;
  --heading-h4-font-size: 24px;
  --heading-h5-font-size: 20px;
  --heading-h6-font-size: 16px;
  --button-border-radius: 0px;
  --block-border-radius: 0px;
  --block-border-radius-reduced: 0px;
  --color-swatch-border-radius: 0px;
  --button-height: 48px;
  --button-small-height: 40px;
  --form-input-field-height: 48px;
  --form-input-gap: 16px;
  --form-submit-margin: 24px;
  --product-list-block-spacing: 32px;
  --play-button-background: 255, 255, 255;
  --play-button-arrow: 46, 46, 46;
  --transform-logical-flip: 1;
  --transform-origin-start: left;
  --transform-origin-end: right;
  --zoom-cursor-svg-url: url(//kardena.de/cdn/shop/t/32/assets/zoom-cursor.svg?v=1728294…);
  --arrow-right-svg-url: url(//kardena.de/cdn/shop/t/32/assets/arrow-right.svg?v=1108418…);
  --arrow-left-svg-url: url(//kardena.de/cdn/shop/t/32/assets/arrow-left.svg?v=7308912…);
  --container-max-width: 1600px;
  --container-gutter: 24px;
  --container-max-width-minus-gutters: calc(var(--container-max-width) - (var(--container-gutter)) * 2);
  --container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-gutter));
  --container-outer-margin: var(--container-outer-width);
  --container-inner-width: calc(100vw - var(--container-outer-width) * 2);
  --grid-column-count: 10;
  --grid-gap: 24px;
  --grid-column-width: calc(
    (100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) /
      var(--grid-column-count)
  );
  --vertical-breather: 36px;
  --vertical-breather-tight: 36px;
  --payment-terms-background-color: #ffffff;
}
@media screen and (min-width: 741px) {
  :root {
    --container-gutter: 40px;
    --grid-column-count: 20;
    --vertical-breather: 48px;
    --vertical-breather-tight: 48px;
    --heading-xsmall-font-size: 12px;
    --heading-small-font-size: 13px;
    --heading-large-font-size: 52px;
    --heading-h1-font-size: 48px;
    --heading-h2-font-size: 38px;
    --heading-h3-font-size: 32px;
    --heading-h4-font-size: 24px;
    --heading-h5-font-size: 20px;
    --heading-h6-font-size: 18px;
    --form-input-field-height: 52px;
    --form-submit-margin: 32px;
    --button-height: 52px;
    --button-small-height: 44px;
  }
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKX-Go6G5tXcr72KxaAcI5DPFpLGw.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKX-Go6G5tXcr72Kw2AcI5DPFpLGw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKX-Go6G5tXcr72KwyAcI5DPFpLGw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKX-Go6G5tXcr72KwKAcI5DPFo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5aOhWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5aOhWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5aOhWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5aOhWnVaFrNlJz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4-ORWnVaFrNlJz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKZ-Go6G5tXcraBGwCKd6xBDFs.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKZ-Go6G5tXcraaGwCKd6xBDFs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKZ-Go6G5tXcrabGwCKd6xBDFs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKZ-Go6G5tXcraVGwCKd6xB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5mOBWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5mOBWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5mOBWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5mOBWnVaFrNlJz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5KPxWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5KPxWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5KPxWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr5KPxWnVaFrNlJz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4uPhWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4uPhWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4uPhWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4uPhWnVaFrNlJz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4yPRWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4yPRWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4yPRWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4yPRWnVaFrNlJz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* thai */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4WPBWzVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4WPBWoVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304,
    U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4WPBWpVaFrNlJzIu4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/kanit/v15/nKKU-Go6G5tXcr4WPBWnVaFrNlJz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Typography (heading) */
@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src:
    url('../cdn/fonts/inter/inter_n6.f376a8167febc541e642518027b9ec9b9121420c.woff2') format('woff2'),
    url('//kardena.de/cdn/fonts/inter/inter_n6.e443e28dc0f8869f8e2f4fa978e895a4a075406f.woff?h1=a2FyZGVuYS5kZQ&h2=Z2VzdW5kaGVpdHN1aHJlbi5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=cda47360a9fd6577edd9b5207cd833426fe6c055d12b408935b728742f008739')
      format('woff');
}

/* Typography (body) */
@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    url('../cdn/fonts/inter/inter_n4.481bd4d19704ca98fb1d3abd50c668b6962860a2.woff2') format('woff2'),
    url('//kardena.de/cdn/fonts/inter/inter_n4.5a356a4c1877691cd26008ee4a5c7ada675c80ce.woff?h1=a2FyZGVuYS5kZQ&h2=Z2VzdW5kaGVpdHN1aHJlbi5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=14f02cf2ccaec1582a8c15d5a3ce0c3f448ffea8459861c11ade28497a0ad354')
      format('woff');
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src:
    url('../cdn/fonts/inter/inter_n6.f376a8167febc541e642518027b9ec9b9121420c.woff2') format('woff2'),
    url('//kardena.de/cdn/fonts/inter/inter_n6.e443e28dc0f8869f8e2f4fa978e895a4a075406f.woff?h1=a2FyZGVuYS5kZQ&h2=Z2VzdW5kaGVpdHN1aHJlbi5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=cda47360a9fd6577edd9b5207cd833426fe6c055d12b408935b728742f008739')
      format('woff');
}

:root {
  --heading-color: 13, 13, 13;
  --text-color: 46, 46, 46;
  --background: 255, 255, 255;
  --secondary-background: 245, 245, 245;
  --border-color: 224, 224, 224;
  --border-color-darker: 171, 171, 171;
  --success-color: 60, 110, 113;
  --success-background: 216, 226, 227;
  --error-color: 222, 42, 42;
  --error-background: 253, 240, 240;
  --primary-button-background: 58, 62, 75;
  --primary-button-text-color: 182, 248, 44;
  --secondary-button-background: 219, 209, 180;
  --secondary-button-text-color: 255, 255, 255;
  --product-star-rating: 246, 164, 41;
  --product-on-sale-accent: 28, 173, 75;
  --product-sold-out-accent: 91, 91, 91;
  --product-custom-label-background: 5, 30, 56;
  --product-custom-label-text-color: 255, 255, 255;
  --product-custom-label-2-background: 46, 158, 123;
  --product-custom-label-2-text-color: 255, 255, 255;
  --product-low-stock-text-color: 222, 43, 43;
  --product-in-stock-text-color: 46, 158, 123;
  --loading-bar-background: 46, 46, 46;

  /* We duplicate some "base" colors as root colors, which is useful to use on drawer elements or popover without. Those should not be overridden to avoid issues */
  --root-heading-color: 13, 13, 13;
  --root-text-color: 46, 46, 46;
  --root-background: 255, 255, 255;
  --root-border-color: 224, 224, 224;
  --root-primary-button-background: 58, 62, 75;
  --root-primary-button-text-color: 182, 248, 44;

  --base-font-size: 16px;
  --heading-font-family: Inter, sans-serif;
  --heading-font-weight: 600;
  --heading-font-style: normal;
  --heading-text-transform: normal;
  --text-font-family: Inter, sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --text-font-bold-weight: 600;

  /* Typography (font size) */
  --heading-xxsmall-font-size: 10px;
  --heading-xsmall-font-size: 10px;
  --heading-small-font-size: 11px;
  --heading-large-font-size: 32px;
  --heading-h1-font-size: 32px;
  --heading-h2-font-size: 28px;
  --heading-h3-font-size: 26px;
  --heading-h4-font-size: 22px;
  --heading-h5-font-size: 18px;
  --heading-h6-font-size: 16px;

  /* Control the look and feel of the theme by changing radius of various elements */
  --button-border-radius: 0px;
  --block-border-radius: 0px;
  --block-border-radius-reduced: 0px;
  --color-swatch-border-radius: 0px;

  /* Button size */
  --button-height: 48px;
  --button-small-height: 40px;

  /* Form related */
  --form-input-field-height: 48px;
  --form-input-gap: 16px;
  --form-submit-margin: 24px;

  /* Product listing related variables */
  --product-list-block-spacing: 32px;

  /* Video related */
  --play-button-background: 255, 255, 255;
  --play-button-arrow: 46, 46, 46;

  /* RTL support */
  --transform-logical-flip: 1;
  --transform-origin-start: left;
  --transform-origin-end: right;

  /* Other */
  --zoom-cursor-svg-url: url(//kardena.de/cdn/shop/t/32/assets/zoom-cursor.svg?v=172829407222261240431712566463);
  --arrow-right-svg-url: url(//kardena.de/cdn/shop/t/32/assets/arrow-right.svg?v=110841875187433202191712566463);
  --arrow-left-svg-url: url(//kardena.de/cdn/shop/t/32/assets/arrow-left.svg?v=73089120240841302341712566463);

  /* Some useful variables that we can reuse in our CSS. Some explanation are needed for some of them:
       - container-max-width-minus-gutters: represents the container max width without the edge gutters
       - container-outer-width: considering the screen width, represent all the space outside the container
       - container-outer-margin: same as container-outer-width but get set to 0 inside a container
       - container-inner-width: the effective space inside the container (minus gutters)
       - grid-column-width: represents the width of a single column of the grid
       - vertical-breather: this is a variable that defines the global "spacing" between sections, and inside the section
                            to create some "breath" and minimum spacing
     */
  --container-max-width: 1600px;
  --container-gutter: 24px;
  --container-max-width-minus-gutters: calc(var(--container-max-width) - (var(--container-gutter)) * 2);
  --container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-gutter));
  --container-outer-margin: var(--container-outer-width);
  --container-inner-width: calc(100vw - var(--container-outer-width) * 2);

  --grid-column-count: 10;
  --grid-gap: 24px;
  --grid-column-width: calc(
    (100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) /
      var(--grid-column-count)
  );

  --vertical-breather: 36px;
  --vertical-breather-tight: 36px;

  /* Shopify related variables */
  --payment-terms-background-color: #ffffff;
}

@media screen and (min-width: 741px) {
  :root {
    --container-gutter: 40px;
    --grid-column-count: 20;
    --vertical-breather: 48px;
    --vertical-breather-tight: 48px;

    /* Typography (font size) */
    --heading-xsmall-font-size: 11px;
    --heading-small-font-size: 12px;
    --heading-large-font-size: 48px;
    --heading-h1-font-size: 48px;
    --heading-h2-font-size: 36px;
    --heading-h3-font-size: 30px;
    --heading-h4-font-size: 22px;
    --heading-h5-font-size: 18px;
    --heading-h6-font-size: 16px;

    /* Form related */
    --form-input-field-height: 52px;
    --form-submit-margin: 32px;

    /* Button size */
    --button-height: 52px;
    --button-small-height: 44px;
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --vertical-breather: 64px;
    --vertical-breather-tight: 48px;
    --product-list-block-spacing: 48px;

    /* Typography */
    --heading-large-font-size: 58px;
    --heading-h1-font-size: 50px;
    --heading-h2-font-size: 44px;
    --heading-h3-font-size: 32px;
    --heading-h4-font-size: 26px;
    --heading-h5-font-size: 22px;
    --heading-h6-font-size: 16px;
  }
}

@media screen and (min-width: 1600px) {
  :root {
    --vertical-breather: 64px;
    --vertical-breather-tight: 48px;
  }
}
