html.iphone-loaded,
html.iphone-loaded body {
	overflow-x:hidden !important;
  width:100%;
  max-width:100%;
}
*,
*::after,
*::before {
    box-sizing: inherit
}

* {
    font: inherit
}

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

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

body {
    background-color: var(--color-bg, white);
    overflow-x: hidden;
}

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

ol,
ul {
    list-style: none
}
a {
	text-decoration: none!important;
}
blockquote,
q {
    quotes: none
}

button,
input,
textarea,
select {
    margin: 0
}

.btn,
.form-control,
.product-configure select,
.product-configure input:not([type="checkbox"]):not([type="radio"]),
.link,
.reset {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

select.form-control::-ms-expand,
.product-configure select::-ms-expand {
    display: none
}

textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top
}

input::-ms-clear {
    display: none
}

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

img,
video,
svg {
    max-width: 100%
}

[data-theme] {
    background-color: var(--color-bg, #fff);
    color: var(--color-contrast-high, #313135)
}

:root {
    --space-unit: 1em
}

:root,
* {
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
    --component-padding: var(--space-md)
}

.container {
  width:100%;
  max-width:1135px!important;
  margin:0 auto;
}

.grid {
    --gap: 0px;
    --offset: var(--gap);
    display: flex;
    flex-wrap: wrap
}

/* .grid>* {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0
}
 */
@supports (--css: variables) {
    .grid>*[class*="offset-"] {
        margin-left: var(--offset)
    }
}

[class*="gap-xxxxs"],
[class*="gap-xxxs"],
[class*="gap-xxs"],
[class*="gap-xs"],
[class*="gap-sm"],
[class*="gap-md"],
[class*="gap-lg"],
[class*="gap-xl"],
[class*="gap-xxl"],
[class*="gap-xxxl"],
[class*="gap-xxxxl"],
[class*="grid-gap-"],
[class*="flex-gap-"] {
    margin-bottom: -0.75em;
    margin-left: -0.75em
}

[class*="gap-xxxxs"]>*,
[class*="gap-xxxs"]>*,
[class*="gap-xxs"]>*,
[class*="gap-xs"]>*,
[class*="gap-sm"]>*,
[class*="gap-md"]>*,
[class*="gap-lg"]>*,
[class*="gap-xl"]>*,
[class*="gap-xxl"]>*,
[class*="gap-xxxl"]>*,
[class*="gap-xxxxl"]>*,
[class*="grid-gap-"]>*,
[class*="flex-gap-"]>* {
    margin-bottom: 0.75em;
    margin-left: 0.75em
}

@supports (--css: variables) {
    [class*="gap-xxxxs"],
    [class*="gap-xxxs"],
    [class*="gap-xxs"],
    [class*="gap-xs"],
    [class*="gap-sm"],
    [class*="gap-md"],
    [class*="gap-lg"],
    [class*="gap-xl"],
    [class*="gap-xxl"],
    [class*="gap-xxxl"],
    [class*="gap-xxxxl"],
    [class*="grid-gap-"],
    [class*="flex-gap-"] {
        --gap: 0px;
        --offset: var(--gap);
        margin-bottom: calc(-1 * var(--gap));
        margin-left: calc(-1 * var(--gap))
    }
    [class*="gap-xxxxs"]>*,
    [class*="gap-xxxs"]>*,
    [class*="gap-xxs"]>*,
    [class*="gap-xs"]>*,
    [class*="gap-sm"]>*,
    [class*="gap-md"]>*,
    [class*="gap-lg"]>*,
    [class*="gap-xl"]>*,
    [class*="gap-xxl"]>*,
    [class*="gap-xxxl"]>*,
    [class*="gap-xxxxl"]>*,
    [class*="grid-gap-"]>*,
    [class*="flex-gap-"]>* {
        margin-bottom: var(--gap);
        margin-left: var(--offset)
    }
    .gap-xxxxs,
    .grid-gap-xxxxs,
    .flex-gap-xxxxs {
        --gap: var(--space-xxxxs)
    }
    .gap-xxxs,
    .grid-gap-xxxs,
    .flex-gap-xxxs {
        --gap: var(--space-xxxs)
    }
    .gap-xxs,
    .grid-gap-xxs,
    .flex-gap-xxs {
        --gap: var(--space-xxs)
    }
    .gap-xs,
    .grid-gap-xs,
    .flex-gap-xs {
        --gap: var(--space-xs)
    }
    .gap-sm,
    .grid-gap-sm,
    .flex-gap-sm {
        --gap: var(--space-sm)
    }
    .gap-md,
    .grid-gap-md,
    .flex-gap-md {
        --gap: var(--space-md)
    }
    .gap-lg,
    .grid-gap-lg,
    .flex-gap-lg {
        --gap: var(--space-lg)
    }
    .gap-xl,
    .grid-gap-xl,
    .flex-gap-xl {
        --gap: var(--space-xl)
    }
    .gap-xxl,
    .grid-gap-xxl,
    .flex-gap-xxl {
        --gap: var(--space-xxl)
    }
    .gap-xxxl,
    .grid-gap-xxxl,
    .flex-gap-xxxl {
        --gap: var(--space-xxxl)
    }
    .gap-xxxxl,
    .grid-gap-xxxxl,
    .flex-gap-xxxxl {
        --gap: var(--space-xxxxl)
    }
}

.col {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%
}

.col-1 {
    flex-basis: calc( 8.33% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 8.33% - 0.01px - var(--gap, 0.75em))
}

.col-2 {
    flex-basis: calc( 16.66% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 16.66% - 0.01px - var(--gap, 0.75em))
}

.col-3 {
    flex-basis: calc( 25% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 25% - 0.01px - var(--gap, 0.75em))
}

.col-4 {
    flex-basis: calc( 33.33% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 33.33% - 0.01px - var(--gap, 0.75em))
}

.col-5 {
    flex-basis: calc( 41.66% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 41.66% - 0.01px - var(--gap, 0.75em))
}

.col-6 {
    flex-basis: calc( 50% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 50% - 0.01px - var(--gap, 0.75em))
}

.col-7 {
    flex-basis: calc( 58.33% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 58.33% - 0.01px - var(--gap, 0.75em))
}

.col-8 {
    flex-basis: calc( 66.66% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 66.66% - 0.01px - var(--gap, 0.75em))
}

.col-9 {
    flex-basis: calc( 75% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 75% - 0.01px - var(--gap, 0.75em))
}

.col-10 {
    flex-basis: calc( 83.33% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 83.33% - 0.01px - var(--gap, 0.75em))
}

.col-11 {
    flex-basis: calc( 91.66% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 91.66% - 0.01px - var(--gap, 0.75em))
}

.col-12 {
    flex-basis: calc( 100% - 0.01px - var(--gap, 0.75em));
    max-width: calc( 100% - 0.01px - var(--gap, 0.75em))
}

.col-content {
    flex-grow: 0;
    flex-basis: initial;
    max-width: initial
}

.offset-1 {
    --offset: calc(8.33% + var(--gap, 0.75em))
}

.offset-2 {
    --offset: calc(16.66% + var(--gap, 0.75em))
}

.offset-3 {
    --offset: calc(25% + var(--gap, 0.75em))
}

.offset-4 {
    --offset: calc(33.33% + var(--gap, 0.75em))
}

.offset-5 {
    --offset: calc(41.66% + var(--gap, 0.75em))
}

.offset-6 {
    --offset: calc(50% + var(--gap, 0.75em))
}

.offset-7 {
    --offset: calc(58.33% + var(--gap, 0.75em))
}

.offset-8 {
    --offset: calc(66.66% + var(--gap, 0.75em))
}

.offset-9 {
    --offset: calc(75% + var(--gap, 0.75em))
}

.offset-10 {
    --offset: calc(83.33% + var(--gap, 0.75em))
}

.offset-11 {
    --offset: calc(91.66% + var(--gap, 0.75em))
}

@media (min-width: 32rem) {
    .col\@xs {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-1\@xs {
        flex-basis: calc( 8.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 8.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-2\@xs {
        flex-basis: calc( 16.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 16.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-3\@xs {
        flex-basis: calc( 25% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 25% - 0.01px - var(--gap, 0.75em))
    }
    .col-4\@xs {
        flex-basis: calc( 33.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 33.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-5\@xs {
        flex-basis: calc( 41.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 41.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-6\@xs {
        flex-basis: calc( 50% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 50% - 0.01px - var(--gap, 0.75em))
    }
    .col-7\@xs {
        flex-basis: calc( 58.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 58.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-8\@xs {
        flex-basis: calc( 66.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 66.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-9\@xs {
        flex-basis: calc( 75% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 75% - 0.01px - var(--gap, 0.75em))
    }
    .col-10\@xs {
        flex-basis: calc( 83.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 83.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-11\@xs {
        flex-basis: calc( 91.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 91.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-12\@xs {
        flex-basis: calc( 100% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 100% - 0.01px - var(--gap, 0.75em))
    }
    .col-content\@xs {
        flex-grow: 0;
        flex-basis: initial;
        max-width: initial
    }
    .offset-1\@xs {
        --offset: calc(8.33% + var(--gap, 0.75em))
    }
    .offset-2\@xs {
        --offset: calc(16.66% + var(--gap, 0.75em))
    }
    .offset-3\@xs {
        --offset: calc(25% + var(--gap, 0.75em))
    }
    .offset-4\@xs {
        --offset: calc(33.33% + var(--gap, 0.75em))
    }
    .offset-5\@xs {
        --offset: calc(41.66% + var(--gap, 0.75em))
    }
    .offset-6\@xs {
        --offset: calc(50% + var(--gap, 0.75em))
    }
    .offset-7\@xs {
        --offset: calc(58.33% + var(--gap, 0.75em))
    }
    .offset-8\@xs {
        --offset: calc(66.66% + var(--gap, 0.75em))
    }
    .offset-9\@xs {
        --offset: calc(75% + var(--gap, 0.75em))
    }
    .offset-10\@xs {
        --offset: calc(83.33% + var(--gap, 0.75em))
    }
    .offset-11\@xs {
        --offset: calc(91.66% + var(--gap, 0.75em))
    }
    @supports (--css: variables) {
        .gap-xxxxs\@xs {
            --gap: var(--space-xxxxs)
        }
        .gap-xxxs\@xs {
            --gap: var(--space-xxxs)
        }
        .gap-xxs\@xs {
            --gap: var(--space-xxs)
        }
        .gap-xs\@xs {
            --gap: var(--space-xs)
        }
        .gap-sm\@xs {
            --gap: var(--space-sm)
        }
        .gap-md\@xs {
            --gap: var(--space-md)
        }
        .gap-lg\@xs {
            --gap: var(--space-lg)
        }
        .gap-xl\@xs {
            --gap: var(--space-xl)
        }
        .gap-xxl\@xs {
            --gap: var(--space-xxl)
        }
        .gap-xxxl\@xs {
            --gap: var(--space-xxxl)
        }
        .gap-xxxxl\@xs {
            --gap: var(--space-xxxxl)
        }
        .gap-0\@xs {
            --gap: 0px
        }
    }
}

@media (min-width: 48rem) {
    .col\@sm {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-1\@sm {
        flex-basis: calc( 8.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 8.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-2\@sm {
        flex-basis: calc( 16.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 16.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-3\@sm {
        flex-basis: calc( 25% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 25% - 0.01px - var(--gap, 0.75em))
    }
    .col-4\@sm {
        flex-basis: calc( 33.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 33.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-5\@sm {
        flex-basis: calc( 41.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 41.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-6\@sm {
        flex-basis: calc( 50% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 50% - 0.01px - var(--gap, 0.75em))
    }
    .col-7\@sm {
        flex-basis: calc( 58.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 58.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-8\@sm {
        flex-basis: calc( 66.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 66.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-9\@sm {
        flex-basis: calc( 75% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 75% - 0.01px - var(--gap, 0.75em))
    }
    .col-10\@sm {
        flex-basis: calc( 83.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 83.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-11\@sm {
        flex-basis: calc( 91.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 91.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-12\@sm {
        flex-basis: calc( 100% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 100% - 0.01px - var(--gap, 0.75em))
    }
    .col-content\@sm {
        flex-grow: 0;
        flex-basis: initial;
        max-width: initial
    }
    .offset-1\@sm {
        --offset: calc(8.33% + var(--gap, 0.75em))
    }
    .offset-2\@sm {
        --offset: calc(16.66% + var(--gap, 0.75em))
    }
    .offset-3\@sm {
        --offset: calc(25% + var(--gap, 0.75em))
    }
    .offset-4\@sm {
        --offset: calc(33.33% + var(--gap, 0.75em))
    }
    .offset-5\@sm {
        --offset: calc(41.66% + var(--gap, 0.75em))
    }
    .offset-6\@sm {
        --offset: calc(50% + var(--gap, 0.75em))
    }
    .offset-7\@sm {
        --offset: calc(58.33% + var(--gap, 0.75em))
    }
    .offset-8\@sm {
        --offset: calc(66.66% + var(--gap, 0.75em))
    }
    .offset-9\@sm {
        --offset: calc(75% + var(--gap, 0.75em))
    }
    .offset-10\@sm {
        --offset: calc(83.33% + var(--gap, 0.75em))
    }
    .offset-11\@sm {
        --offset: calc(91.66% + var(--gap, 0.75em))
    }
    @supports (--css: variables) {
        .gap-xxxxs\@sm {
            --gap: var(--space-xxxxs)
        }
        .gap-xxxs\@sm {
            --gap: var(--space-xxxs)
        }
        .gap-xxs\@sm {
            --gap: var(--space-xxs)
        }
        .gap-xs\@sm {
            --gap: var(--space-xs)
        }
        .gap-sm\@sm {
            --gap: var(--space-sm)
        }
        .gap-md\@sm {
            --gap: var(--space-md)
        }
        .gap-lg\@sm {
            --gap: var(--space-lg)
        }
        .gap-xl\@sm {
            --gap: var(--space-xl)
        }
        .gap-xxl\@sm {
            --gap: var(--space-xxl)
        }
        .gap-xxxl\@sm {
            --gap: var(--space-xxxl)
        }
        .gap-xxxxl\@sm {
            --gap: var(--space-xxxxl)
        }
        .gap-0\@sm {
            --gap: 0px
        }
    }
}

@media (min-width: 64rem) {
    .col\@md {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-1\@md {
        flex-basis: calc( 8.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 8.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-2\@md {
        flex-basis: calc( 16.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 16.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-3\@md {
        flex-basis: calc( 25% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 25% - 0.01px - var(--gap, 0.75em))
    }
    .col-4\@md {
        flex-basis: calc( 33.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 33.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-5\@md {
        flex-basis: calc( 41.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 41.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-6\@md {
        flex-basis: calc( 50% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 50% - 0.01px - var(--gap, 0.75em))
    }
    .col-7\@md {
        flex-basis: calc( 58.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 58.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-8\@md {
        flex-basis: calc( 66.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 66.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-9\@md {
        flex-basis: calc( 75% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 75% - 0.01px - var(--gap, 0.75em))
    }
    .col-10\@md {
        flex-basis: calc( 83.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 83.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-11\@md {
        flex-basis: calc( 91.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 91.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-12\@md {
        flex-basis: calc( 100% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 100% - 0.01px - var(--gap, 0.75em))
    }
    .col-content\@md {
        flex-grow: 0;
        flex-basis: initial;
        max-width: initial
    }
    .offset-1\@md {
        --offset: calc(8.33% + var(--gap, 0.75em))
    }
    .offset-2\@md {
        --offset: calc(16.66% + var(--gap, 0.75em))
    }
    .offset-3\@md {
        --offset: calc(25% + var(--gap, 0.75em))
    }
    .offset-4\@md {
        --offset: calc(33.33% + var(--gap, 0.75em))
    }
    .offset-5\@md {
        --offset: calc(41.66% + var(--gap, 0.75em))
    }
    .offset-6\@md {
        --offset: calc(50% + var(--gap, 0.75em))
    }
    .offset-7\@md {
        --offset: calc(58.33% + var(--gap, 0.75em))
    }
    .offset-8\@md {
        --offset: calc(66.66% + var(--gap, 0.75em))
    }
    .offset-9\@md {
        --offset: calc(75% + var(--gap, 0.75em))
    }
    .offset-10\@md {
        --offset: calc(83.33% + var(--gap, 0.75em))
    }
    .offset-11\@md {
        --offset: calc(91.66% + var(--gap, 0.75em))
    }
    @supports (--css: variables) {
        .gap-xxxxs\@md {
            --gap: var(--space-xxxxs)
        }
        .gap-xxxs\@md {
            --gap: var(--space-xxxs)
        }
        .gap-xxs\@md {
            --gap: var(--space-xxs)
        }
        .gap-xs\@md {
            --gap: var(--space-xs)
        }
        .gap-sm\@md {
            --gap: var(--space-sm)
        }
        .gap-md\@md {
            --gap: var(--space-md)
        }
        .gap-lg\@md {
            --gap: var(--space-lg)
        }
        .gap-xl\@md {
            --gap: var(--space-xl)
        }
        .gap-xxl\@md {
            --gap: var(--space-xxl)
        }
        .gap-xxxl\@md {
            --gap: var(--space-xxxl)
        }
        .gap-xxxxl\@md {
            --gap: var(--space-xxxxl)
        }
        .gap-0\@md {
            --gap: 0px
        }
    }
}

@media (min-width: 80rem) {
    .col\@lg {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-1\@lg {
        flex-basis: calc( 8.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 8.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-2\@lg {
        flex-basis: calc( 16.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 16.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-3\@lg {
        flex-basis: calc( 25% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 25% - 0.01px - var(--gap, 0.75em))
    }
    .col-4\@lg {
        flex-basis: calc( 33.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 33.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-5\@lg {
        flex-basis: calc( 41.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 41.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-6\@lg {
        flex-basis: calc( 50% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 50% - 0.01px - var(--gap, 0.75em))
    }
    .col-7\@lg {
        flex-basis: calc( 58.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 58.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-8\@lg {
        flex-basis: calc( 66.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 66.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-9\@lg {
        flex-basis: calc( 75% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 75% - 0.01px - var(--gap, 0.75em))
    }
    .col-10\@lg {
        flex-basis: calc( 83.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 83.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-11\@lg {
        flex-basis: calc( 91.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 91.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-12\@lg {
        flex-basis: calc( 100% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 100% - 0.01px - var(--gap, 0.75em))
    }
    .col-content\@lg {
        flex-grow: 0;
        flex-basis: initial;
        max-width: initial
    }
    .offset-1\@lg {
        --offset: calc(8.33% + var(--gap, 0.75em))
    }
    .offset-2\@lg {
        --offset: calc(16.66% + var(--gap, 0.75em))
    }
    .offset-3\@lg {
        --offset: calc(25% + var(--gap, 0.75em))
    }
    .offset-4\@lg {
        --offset: calc(33.33% + var(--gap, 0.75em))
    }
    .offset-5\@lg {
        --offset: calc(41.66% + var(--gap, 0.75em))
    }
    .offset-6\@lg {
        --offset: calc(50% + var(--gap, 0.75em))
    }
    .offset-7\@lg {
        --offset: calc(58.33% + var(--gap, 0.75em))
    }
    .offset-8\@lg {
        --offset: calc(66.66% + var(--gap, 0.75em))
    }
    .offset-9\@lg {
        --offset: calc(75% + var(--gap, 0.75em))
    }
    .offset-10\@lg {
        --offset: calc(83.33% + var(--gap, 0.75em))
    }
    .offset-11\@lg {
        --offset: calc(91.66% + var(--gap, 0.75em))
    }
    @supports (--css: variables) {
        .gap-xxxxs\@lg {
            --gap: var(--space-xxxxs)
        }
        .gap-xxxs\@lg {
            --gap: var(--space-xxxs)
        }
        .gap-xxs\@lg {
            --gap: var(--space-xxs)
        }
        .gap-xs\@lg {
            --gap: var(--space-xs)
        }
        .gap-sm\@lg {
            --gap: var(--space-sm)
        }
        .gap-md\@lg {
            --gap: var(--space-md)
        }
        .gap-lg\@lg {
            --gap: var(--space-lg)
        }
        .gap-xl\@lg {
            --gap: var(--space-xl)
        }
        .gap-xxl\@lg {
            --gap: var(--space-xxl)
        }
        .gap-xxxl\@lg {
            --gap: var(--space-xxxl)
        }
        .gap-xxxxl\@lg {
            --gap: var(--space-xxxxl)
        }
        .gap-0\@lg {
            --gap: 0px
        }
    }
}

@media (min-width: 90rem) {
    .col\@xl {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-1\@xl {
        flex-basis: calc( 8.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 8.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-2\@xl {
        flex-basis: calc( 16.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 16.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-3\@xl {
        flex-basis: calc( 25% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 25% - 0.01px - var(--gap, 0.75em))
    }
    .col-4\@xl {
        flex-basis: calc( 33.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 33.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-5\@xl {
        flex-basis: calc( 41.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 41.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-6\@xl {
        flex-basis: calc( 50% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 50% - 0.01px - var(--gap, 0.75em))
    }
    .col-7\@xl {
        flex-basis: calc( 58.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 58.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-8\@xl {
        flex-basis: calc( 66.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 66.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-9\@xl {
        flex-basis: calc( 75% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 75% - 0.01px - var(--gap, 0.75em))
    }
    .col-10\@xl {
        flex-basis: calc( 83.33% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 83.33% - 0.01px - var(--gap, 0.75em))
    }
    .col-11\@xl {
        flex-basis: calc( 91.66% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 91.66% - 0.01px - var(--gap, 0.75em))
    }
    .col-12\@xl {
        flex-basis: calc( 100% - 0.01px - var(--gap, 0.75em));
        max-width: calc( 100% - 0.01px - var(--gap, 0.75em))
    }
    .col-content\@xl {
        flex-grow: 0;
        flex-basis: initial;
        max-width: initial
    }
    .offset-1\@xl {
        --offset: calc(8.33% + var(--gap, 0.75em))
    }
    .offset-2\@xl {
        --offset: calc(16.66% + var(--gap, 0.75em))
    }
    .offset-3\@xl {
        --offset: calc(25% + var(--gap, 0.75em))
    }
    .offset-4\@xl {
        --offset: calc(33.33% + var(--gap, 0.75em))
    }
    .offset-5\@xl {
        --offset: calc(41.66% + var(--gap, 0.75em))
    }
    .offset-6\@xl {
        --offset: calc(50% + var(--gap, 0.75em))
    }
    .offset-7\@xl {
        --offset: calc(58.33% + var(--gap, 0.75em))
    }
    .offset-8\@xl {
        --offset: calc(66.66% + var(--gap, 0.75em))
    }
    .offset-9\@xl {
        --offset: calc(75% + var(--gap, 0.75em))
    }
    .offset-10\@xl {
        --offset: calc(83.33% + var(--gap, 0.75em))
    }
    .offset-11\@xl {
        --offset: calc(91.66% + var(--gap, 0.75em))
    }
    @supports (--css: variables) {
        .gap-xxxxs\@xl {
            --gap: var(--space-xxxxs)
        }
        .gap-xxxs\@xl {
            --gap: var(--space-xxxs)
        }
        .gap-xxs\@xl {
            --gap: var(--space-xxs)
        }
        .gap-xs\@xl {
            --gap: var(--space-xs)
        }
        .gap-sm\@xl {
            --gap: var(--space-sm)
        }
        .gap-md\@xl {
            --gap: var(--space-md)
        }
        .gap-lg\@xl {
            --gap: var(--space-lg)
        }
        .gap-xl\@xl {
            --gap: var(--space-xl)
        }
        .gap-xxl\@xl {
            --gap: var(--space-xxl)
        }
        .gap-xxxl\@xl {
            --gap: var(--space-xxxl)
        }
        .gap-xxxxl\@xl {
            --gap: var(--space-xxxxl)
        }
        .gap-0\@xl {
            --gap: 0px
        }
    }
}

:root {
    --radius-sm: calc(var(--radius, 0.25em)/2);
    --radius-md: var(--radius, 0.25em);
    --radius-lg: calc(var(--radius, 0.25em)*2);
    --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 0 46px 60px -6px rgba(0, 0, 0, 0.2);
    --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1)
}

:root {
    --heading-line-height: 1.2;
    --body-line-height: 1.4
}

body {
    font-size: var(--text-base-size, 1em);
    font-family: var(--font-primary, sans-serif);
    color: var(--color-contrast-high, #313135)
}

h1,
h2,
h3,
h4 {
    color: var(--color-contrast-higher, #1c1c21);
    line-height: var(--heading-line-height, 1.2)
}

h1 {
    font-size: var(--text-xxl, 2.074em)
}

h2 {
    font-size: var(--text-xl, 1.728em)
}

h3 {
    font-size: var(--text-lg, 1.44em)
}

h4 {
    font-size: var(--text-md, 1.2em)
}

small {
    font-size: var(--text-sm, 0.833em)
}

a,
.link {
    color: var(--color-primary, #2a6df4);
    text-decoration: underline
}

strong {
    font-weight: bold
}

s {
    text-decoration: line-through
}

u {
    text-decoration: underline
}
.text-component h2,
.text-component h3,
.text-component h4 {
    margin-top: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1))
}

.text-component p,
.text-component blockquote,
.text-component ul li,
.text-component ol li {
    line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1))
}

.text-component ul,
.text-component ol,
.text-component p,
.text-component blockquote,
.text-component .text-component__block {
    margin-bottom: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1))
}

.text-component ul,
.text-component ol {
    list-style-position: inside
}


.text-component ol {
    list-style-type: decimal
}

.text-component img {
    display: block;
    margin: 0 auto
}

.text-component figcaption {
    text-align: center;
    margin-top: calc(var(--space-unit) * 0.5)
}

.text-component em {
    font-style: italic
}

.text-component hr {
    margin-top: calc(var(--space-unit) * var(--text-vspace-multiplier, 1));
    margin-bottom: calc(var(--space-unit) * var(--text-vspace-multiplier, 1));
    margin-left: auto;
    margin-right: auto
}

.text-component>*:first-child {
    margin-top: 0;
  	position: relative;
  	padding-right: 100px;
}

.compare-block {
	margin-bottom: 20px;
}
.compare-block input {
	margin-right: 5px;
}
.text-component>*:last-child {
    margin-bottom: 0
}

.text-component .product-title a {
	position: absolute;
  right: 0px;
  top: 0px;
}

.text-component__block--full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw)
}

@media (min-width: 48rem) {
    .text-component__block--left,
    .text-component__block--right {
        width: 45%
    }
    .text-component__block--left img,
    .text-component__block--right img {
        width: 100%
    }
    .text-component__block--left {
        float: left;
        margin-right: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1))
    }
    .text-component__block--right {
        float: right;
        margin-left: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1))
    }
}

@media (min-width: 90rem) {
    .text-component__block--outset {
        width: calc(100% + 10.5 * var(--space-unit))
    }
    .text-component__block--outset img {
        width: 100%
    }
    .text-component__block--outset:not(.text-component__block--right) {
        margin-left: calc(-5.25 * var(--space-unit))
    }
    .text-component__block--left,
    .text-component__block--right {
        width: 50%
    }
    .text-component__block--right.text-component__block--outset {
        margin-right: calc(-5.25 * var(--space-unit))
    }
}

:root {
    --icon-xxxs: 8px;
    --icon-xxs: 12px;
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px;
    --icon-xxl: 96px;
    --icon-xxxl: 128px
}

.icon {
    display: inline-block;
    color: inherit;
    fill: currentColor;
    height: 1em;
    width: 1em;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial
}

.icon--xxxs {
    width: var(--icon-xxxs);
    height: var(--icon-xxxs)
}

.icon--xxs {
    width: var(--icon-xxs);
    height: var(--icon-xxs)
}

.icon--xs {
    width: var(--icon-xs);
    height: var(--icon-xs)
}

.icon--sm {
    width: var(--icon-sm);
    height: var(--icon-sm)
}

.icon--md {
    width: var(--icon-md);
    height: var(--icon-md)
}

.icon--lg {
    width: var(--icon-lg);
    height: var(--icon-lg)
}

.icon--xl {
    width: var(--icon-xl);
    height: var(--icon-xl)
}

.icon--xxl {
    width: var(--icon-xxl);
    height: var(--icon-xxl)
}

.icon--xxxl {
    width: var(--icon-xxxl);
    height: var(--icon-xxxl)
}

.icon--is-spinning {
    -webkit-animation: icon-spin 1s infinite linear;
    animation: icon-spin 1s infinite linear
}

@-webkit-keyframes icon-spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes icon-spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.icon use {
    color: inherit;
    fill: currentColor
}

.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    font-size: var(--btn-font-size, 1em);
    padding-top: var(--btn-padding-y, 0.5em);
    padding-bottom: var(--btn-padding-y, 0.5em);
    padding-left: var(--btn-padding-x, 0.75em);
    padding-right: var(--btn-padding-x, 0.75em);
    border-radius: var(--btn-radius, 0.25em)
}

.btn--sm {
    font-size: var(--btn-font-size-sm, 0.8em)
}

.btn--md {
    font-size: var(--btn-font-size-md, 1.2em)
}

.btn--lg {
    font-size: var(--btn-font-size-lg, 1.4em)
}

.btn--icon {
    padding: var(--btn-padding-y, 0.5em)
}

.form-control,
.product-configure select,
.product-configure input:not([type="checkbox"]):not([type="radio"]) {
    font-size: var(--form-control-font-size, 1em);
    padding-top: var(--form-control-padding-y, 0.5em);
    padding-bottom: var(--form-control-padding-y, 0.5em);
    padding-left: var(--form-control-padding-x, 0.75em);
    padding-right: var(--form-control-padding-x, 0.75em);
    border-radius: var(--form-control-radius, 0.25em)
}

.form-legend {
    color: var(--color-contrast-higher, #1c1c21);
    line-height: var(--heading-line-height, 1.2);
    font-size: var(--text-md, 1.2em);
    margin-bottom: var(--space-xxs)
}

.form-label {
    display: inline-block
}

.form__msg-error,
.form-error-msg {
    color: var(--color-error, #e02447);
    font-size: var(--text-sm, 0.833em);
    margin-top: var(--space-xxs);
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px)
}

.form__msg-error--is-visible,
.form-error-msg--is-visible {
    position: relative;
    clip: auto
}

.radio-list>*,
.checkbox-list>* {
    position: relative;
    display: flex;
    align-items: baseline
}

.radio-list label,
.checkbox-list label {
    line-height: var(--body-line-height)
}

.radio-list input,
.checkbox-list input {
    margin-right: var(--space-xxxs);
    flex-shrink: 0
}

:root {
    --zindex-header: 3;
    --zindex-popover: 5;
    --zindex-fixed-element: 10;
    --zindex-overlay: 15
}

:root {
    --display: block
}

.is-visible {
    display: var(--display) !important
}

.is-hidden {
    display: none !important
}

html:not(.js) .no-js\:is-hidden {
    display: none !important
}

@media print {
    .print\:is-hidden {
        display: none !important
    }
}

.sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-column {
    flex-direction: column
}

.flex-column-reverse {
    flex-direction: column-reverse
}

.flex-row {
    flex-direction: row
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-center {
    justify-content: center;
    align-items: center
}

.flex-grow {
    flex-grow: 1
}

.flex-grow-0 {
    flex-grow: 0
}

.flex-shrink {
    flex-shrink: 1
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-basis-0 {
    flex-basis: 0
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.items-center {
    align-items: center
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-baseline {
    align-items: baseline
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.space-unit-rem {
    --space-unit: 1rem
}

.space-unit-em {
    --space-unit: 1em
}

.space-unit-px {
    --space-unit: 16px
}

.margin-xxxxs {
    margin: var(--space-xxxxs)
}

.margin-xxxs {
    margin: var(--space-xxxs)
}

.margin-xxs {
    margin: var(--space-xxs)
}

.margin-xs {
    margin: var(--space-xs)
}

.margin-sm {
    margin: var(--space-sm)
}

.margin-md {
    margin: var(--space-md)
}

.margin-lg {
    margin: var(--space-lg)
}

.margin-xl {
    margin: var(--space-xl)
}

.margin-xxl {
    margin: var(--space-xxl)
}

.margin-xxxl {
    margin: var(--space-xxxl)
}

.margin-xxxxl {
    margin: var(--space-xxxxl)
}

.margin-auto {
    margin: auto
}

.margin-0 {
    margin: 0
}

.margin-top-xxxxs {
    margin-top: var(--space-xxxxs)
}

.margin-top-xxxs {
    margin-top: var(--space-xxxs)
}

.margin-top-xxs {
    margin-top: var(--space-xxs)
}

.margin-top-xs {
    margin-top: var(--space-xs)
}

.margin-top-sm {
    margin-top: var(--space-sm)
}

.margin-top-md {
    margin-top: var(--space-md)
}

.margin-top-lg {
    margin-top: var(--space-lg)
}

.margin-top-xl {
    margin-top: var(--space-xl)
}

.margin-top-xxl {
    margin-top: var(--space-xxl)
}

.margin-top-xxxl {
    margin-top: var(--space-xxxl)
}

.margin-top-xxxxl {
    margin-top: var(--space-xxxxl)
}

.margin-top-auto {
    margin-top: auto
}

.margin-top-0 {
    margin-top: 0
}

.margin-bottom-xxxxs {
    margin-bottom: var(--space-xxxxs)
}

.margin-bottom-xxxs {
    margin-bottom: var(--space-xxxs)
}

.margin-bottom-xxs {
    margin-bottom: var(--space-xxs)
}

.margin-bottom-xs {
    margin-bottom: var(--space-xs)
}

.margin-bottom-sm {
    margin-bottom: var(--space-sm)
}

.margin-bottom-md {
    margin-bottom: var(--space-md)
}

.margin-bottom-lg {
    margin-bottom: var(--space-lg)
}

.margin-bottom-xl {
    margin-bottom: var(--space-xl)
}

.margin-bottom-xxl {
    margin-bottom: var(--space-xxl)
}

.margin-bottom-xxxl {
    margin-bottom: var(--space-xxxl)
}

.margin-bottom-xxxxl {
    margin-bottom: var(--space-xxxxl)
}

.margin-bottom-auto {
    margin-bottom: auto
}

.margin-bottom-0 {
    margin-bottom: 0
}

.margin-right-xxxxs {
    margin-right: var(--space-xxxxs)
}

.margin-right-xxxs {
    margin-right: var(--space-xxxs)
}

.margin-right-xxs {
    margin-right: var(--space-xxs)
}

.margin-right-xs {
    margin-right: var(--space-xs)
}

.margin-right-sm {
    margin-right: var(--space-sm)
}

.margin-right-md {
    margin-right: var(--space-md)
}

.margin-right-lg {
    margin-right: var(--space-lg)
}

.margin-right-xl {
    margin-right: var(--space-xl)
}

.margin-right-xxl {
    margin-right: var(--space-xxl)
}

.margin-right-xxxl {
    margin-right: var(--space-xxxl)
}

.margin-right-xxxxl {
    margin-right: var(--space-xxxxl)
}

.margin-right-auto {
    margin-right: auto
}

.margin-right-0 {
    margin-right: 0
}

.margin-left-xxxxs {
    margin-left: var(--space-xxxxs)
}

.margin-left-xxxs {
    margin-left: var(--space-xxxs)
}

.margin-left-xxs {
    margin-left: var(--space-xxs)
}

.margin-left-xs {
    margin-left: var(--space-xs)
}

.margin-left-sm {
    margin-left: var(--space-sm)
}

.margin-left-md {
    margin-left: var(--space-md)
}

.margin-left-lg {
    margin-left: var(--space-lg)
}

.margin-left-xl {
    margin-left: var(--space-xl)
}

.margin-left-xxl {
    margin-left: var(--space-xxl)
}

.margin-left-xxxl {
    margin-left: var(--space-xxxl)
}

.margin-left-xxxxl {
    margin-left: var(--space-xxxxl)
}

.margin-left-auto {
    margin-left: auto
}

.margin-left-0 {
    margin-left: 0
}

.margin-x-xxxxs {
    margin-left: var(--space-xxxxs);
    margin-right: var(--space-xxxxs)
}

.margin-x-xxxs {
    margin-left: var(--space-xxxs);
    margin-right: var(--space-xxxs)
}

.margin-x-xxs {
    margin-left: var(--space-xxs);
    margin-right: var(--space-xxs)
}

.margin-x-xs {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs)
}

.margin-x-sm {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm)
}

.margin-x-md {
    margin-left: var(--space-md);
    margin-right: var(--space-md)
}

.margin-x-lg {
    margin-left: var(--space-lg);
    margin-right: var(--space-lg)
}

.margin-x-xl {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl)
}

.margin-x-xxl {
    margin-left: var(--space-xxl);
    margin-right: var(--space-xxl)
}

.margin-x-xxxl {
    margin-left: var(--space-xxxl);
    margin-right: var(--space-xxxl)
}

.margin-x-xxxxl {
    margin-left: var(--space-xxxxl);
    margin-right: var(--space-xxxxl)
}

.margin-x-auto {
    margin-left: auto;
    margin-right: auto
}

.margin-x-0 {
    margin-left: 0;
    margin-right: 0
}

.margin-y-xxxxs {
    margin-top: var(--space-xxxxs);
    margin-bottom: var(--space-xxxxs)
}

.margin-y-xxxs {
    margin-top: var(--space-xxxs);
    margin-bottom: var(--space-xxxs)
}

.margin-y-xxs {
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xxs)
}

.margin-y-xs {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs)
}

.margin-y-sm {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm)
}

.margin-y-md {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md)
}

.margin-y-lg {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg)
}

.margin-y-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl)
}

.margin-y-xxl {
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-xxl)
}

.margin-y-xxxl {
    margin-top: var(--space-xxxl);
    margin-bottom: var(--space-xxxl)
}

.margin-y-xxxxl {
    margin-top: var(--space-xxxxl);
    margin-bottom: var(--space-xxxxl)
}

.margin-y-auto {
    margin-top: auto;
    margin-bottom: auto
}

.margin-y-0 {
    margin-top: 0;
    margin-bottom: 0
}

.padding-xxxxs {
    padding: var(--space-xxxxs)
}

.padding-xxxs {
    padding: var(--space-xxxs)
}

.padding-xxs {
    padding: var(--space-xxs)
}

.padding-xs {
    padding: var(--space-xs)
}

.padding-sm {
    padding: var(--space-sm)
}

.padding-md {
    padding: var(--space-md)
}

.padding-lg {
    padding: var(--space-lg)
}

.padding-xl {
    padding: var(--space-xl)
}

.padding-xxl {
    padding: var(--space-xxl)
}

.padding-xxxl {
    padding: var(--space-xxxl)
}

.padding-xxxxl {
    padding: var(--space-xxxxl)
}

.padding-0 {
    padding: 0
}

.padding-component {
    padding: var(--component-padding)
}

.padding-top-xxxxs {
    padding-top: var(--space-xxxxs)
}

.padding-top-xxxs {
    padding-top: var(--space-xxxs)
}

.padding-top-xxs {
    padding-top: var(--space-xxs)
}

.padding-top-xs {
    padding-top: var(--space-xs)
}

.padding-top-sm {
    padding-top: var(--space-sm)
}

.padding-top-md {
    padding-top: var(--space-md)
}

.padding-top-lg {
    padding-top: var(--space-lg)
}

.padding-top-xl {
    padding-top: var(--space-xl)
}

.padding-top-xxl {
    padding-top: var(--space-xxl)
}

.padding-top-xxxl {
    padding-top: var(--space-xxxl)
}

.padding-top-xxxxl {
    padding-top: var(--space-xxxxl)
}

.padding-top-0 {
    padding-top: 0
}

.padding-top-component {
    padding-top: var(--component-padding)
}

.padding-bottom-xxxxs {
    padding-bottom: var(--space-xxxxs)
}

.padding-bottom-xxxs {
    padding-bottom: var(--space-xxxs)
}

.padding-bottom-xxs {
    padding-bottom: var(--space-xxs)
}

.padding-bottom-xs {
    padding-bottom: var(--space-xs)
}

.padding-bottom-sm {
    padding-bottom: var(--space-sm)
}

.padding-bottom-md {
    padding-bottom: var(--space-md)
}

.padding-bottom-lg {
    padding-bottom: var(--space-lg)
}

.padding-bottom-xl {
    padding-bottom: var(--space-xl)
}

.padding-bottom-xxl {
    padding-bottom: var(--space-xxl)
}

.padding-bottom-xxxl {
    padding-bottom: var(--space-xxxl)
}

.padding-bottom-xxxxl {
    padding-bottom: var(--space-xxxxl)
}

.padding-bottom-0 {
    padding-bottom: 0
}

.padding-bottom-component {
    padding-bottom: var(--component-padding)
}

.padding-right-xxxxs {
    padding-right: var(--space-xxxxs)
}

.padding-right-xxxs {
    padding-right: var(--space-xxxs)
}

.padding-right-xxs {
    padding-right: var(--space-xxs)
}

.padding-right-xs {
    padding-right: var(--space-xs)
}

.padding-right-sm {
    padding-right: var(--space-sm)
}

.padding-right-md {
    padding-right: var(--space-md)
}

.padding-right-lg {
    padding-right: var(--space-lg)
}

.padding-right-xl {
    padding-right: var(--space-xl)
}

.padding-right-xxl {
    padding-right: var(--space-xxl)
}

.padding-right-xxxl {
    padding-right: var(--space-xxxl)
}

.padding-right-xxxxl {
    padding-right: var(--space-xxxxl)
}

.padding-right-0 {
    padding-right: 0
}

.padding-right-component {
    padding-right: var(--component-padding)
}

.padding-left-xxxxs {
    padding-left: var(--space-xxxxs)
}

.padding-left-xxxs {
    padding-left: var(--space-xxxs)
}

.padding-left-xxs {
    padding-left: var(--space-xxs)
}

.padding-left-xs {
    padding-left: var(--space-xs)
}

.padding-left-sm {
    padding-left: var(--space-sm)
}

.padding-left-md {
    padding-left: var(--space-md)
}

.padding-left-lg {
    padding-left: var(--space-lg)
}

.padding-left-xl {
    padding-left: var(--space-xl)
}

.padding-left-xxl {
    padding-left: var(--space-xxl)
}

.padding-left-xxxl {
    padding-left: var(--space-xxxl)
}

.padding-left-xxxxl {
    padding-left: var(--space-xxxxl)
}

.padding-left-0 {
    padding-left: 0
}

.padding-left-component {
    padding-left: var(--component-padding)
}

.padding-x-xxxxs {
    padding-left: var(--space-xxxxs);
    padding-right: var(--space-xxxxs)
}

.padding-x-xxxs {
    padding-left: var(--space-xxxs);
    padding-right: var(--space-xxxs)
}

.padding-x-xxs {
    padding-left: var(--space-xxs);
    padding-right: var(--space-xxs)
}

.padding-x-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs)
}

.padding-x-sm {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm)
}

.padding-x-md {
    padding-left: var(--space-md);
    padding-right: var(--space-md)
}

.padding-x-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg)
}

.padding-x-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl)
}

.padding-x-xxl {
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl)
}

.padding-x-xxxl {
    padding-left: var(--space-xxxl);
    padding-right: var(--space-xxxl)
}

.padding-x-xxxxl {
    padding-left: var(--space-xxxxl);
    padding-right: var(--space-xxxxl)
}

.padding-x-0 {
    padding-left: 0;
    padding-right: 0
}

.padding-x-component {
    padding-left: var(--component-padding);
    padding-right: var(--component-padding)
}

.padding-y-xxxxs {
    padding-top: var(--space-xxxxs);
    padding-bottom: var(--space-xxxxs)
}

.padding-y-xxxs {
    padding-top: var(--space-xxxs);
    padding-bottom: var(--space-xxxs)
}

.padding-y-xxs {
    padding-top: var(--space-xxs);
    padding-bottom: var(--space-xxs)
}

.padding-y-xs {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs)
}

.padding-y-sm {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm)
}

.padding-y-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md)
}

.padding-y-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg)
}

.padding-y-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl)
}

.padding-y-xxl {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl)
}

.padding-y-xxxl {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl)
}

.padding-y-xxxxl {
    padding-top: var(--space-xxxxl);
    padding-bottom: var(--space-xxxxl)
}

.padding-y-0 {
    padding-top: 0;
    padding-bottom: 0
}

.padding-y-component {
    padding-top: var(--component-padding);
    padding-bottom: var(--component-padding)
}

.align-baseline {
    vertical-align: baseline
}

.align-top {
    vertical-align: top
}

.align-middle {
    vertical-align: middle
}

.align-bottom {
    vertical-align: bottom
}

.truncate,
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.text-replace {
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap
}

.break-word {
    overflow-wrap: break-word;
    min-width: 0
}

.text-xs {
    font-size: var(--text-xs, 0.694em)
}

.text-sm {
    font-size: var(--text-sm, 0.833em)
}

.text-base {
    font-size: var(--text-unit, 1em)
}

.text-md {
    font-size: var(--text-md, 1.2em)
}

.text-lg {
    font-size: var(--text-lg, 1.44em)
}

.text-xl {
    font-size: var(--text-xl, 1.728em)
}

.text-xxl {
    font-size: var(--text-xxl, 2.074em)
}

.text-xxxl {
    font-size: var(--text-xxxl, 2.488em)
}

.text-xxxxl {
    font-size: var(--text-xxxxl, 2.985em)
}

.text-unit-rem,
.text-unit-em,
.text-unit-px {
    font-size: var(--text-unit)
}

.text-unit-rem {
    --text-unit: 1rem
}

.text-unit-em {
    --text-unit: 1em
}

.text-unit-px {
    --text-unit: 16px
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.letter-spacing-sm {
    letter-spacing: -0.05em
}

.letter-spacing-md {
    letter-spacing: 0.05em
}

.letter-spacing-lg {
    letter-spacing: 0.1em
}

.font-light {
    font-weight: 300
}

.font-normal {
    font-weight: 400
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.font-bold,
.text-bold {
    font-weight: 700
}

.font-italic {
    font-style: italic
}

.font-smooth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.font-primary {
    font-family: var(--font-primary)
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-justify {
    text-align: justify
}

.text-line-through {
    text-decoration: line-through
}

.text-underline {
    text-decoration: underline
}

.text-decoration-none {
    text-decoration: none
}

.text-shadow-xs {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15)
}

.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25)
}

.text-shadow-md {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2)
}

.text-shadow-lg {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2)
}

.text-shadow-xl {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2), 0 6px 24px rgba(0, 0, 0, 0.25)
}

.text-shadow-none {
    text-shadow: none
}

.v-space-xxs {
    --text-vspace-multiplier: 0.25 !important
}

.v-space-xs {
    --text-vspace-multiplier: 0.5 !important
}

.v-space-sm {
    --text-vspace-multiplier: 0.75 !important
}

.v-space-md {
    --text-vspace-multiplier: 1.25 !important
}

.v-space-lg {
    --text-vspace-multiplier: 1.5 !important
}

.v-space-xl {
    --text-vspace-multiplier: 1.75 !important
}

.v-space-xxl {
    --text-vspace-multiplier: 2 !important
}

.line-height-xs {
    --heading-line-height: 1;
    --body-line-height: 1.1
}

.line-height-xs:not(.text-component) {
    line-height: 1.1
}

.line-height-sm {
    --heading-line-height: 1.1;
    --body-line-height: 1.2
}

.line-height-sm:not(.text-component) {
    line-height: 1.2
}

.line-height-md {
    --heading-line-height: 1.15;
    --body-line-height: 1.4
}

.line-height-md:not(.text-component) {
    line-height: 1.4
}

.line-height-lg {
    --heading-line-height: 1.22;
    --body-line-height: 1.58
}

.line-height-lg:not(.text-component) {
    line-height: 1.58
}

.line-height-xl {
    --heading-line-height: 1.3;
    --body-line-height: 1.72
}

.line-height-xl:not(.text-component) {
    line-height: 1.72
}

.line-height-body {
    line-height: var(--body-line-height)
}

.line-height-heading {
    line-height: var(--heading-line-height)
}

.line-height-normal {
    line-height: normal !important
}

.line-height-1 {
    line-height: 1 !important
}

.ws-nowrap,
.text-nowrap {
    white-space: nowrap
}

.cursor-pointer {
    cursor: pointer
}

.cursor-default {
    cursor: default
}

.pointer-events-auto {
    pointer-events: auto
}

.pointer-events-none {
    pointer-events: none
}

.user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.user-select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all
}

[class*="color-"] {
    --color-o: 1
}

.color-inherit {
    color: inherit
}

.color-bg {
    color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--color-o, 1))
}

.color-contrast-lower {
    color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--color-o, 1))
}

.color-contrast-low {
    color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--color-o, 1))
}

.color-contrast-medium {
    color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1))
}

.color-contrast-high {
    color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--color-o, 1))
}

.color-contrast-higher {
    color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--color-o, 1))
}

.color-primary-darker {
    color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--color-o, 1))
}

.color-primary-dark {
    color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--color-o, 1))
}

.color-primary {
    color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--color-o, 1))
}

.color-primary-light {
    color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--color-o, 1))
}

.color-primary-lighter {
    color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--color-o, 1))
}

.color-accent-darker {
    color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--color-o, 1))
}

.color-accent-dark {
    color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--color-o, 1))
}

.color-accent {
    color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--color-o, 1))
}

.color-accent-light {
    color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--color-o, 1))
}

.color-accent-lighter {
    color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--color-o, 1))
}

.color-success-darker {
    color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--color-o, 1))
}

.color-success-dark {
    color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--color-o, 1))
}

.color-success {
    color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--color-o, 1))
}

.color-success-light {
    color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--color-o, 1))
}

.color-success-lighter {
    color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--color-o, 1))
}

.color-warning-darker {
    color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--color-o, 1))
}

.color-warning-dark {
    color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--color-o, 1))
}

.color-warning {
    color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--color-o, 1))
}

.color-warning-light {
    color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--color-o, 1))
}

.color-warning-lighter {
    color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--color-o, 1))
}

.color-error-darker {
    color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--color-o, 1))
}

.color-error-dark {
    color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--color-o, 1))
}

.color-error {
    color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--color-o, 1))
}

.color-error-light {
    color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--color-o, 1))
}

.color-error-lighter {
    color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--color-o, 1))
}

.color-white {
    color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--color-o, 1))
}

.color-black {
    color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--color-o, 1))
}

@supports (--css: variables) {
    .color-opacity-0 {
        --color-o: 0
    }
    .color-opacity-10\% {
        --color-o: 0.1
    }
    .color-opacity-20\% {
        --color-o: 0.2
    }
    .color-opacity-30\% {
        --color-o: 0.3
    }
    .color-opacity-40\% {
        --color-o: 0.4
    }
    .color-opacity-50\% {
        --color-o: 0.5
    }
    .color-opacity-60\% {
        --color-o: 0.6
    }
    .color-opacity-70\% {
        --color-o: 0.7
    }
    .color-opacity-80\% {
        --color-o: 0.8
    }
    .color-opacity-90\% {
        --color-o: 0.9
    }
}

.width-xxxxs {
    width: var(--size-xxxxs, 0.25rem)
}

.width-xxxs {
    width: var(--size-xxxs, 0.5rem)
}

.width-xxs {
    width: var(--size-xxs, 0.75rem)
}

.width-xs {
    width: var(--size-xs, 1rem)
}

.width-sm {
    width: var(--size-sm, 1.5rem)
}

.width-md {
    width: var(--size-md, 2rem)
}

.width-lg {
    width: var(--size-lg, 3rem)
}

.width-xl {
    width: var(--size-xl, 4rem)
}

.width-xxl {
    width: var(--size-xxl, 6rem)
}

.width-xxxl {
    width: var(--size-xxxl, 8rem)
}

.width-xxxxl {
    width: var(--size-xxxxl, 16rem)
}

.width-0 {
    width: 0
}

.width-10\% {
    width: 10%
}

.width-20\% {
    width: 20%
}

.width-25\% {
    width: 25%
}

.width-30\% {
    width: 30%
}

.width-33\% {
    width: calc(100% / 3)
}

.width-40\% {
    width: 40%
}

.width-50\% {
    width: 50%
}

.width-60\% {
    width: 60%
}

.width-66\% {
    width: calc(100% / 1.5)
}

.width-70\% {
    width: 70%
}

.width-75\% {
    width: 75%
}

.width-80\% {
    width: 80%
}

.width-90\% {
    width: 90%
}

.width-100\% {
    width: 100%
}

.width-100vw {
    width: 100vw
}

.width-auto {
    width: auto
}

.height-xxxxs {
    height: var(--size-xxxxs, 0.25rem)
}

.height-xxxs {
    height: var(--size-xxxs, 0.5rem)
}

.height-xxs {
    height: var(--size-xxs, 0.75rem)
}

.height-xs {
    height: var(--size-xs, 1rem)
}

.height-sm {
    height: var(--size-sm, 1.5rem)
}

.height-md {
    height: var(--size-md, 2rem)
}

.height-lg {
    height: var(--size-lg, 3rem)
}

.height-xl {
    height: var(--size-xl, 4rem)
}

.height-xxl {
    height: var(--size-xxl, 6rem)
}

.height-xxxl {
    height: var(--size-xxxl, 8rem)
}

.height-xxxxl {
    height: var(--size-xxxxl, 16rem)
}

.height-0 {
    height: 0
}

.height-10\% {
    height: 10%
}

.height-20\% {
    height: 20%
}

.height-25\% {
    height: 25%
}

.height-30\% {
    height: 30%
}

.height-33\% {
    height: calc(100% / 3)
}

.height-40\% {
    height: 40%
}

.height-50\% {
    height: 50%
}

.height-60\% {
    height: 60%
}

.height-66\% {
    height: calc(100% / 1.5)
}

.height-70\% {
    height: 70%
}

.height-75\% {
    height: 75%
}

.height-80\% {
    height: 80%
}

.height-90\% {
    height: 90%
}

.height-100\% {
    height: 100%
}

.height-100vh {
    height: 100vh
}

.height-auto {
    height: auto
}

.min-width-0 {
    min-width: 0
}

.min-width-25\% {
    min-width: 25%
}

.min-width-33\% {
    min-width: calc(100% / 3)
}

.min-width-50\% {
    min-width: 50%
}

.min-width-66\% {
    min-width: calc(100% / 1.5)
}

.min-width-75\% {
    min-width: 75%
}

.min-width-100\% {
    min-width: 100%
}

.min-width-100vw {
    min-width: 100vw
}

.min-height-100\% {
    min-height: 100%
}

.min-height-100vh {
    min-height: 100vh
}

:root {
    --max-width-xxxxs: 20rem;
    --max-width-xxxs: 26rem;
    --max-width-xxs: 32rem;
    --max-width-xs: 38rem;
    --max-width-sm: 48rem;
    --max-width-md: 64rem;
    --max-width-lg: 80rem;
    --max-width-xl: 90rem;
    --max-width-xxl: 100rem;
    --max-width-xxxl: 120rem;
    --max-width-xxxxl: 150rem
}

.max-width-xxxxs {
    max-width: var(--max-width-xxxxs)
}

.max-width-xxxs {
    max-width: var(--max-width-xxxs)
}

.max-width-xxs {
    max-width: var(--max-width-xxs)
}

.max-width-xs {
    max-width: var(--max-width-xs)
}

.max-width-sm {
    max-width: var(--max-width-sm)
}

.max-width-md {
    max-width: var(--max-width-md)
}

.max-width-lg {
    max-width: var(--max-width-lg)
}

.max-width-xl {
    max-width: var(--max-width-xl)
}

.max-width-xxl {
    max-width: var(--max-width-xxl)
}

.max-width-xxxl {
    max-width: var(--max-width-xxxl)
}

.max-width-xxxxl {
    max-width: var(--max-width-xxxxl)
}

.max-width-100\% {
    max-width: 100%
}

[class*="max-width-adaptive"] {
    max-width: 32rem
}

@media (min-width: 48rem) {
    .max-width-adaptive-sm,
    .max-width-adaptive-md,
    .max-width-adaptive-lg,
    .max-width-adaptive-xl,
    .max-width-adaptive {
        max-width: 48rem
    }
}

@media (min-width: 64rem) {
    .max-width-adaptive-md,
    .max-width-adaptive-lg,
    .max-width-adaptive-xl,
    .max-width-adaptive {
        max-width: 64rem
    }
}

@media (min-width: 80rem) {
    .max-width-adaptive-lg,
    .max-width-adaptive-xl,
    .max-width-adaptive {
        max-width: 80rem
    }
}

@media (min-width: 90rem) {
    .max-width-adaptive-xl {
        max-width: 90rem
    }
}

.max-height-100\% {
    max-height: 100%
}

.max-height-100vh {
    max-height: 100vh
}

.position-relative {
    position: relative
}

.position-absolute {
    position: absolute
}

.position-fixed {
    position: fixed
}

.position-sticky {
    position: -webkit-sticky;
    position: sticky
}

.top-0 {
    top: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.right-0 {
    right: 0
}

.z-index-header {
    z-index: var(--zindex-header)
}

.z-index-popover {
    z-index: var(--zindex-popover)
}

.z-index-fixed-element {
    z-index: var(--zindex-fixed-element)
}

.z-index-overlay {
    z-index: var(--zindex-overlay)
}

.zindex-1,
.z-index-1 {
    z-index: 1
}

.zindex-2,
.z-index-2 {
    z-index: 2
}

.zindex-3,
.z-index-3 {
    z-index: 3
}

.overflow-hidden {
    overflow: hidden
}

.overflow-auto {
    overflow: auto
}

.momentum-scrolling {
    -webkit-overflow-scrolling: touch
}

.overscroll-contain {
    -ms-scroll-chaining: none;
    overscroll-behavior: contain
}

.opacity-0 {
    opacity: 0
}

.opacity-10\% {
    opacity: 0.1
}

.opacity-20\% {
    opacity: 0.2
}

.opacity-30\% {
    opacity: 0.3
}

.opacity-40\% {
    opacity: 0.4
}

.opacity-50\% {
    opacity: 0.5
}

.opacity-60\% {
    opacity: 0.6
}

.opacity-70\% {
    opacity: 0.7
}

.opacity-80\% {
    opacity: 0.8
}

.opacity-90\% {
    opacity: 0.9
}

.media-wrapper {
    position: relative;
    height: 0;
    padding-bottom: 56.25%
}

.media-wrapper>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.media-wrapper--4\:3 {
    padding-bottom: calc((3 / 4) * 100%)
}

.media-wrapper--1\:1 {
    padding-bottom: calc((1 / 1) * 100%)
}

.float-left {
    float: left
}

.float-right {
    float: right
}

.clearfix::after {
    content: "";
    display: table;
    clear: both
}

[class*="border-"] {
    --border-o: 1
}

.border {
    border: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1))
}

.border-top {
    border-top: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1))
}

.border-bottom {
    border-bottom: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1))
}

.border-left {
    border-left: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1))
}

.border-right {
    border-right: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1))
}

.border-2 {
    border-width: 2px
}

.border-3 {
    border-width: 3px
}

.border-4 {
    border-width: 4px
}

.border-bg {
    border-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--border-o, 1))
}

.border-contrast-lower {
    border-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1))
}

.border-contrast-low {
    border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1))
}

.border-contrast-medium {
    border-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--border-o, 1))
}

.border-contrast-high {
    border-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--border-o, 1))
}

.border-contrast-higher {
    border-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o, 1))
}

.border-primary-darker {
    border-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--border-o, 1))
}

.border-primary-dark {
    border-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--border-o, 1))
}

.border-primary {
    border-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--border-o, 1))
}

.border-primary-light {
    border-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--border-o, 1))
}

.border-primary-lighter {
    border-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--border-o, 1))
}

.border-accent-darker {
    border-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--border-o, 1))
}

.border-accent-dark {
    border-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--border-o, 1))
}

.border-accent {
    border-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--border-o, 1))
}

.border-accent-light {
    border-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--border-o, 1))
}

.border-accent-lighter {
    border-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--border-o, 1))
}

.border-success-darker {
    border-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--border-o, 1))
}

.border-success-dark {
    border-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--border-o, 1))
}

.border-success {
    border-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--border-o, 1))
}

.border-success-light {
    border-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--border-o, 1))
}

.border-success-lighter {
    border-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--border-o, 1))
}

.border-warning-darker {
    border-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--border-o, 1))
}

.border-warning-dark {
    border-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--border-o, 1))
}

.border-warning {
    border-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--border-o, 1))
}

.border-warning-light {
    border-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--border-o, 1))
}

.border-warning-lighter {
    border-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--border-o, 1))
}

.border-error-darker {
    border-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--border-o, 1))
}

.border-error-dark {
    border-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--border-o, 1))
}

.border-error {
    border-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--border-o, 1))
}

.border-error-light {
    border-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--border-o, 1))
}

.border-error-lighter {
    border-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--border-o, 1))
}

.border-white {
    border-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--border-o, 1))
}

.border-black {
    border-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--border-o, 1))
}

@supports (--css: variables) {
    .border-opacity-0 {
        --border-o: 0
    }
    .border-opacity-10\% {
        --border-o: 0.1
    }
    .border-opacity-20\% {
        --border-o: 0.2
    }
    .border-opacity-30\% {
        --border-o: 0.3
    }
    .border-opacity-40\% {
        --border-o: 0.4
    }
    .border-opacity-50\% {
        --border-o: 0.5
    }
    .border-opacity-60\% {
        --border-o: 0.6
    }
    .border-opacity-70\% {
        --border-o: 0.7
    }
    .border-opacity-80\% {
        --border-o: 0.8
    }
    .border-opacity-90\% {
        --border-o: 0.9
    }
}

.radius-sm {
    border-radius: var(--radius-sm)
}

.radius-md {
    border-radius: var(--radius-md)
}

.radius-lg {
    border-radius: var(--radius-lg)
}

.radius-50\% {
    border-radius: 50%
}

.radius-full {
    border-radius: 50em
}

.radius-0 {
    border-radius: 0
}

.radius-top-left-0 {
    border-top-left-radius: 0
}

.radius-top-right-0 {
    border-top-right-radius: 0
}

.radius-bottom-right-0 {
    border-bottom-right-radius: 0
}

.radius-bottom-left-0 {
    border-bottom-left-radius: 0
}

.shadow-xs {
    box-shadow: var(--shadow-xs)
}

.shadow-sm {
    box-shadow: var(--shadow-sm)
}

.shadow-md {
    box-shadow: var(--shadow-md)
}

.shadow-lg {
    box-shadow: var(--shadow-lg)
}

.shadow-xl {
    box-shadow: var(--shadow-xl)
}

.shadow-none {
    box-shadow: none
}

.bg,
[class*="bg-"] {
    --bg-o: 1
}

.bg-transparent {
    background-color: transparent
}

.bg-inherit {
    background-color: inherit
}

.bg {
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--bg-o))
}

.bg-contrast-lower {
    background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--bg-o, 1))
}

.bg-contrast-low {
    background-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--bg-o, 1))
}

.bg-contrast-medium {
    background-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--bg-o, 1))
}

.bg-contrast-high {
    background-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--bg-o, 1))
}

.bg-contrast-higher {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--bg-o, 1))
}

.bg-primary-darker {
    background-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--bg-o, 1))
}

.bg-primary-dark {
    background-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--bg-o, 1))
}

.bg-primary {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--bg-o, 1))
}

.bg-primary-light {
    background-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--bg-o, 1))
}

.bg-primary-lighter {
    background-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--bg-o, 1))
}

.bg-accent-darker {
    background-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--bg-o, 1))
}

.bg-accent-dark {
    background-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--bg-o, 1))
}

.bg-accent {
    background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--bg-o, 1))
}

.bg-accent-light {
    background-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--bg-o, 1))
}

.bg-accent-lighter {
    background-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--bg-o, 1))
}

.bg-success-darker {
    background-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--bg-o, 1))
}

.bg-success-dark {
    background-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--bg-o, 1))
}

.bg-success {
    background-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--bg-o, 1))
}

.bg-success-light {
    background-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--bg-o, 1))
}

.bg-success-lighter {
    background-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--bg-o, 1))
}

.bg-warning-darker {
    background-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--bg-o, 1))
}

.bg-warning-dark {
    background-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--bg-o, 1))
}

.bg-warning {
    background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--bg-o, 1))
}

.bg-warning-light {
    background-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--bg-o, 1))
}

.bg-warning-lighter {
    background-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--bg-o, 1))
}

.bg-error-darker {
    background-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--bg-o, 1))
}

.bg-error-dark {
    background-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--bg-o, 1))
}

.bg-error {
    background-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--bg-o, 1))
}

.bg-error-light {
    background-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--bg-o, 1))
}

.bg-error-lighter {
    background-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--bg-o, 1))
}

.bg-white {
    background-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--bg-o, 1))
}

.bg-black {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--bg-o, 1))
}

@supports (--css: variables) {
    .bg-opacity-0 {
        --bg-o: 0
    }
    .bg-opacity-10\% {
        --bg-o: 0.1
    }
    .bg-opacity-20\% {
        --bg-o: 0.2
    }
    .bg-opacity-30\% {
        --bg-o: 0.3
    }
    .bg-opacity-40\% {
        --bg-o: 0.4
    }
    .bg-opacity-50\% {
        --bg-o: 0.5
    }
    .bg-opacity-60\% {
        --bg-o: 0.6
    }
    .bg-opacity-70\% {
        --bg-o: 0.7
    }
    .bg-opacity-80\% {
        --bg-o: 0.8
    }
    .bg-opacity-90\% {
        --bg-o: 0.9
    }
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: center
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.backdrop-blur-10 {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.backdrop-blur-20 {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.isolate {
    isolation: isolate
}

.blend-multiply {
    mix-blend-mode: multiply
}

.blend-overlay {
    mix-blend-mode: overlay
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.flip {
    transform: scale(-1)
}

.flip-x {
    transform: scaleX(-1)
}

.flip-y {
    transform: scaleY(-1)
}

@media (min-width: 32rem) {
    .flex\@xs {
        display: flex
    }
    .inline-flex\@xs {
        display: inline-flex
    }
    .flex-wrap\@xs {
        flex-wrap: wrap
    }
    .flex-column\@xs {
        flex-direction: column
    }
    .flex-column-reverse\@xs {
        flex-direction: column-reverse
    }
    .flex-row\@xs {
        flex-direction: row
    }
    .flex-row-reverse\@xs {
        flex-direction: row-reverse
    }
    .flex-center\@xs {
        justify-content: center;
        align-items: center
    }
    .flex-grow\@xs {
        flex-grow: 1
    }
    .flex-grow-0\@xs {
        flex-grow: 0
    }
    .flex-shrink\@xs {
        flex-shrink: 1
    }
    .flex-shrink-0\@xs {
        flex-shrink: 0
    }
    .flex-basis-0\@xs {
        flex-basis: 0
    }
    .justify-start\@xs {
        justify-content: flex-start
    }
    .justify-end\@xs {
        justify-content: flex-end
    }
    .justify-center\@xs {
        justify-content: center
    }
    .justify-between\@xs {
        justify-content: space-between
    }
    .items-center\@xs {
        align-items: center
    }
    .items-start\@xs {
        align-items: flex-start
    }
    .items-end\@xs {
        align-items: flex-end
    }
    .items-baseline\@xs {
        align-items: baseline
    }
    .order-1\@xs {
        order: 1
    }
    .order-2\@xs {
        order: 2
    }
    .order-3\@xs {
        order: 3
    }
    .block\@xs {
        display: block
    }
    .inline-block\@xs {
        display: inline-block
    }
    .inline\@xs {
        display: inline
    }
    @supports (--css: variables) {
        .margin-xxxxs\@xs {
            margin: var(--space-xxxxs)
        }
        .margin-xxxs\@xs {
            margin: var(--space-xxxs)
        }
        .margin-xxs\@xs {
            margin: var(--space-xxs)
        }
        .margin-xs\@xs {
            margin: var(--space-xs)
        }
        .margin-sm\@xs {
            margin: var(--space-sm)
        }
        .margin-md\@xs {
            margin: var(--space-md)
        }
        .margin-lg\@xs {
            margin: var(--space-lg)
        }
        .margin-xl\@xs {
            margin: var(--space-xl)
        }
        .margin-xxl\@xs {
            margin: var(--space-xxl)
        }
        .margin-xxxl\@xs {
            margin: var(--space-xxxl)
        }
        .margin-xxxxl\@xs {
            margin: var(--space-xxxxl)
        }
        .margin-auto\@xs {
            margin: auto
        }
        .margin-0\@xs {
            margin: 0
        }
        .margin-top-xxxxs\@xs {
            margin-top: var(--space-xxxxs)
        }
        .margin-top-xxxs\@xs {
            margin-top: var(--space-xxxs)
        }
        .margin-top-xxs\@xs {
            margin-top: var(--space-xxs)
        }
        .margin-top-xs\@xs {
            margin-top: var(--space-xs)
        }
        .margin-top-sm\@xs {
            margin-top: var(--space-sm)
        }
        .margin-top-md\@xs {
            margin-top: var(--space-md)
        }
        .margin-top-lg\@xs {
            margin-top: var(--space-lg)
        }
        .margin-top-xl\@xs {
            margin-top: var(--space-xl)
        }
        .margin-top-xxl\@xs {
            margin-top: var(--space-xxl)
        }
        .margin-top-xxxl\@xs {
            margin-top: var(--space-xxxl)
        }
        .margin-top-xxxxl\@xs {
            margin-top: var(--space-xxxxl)
        }
        .margin-top-auto\@xs {
            margin-top: auto
        }
        .margin-top-0\@xs {
            margin-top: 0
        }
        .margin-bottom-xxxxs\@xs {
            margin-bottom: var(--space-xxxxs)
        }
        .margin-bottom-xxxs\@xs {
            margin-bottom: var(--space-xxxs)
        }
        .margin-bottom-xxs\@xs {
            margin-bottom: var(--space-xxs)
        }
        .margin-bottom-xs\@xs {
            margin-bottom: var(--space-xs)
        }
        .margin-bottom-sm\@xs {
            margin-bottom: var(--space-sm)
        }
        .margin-bottom-md\@xs {
            margin-bottom: var(--space-md)
        }
        .margin-bottom-lg\@xs {
            margin-bottom: var(--space-lg)
        }
        .margin-bottom-xl\@xs {
            margin-bottom: var(--space-xl)
        }
        .margin-bottom-xxl\@xs {
            margin-bottom: var(--space-xxl)
        }
        .margin-bottom-xxxl\@xs {
            margin-bottom: var(--space-xxxl)
        }
        .margin-bottom-xxxxl\@xs {
            margin-bottom: var(--space-xxxxl)
        }
        .margin-bottom-auto\@xs {
            margin-bottom: auto
        }
        .margin-bottom-0\@xs {
            margin-bottom: 0
        }
        .margin-right-xxxxs\@xs {
            margin-right: var(--space-xxxxs)
        }
        .margin-right-xxxs\@xs {
            margin-right: var(--space-xxxs)
        }
        .margin-right-xxs\@xs {
            margin-right: var(--space-xxs)
        }
        .margin-right-xs\@xs {
            margin-right: var(--space-xs)
        }
        .margin-right-sm\@xs {
            margin-right: var(--space-sm)
        }
        .margin-right-md\@xs {
            margin-right: var(--space-md)
        }
        .margin-right-lg\@xs {
            margin-right: var(--space-lg)
        }
        .margin-right-xl\@xs {
            margin-right: var(--space-xl)
        }
        .margin-right-xxl\@xs {
            margin-right: var(--space-xxl)
        }
        .margin-right-xxxl\@xs {
            margin-right: var(--space-xxxl)
        }
        .margin-right-xxxxl\@xs {
            margin-right: var(--space-xxxxl)
        }
        .margin-right-auto\@xs {
            margin-right: auto
        }
        .margin-right-0\@xs {
            margin-right: 0
        }
        .margin-left-xxxxs\@xs {
            margin-left: var(--space-xxxxs)
        }
        .margin-left-xxxs\@xs {
            margin-left: var(--space-xxxs)
        }
        .margin-left-xxs\@xs {
            margin-left: var(--space-xxs)
        }
        .margin-left-xs\@xs {
            margin-left: var(--space-xs)
        }
        .margin-left-sm\@xs {
            margin-left: var(--space-sm)
        }
        .margin-left-md\@xs {
            margin-left: var(--space-md)
        }
        .margin-left-lg\@xs {
            margin-left: var(--space-lg)
        }
        .margin-left-xl\@xs {
            margin-left: var(--space-xl)
        }
        .margin-left-xxl\@xs {
            margin-left: var(--space-xxl)
        }
        .margin-left-xxxl\@xs {
            margin-left: var(--space-xxxl)
        }
        .margin-left-xxxxl\@xs {
            margin-left: var(--space-xxxxl)
        }
        .margin-left-auto\@xs {
            margin-left: auto
        }
        .margin-left-0\@xs {
            margin-left: 0
        }
        .margin-x-xxxxs\@xs {
            margin-left: var(--space-xxxxs);
            margin-right: var(--space-xxxxs)
        }
        .margin-x-xxxs\@xs {
            margin-left: var(--space-xxxs);
            margin-right: var(--space-xxxs)
        }
        .margin-x-xxs\@xs {
            margin-left: var(--space-xxs);
            margin-right: var(--space-xxs)
        }
        .margin-x-xs\@xs {
            margin-left: var(--space-xs);
            margin-right: var(--space-xs)
        }
        .margin-x-sm\@xs {
            margin-left: var(--space-sm);
            margin-right: var(--space-sm)
        }
        .margin-x-md\@xs {
            margin-left: var(--space-md);
            margin-right: var(--space-md)
        }
        .margin-x-lg\@xs {
            margin-left: var(--space-lg);
            margin-right: var(--space-lg)
        }
        .margin-x-xl\@xs {
            margin-left: var(--space-xl);
            margin-right: var(--space-xl)
        }
        .margin-x-xxl\@xs {
            margin-left: var(--space-xxl);
            margin-right: var(--space-xxl)
        }
        .margin-x-xxxl\@xs {
            margin-left: var(--space-xxxl);
            margin-right: var(--space-xxxl)
        }
        .margin-x-xxxxl\@xs {
            margin-left: var(--space-xxxxl);
            margin-right: var(--space-xxxxl)
        }
        .margin-x-auto\@xs {
            margin-left: auto;
            margin-right: auto
        }
        .margin-x-0\@xs {
            margin-left: 0;
            margin-right: 0
        }
        .margin-y-xxxxs\@xs {
            margin-top: var(--space-xxxxs);
            margin-bottom: var(--space-xxxxs)
        }
        .margin-y-xxxs\@xs {
            margin-top: var(--space-xxxs);
            margin-bottom: var(--space-xxxs)
        }
        .margin-y-xxs\@xs {
            margin-top: var(--space-xxs);
            margin-bottom: var(--space-xxs)
        }
        .margin-y-xs\@xs {
            margin-top: var(--space-xs);
            margin-bottom: var(--space-xs)
        }
        .margin-y-sm\@xs {
            margin-top: var(--space-sm);
            margin-bottom: var(--space-sm)
        }
        .margin-y-md\@xs {
            margin-top: var(--space-md);
            margin-bottom: var(--space-md)
        }
        .margin-y-lg\@xs {
            margin-top: var(--space-lg);
            margin-bottom: var(--space-lg)
        }
        .margin-y-xl\@xs {
            margin-top: var(--space-xl);
            margin-bottom: var(--space-xl)
        }
        .margin-y-xxl\@xs {
            margin-top: var(--space-xxl);
            margin-bottom: var(--space-xxl)
        }
        .margin-y-xxxl\@xs {
            margin-top: var(--space-xxxl);
            margin-bottom: var(--space-xxxl)
        }
        .margin-y-xxxxl\@xs {
            margin-top: var(--space-xxxxl);
            margin-bottom: var(--space-xxxxl)
        }
        .margin-y-auto\@xs {
            margin-top: auto;
            margin-bottom: auto
        }
        .margin-y-0\@xs {
            margin-top: 0;
            margin-bottom: 0
        }
    }
    @supports (--css: variables) {
        .padding-xxxxs\@xs {
            padding: var(--space-xxxxs)
        }
        .padding-xxxs\@xs {
            padding: var(--space-xxxs)
        }
        .padding-xxs\@xs {
            padding: var(--space-xxs)
        }
        .padding-xs\@xs {
            padding: var(--space-xs)
        }
        .padding-sm\@xs {
            padding: var(--space-sm)
        }
        .padding-md\@xs {
            padding: var(--space-md)
        }
        .padding-lg\@xs {
            padding: var(--space-lg)
        }
        .padding-xl\@xs {
            padding: var(--space-xl)
        }
        .padding-xxl\@xs {
            padding: var(--space-xxl)
        }
        .padding-xxxl\@xs {
            padding: var(--space-xxxl)
        }
        .padding-xxxxl\@xs {
            padding: var(--space-xxxxl)
        }
        .padding-0\@xs {
            padding: 0
        }
        .padding-component\@xs {
            padding: var(--component-padding)
        }
        .padding-top-xxxxs\@xs {
            padding-top: var(--space-xxxxs)
        }
        .padding-top-xxxs\@xs {
            padding-top: var(--space-xxxs)
        }
        .padding-top-xxs\@xs {
            padding-top: var(--space-xxs)
        }
        .padding-top-xs\@xs {
            padding-top: var(--space-xs)
        }
        .padding-top-sm\@xs {
            padding-top: var(--space-sm)
        }
        .padding-top-md\@xs {
            padding-top: var(--space-md)
        }
        .padding-top-lg\@xs {
            padding-top: var(--space-lg)
        }
        .padding-top-xl\@xs {
            padding-top: var(--space-xl)
        }
        .padding-top-xxl\@xs {
            padding-top: var(--space-xxl)
        }
        .padding-top-xxxl\@xs {
            padding-top: var(--space-xxxl)
        }
        .padding-top-xxxxl\@xs {
            padding-top: var(--space-xxxxl)
        }
        .padding-top-0\@xs {
            padding-top: 0
        }
        .padding-top-component\@xs {
            padding-top: var(--component-padding)
        }
        .padding-bottom-xxxxs\@xs {
            padding-bottom: var(--space-xxxxs)
        }
        .padding-bottom-xxxs\@xs {
            padding-bottom: var(--space-xxxs)
        }
        .padding-bottom-xxs\@xs {
            padding-bottom: var(--space-xxs)
        }
        .padding-bottom-xs\@xs {
            padding-bottom: var(--space-xs)
        }
        .padding-bottom-sm\@xs {
            padding-bottom: var(--space-sm)
        }
        .padding-bottom-md\@xs {
            padding-bottom: var(--space-md)
        }
        .padding-bottom-lg\@xs {
            padding-bottom: var(--space-lg)
        }
        .padding-bottom-xl\@xs {
            padding-bottom: var(--space-xl)
        }
        .padding-bottom-xxl\@xs {
            padding-bottom: var(--space-xxl)
        }
        .padding-bottom-xxxl\@xs {
            padding-bottom: var(--space-xxxl)
        }
        .padding-bottom-xxxxl\@xs {
            padding-bottom: var(--space-xxxxl)
        }
        .padding-bottom-0\@xs {
            padding-bottom: 0
        }
        .padding-bottom-component\@xs {
            padding-bottom: var(--component-padding)
        }
        .padding-right-xxxxs\@xs {
            padding-right: var(--space-xxxxs)
        }
        .padding-right-xxxs\@xs {
            padding-right: var(--space-xxxs)
        }
        .padding-right-xxs\@xs {
            padding-right: var(--space-xxs)
        }
        .padding-right-xs\@xs {
            padding-right: var(--space-xs)
        }
        .padding-right-sm\@xs {
            padding-right: var(--space-sm)
        }
        .padding-right-md\@xs {
            padding-right: var(--space-md)
        }
        .padding-right-lg\@xs {
            padding-right: var(--space-lg)
        }
        .padding-right-xl\@xs {
            padding-right: var(--space-xl)
        }
        .padding-right-xxl\@xs {
            padding-right: var(--space-xxl)
        }
        .padding-right-xxxl\@xs {
            padding-right: var(--space-xxxl)
        }
        .padding-right-xxxxl\@xs {
            padding-right: var(--space-xxxxl)
        }
        .padding-right-0\@xs {
            padding-right: 0
        }
        .padding-right-component\@xs {
            padding-right: var(--component-padding)
        }
        .padding-left-xxxxs\@xs {
            padding-left: var(--space-xxxxs)
        }
        .padding-left-xxxs\@xs {
            padding-left: var(--space-xxxs)
        }
        .padding-left-xxs\@xs {
            padding-left: var(--space-xxs)
        }
        .padding-left-xs\@xs {
            padding-left: var(--space-xs)
        }
        .padding-left-sm\@xs {
            padding-left: var(--space-sm)
        }
        .padding-left-md\@xs {
            padding-left: var(--space-md)
        }
        .padding-left-lg\@xs {
            padding-left: var(--space-lg)
        }
        .padding-left-xl\@xs {
            padding-left: var(--space-xl)
        }
        .padding-left-xxl\@xs {
            padding-left: var(--space-xxl)
        }
        .padding-left-xxxl\@xs {
            padding-left: var(--space-xxxl)
        }
        .padding-left-xxxxl\@xs {
            padding-left: var(--space-xxxxl)
        }
        .padding-left-0\@xs {
            padding-left: 0
        }
        .padding-left-component\@xs {
            padding-left: var(--component-padding)
        }
        .padding-x-xxxxs\@xs {
            padding-left: var(--space-xxxxs);
            padding-right: var(--space-xxxxs)
        }
        .padding-x-xxxs\@xs {
            padding-left: var(--space-xxxs);
            padding-right: var(--space-xxxs)
        }
        .padding-x-xxs\@xs {
            padding-left: var(--space-xxs);
            padding-right: var(--space-xxs)
        }
        .padding-x-xs\@xs {
            padding-left: var(--space-xs);
            padding-right: var(--space-xs)
        }
        .padding-x-sm\@xs {
            padding-left: var(--space-sm);
            padding-right: var(--space-sm)
        }
        .padding-x-md\@xs {
            padding-left: var(--space-md);
            padding-right: var(--space-md)
        }
        .padding-x-lg\@xs {
            padding-left: var(--space-lg);
            padding-right: var(--space-lg)
        }
        .padding-x-xl\@xs {
            padding-left: var(--space-xl);
            padding-right: var(--space-xl)
        }
        .padding-x-xxl\@xs {
            padding-left: var(--space-xxl);
            padding-right: var(--space-xxl)
        }
        .padding-x-xxxl\@xs {
            padding-left: var(--space-xxxl);
            padding-right: var(--space-xxxl)
        }
        .padding-x-xxxxl\@xs {
            padding-left: var(--space-xxxxl);
            padding-right: var(--space-xxxxl)
        }
        .padding-x-0\@xs {
            padding-left: 0;
            padding-right: 0
        }
        .padding-x-component\@xs {
            padding-left: var(--component-padding);
            padding-right: var(--component-padding)
        }
        .padding-y-xxxxs\@xs {
            padding-top: var(--space-xxxxs);
            padding-bottom: var(--space-xxxxs)
        }
        .padding-y-xxxs\@xs {
            padding-top: var(--space-xxxs);
            padding-bottom: var(--space-xxxs)
        }
        .padding-y-xxs\@xs {
            padding-top: var(--space-xxs);
            padding-bottom: var(--space-xxs)
        }
        .padding-y-xs\@xs {
            padding-top: var(--space-xs);
            padding-bottom: var(--space-xs)
        }
        .padding-y-sm\@xs {
            padding-top: var(--space-sm);
            padding-bottom: var(--space-sm)
        }
        .padding-y-md\@xs {
            padding-top: var(--space-md);
            padding-bottom: var(--space-md)
        }
        .padding-y-lg\@xs {
            padding-top: var(--space-lg);
            padding-bottom: var(--space-lg)
        }
        .padding-y-xl\@xs {
            padding-top: var(--space-xl);
            padding-bottom: var(--space-xl)
        }
        .padding-y-xxl\@xs {
            padding-top: var(--space-xxl);
            padding-bottom: var(--space-xxl)
        }
        .padding-y-xxxl\@xs {
            padding-top: var(--space-xxxl);
            padding-bottom: var(--space-xxxl)
        }
        .padding-y-xxxxl\@xs {
            padding-top: var(--space-xxxxl);
            padding-bottom: var(--space-xxxxl)
        }
        .padding-y-0\@xs {
            padding-top: 0;
            padding-bottom: 0
        }
        .padding-y-component\@xs {
            padding-top: var(--component-padding);
            padding-bottom: var(--component-padding)
        }
    }
    .text-center\@xs {
        text-align: center
    }
    .text-left\@xs {
        text-align: left
    }
    .text-right\@xs {
        text-align: right
    }
    .text-justify\@xs {
        text-align: justify
    }
    @supports (--css: variables) {
        .text-xs\@xs {
            font-size: var(--text-xs, 0.694em)
        }
        .text-sm\@xs {
            font-size: var(--text-sm, 0.833em)
        }
        .text-base\@xs {
            font-size: var(--text-unit, 1em)
        }
        .text-md\@xs {
            font-size: var(--text-md, 1.2em)
        }
        .text-lg\@xs {
            font-size: var(--text-lg, 1.44em)
        }
        .text-xl\@xs {
            font-size: var(--text-xl, 1.728em)
        }
        .text-xxl\@xs {
            font-size: var(--text-xxl, 2.074em)
        }
        .text-xxxl\@xs {
            font-size: var(--text-xxxl, 2.488em)
        }
        .text-xxxxl\@xs {
            font-size: var(--text-xxxxl, 2.985em)
        }
    }
    .hide\@xs {
        display: none !important
    }
}

@media not all and (min-width: 32rem) {
    .has-margin\@xs {
        margin: 0 !important
    }
    .has-padding\@xs {
        padding: 0 !important
    }
    .display\@xs {
        display: none !important
    }
}

@media (min-width: 48rem) {
    .flex\@sm {
        display: flex
    }
    .inline-flex\@sm {
        display: inline-flex
    }
    .flex-wrap\@sm {
        flex-wrap: wrap
    }
    .flex-column\@sm {
        flex-direction: column
    }
    .flex-column-reverse\@sm {
        flex-direction: column-reverse
    }
    .flex-row\@sm {
        flex-direction: row
    }
    .flex-row-reverse\@sm {
        flex-direction: row-reverse
    }
    .flex-center\@sm {
        justify-content: center;
        align-items: center
    }
    .flex-grow\@sm {
        flex-grow: 1
    }
    .flex-grow-0\@sm {
        flex-grow: 0
    }
    .flex-shrink\@sm {
        flex-shrink: 1
    }
    .flex-shrink-0\@sm {
        flex-shrink: 0
    }
    .flex-basis-0\@sm {
        flex-basis: 0
    }
    .justify-start\@sm {
        justify-content: flex-start
    }
    .justify-end\@sm {
        justify-content: flex-end
    }
    .justify-center\@sm {
        justify-content: center
    }
    .justify-between\@sm {
        justify-content: space-between
    }
    .items-center\@sm {
        align-items: center
    }
    .items-start\@sm {
        align-items: flex-start
    }
    .items-end\@sm {
        align-items: flex-end
    }
    .items-baseline\@sm {
        align-items: baseline
    }
    .order-1\@sm {
        order: 1
    }
    .order-2\@sm {
        order: 2
    }
    .order-3\@sm {
        order: 3
    }
    .block\@sm {
        display: block
    }
    .inline-block\@sm {
        display: inline-block
    }
    .inline\@sm {
        display: inline
    }
    @supports (--css: variables) {
        .margin-xxxxs\@sm {
            margin: var(--space-xxxxs)
        }
        .margin-xxxs\@sm {
            margin: var(--space-xxxs)
        }
        .margin-xxs\@sm {
            margin: var(--space-xxs)
        }
        .margin-xs\@sm {
            margin: var(--space-xs)
        }
        .margin-sm\@sm {
            margin: var(--space-sm)
        }
        .margin-md\@sm {
            margin: var(--space-md)
        }
        .margin-lg\@sm {
            margin: var(--space-lg)
        }
        .margin-xl\@sm {
            margin: var(--space-xl)
        }
        .margin-xxl\@sm {
            margin: var(--space-xxl)
        }
        .margin-xxxl\@sm {
            margin: var(--space-xxxl)
        }
        .margin-xxxxl\@sm {
            margin: var(--space-xxxxl)
        }
        .margin-auto\@sm {
            margin: auto
        }
        .margin-0\@sm {
            margin: 0
        }
        .margin-top-xxxxs\@sm {
            margin-top: var(--space-xxxxs)
        }
        .margin-top-xxxs\@sm {
            margin-top: var(--space-xxxs)
        }
        .margin-top-xxs\@sm {
            margin-top: var(--space-xxs)
        }
        .margin-top-xs\@sm {
            margin-top: var(--space-xs)
        }
        .margin-top-sm\@sm {
            margin-top: var(--space-sm)
        }
        .margin-top-md\@sm {
            margin-top: var(--space-md)
        }
        .margin-top-lg\@sm {
            margin-top: var(--space-lg)
        }
        .margin-top-xl\@sm {
            margin-top: var(--space-xl)
        }
        .margin-top-xxl\@sm {
            margin-top: var(--space-xxl)
        }
        .margin-top-xxxl\@sm {
            margin-top: var(--space-xxxl)
        }
        .margin-top-xxxxl\@sm {
            margin-top: var(--space-xxxxl)
        }
        .margin-top-auto\@sm {
            margin-top: auto
        }
        .margin-top-0\@sm {
            margin-top: 0
        }
        .margin-bottom-xxxxs\@sm {
            margin-bottom: var(--space-xxxxs)
        }
        .margin-bottom-xxxs\@sm {
            margin-bottom: var(--space-xxxs)
        }
        .margin-bottom-xxs\@sm {
            margin-bottom: var(--space-xxs)
        }
        .margin-bottom-xs\@sm {
            margin-bottom: var(--space-xs)
        }
        .margin-bottom-sm\@sm {
            margin-bottom: var(--space-sm)
        }
        .margin-bottom-md\@sm {
            margin-bottom: var(--space-md)
        }
        .margin-bottom-lg\@sm {
            margin-bottom: var(--space-lg)
        }
        .margin-bottom-xl\@sm {
            margin-bottom: var(--space-xl)
        }
        .margin-bottom-xxl\@sm {
            margin-bottom: var(--space-xxl)
        }
        .margin-bottom-xxxl\@sm {
            margin-bottom: var(--space-xxxl)
        }
        .margin-bottom-xxxxl\@sm {
            margin-bottom: var(--space-xxxxl)
        }
        .margin-bottom-auto\@sm {
            margin-bottom: auto
        }
        .margin-bottom-0\@sm {
            margin-bottom: 0
        }
        .margin-right-xxxxs\@sm {
            margin-right: var(--space-xxxxs)
        }
        .margin-right-xxxs\@sm {
            margin-right: var(--space-xxxs)
        }
        .margin-right-xxs\@sm {
            margin-right: var(--space-xxs)
        }
        .margin-right-xs\@sm {
            margin-right: var(--space-xs)
        }
        .margin-right-sm\@sm {
            margin-right: var(--space-sm)
        }
        .margin-right-md\@sm {
            margin-right: var(--space-md)
        }
        .margin-right-lg\@sm {
            margin-right: var(--space-lg)
        }
        .margin-right-xl\@sm {
            margin-right: var(--space-xl)
        }
        .margin-right-xxl\@sm {
            margin-right: var(--space-xxl)
        }
        .margin-right-xxxl\@sm {
            margin-right: var(--space-xxxl)
        }
        .margin-right-xxxxl\@sm {
            margin-right: var(--space-xxxxl)
        }
        .margin-right-auto\@sm {
            margin-right: auto
        }
        .margin-right-0\@sm {
            margin-right: 0
        }
        .margin-left-xxxxs\@sm {
            margin-left: var(--space-xxxxs)
        }
        .margin-left-xxxs\@sm {
            margin-left: var(--space-xxxs)
        }
        .margin-left-xxs\@sm {
            margin-left: var(--space-xxs)
        }
        .margin-left-xs\@sm {
            margin-left: var(--space-xs)
        }
        .margin-left-sm\@sm {
            margin-left: var(--space-sm)
        }
        .margin-left-md\@sm {
            margin-left: var(--space-md)
        }
        .margin-left-lg\@sm {
            margin-left: var(--space-lg)
        }
        .margin-left-xl\@sm {
            margin-left: var(--space-xl)
        }
        .margin-left-xxl\@sm {
            margin-left: var(--space-xxl)
        }
        .margin-left-xxxl\@sm {
            margin-left: var(--space-xxxl)
        }
        .margin-left-xxxxl\@sm {
            margin-left: var(--space-xxxxl)
        }
        .margin-left-auto\@sm {
            margin-left: auto
        }
        .margin-left-0\@sm {
            margin-left: 0
        }
        .margin-x-xxxxs\@sm {
            margin-left: var(--space-xxxxs);
            margin-right: var(--space-xxxxs)
        }
        .margin-x-xxxs\@sm {
            margin-left: var(--space-xxxs);
            margin-right: var(--space-xxxs)
        }
        .margin-x-xxs\@sm {
            margin-left: var(--space-xxs);
            margin-right: var(--space-xxs)
        }
        .margin-x-xs\@sm {
            margin-left: var(--space-xs);
            margin-right: var(--space-xs)
        }
        .margin-x-sm\@sm {
            margin-left: var(--space-sm);
            margin-right: var(--space-sm)
        }
        .margin-x-md\@sm {
            margin-left: var(--space-md);
            margin-right: var(--space-md)
        }
        .margin-x-lg\@sm {
            margin-left: var(--space-lg);
            margin-right: var(--space-lg)
        }
        .margin-x-xl\@sm {
            margin-left: var(--space-xl);
            margin-right: var(--space-xl)
        }
        .margin-x-xxl\@sm {
            margin-left: var(--space-xxl);
            margin-right: var(--space-xxl)
        }
        .margin-x-xxxl\@sm {
            margin-left: var(--space-xxxl);
            margin-right: var(--space-xxxl)
        }
        .margin-x-xxxxl\@sm {
            margin-left: var(--space-xxxxl);
            margin-right: var(--space-xxxxl)
        }
        .margin-x-auto\@sm {
            margin-left: auto;
            margin-right: auto
        }
        .margin-x-0\@sm {
            margin-left: 0;
            margin-right: 0
        }
        .margin-y-xxxxs\@sm {
            margin-top: var(--space-xxxxs);
            margin-bottom: var(--space-xxxxs)
        }
        .margin-y-xxxs\@sm {
            margin-top: var(--space-xxxs);
            margin-bottom: var(--space-xxxs)
        }
        .margin-y-xxs\@sm {
            margin-top: var(--space-xxs);
            margin-bottom: var(--space-xxs)
        }
        .margin-y-xs\@sm {
            margin-top: var(--space-xs);
            margin-bottom: var(--space-xs)
        }
        .margin-y-sm\@sm {
            margin-top: var(--space-sm);
            margin-bottom: var(--space-sm)
        }
        .margin-y-md\@sm {
            margin-top: var(--space-md);
            margin-bottom: var(--space-md)
        }
        .margin-y-lg\@sm {
            margin-top: var(--space-lg);
            margin-bottom: var(--space-lg)
        }
        .margin-y-xl\@sm {
            margin-top: var(--space-xl);
            margin-bottom: var(--space-xl)
        }
        .margin-y-xxl\@sm {
            margin-top: var(--space-xxl);
            margin-bottom: var(--space-xxl)
        }
        .margin-y-xxxl\@sm {
            margin-top: var(--space-xxxl);
            margin-bottom: var(--space-xxxl)
        }
        .margin-y-xxxxl\@sm {
            margin-top: var(--space-xxxxl);
            margin-bottom: var(--space-xxxxl)
        }
        .margin-y-auto\@sm {
            margin-top: auto;
            margin-bottom: auto
        }
        .margin-y-0\@sm {
            margin-top: 0;
            margin-bottom: 0
        }
    }
    @supports (--css: variables) {
        .padding-xxxxs\@sm {
            padding: var(--space-xxxxs)
        }
        .padding-xxxs\@sm {
            padding: var(--space-xxxs)
        }
        .padding-xxs\@sm {
            padding: var(--space-xxs)
        }
        .padding-xs\@sm {
            padding: var(--space-xs)
        }
        .padding-sm\@sm {
            padding: var(--space-sm)
        }
        .padding-md\@sm {
            padding: var(--space-md)
        }
        .padding-lg\@sm {
            padding: var(--space-lg)
        }
        .padding-xl\@sm {
            padding: var(--space-xl)
        }
        .padding-xxl\@sm {
            padding: var(--space-xxl)
        }
        .padding-xxxl\@sm {
            padding: var(--space-xxxl)
        }
        .padding-xxxxl\@sm {
            padding: var(--space-xxxxl)
        }
        .padding-0\@sm {
            padding: 0
        }
        .padding-component\@sm {
            padding: var(--component-padding)
        }
        .padding-top-xxxxs\@sm {
            padding-top: var(--space-xxxxs)
        }
        .padding-top-xxxs\@sm {
            padding-top: var(--space-xxxs)
        }
        .padding-top-xxs\@sm {
            padding-top: var(--space-xxs)
        }
        .padding-top-xs\@sm {
            padding-top: var(--space-xs)
        }
        .padding-top-sm\@sm {
            padding-top: var(--space-sm)
        }
        .padding-top-md\@sm {
            padding-top: var(--space-md)
        }
        .padding-top-lg\@sm {
            padding-top: var(--space-lg)
        }
        .padding-top-xl\@sm {
            padding-top: var(--space-xl)
        }
        .padding-top-xxl\@sm {
            padding-top: var(--space-xxl)
        }
        .padding-top-xxxl\@sm {
            padding-top: var(--space-xxxl)
        }
        .padding-top-xxxxl\@sm {
            padding-top: var(--space-xxxxl)
        }
        .padding-top-0\@sm {
            padding-top: 0
        }
        .padding-top-component\@sm {
            padding-top: var(--component-padding)
        }
        .padding-bottom-xxxxs\@sm {
            padding-bottom: var(--space-xxxxs)
        }
        .padding-bottom-xxxs\@sm {
            padding-bottom: var(--space-xxxs)
        }
        .padding-bottom-xxs\@sm {
            padding-bottom: var(--space-xxs)
        }
        .padding-bottom-xs\@sm {
            padding-bottom: var(--space-xs)
        }
        .padding-bottom-sm\@sm {
            padding-bottom: var(--space-sm)
        }
        .padding-bottom-md\@sm {
            padding-bottom: var(--space-md)
        }
        .padding-bottom-lg\@sm {
            padding-bottom: var(--space-lg)
        }
        .padding-bottom-xl\@sm {
            padding-bottom: var(--space-xl)
        }
        .padding-bottom-xxl\@sm {
            padding-bottom: var(--space-xxl)
        }
        .padding-bottom-xxxl\@sm {
            padding-bottom: var(--space-xxxl)
        }
        .padding-bottom-xxxxl\@sm {
            padding-bottom: var(--space-xxxxl)
        }
        .padding-bottom-0\@sm {
            padding-bottom: 0
        }
        .padding-bottom-component\@sm {
            padding-bottom: var(--component-padding)
        }
        .padding-right-xxxxs\@sm {
            padding-right: var(--space-xxxxs)
        }
        .padding-right-xxxs\@sm {
            padding-right: var(--space-xxxs)
        }
        .padding-right-xxs\@sm {
            padding-right: var(--space-xxs)
        }
        .padding-right-xs\@sm {
            padding-right: var(--space-xs)
        }
        .padding-right-sm\@sm {
            padding-right: var(--space-sm)
        }
        .padding-right-md\@sm {
            padding-right: var(--space-md)
        }
        .padding-right-lg\@sm {
            padding-right: var(--space-lg)
        }
        .padding-right-xl\@sm {
            padding-right: var(--space-xl)
        }
        .padding-right-xxl\@sm {
            padding-right: var(--space-xxl)
        }
        .padding-right-xxxl\@sm {
            padding-right: var(--space-xxxl)
        }
        .padding-right-xxxxl\@sm {
            padding-right: var(--space-xxxxl)
        }
        .padding-right-0\@sm {
            padding-right: 0
        }
        .padding-right-component\@sm {
            padding-right: var(--component-padding)
        }
        .padding-left-xxxxs\@sm {
            padding-left: var(--space-xxxxs)
        }
        .padding-left-xxxs\@sm {
            padding-left: var(--space-xxxs)
        }
        .padding-left-xxs\@sm {
            padding-left: var(--space-xxs)
        }
        .padding-left-xs\@sm {
            padding-left: var(--space-xs)
        }
        .padding-left-sm\@sm {
            padding-left: var(--space-sm)
        }
        .padding-left-md\@sm {
            padding-left: var(--space-md)
        }
        .padding-left-lg\@sm {
            padding-left: var(--space-lg)
        }
        .padding-left-xl\@sm {
            padding-left: var(--space-xl)
        }
        .padding-left-xxl\@sm {
            padding-left: var(--space-xxl)
        }
        .padding-left-xxxl\@sm {
            padding-left: var(--space-xxxl)
        }
        .padding-left-xxxxl\@sm {
            padding-left: var(--space-xxxxl)
        }
        .padding-left-0\@sm {
            padding-left: 0
        }
        .padding-left-component\@sm {
            padding-left: var(--component-padding)
        }
        .padding-x-xxxxs\@sm {
            padding-left: var(--space-xxxxs);
            padding-right: var(--space-xxxxs)
        }
        .padding-x-xxxs\@sm {
            padding-left: var(--space-xxxs);
            padding-right: var(--space-xxxs)
        }
        .padding-x-xxs\@sm {
            padding-left: var(--space-xxs);
            padding-right: var(--space-xxs)
        }
        .padding-x-xs\@sm {
            padding-left: var(--space-xs);
            padding-right: var(--space-xs)
        }
        .padding-x-sm\@sm {
            padding-left: var(--space-sm);
            padding-right: var(--space-sm)
        }
        .padding-x-md\@sm {
            padding-left: var(--space-md);
            padding-right: var(--space-md)
        }
        .padding-x-lg\@sm {
            padding-left: var(--space-lg);
            padding-right: var(--space-lg)
        }
        .padding-x-xl\@sm {
            padding-left: var(--space-xl);
            padding-right: var(--space-xl)
        }
        .padding-x-xxl\@sm {
            padding-left: var(--space-xxl);
            padding-right: var(--space-xxl)
        }
        .padding-x-xxxl\@sm {
            padding-left: var(--space-xxxl);
            padding-right: var(--space-xxxl)
        }
        .padding-x-xxxxl\@sm {
            padding-left: var(--space-xxxxl);
            padding-right: var(--space-xxxxl)
        }
        .padding-x-0\@sm {
            padding-left: 0;
            padding-right: 0
        }
        .padding-x-component\@sm {
            padding-left: var(--component-padding);
            padding-right: var(--component-padding)
        }
        .padding-y-xxxxs\@sm {
            padding-top: var(--space-xxxxs);
            padding-bottom: var(--space-xxxxs)
        }
        .padding-y-xxxs\@sm {
            padding-top: var(--space-xxxs);
            padding-bottom: var(--space-xxxs)
        }
        .padding-y-xxs\@sm {
            padding-top: var(--space-xxs);
            padding-bottom: var(--space-xxs)
        }
        .padding-y-xs\@sm {
            padding-top: var(--space-xs);
            padding-bottom: var(--space-xs)
        }
        .padding-y-sm\@sm {
            padding-top: var(--space-sm);
            padding-bottom: var(--space-sm)
        }
        .padding-y-md\@sm {
            padding-top: var(--space-md);
            padding-bottom: var(--space-md)
        }
        .padding-y-lg\@sm {
            padding-top: var(--space-lg);
            padding-bottom: var(--space-lg)
        }
        .padding-y-xl\@sm {
            padding-top: var(--space-xl);
            padding-bottom: var(--space-xl)
        }
        .padding-y-xxl\@sm {
            padding-top: var(--space-xxl);
            padding-bottom: var(--space-xxl)
        }
        .padding-y-xxxl\@sm {
            padding-top: var(--space-xxxl);
            padding-bottom: var(--space-xxxl)
        }
        .padding-y-xxxxl\@sm {
            padding-top: var(--space-xxxxl);
            padding-bottom: var(--space-xxxxl)
        }
        .padding-y-0\@sm {
            padding-top: 0;
            padding-bottom: 0
        }
        .padding-y-component\@sm {
            padding-top: var(--component-padding);
            padding-bottom: var(--component-padding)
        }
    }
    .text-center\@sm {
        text-align: center
    }
    .text-left\@sm {
        text-align: left
    }
    .text-right\@sm {
        text-align: right
    }
    .text-justify\@sm {
        text-align: justify
    }
    @supports (--css: variables) {
        .text-xs\@sm {
            font-size: var(--text-xs, 0.694em)
        }
        .text-sm\@sm {
            font-size: var(--text-sm, 0.833em)
        }
        .text-base\@sm {
            font-size: var(--text-unit, 1em)
        }
        .text-md\@sm {
            font-size: var(--text-md, 1.2em)
        }
        .text-lg\@sm {
            font-size: var(--text-lg, 1.44em)
        }
        .text-xl\@sm {
            font-size: var(--text-xl, 1.728em)
        }
        .text-xxl\@sm {
            font-size: var(--text-xxl, 2.074em)
        }
        .text-xxxl\@sm {
            font-size: var(--text-xxxl, 2.488em)
        }
        .text-xxxxl\@sm {
            font-size: var(--text-xxxxl, 2.985em)
        }
    }
    .hide\@sm {
        display: none !important
    }
}

@media not all and (min-width: 48rem) {
    .has-margin\@sm {
        margin: 0 !important
    }
    .has-padding\@sm {
        padding: 0 !important
    }
    .display\@sm {
        display: none !important
    }
}

@media (min-width: 64rem) {
    .flex\@md {
        display: flex
    }
    .inline-flex\@md {
        display: inline-flex
    }
    .flex-wrap\@md {
        flex-wrap: wrap
    }
    .flex-column\@md {
        flex-direction: column
    }
    .flex-column-reverse\@md {
        flex-direction: column-reverse
    }
    .flex-row\@md {
        flex-direction: row
    }
    .flex-row-reverse\@md {
        flex-direction: row-reverse
    }
    .flex-center\@md {
        justify-content: center;
        align-items: center
    }
    .flex-grow\@md {
        flex-grow: 1
    }
    .flex-grow-0\@md {
        flex-grow: 0
    }
    .flex-shrink\@md {
        flex-shrink: 1
    }
    .flex-shrink-0\@md {
        flex-shrink: 0
    }
    .flex-basis-0\@md {
        flex-basis: 0
    }
    .justify-start\@md {
        justify-content: flex-start
    }
    .justify-end\@md {
        justify-content: flex-end
    }
    .justify-center\@md {
        justify-content: center
    }
    .justify-between\@md {
        justify-content: space-between
    }
    .items-center\@md {
        align-items: center
    }
    .items-start\@md {
        align-items: flex-start
    }
    .items-end\@md {
        align-items: flex-end
    }
    .items-baseline\@md {
        align-items: baseline
    }
    .order-1\@md {
        order: 1
    }
    .order-2\@md {
        order: 2
    }
    .order-3\@md {
        order: 3
    }
    .block\@md {
        display: block
    }
    .inline-block\@md {
        display: inline-block
    }
    .inline\@md {
        display: inline
    }
    @supports (--css: variables) {
        .margin-xxxxs\@md {
            margin: var(--space-xxxxs)
        }
        .margin-xxxs\@md {
            margin: var(--space-xxxs)
        }
        .margin-xxs\@md {
            margin: var(--space-xxs)
        }
        .margin-xs\@md {
            margin: var(--space-xs)
        }
        .margin-sm\@md {
            margin: var(--space-sm)
        }
        .margin-md\@md {
            margin: var(--space-md)
        }
        .margin-lg\@md {
            margin: var(--space-lg)
        }
        .margin-xl\@md {
            margin: var(--space-xl)
        }
        .margin-xxl\@md {
            margin: var(--space-xxl)
        }
        .margin-xxxl\@md {
            margin: var(--space-xxxl)
        }
        .margin-xxxxl\@md {
            margin: var(--space-xxxxl)
        }
        .margin-auto\@md {
            margin: auto
        }
        .margin-0\@md {
            margin: 0
        }
        .margin-top-xxxxs\@md {
            margin-top: var(--space-xxxxs)
        }
        .margin-top-xxxs\@md {
            margin-top: var(--space-xxxs)
        }
        .margin-top-xxs\@md {
            margin-top: var(--space-xxs)
        }
        .margin-top-xs\@md {
            margin-top: var(--space-xs)
        }
        .margin-top-sm\@md {
            margin-top: var(--space-sm)
        }
        .margin-top-md\@md {
            margin-top: var(--space-md)
        }
        .margin-top-lg\@md {
            margin-top: var(--space-lg)
        }
        .margin-top-xl\@md {
            margin-top: var(--space-xl)
        }
        .margin-top-xxl\@md {
            margin-top: var(--space-xxl)
        }
        .margin-top-xxxl\@md {
            margin-top: var(--space-xxxl)
        }
        .margin-top-xxxxl\@md {
            margin-top: var(--space-xxxxl)
        }
        .margin-top-auto\@md {
            margin-top: auto
        }
        .margin-top-0\@md {
            margin-top: 0
        }
        .margin-bottom-xxxxs\@md {
            margin-bottom: var(--space-xxxxs)
        }
        .margin-bottom-xxxs\@md {
            margin-bottom: var(--space-xxxs)
        }
        .margin-bottom-xxs\@md {
            margin-bottom: var(--space-xxs)
        }
        .margin-bottom-xs\@md {
            margin-bottom: var(--space-xs)
        }
        .margin-bottom-sm\@md {
            margin-bottom: var(--space-sm)
        }
        .margin-bottom-md\@md {
            margin-bottom: var(--space-md)
        }
        .margin-bottom-lg\@md {
            margin-bottom: var(--space-lg)
        }
        .margin-bottom-xl\@md {
            margin-bottom: var(--space-xl)
        }
        .margin-bottom-xxl\@md {
            margin-bottom: var(--space-xxl)
        }
        .margin-bottom-xxxl\@md {
            margin-bottom: var(--space-xxxl)
        }
        .margin-bottom-xxxxl\@md {
            margin-bottom: var(--space-xxxxl)
        }
        .margin-bottom-auto\@md {
            margin-bottom: auto
        }
        .margin-bottom-0\@md {
            margin-bottom: 0
        }
        .margin-right-xxxxs\@md {
            margin-right: var(--space-xxxxs)
        }
        .margin-right-xxxs\@md {
            margin-right: var(--space-xxxs)
        }
        .margin-right-xxs\@md {
            margin-right: var(--space-xxs)
        }
        .margin-right-xs\@md {
            margin-right: var(--space-xs)
        }
        .margin-right-sm\@md {
            margin-right: var(--space-sm)
        }
        .margin-right-md\@md {
            margin-right: var(--space-md)
        }
        .margin-right-lg\@md {
            margin-right: var(--space-lg)
        }
        .margin-right-xl\@md {
            margin-right: var(--space-xl)
        }
        .margin-right-xxl\@md {
            margin-right: var(--space-xxl)
        }
        .margin-right-xxxl\@md {
            margin-right: var(--space-xxxl)
        }
        .margin-right-xxxxl\@md {
            margin-right: var(--space-xxxxl)
        }
        .margin-right-auto\@md {
            margin-right: auto
        }
        .margin-right-0\@md {
            margin-right: 0
        }
        .margin-left-xxxxs\@md {
            margin-left: var(--space-xxxxs)
        }
        .margin-left-xxxs\@md {
            margin-left: var(--space-xxxs)
        }
        .margin-left-xxs\@md {
            margin-left: var(--space-xxs)
        }
        .margin-left-xs\@md {
            margin-left: var(--space-xs)
        }
        .margin-left-sm\@md {
            margin-left: var(--space-sm)
        }
        .margin-left-md\@md {
            margin-left: var(--space-md)
        }
        .margin-left-lg\@md {
            margin-left: var(--space-lg)
        }
        .margin-left-xl\@md {
            margin-left: var(--space-xl)
        }
        .margin-left-xxl\@md {
            margin-left: var(--space-xxl)
        }
        .margin-left-xxxl\@md {
            margin-left: var(--space-xxxl)
        }
        .margin-left-xxxxl\@md {
            margin-left: var(--space-xxxxl)
        }
        .margin-left-auto\@md {
            margin-left: auto
        }
        .margin-left-0\@md {
            margin-left: 0
        }
        .margin-x-xxxxs\@md {
            margin-left: var(--space-xxxxs);
            margin-right: var(--space-xxxxs)
        }
        .margin-x-xxxs\@md {
            margin-left: var(--space-xxxs);
            margin-right: var(--space-xxxs)
        }
        .margin-x-xxs\@md {
            margin-left: var(--space-xxs);
            margin-right: var(--space-xxs)
        }
        .margin-x-xs\@md {
            margin-left: var(--space-xs);
            margin-right: var(--space-xs)
        }
        .margin-x-sm\@md {
            margin-left: var(--space-sm);
            margin-right: var(--space-sm)
        }
        .margin-x-md\@md {
            margin-left: var(--space-md);
            margin-right: var(--space-md)
        }
        .margin-x-lg\@md {
            margin-left: var(--space-lg);
            margin-right: var(--space-lg)
        }
        .margin-x-xl\@md {
            margin-left: var(--space-xl);
            margin-right: var(--space-xl)
        }
        .margin-x-xxl\@md {
            margin-left: var(--space-xxl);
            margin-right: var(--space-xxl)
        }
        .margin-x-xxxl\@md {
            margin-left: var(--space-xxxl);
            margin-right: var(--space-xxxl)
        }
        .margin-x-xxxxl\@md {
            margin-left: var(--space-xxxxl);
            margin-right: var(--space-xxxxl)
        }
        .margin-x-auto\@md {
            margin-left: auto;
            margin-right: auto
        }
        .margin-x-0\@md {
            margin-left: 0;
            margin-right: 0
        }
        .margin-y-xxxxs\@md {
            margin-top: var(--space-xxxxs);
            margin-bottom: var(--space-xxxxs)
        }
        .margin-y-xxxs\@md {
            margin-top: var(--space-xxxs);
            margin-bottom: var(--space-xxxs)
        }
        .margin-y-xxs\@md {
            margin-top: var(--space-xxs);
            margin-bottom: var(--space-xxs)
        }
        .margin-y-xs\@md {
            margin-top: var(--space-xs);
            margin-bottom: var(--space-xs)
        }
        .margin-y-sm\@md {
            margin-top: var(--space-sm);
            margin-bottom: var(--space-sm)
        }
        .margin-y-md\@md {
            margin-top: var(--space-md);
            margin-bottom: var(--space-md)
        }
        .margin-y-lg\@md {
            margin-top: var(--space-lg);
            margin-bottom: var(--space-lg)
        }
        .margin-y-xl\@md {
            margin-top: var(--space-xl);
            margin-bottom: var(--space-xl)
        }
        .margin-y-xxl\@md {
            margin-top: var(--space-xxl);
            margin-bottom: var(--space-xxl)
        }
        .margin-y-xxxl\@md {
            margin-top: var(--space-xxxl);
            margin-bottom: var(--space-xxxl)
        }
        .margin-y-xxxxl\@md {
            margin-top: var(--space-xxxxl);
            margin-bottom: var(--space-xxxxl)
        }
        .margin-y-auto\@md {
            margin-top: auto;
            margin-bottom: auto
        }
        .margin-y-0\@md {
            margin-top: 0;
            margin-bottom: 0
        }
    }
    @supports (--css: variables) {
        .padding-xxxxs\@md {
            padding: var(--space-xxxxs)
        }
        .padding-xxxs\@md {
            padding: var(--space-xxxs)
        }
        .padding-xxs\@md {
            padding: var(--space-xxs)
        }
        .padding-xs\@md {
            padding: var(--space-xs)
        }
        .padding-sm\@md {
            padding: var(--space-sm)
        }
        .padding-md\@md {
            padding: var(--space-md)
        }
        .padding-lg\@md {
            padding: var(--space-lg)
        }
        .padding-xl\@md {
            padding: var(--space-xl)
        }
        .padding-xxl\@md {
            padding: var(--space-xxl)
        }
        .padding-xxxl\@md {
            padding: var(--space-xxxl)
        }
        .padding-xxxxl\@md {
            padding: var(--space-xxxxl)
        }
        .padding-0\@md {
            padding: 0
        }
        .padding-component\@md {
            padding: var(--component-padding)
        }
        .padding-top-xxxxs\@md {
            padding-top: var(--space-xxxxs)
        }
        .padding-top-xxxs\@md {
            padding-top: var(--space-xxxs)
        }
        .padding-top-xxs\@md {
            padding-top: var(--space-xxs)
        }
        .padding-top-xs\@md {
            padding-top: var(--space-xs)
        }
        .padding-top-sm\@md {
            padding-top: var(--space-sm)
        }
        .padding-top-md\@md {
            padding-top: var(--space-md)
        }
        .padding-top-lg\@md {
            padding-top: var(--space-lg)
        }
        .padding-top-xl\@md {
            padding-top: var(--space-xl)
        }
        .padding-top-xxl\@md {
            padding-top: var(--space-xxl)
        }
        .padding-top-xxxl\@md {
            padding-top: var(--space-xxxl)
        }
        .padding-top-xxxxl\@md {
            padding-top: var(--space-xxxxl)
        }
        .padding-top-0\@md {
            padding-top: 0
        }
        .padding-top-component\@md {
            padding-top: var(--component-padding)
        }
        .padding-bottom-xxxxs\@md {
            padding-bottom: var(--space-xxxxs)
        }
        .padding-bottom-xxxs\@md {
            padding-bottom: var(--space-xxxs)
        }
        .padding-bottom-xxs\@md {
            padding-bottom: var(--space-xxs)
        }
        .padding-bottom-xs\@md {
            padding-bottom: var(--space-xs)
        }
        .padding-bottom-sm\@md {
            padding-bottom: var(--space-sm)
        }
        .padding-bottom-md\@md {
            padding-bottom: var(--space-md)
        }
        .padding-bottom-lg\@md {
            padding-bottom: var(--space-lg)
        }
        .padding-bottom-xl\@md {
            padding-bottom: var(--space-xl)
        }
        .padding-bottom-xxl\@md {
            padding-bottom: var(--space-xxl)
        }
        .padding-bottom-xxxl\@md {
            padding-bottom: var(--space-xxxl)
        }
        .padding-bottom-xxxxl\@md {
            padding-bottom: var(--space-xxxxl)
        }
        .padding-bottom-0\@md {
            padding-bottom: 0
        }
        .padding-bottom-component\@md {
            padding-bottom: var(--component-padding)
        }
        .padding-right-xxxxs\@md {
            padding-right: var(--space-xxxxs)
        }
        .padding-right-xxxs\@md {
            padding-right: var(--space-xxxs)
        }
        .padding-right-xxs\@md {
            padding-right: var(--space-xxs)
        }
        .padding-right-xs\@md {
            padding-right: var(--space-xs)
        }
        .padding-right-sm\@md {
            padding-right: var(--space-sm)
        }
        .padding-right-md\@md {
            padding-right: var(--space-md)
        }
        .padding-right-lg\@md {
            padding-right: var(--space-lg)
        }
        .padding-right-xl\@md {
            padding-right: var(--space-xl)
        }
        .padding-right-xxl\@md {
            padding-right: var(--space-xxl)
        }
        .padding-right-xxxl\@md {
            padding-right: var(--space-xxxl)
        }
        .padding-right-xxxxl\@md {
            padding-right: var(--space-xxxxl)
        }
        .padding-right-0\@md {
            padding-right: 0
        }
        .padding-right-component\@md {
            padding-right: var(--component-padding)
        }
        .padding-left-xxxxs\@md {
            padding-left: var(--space-xxxxs)
        }
        .padding-left-xxxs\@md {
            padding-left: var(--space-xxxs)
        }
        .padding-left-xxs\@md {
            padding-left: var(--space-xxs)
        }
        .padding-left-xs\@md {
            padding-left: var(--space-xs)
        }
        .padding-left-sm\@md {
            padding-left: var(--space-sm)
        }
        .padding-left-md\@md {
            padding-left: var(--space-md)
        }
        .padding-left-lg\@md {
            padding-left: var(--space-lg)
        }
        .padding-left-xl\@md {
            padding-left: var(--space-xl)
        }
        .padding-left-xxl\@md {
            padding-left: var(--space-xxl)
        }
        .padding-left-xxxl\@md {
            padding-left: var(--space-xxxl)
        }
        .padding-left-xxxxl\@md {
            padding-left: var(--space-xxxxl)
        }
        .padding-left-0\@md {
            padding-left: 0
        }
        .padding-left-component\@md {
            padding-left: var(--component-padding)
        }
        .padding-x-xxxxs\@md {
            padding-left: var(--space-xxxxs);
            padding-right: var(--space-xxxxs)
        }
        .padding-x-xxxs\@md {
            padding-left: var(--space-xxxs);
            padding-right: var(--space-xxxs)
        }
        .padding-x-xxs\@md {
            padding-left: var(--space-xxs);
            padding-right: var(--space-xxs)
        }
        .padding-x-xs\@md {
            padding-left: var(--space-xs);
            padding-right: var(--space-xs)
        }
        .padding-x-sm\@md {
            padding-left: var(--space-sm);
            padding-right: var(--space-sm)
        }
        .padding-x-md\@md {
            padding-left: var(--space-md);
            padding-right: var(--space-md)
        }
        .padding-x-lg\@md {
            padding-left: var(--space-lg);
            padding-right: var(--space-lg)
        }
        .padding-x-xl\@md {
            padding-left: var(--space-xl);
            padding-right: var(--space-xl)
        }
        .padding-x-xxl\@md {
            padding-left: var(--space-xxl);
            padding-right: var(--space-xxl)
        }
        .padding-x-xxxl\@md {
            padding-left: var(--space-xxxl);
            padding-right: var(--space-xxxl)
        }
        .padding-x-xxxxl\@md {
            padding-left: var(--space-xxxxl);
            padding-right: var(--space-xxxxl)
        }
        .padding-x-0\@md {
            padding-left: 0;
            padding-right: 0
        }
        .padding-x-component\@md {
            padding-left: var(--component-padding);
            padding-right: var(--component-padding)
        }
        .padding-y-xxxxs\@md {
            padding-top: var(--space-xxxxs);
            padding-bottom: var(--space-xxxxs)
        }
        .padding-y-xxxs\@md {
            padding-top: var(--space-xxxs);
            padding-bottom: var(--space-xxxs)
        }
        .padding-y-xxs\@md {
            padding-top: var(--space-xxs);
            padding-bottom: var(--space-xxs)
        }
        .padding-y-xs\@md {
            padding-top: var(--space-xs);
            padding-bottom: var(--space-xs)
        }
        .padding-y-sm\@md {
            padding-top: var(--space-sm);
            padding-bottom: var(--space-sm)
        }
        .padding-y-md\@md {
            padding-top: var(--space-md);
            padding-bottom: var(--space-md)
        }
        .padding-y-lg\@md {
            padding-top: var(--space-lg);
            padding-bottom: var(--space-lg)
        }
        .padding-y-xl\@md {
            padding-top: var(--space-xl);
            padding-bottom: var(--space-xl)
        }
        .padding-y-xxl\@md {
            padding-top: var(--space-xxl);
            padding-bottom: var(--space-xxl)
        }
        .padding-y-xxxl\@md {
            padding-top: var(--space-xxxl);
            padding-bottom: var(--space-xxxl)
        }
        .padding-y-xxxxl\@md {
            padding-top: var(--space-xxxxl);
            padding-bottom: var(--space-xxxxl)
        }
        .padding-y-0\@md {
            padding-top: 0;
            padding-bottom: 0
        }
        .padding-y-component\@md {
            padding-top: var(--component-padding);
            padding-bottom: var(--component-padding)
        }
    }
    .text-center\@md {
        text-align: center
    }
    .text-left\@md {
        text-align: left
    }
    .text-right\@md {
        text-align: right
    }
    .text-justify\@md {
        text-align: justify
    }
    @supports (--css: variables) {
        .text-xs\@md {
            font-size: var(--text-xs, 0.694em)
        }
        .text-sm\@md {
            font-size: var(--text-sm, 0.833em)
        }
        .text-base\@md {
            font-size: var(--text-unit, 1em)
        }
        .text-md\@md {
            font-size: var(--text-md, 1.2em)
        }
        .text-lg\@md {
            font-size: var(--text-lg, 1.44em)
        }
        .text-xl\@md {
            font-size: var(--text-xl, 1.728em)
        }
        .text-xxl\@md {
            font-size: var(--text-xxl, 2.074em)
        }
        .text-xxxl\@md {
            font-size: var(--text-xxxl, 2.488em)
        }
        .text-xxxxl\@md {
            font-size: var(--text-xxxxl, 2.985em)
        }
    }
    .hide\@md {
        display: none !important
    }
}

@media not all and (min-width: 64rem) {
    .has-margin\@md {
        margin: 0 !important
    }
    .has-padding\@md {
        padding: 0 !important
    }
    .display\@md {
        display: none !important
    }
}

@media (min-width: 80rem) {
    .flex\@lg {
        display: flex
    }
    .inline-flex\@lg {
        display: inline-flex
    }
    .flex-wrap\@lg {
        flex-wrap: wrap
    }
    .flex-column\@lg {
        flex-direction: column
    }
    .flex-column-reverse\@lg {
        flex-direction: column-reverse
    }
    .flex-row\@lg {
        flex-direction: row
    }
    .flex-row-reverse\@lg {
        flex-direction: row-reverse
    }
    .flex-center\@lg {
        justify-content: center;
        align-items: center
    }
    .flex-grow\@lg {
        flex-grow: 1
    }
    .flex-grow-0\@lg {
        flex-grow: 0
    }
    .flex-shrink\@lg {
        flex-shrink: 1
    }
    .flex-shrink-0\@lg {
        flex-shrink: 0
    }
    .flex-basis-0\@lg {
        flex-basis: 0
    }
    .justify-start\@lg {
        justify-content: flex-start
    }
    .justify-end\@lg {
        justify-content: flex-end
    }
    .justify-center\@lg {
        justify-content: center
    }
    .justify-between\@lg {
        justify-content: space-between
    }
    .items-center\@lg {
        align-items: center
    }
    .items-start\@lg {
        align-items: flex-start
    }
    .items-end\@lg {
        align-items: flex-end
    }
    .items-baseline\@lg {
        align-items: baseline
    }
    .order-1\@lg {
        order: 1
    }
    .order-2\@lg {
        order: 2
    }
    .order-3\@lg {
        order: 3
    }
    .block\@lg {
        display: block
    }
    .inline-block\@lg {
        display: inline-block
    }
    .inline\@lg {
        display: inline
    }
    @supports (--css: variables) {
        .margin-xxxxs\@lg {
            margin: var(--space-xxxxs)
        }
        .margin-xxxs\@lg {
            margin: var(--space-xxxs)
        }
        .margin-xxs\@lg {
            margin: var(--space-xxs)
        }
        .margin-xs\@lg {
            margin: var(--space-xs)
        }
        .margin-sm\@lg {
            margin: var(--space-sm)
        }
        .margin-md\@lg {
            margin: var(--space-md)
        }
        .margin-lg\@lg {
            margin: var(--space-lg)
        }
        .margin-xl\@lg {
            margin: var(--space-xl)
        }
        .margin-xxl\@lg {
            margin: var(--space-xxl)
        }
        .margin-xxxl\@lg {
            margin: var(--space-xxxl)
        }
        .margin-xxxxl\@lg {
            margin: var(--space-xxxxl)
        }
        .margin-auto\@lg {
            margin: auto
        }
        .margin-0\@lg {
            margin: 0
        }
        .margin-top-xxxxs\@lg {
            margin-top: var(--space-xxxxs)
        }
        .margin-top-xxxs\@lg {
            margin-top: var(--space-xxxs)
        }
        .margin-top-xxs\@lg {
            margin-top: var(--space-xxs)
        }
        .margin-top-xs\@lg {
            margin-top: var(--space-xs)
        }
        .margin-top-sm\@lg {
            margin-top: var(--space-sm)
        }
        .margin-top-md\@lg {
            margin-top: var(--space-md)
        }
        .margin-top-lg\@lg {
            margin-top: var(--space-lg)
        }
        .margin-top-xl\@lg {
            margin-top: var(--space-xl)
        }
        .margin-top-xxl\@lg {
            margin-top: var(--space-xxl)
        }
        .margin-top-xxxl\@lg {
            margin-top: var(--space-xxxl)
        }
        .margin-top-xxxxl\@lg {
            margin-top: var(--space-xxxxl)
        }
        .margin-top-auto\@lg {
            margin-top: auto
        }
        .margin-top-0\@lg {
            margin-top: 0
        }
        .margin-bottom-xxxxs\@lg {
            margin-bottom: var(--space-xxxxs)
        }
        .margin-bottom-xxxs\@lg {
            margin-bottom: var(--space-xxxs)
        }
        .margin-bottom-xxs\@lg {
            margin-bottom: var(--space-xxs)
        }
        .margin-bottom-xs\@lg {
            margin-bottom: var(--space-xs)
        }
        .margin-bottom-sm\@lg {
            margin-bottom: var(--space-sm)
        }
        .margin-bottom-md\@lg {
            margin-bottom: var(--space-md)
        }
        .margin-bottom-lg\@lg {
            margin-bottom: var(--space-lg)
        }
        .margin-bottom-xl\@lg {
            margin-bottom: var(--space-xl)
        }
        .margin-bottom-xxl\@lg {
            margin-bottom: var(--space-xxl)
        }
        .margin-bottom-xxxl\@lg {
            margin-bottom: var(--space-xxxl)
        }
        .margin-bottom-xxxxl\@lg {
            margin-bottom: var(--space-xxxxl)
        }
        .margin-bottom-auto\@lg {
            margin-bottom: auto
        }
        .margin-bottom-0\@lg {
            margin-bottom: 0
        }
        .margin-right-xxxxs\@lg {
            margin-right: var(--space-xxxxs)
        }
        .margin-right-xxxs\@lg {
            margin-right: var(--space-xxxs)
        }
        .margin-right-xxs\@lg {
            margin-right: var(--space-xxs)
        }
        .margin-right-xs\@lg {
            margin-right: var(--space-xs)
        }
        .margin-right-sm\@lg {
            margin-right: var(--space-sm)
        }
        .margin-right-md\@lg {
            margin-right: var(--space-md)
        }
        .margin-right-lg\@lg {
            margin-right: var(--space-lg)
        }
        .margin-right-xl\@lg {
            margin-right: var(--space-xl)
        }
        .margin-right-xxl\@lg {
            margin-right: var(--space-xxl)
        }
        .margin-right-xxxl\@lg {
            margin-right: var(--space-xxxl)
        }
        .margin-right-xxxxl\@lg {
            margin-right: var(--space-xxxxl)
        }
        .margin-right-auto\@lg {
            margin-right: auto
        }
        .margin-right-0\@lg {
            margin-right: 0
        }
        .margin-left-xxxxs\@lg {
            margin-left: var(--space-xxxxs)
        }
        .margin-left-xxxs\@lg {
            margin-left: var(--space-xxxs)
        }
        .margin-left-xxs\@lg {
            margin-left: var(--space-xxs)
        }
        .margin-left-xs\@lg {
            margin-left: var(--space-xs)
        }
        .margin-left-sm\@lg {
            margin-left: var(--space-sm)
        }
        .margin-left-md\@lg {
            margin-left: var(--space-md)
        }
        .margin-left-lg\@lg {
            margin-left: var(--space-lg)
        }
        .margin-left-xl\@lg {
            margin-left: var(--space-xl)
        }
        .margin-left-xxl\@lg {
            margin-left: var(--space-xxl)
        }
        .margin-left-xxxl\@lg {
            margin-left: var(--space-xxxl)
        }
        .margin-left-xxxxl\@lg {
            margin-left: var(--space-xxxxl)
        }
        .margin-left-auto\@lg {
            margin-left: auto
        }
        .margin-left-0\@lg {
            margin-left: 0
        }
        .margin-x-xxxxs\@lg {
            margin-left: var(--space-xxxxs);
            margin-right: var(--space-xxxxs)
        }
        .margin-x-xxxs\@lg {
            margin-left: var(--space-xxxs);
            margin-right: var(--space-xxxs)
        }
        .margin-x-xxs\@lg {
            margin-left: var(--space-xxs);
            margin-right: var(--space-xxs)
        }
        .margin-x-xs\@lg {
            margin-left: var(--space-xs);
            margin-right: var(--space-xs)
        }
        .margin-x-sm\@lg {
            margin-left: var(--space-sm);
            margin-right: var(--space-sm)
        }
        .margin-x-md\@lg {
            margin-left: var(--space-md);
            margin-right: var(--space-md)
        }
        .margin-x-lg\@lg {
            margin-left: var(--space-lg);
            margin-right: var(--space-lg)
        }
        .margin-x-xl\@lg {
            margin-left: var(--space-xl);
            margin-right: var(--space-xl)
        }
        .margin-x-xxl\@lg {
            margin-left: var(--space-xxl);
            margin-right: var(--space-xxl)
        }
        .margin-x-xxxl\@lg {
            margin-left: var(--space-xxxl);
            margin-right: var(--space-xxxl)
        }
        .margin-x-xxxxl\@lg {
            margin-left: var(--space-xxxxl);
            margin-right: var(--space-xxxxl)
        }
        .margin-x-auto\@lg {
            margin-left: auto;
            margin-right: auto
        }
        .margin-x-0\@lg {
            margin-left: 0;
            margin-right: 0
        }
        .margin-y-xxxxs\@lg {
            margin-top: var(--space-xxxxs);
            margin-bottom: var(--space-xxxxs)
        }
        .margin-y-xxxs\@lg {
            margin-top: var(--space-xxxs);
            margin-bottom: var(--space-xxxs)
        }
        .margin-y-xxs\@lg {
            margin-top: var(--space-xxs);
            margin-bottom: var(--space-xxs)
        }
        .margin-y-xs\@lg {
            margin-top: var(--space-xs);
            margin-bottom: var(--space-xs)
        }
        .margin-y-sm\@lg {
            margin-top: var(--space-sm);
            margin-bottom: var(--space-sm)
        }
        .margin-y-md\@lg {
            margin-top: var(--space-md);
            margin-bottom: var(--space-md)
        }
        .margin-y-lg\@lg {
            margin-top: var(--space-lg);
            margin-bottom: var(--space-lg)
        }
        .margin-y-xl\@lg {
            margin-top: var(--space-xl);
            margin-bottom: var(--space-xl)
        }
        .margin-y-xxl\@lg {
            margin-top: var(--space-xxl);
            margin-bottom: var(--space-xxl)
        }
        .margin-y-xxxl\@lg {
            margin-top: var(--space-xxxl);
            margin-bottom: var(--space-xxxl)
        }
        .margin-y-xxxxl\@lg {
            margin-top: var(--space-xxxxl);
            margin-bottom: var(--space-xxxxl)
        }
        .margin-y-auto\@lg {
            margin-top: auto;
            margin-bottom: auto
        }
        .margin-y-0\@lg {
            margin-top: 0;
            margin-bottom: 0
        }
    }
    @supports (--css: variables) {
        .padding-xxxxs\@lg {
            padding: var(--space-xxxxs)
        }
        .padding-xxxs\@lg {
            padding: var(--space-xxxs)
        }
        .padding-xxs\@lg {
            padding: var(--space-xxs)
        }
        .padding-xs\@lg {
            padding: var(--space-xs)
        }
        .padding-sm\@lg {
            padding: var(--space-sm)
        }
        .padding-md\@lg {
            padding: var(--space-md)
        }
        .padding-lg\@lg {
            padding: var(--space-lg)
        }
        .padding-xl\@lg {
            padding: var(--space-xl)
        }
        .padding-xxl\@lg {
            padding: var(--space-xxl)
        }
        .padding-xxxl\@lg {
            padding: var(--space-xxxl)
        }
        .padding-xxxxl\@lg {
            padding: var(--space-xxxxl)
        }
        .padding-0\@lg {
            padding: 0
        }
        .padding-component\@lg {
            padding: var(--component-padding)
        }
        .padding-top-xxxxs\@lg {
            padding-top: var(--space-xxxxs)
        }
        .padding-top-xxxs\@lg {
            padding-top: var(--space-xxxs)
        }
        .padding-top-xxs\@lg {
            padding-top: var(--space-xxs)
        }
        .padding-top-xs\@lg {
            padding-top: var(--space-xs)
        }
        .padding-top-sm\@lg {
            padding-top: var(--space-sm)
        }
        .padding-top-md\@lg {
            padding-top: var(--space-md)
        }
        .padding-top-lg\@lg {
            padding-top: var(--space-lg)
        }
        .padding-top-xl\@lg {
            padding-top: var(--space-xl)
        }
        .padding-top-xxl\@lg {
            padding-top: var(--space-xxl)
        }
        .padding-top-xxxl\@lg {
            padding-top: var(--space-xxxl)
        }
        .padding-top-xxxxl\@lg {
            padding-top: var(--space-xxxxl)
        }
        .padding-top-0\@lg {
            padding-top: 0
        }
        .padding-top-component\@lg {
            padding-top: var(--component-padding)
        }
        .padding-bottom-xxxxs\@lg {
            padding-bottom: var(--space-xxxxs)
        }
        .padding-bottom-xxxs\@lg {
            padding-bottom: var(--space-xxxs)
        }
        .padding-bottom-xxs\@lg {
            padding-bottom: var(--space-xxs)
        }
        .padding-bottom-xs\@lg {
            padding-bottom: var(--space-xs)
        }
        .padding-bottom-sm\@lg {
            padding-bottom: var(--space-sm)
        }
        .padding-bottom-md\@lg {
            padding-bottom: var(--space-md)
        }
        .padding-bottom-lg\@lg {
            padding-bottom: var(--space-lg)
        }
        .padding-bottom-xl\@lg {
            padding-bottom: var(--space-xl)
        }
        .padding-bottom-xxl\@lg {
            padding-bottom: var(--space-xxl)
        }
        .padding-bottom-xxxl\@lg {
            padding-bottom: var(--space-xxxl)
        }
        .padding-bottom-xxxxl\@lg {
            padding-bottom: var(--space-xxxxl)
        }
        .padding-bottom-0\@lg {
            padding-bottom: 0
        }
        .padding-bottom-component\@lg {
            padding-bottom: var(--component-padding)
        }
        .padding-right-xxxxs\@lg {
            padding-right: var(--space-xxxxs)
        }
        .padding-right-xxxs\@lg {
            padding-right: var(--space-xxxs)
        }
        .padding-right-xxs\@lg {
            padding-right: var(--space-xxs)
        }
        .padding-right-xs\@lg {
            padding-right: var(--space-xs)
        }
        .padding-right-sm\@lg {
            padding-right: var(--space-sm)
        }
        .padding-right-md\@lg {
            padding-right: var(--space-md)
        }
        .padding-right-lg\@lg {
            padding-right: var(--space-lg)
        }
        .padding-right-xl\@lg {
            padding-right: var(--space-xl)
        }
        .padding-right-xxl\@lg {
            padding-right: var(--space-xxl)
        }
        .padding-right-xxxl\@lg {
            padding-right: var(--space-xxxl)
        }
        .padding-right-xxxxl\@lg {
            padding-right: var(--space-xxxxl)
        }
        .padding-right-0\@lg {
            padding-right: 0
        }
        .padding-right-component\@lg {
            padding-right: var(--component-padding)
        }
        .padding-left-xxxxs\@lg {
            padding-left: var(--space-xxxxs)
        }
        .padding-left-xxxs\@lg {
            padding-left: var(--space-xxxs)
        }
        .padding-left-xxs\@lg {
            padding-left: var(--space-xxs)
        }
        .padding-left-xs\@lg {
            padding-left: var(--space-xs)
        }
        .padding-left-sm\@lg {
            padding-left: var(--space-sm)
        }
        .padding-left-md\@lg {
            padding-left: var(--space-md)
        }
        .padding-left-lg\@lg {
            padding-left: var(--space-lg)
        }
        .padding-left-xl\@lg {
            padding-left: var(--space-xl)
        }
        .padding-left-xxl\@lg {
            padding-left: var(--space-xxl)
        }
        .padding-left-xxxl\@lg {
            padding-left: var(--space-xxxl)
        }
        .padding-left-xxxxl\@lg {
            padding-left: var(--space-xxxxl)
        }
        .padding-left-0\@lg {
            padding-left: 0
        }
        .padding-left-component\@lg {
            padding-left: var(--component-padding)
        }
        .padding-x-xxxxs\@lg {
            padding-left: var(--space-xxxxs);
            padding-right: var(--space-xxxxs)
        }
        .padding-x-xxxs\@lg {
            padding-left: var(--space-xxxs);
            padding-right: var(--space-xxxs)
        }
        .padding-x-xxs\@lg {
            padding-left: var(--space-xxs);
            padding-right: var(--space-xxs)
        }
        .padding-x-xs\@lg {
            padding-left: var(--space-xs);
            padding-right: var(--space-xs)
        }
        .padding-x-sm\@lg {
            padding-left: var(--space-sm);
            padding-right: var(--space-sm)
        }
        .padding-x-md\@lg {
            padding-left: var(--space-md);
            padding-right: var(--space-md)
        }
        .padding-x-lg\@lg {
            padding-left: var(--space-lg);
            padding-right: var(--space-lg)
        }
        .padding-x-xl\@lg {
            padding-left: var(--space-xl);
            padding-right: var(--space-xl)
        }
        .padding-x-xxl\@lg {
            padding-left: var(--space-xxl);
            padding-right: var(--space-xxl)
        }
        .padding-x-xxxl\@lg {
            padding-left: var(--space-xxxl);
            padding-right: var(--space-xxxl)
        }
        .padding-x-xxxxl\@lg {
            padding-left: var(--space-xxxxl);
            padding-right: var(--space-xxxxl)
        }
        .padding-x-0\@lg {
            padding-left: 0;
            padding-right: 0
        }
        .padding-x-component\@lg {
            padding-left: var(--component-padding);
            padding-right: var(--component-padding)
        }
        .padding-y-xxxxs\@lg {
            padding-top: var(--space-xxxxs);
            padding-bottom: var(--space-xxxxs)
        }
        .padding-y-xxxs\@lg {
            padding-top: var(--space-xxxs);
            padding-bottom: var(--space-xxxs)
        }
        .padding-y-xxs\@lg {
            padding-top: var(--space-xxs);
            padding-bottom: var(--space-xxs)
        }
        .padding-y-xs\@lg {
            padding-top: var(--space-xs);
            padding-bottom: var(--space-xs)
        }
        .padding-y-sm\@lg {
            padding-top: var(--space-sm);
            padding-bottom: var(--space-sm)
        }
        .padding-y-md\@lg {
            padding-top: var(--space-md);
            padding-bottom: var(--space-md)
        }
        .padding-y-lg\@lg {
            padding-top: var(--space-lg);
            padding-bottom: var(--space-lg)
        }
        .padding-y-xl\@lg {
            padding-top: var(--space-xl);
            padding-bottom: var(--space-xl)
        }
        .padding-y-xxl\@lg {
            padding-top: var(--space-xxl);
            padding-bottom: var(--space-xxl)
        }
        .padding-y-xxxl\@lg {
            padding-top: var(--space-xxxl);
            padding-bottom: var(--space-xxxl)
        }
        .padding-y-xxxxl\@lg {
            padding-top: var(--space-xxxxl);
            padding-bottom: var(--space-xxxxl)
        }
        .padding-y-0\@lg {
            padding-top: 0;
            padding-bottom: 0
        }
        .padding-y-component\@lg {
            padding-top: var(--component-padding);
            padding-bottom: var(--component-padding)
        }
    }
    .text-center\@lg {
        text-align: center
    }
    .text-left\@lg {
        text-align: left
    }
    .text-right\@lg {
        text-align: right
    }
    .text-justify\@lg {
        text-align: justify
    }
    @supports (--css: variables) {
        .text-xs\@lg {
            font-size: var(--text-xs, 0.694em)
        }
        .text-sm\@lg {
            font-size: var(--text-sm, 0.833em)
        }
        .text-base\@lg {
            font-size: var(--text-unit, 1em)
        }
        .text-md\@lg {
            font-size: var(--text-md, 1.2em)
        }
        .text-lg\@lg {
            font-size: var(--text-lg, 1.44em)
        }
        .text-xl\@lg {
            font-size: var(--text-xl, 1.728em)
        }
        .text-xxl\@lg {
            font-size: var(--text-xxl, 2.074em)
        }
        .text-xxxl\@lg {
            font-size: var(--text-xxxl, 2.488em)
        }
        .text-xxxxl\@lg {
            font-size: var(--text-xxxxl, 2.985em)
        }
    }
    .hide\@lg {
        display: none !important
    }
}

@media not all and (min-width: 80rem) {
    .has-margin\@lg {
        margin: 0 !important
    }
    .has-padding\@lg {
        padding: 0 !important
    }
    .display\@lg {
        display: none !important
    }
}

@media (min-width: 90rem) {
    .flex\@xl {
        display: flex
    }
    .inline-flex\@xl {
        display: inline-flex
    }
    .flex-wrap\@xl {
        flex-wrap: wrap
    }
    .flex-column\@xl {
        flex-direction: column
    }
    .flex-column-reverse\@xl {
        flex-direction: column-reverse
    }
    .flex-row\@xl {
        flex-direction: row
    }
    .flex-row-reverse\@xl {
        flex-direction: row-reverse
    }
    .flex-center\@xl {
        justify-content: center;
        align-items: center
    }
    .flex-grow\@xl {
        flex-grow: 1
    }
    .flex-grow-0\@xl {
        flex-grow: 0
    }
    .flex-shrink\@xl {
        flex-shrink: 1
    }
    .flex-shrink-0\@xl {
        flex-shrink: 0
    }
    .flex-basis-0\@xl {
        flex-basis: 0
    }
    .justify-start\@xl {
        justify-content: flex-start
    }
    .justify-end\@xl {
        justify-content: flex-end
    }
    .justify-center\@xl {
        justify-content: center
    }
    .justify-between\@xl {
        justify-content: space-between
    }
    .items-center\@xl {
        align-items: center
    }
    .items-start\@xl {
        align-items: flex-start
    }
    .items-end\@xl {
        align-items: flex-end
    }
    .items-baseline\@xl {
        align-items: baseline
    }
    .order-1\@xl {
        order: 1
    }
    .order-2\@xl {
        order: 2
    }
    .order-3\@xl {
        order: 3
    }
    .block\@xl {
        display: block
    }
    .inline-block\@xl {
        display: inline-block
    }
    .inline\@xl {
        display: inline
    }
    @supports (--css: variables) {
        .margin-xxxxs\@xl {
            margin: var(--space-xxxxs)
        }
        .margin-xxxs\@xl {
            margin: var(--space-xxxs)
        }
        .margin-xxs\@xl {
            margin: var(--space-xxs)
        }
        .margin-xs\@xl {
            margin: var(--space-xs)
        }
        .margin-sm\@xl {
            margin: var(--space-sm)
        }
        .margin-md\@xl {
            margin: var(--space-md)
        }
        .margin-lg\@xl {
            margin: var(--space-lg)
        }
        .margin-xl\@xl {
            margin: var(--space-xl)
        }
        .margin-xxl\@xl {
            margin: var(--space-xxl)
        }
        .margin-xxxl\@xl {
            margin: var(--space-xxxl)
        }
        .margin-xxxxl\@xl {
            margin: var(--space-xxxxl)
        }
        .margin-auto\@xl {
            margin: auto
        }
        .margin-0\@xl {
            margin: 0
        }
        .margin-top-xxxxs\@xl {
            margin-top: var(--space-xxxxs)
        }
        .margin-top-xxxs\@xl {
            margin-top: var(--space-xxxs)
        }
        .margin-top-xxs\@xl {
            margin-top: var(--space-xxs)
        }
        .margin-top-xs\@xl {
            margin-top: var(--space-xs)
        }
        .margin-top-sm\@xl {
            margin-top: var(--space-sm)
        }
        .margin-top-md\@xl {
            margin-top: var(--space-md)
        }
        .margin-top-lg\@xl {
            margin-top: var(--space-lg)
        }
        .margin-top-xl\@xl {
            margin-top: var(--space-xl)
        }
        .margin-top-xxl\@xl {
            margin-top: var(--space-xxl)
        }
        .margin-top-xxxl\@xl {
            margin-top: var(--space-xxxl)
        }
        .margin-top-xxxxl\@xl {
            margin-top: var(--space-xxxxl)
        }
        .margin-top-auto\@xl {
            margin-top: auto
        }
        .margin-top-0\@xl {
            margin-top: 0
        }
        .margin-bottom-xxxxs\@xl {
            margin-bottom: var(--space-xxxxs)
        }
        .margin-bottom-xxxs\@xl {
            margin-bottom: var(--space-xxxs)
        }
        .margin-bottom-xxs\@xl {
            margin-bottom: var(--space-xxs)
        }
        .margin-bottom-xs\@xl {
            margin-bottom: var(--space-xs)
        }
        .margin-bottom-sm\@xl {
            margin-bottom: var(--space-sm)
        }
        .margin-bottom-md\@xl {
            margin-bottom: var(--space-md)
        }
        .margin-bottom-lg\@xl {
            margin-bottom: var(--space-lg)
        }
        .margin-bottom-xl\@xl {
            margin-bottom: var(--space-xl)
        }
        .margin-bottom-xxl\@xl {
            margin-bottom: var(--space-xxl)
        }
        .margin-bottom-xxxl\@xl {
            margin-bottom: var(--space-xxxl)
        }
        .margin-bottom-xxxxl\@xl {
            margin-bottom: var(--space-xxxxl)
        }
        .margin-bottom-auto\@xl {
            margin-bottom: auto
        }
        .margin-bottom-0\@xl {
            margin-bottom: 0
        }
        .margin-right-xxxxs\@xl {
            margin-right: var(--space-xxxxs)
        }
        .margin-right-xxxs\@xl {
            margin-right: var(--space-xxxs)
        }
        .margin-right-xxs\@xl {
            margin-right: var(--space-xxs)
        }
        .margin-right-xs\@xl {
            margin-right: var(--space-xs)
        }
        .margin-right-sm\@xl {
            margin-right: var(--space-sm)
        }
        .margin-right-md\@xl {
            margin-right: var(--space-md)
        }
        .margin-right-lg\@xl {
            margin-right: var(--space-lg)
        }
        .margin-right-xl\@xl {
            margin-right: var(--space-xl)
        }
        .margin-right-xxl\@xl {
            margin-right: var(--space-xxl)
        }
        .margin-right-xxxl\@xl {
            margin-right: var(--space-xxxl)
        }
        .margin-right-xxxxl\@xl {
            margin-right: var(--space-xxxxl)
        }
        .margin-right-auto\@xl {
            margin-right: auto
        }
        .margin-right-0\@xl {
            margin-right: 0
        }
        .margin-left-xxxxs\@xl {
            margin-left: var(--space-xxxxs)
        }
        .margin-left-xxxs\@xl {
            margin-left: var(--space-xxxs)
        }
        .margin-left-xxs\@xl {
            margin-left: var(--space-xxs)
        }
        .margin-left-xs\@xl {
            margin-left: var(--space-xs)
        }
        .margin-left-sm\@xl {
            margin-left: var(--space-sm)
        }
        .margin-left-md\@xl {
            margin-left: var(--space-md)
        }
        .margin-left-lg\@xl {
            margin-left: var(--space-lg)
        }
        .margin-left-xl\@xl {
            margin-left: var(--space-xl)
        }
        .margin-left-xxl\@xl {
            margin-left: var(--space-xxl)
        }
        .margin-left-xxxl\@xl {
            margin-left: var(--space-xxxl)
        }
        .margin-left-xxxxl\@xl {
            margin-left: var(--space-xxxxl)
        }
        .margin-left-auto\@xl {
            margin-left: auto
        }
        .margin-left-0\@xl {
            margin-left: 0
        }
        .margin-x-xxxxs\@xl {
            margin-left: var(--space-xxxxs);
            margin-right: var(--space-xxxxs)
        }
        .margin-x-xxxs\@xl {
            margin-left: var(--space-xxxs);
            margin-right: var(--space-xxxs)
        }
        .margin-x-xxs\@xl {
            margin-left: var(--space-xxs);
            margin-right: var(--space-xxs)
        }
        .margin-x-xs\@xl {
            margin-left: var(--space-xs);
            margin-right: var(--space-xs)
        }
        .margin-x-sm\@xl {
            margin-left: var(--space-sm);
            margin-right: var(--space-sm)
        }
        .margin-x-md\@xl {
            margin-left: var(--space-md);
            margin-right: var(--space-md)
        }
        .margin-x-lg\@xl {
            margin-left: var(--space-lg);
            margin-right: var(--space-lg)
        }
        .margin-x-xl\@xl {
            margin-left: var(--space-xl);
            margin-right: var(--space-xl)
        }
        .margin-x-xxl\@xl {
            margin-left: var(--space-xxl);
            margin-right: var(--space-xxl)
        }
        .margin-x-xxxl\@xl {
            margin-left: var(--space-xxxl);
            margin-right: var(--space-xxxl)
        }
        .margin-x-xxxxl\@xl {
            margin-left: var(--space-xxxxl);
            margin-right: var(--space-xxxxl)
        }
        .margin-x-auto\@xl {
            margin-left: auto;
            margin-right: auto
        }
        .margin-x-0\@xl {
            margin-left: 0;
            margin-right: 0
        }
        .margin-y-xxxxs\@xl {
            margin-top: var(--space-xxxxs);
            margin-bottom: var(--space-xxxxs)
        }
        .margin-y-xxxs\@xl {
            margin-top: var(--space-xxxs);
            margin-bottom: var(--space-xxxs)
        }
        .margin-y-xxs\@xl {
            margin-top: var(--space-xxs);
            margin-bottom: var(--space-xxs)
        }
        .margin-y-xs\@xl {
            margin-top: var(--space-xs);
            margin-bottom: var(--space-xs)
        }
        .margin-y-sm\@xl {
            margin-top: var(--space-sm);
            margin-bottom: var(--space-sm)
        }
        .margin-y-md\@xl {
            margin-top: var(--space-md);
            margin-bottom: var(--space-md)
        }
        .margin-y-lg\@xl {
            margin-top: var(--space-lg);
            margin-bottom: var(--space-lg)
        }
        .margin-y-xl\@xl {
            margin-top: var(--space-xl);
            margin-bottom: var(--space-xl)
        }
        .margin-y-xxl\@xl {
            margin-top: var(--space-xxl);
            margin-bottom: var(--space-xxl)
        }
        .margin-y-xxxl\@xl {
            margin-top: var(--space-xxxl);
            margin-bottom: var(--space-xxxl)
        }
        .margin-y-xxxxl\@xl {
            margin-top: var(--space-xxxxl);
            margin-bottom: var(--space-xxxxl)
        }
        .margin-y-auto\@xl {
            margin-top: auto;
            margin-bottom: auto
        }
        .margin-y-0\@xl {
            margin-top: 0;
            margin-bottom: 0
        }
    }
    @supports (--css: variables) {
        .padding-xxxxs\@xl {
            padding: var(--space-xxxxs)
        }
        .padding-xxxs\@xl {
            padding: var(--space-xxxs)
        }
        .padding-xxs\@xl {
            padding: var(--space-xxs)
        }
        .padding-xs\@xl {
            padding: var(--space-xs)
        }
        .padding-sm\@xl {
            padding: var(--space-sm)
        }
        .padding-md\@xl {
            padding: var(--space-md)
        }
        .padding-lg\@xl {
            padding: var(--space-lg)
        }
        .padding-xl\@xl {
            padding: var(--space-xl)
        }
        .padding-xxl\@xl {
            padding: var(--space-xxl)
        }
        .padding-xxxl\@xl {
            padding: var(--space-xxxl)
        }
        .padding-xxxxl\@xl {
            padding: var(--space-xxxxl)
        }
        .padding-0\@xl {
            padding: 0
        }
        .padding-component\@xl {
            padding: var(--component-padding)
        }
        .padding-top-xxxxs\@xl {
            padding-top: var(--space-xxxxs)
        }
        .padding-top-xxxs\@xl {
            padding-top: var(--space-xxxs)
        }
        .padding-top-xxs\@xl {
            padding-top: var(--space-xxs)
        }
        .padding-top-xs\@xl {
            padding-top: var(--space-xs)
        }
        .padding-top-sm\@xl {
            padding-top: var(--space-sm)
        }
        .padding-top-md\@xl {
            padding-top: var(--space-md)
        }
        .padding-top-lg\@xl {
            padding-top: var(--space-lg)
        }
        .padding-top-xl\@xl {
            padding-top: var(--space-xl)
        }
        .padding-top-xxl\@xl {
            padding-top: var(--space-xxl)
        }
        .padding-top-xxxl\@xl {
            padding-top: var(--space-xxxl)
        }
        .padding-top-xxxxl\@xl {
            padding-top: var(--space-xxxxl)
        }
        .padding-top-0\@xl {
            padding-top: 0
        }
        .padding-top-component\@xl {
            padding-top: var(--component-padding)
        }
        .padding-bottom-xxxxs\@xl {
            padding-bottom: var(--space-xxxxs)
        }
        .padding-bottom-xxxs\@xl {
            padding-bottom: var(--space-xxxs)
        }
        .padding-bottom-xxs\@xl {
            padding-bottom: var(--space-xxs)
        }
        .padding-bottom-xs\@xl {
            padding-bottom: var(--space-xs)
        }
        .padding-bottom-sm\@xl {
            padding-bottom: var(--space-sm)
        }
        .padding-bottom-md\@xl {
            padding-bottom: var(--space-md)
        }
        .padding-bottom-lg\@xl {
            padding-bottom: var(--space-lg)
        }
        .padding-bottom-xl\@xl {
            padding-bottom: var(--space-xl)
        }
        .padding-bottom-xxl\@xl {
            padding-bottom: var(--space-xxl)
        }
        .padding-bottom-xxxl\@xl {
            padding-bottom: var(--space-xxxl)
        }
        .padding-bottom-xxxxl\@xl {
            padding-bottom: var(--space-xxxxl)
        }
        .padding-bottom-0\@xl {
            padding-bottom: 0
        }
        .padding-bottom-component\@xl {
            padding-bottom: var(--component-padding)
        }
        .padding-right-xxxxs\@xl {
            padding-right: var(--space-xxxxs)
        }
        .padding-right-xxxs\@xl {
            padding-right: var(--space-xxxs)
        }
        .padding-right-xxs\@xl {
            padding-right: var(--space-xxs)
        }
        .padding-right-xs\@xl {
            padding-right: var(--space-xs)
        }
        .padding-right-sm\@xl {
            padding-right: var(--space-sm)
        }
        .padding-right-md\@xl {
            padding-right: var(--space-md)
        }
        .padding-right-lg\@xl {
            padding-right: var(--space-lg)
        }
        .padding-right-xl\@xl {
            padding-right: var(--space-xl)
        }
        .padding-right-xxl\@xl {
            padding-right: var(--space-xxl)
        }
        .padding-right-xxxl\@xl {
            padding-right: var(--space-xxxl)
        }
        .padding-right-xxxxl\@xl {
            padding-right: var(--space-xxxxl)
        }
        .padding-right-0\@xl {
            padding-right: 0
        }
        .padding-right-component\@xl {
            padding-right: var(--component-padding)
        }
        .padding-left-xxxxs\@xl {
            padding-left: var(--space-xxxxs)
        }
        .padding-left-xxxs\@xl {
            padding-left: var(--space-xxxs)
        }
        .padding-left-xxs\@xl {
            padding-left: var(--space-xxs)
        }
        .padding-left-xs\@xl {
            padding-left: var(--space-xs)
        }
        .padding-left-sm\@xl {
            padding-left: var(--space-sm)
        }
        .padding-left-md\@xl {
            padding-left: var(--space-md)
        }
        .padding-left-lg\@xl {
            padding-left: var(--space-lg)
        }
        .padding-left-xl\@xl {
            padding-left: var(--space-xl)
        }
        .padding-left-xxl\@xl {
            padding-left: var(--space-xxl)
        }
        .padding-left-xxxl\@xl {
            padding-left: var(--space-xxxl)
        }
        .padding-left-xxxxl\@xl {
            padding-left: var(--space-xxxxl)
        }
        .padding-left-0\@xl {
            padding-left: 0
        }
        .padding-left-component\@xl {
            padding-left: var(--component-padding)
        }
        .padding-x-xxxxs\@xl {
            padding-left: var(--space-xxxxs);
            padding-right: var(--space-xxxxs)
        }
        .padding-x-xxxs\@xl {
            padding-left: var(--space-xxxs);
            padding-right: var(--space-xxxs)
        }
        .padding-x-xxs\@xl {
            padding-left: var(--space-xxs);
            padding-right: var(--space-xxs)
        }
        .padding-x-xs\@xl {
            padding-left: var(--space-xs);
            padding-right: var(--space-xs)
        }
        .padding-x-sm\@xl {
            padding-left: var(--space-sm);
            padding-right: var(--space-sm)
        }
        .padding-x-md\@xl {
            padding-left: var(--space-md);
            padding-right: var(--space-md)
        }
        .padding-x-lg\@xl {
            padding-left: var(--space-lg);
            padding-right: var(--space-lg)
        }
        .padding-x-xl\@xl {
            padding-left: var(--space-xl);
            padding-right: var(--space-xl)
        }
        .padding-x-xxl\@xl {
            padding-left: var(--space-xxl);
            padding-right: var(--space-xxl)
        }
        .padding-x-xxxl\@xl {
            padding-left: var(--space-xxxl);
            padding-right: var(--space-xxxl)
        }
        .padding-x-xxxxl\@xl {
            padding-left: var(--space-xxxxl);
            padding-right: var(--space-xxxxl)
        }
        .padding-x-0\@xl {
            padding-left: 0;
            padding-right: 0
        }
        .padding-x-component\@xl {
            padding-left: var(--component-padding);
            padding-right: var(--component-padding)
        }
        .padding-y-xxxxs\@xl {
            padding-top: var(--space-xxxxs);
            padding-bottom: var(--space-xxxxs)
        }
        .padding-y-xxxs\@xl {
            padding-top: var(--space-xxxs);
            padding-bottom: var(--space-xxxs)
        }
        .padding-y-xxs\@xl {
            padding-top: var(--space-xxs);
            padding-bottom: var(--space-xxs)
        }
        .padding-y-xs\@xl {
            padding-top: var(--space-xs);
            padding-bottom: var(--space-xs)
        }
        .padding-y-sm\@xl {
            padding-top: var(--space-sm);
            padding-bottom: var(--space-sm)
        }
        .padding-y-md\@xl {
            padding-top: var(--space-md);
            padding-bottom: var(--space-md)
        }
        .padding-y-lg\@xl {
            padding-top: var(--space-lg);
            padding-bottom: var(--space-lg)
        }
        .padding-y-xl\@xl {
            padding-top: var(--space-xl);
            padding-bottom: var(--space-xl)
        }
        .padding-y-xxl\@xl {
            padding-top: var(--space-xxl);
            padding-bottom: var(--space-xxl)
        }
        .padding-y-xxxl\@xl {
            padding-top: var(--space-xxxl);
            padding-bottom: var(--space-xxxl)
        }
        .padding-y-xxxxl\@xl {
            padding-top: var(--space-xxxxl);
            padding-bottom: var(--space-xxxxl)
        }
        .padding-y-0\@xl {
            padding-top: 0;
            padding-bottom: 0
        }
        .padding-y-component\@xl {
            padding-top: var(--component-padding);
            padding-bottom: var(--component-padding)
        }
    }
    .text-center\@xl {
        text-align: center
    }
    .text-left\@xl {
        text-align: left
    }
    .text-right\@xl {
        text-align: right
    }
    .text-justify\@xl {
        text-align: justify
    }
    @supports (--css: variables) {
        .text-xs\@xl {
            font-size: var(--text-xs, 0.694em)
        }
        .text-sm\@xl {
            font-size: var(--text-sm, 0.833em)
        }
        .text-base\@xl {
            font-size: var(--text-unit, 1em)
        }
        .text-md\@xl {
            font-size: var(--text-md, 1.2em)
        }
        .text-lg\@xl {
            font-size: var(--text-lg, 1.44em)
        }
        .text-xl\@xl {
            font-size: var(--text-xl, 1.728em)
        }
        .text-xxl\@xl {
            font-size: var(--text-xxl, 2.074em)
        }
        .text-xxxl\@xl {
            font-size: var(--text-xxxl, 2.488em)
        }
        .text-xxxxl\@xl {
            font-size: var(--text-xxxxl, 2.985em)
        }
    }
    .hide\@xl {
        display: none !important
    }
}

@media not all and (min-width: 90rem) {
    .has-margin\@xl {
        margin: 0 !important
    }
    .has-padding\@xl {
        padding: 0 !important
    }
    .display\@xl {
        display: none !important
    }
}

:root,
[data-theme="default"],
.main-header--transparent:not(.main-header--expanded) .main-header__nav .main-header__dropdown {
    --color-primary-darker: hsl(220, 28%, 18%);
    --color-primary-darker-h: 220;
    --color-primary-darker-s: 28%;
    --color-primary-darker-l: 18%;
    --color-primary-dark: hsl(220, 28%, 28%);
    --color-primary-dark-h: 220;
    --color-primary-dark-s: 28%;
    --color-primary-dark-l: 28%;
    --color-primary: hsl(220, 28%, 38%);
    --color-primary-h: 220;
    --color-primary-s: 28%;
    --color-primary-l: 38%;
    --color-primary-light: hsl(220, 28%, 48%);
    --color-primary-light-h: 220;
    --color-primary-light-s: 28%;
    --color-primary-light-l: 48%;
    --color-primary-lighter: hsl(220, 28%, 58%);
    --color-primary-lighter-h: 220;
    --color-primary-lighter-s: 28%;
    --color-primary-lighter-l: 58%;
    --color-accent-darker: hsl(44, 75%, 31%);
    --color-accent-darker-h: 44;
    --color-accent-darker-s: 75%;
    --color-accent-darker-l: 31%;
    --color-accent-dark: hsl(44, 75%, 41%);
    --color-accent-dark-h: 44;
    --color-accent-dark-s: 75%;
    --color-accent-dark-l: 41%;
    --color-accent: hsl(44, 75%, 51%);
    --color-accent-h: 44;
    --color-accent-s: 75%;
    --color-accent-l: 51%;
    --color-accent-light: hsl(44, 75%, 61%);
    --color-accent-light-h: 44;
    --color-accent-light-s: 75%;
    --color-accent-light-l: 61%;
    --color-accent-lighter: hsl(44, 75%, 71%);
    --color-accent-lighter-h: 44;
    --color-accent-lighter-s: 75%;
    --color-accent-lighter-l: 71%;
    --color-black: hsl(240, 8%, 12%);
    --color-black-h: 240;
    --color-black-s: 8%;
    --color-black-l: 12%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-warning-darker: hsl(46, 100%, 47%);
    --color-warning-darker-h: 46;
    --color-warning-darker-s: 100%;
    --color-warning-darker-l: 47%;
    --color-warning-dark: hsl(46, 100%, 50%);
    --color-warning-dark-h: 46;
    --color-warning-dark-s: 100%;
    --color-warning-dark-l: 50%;
    --color-warning: hsl(46, 100%, 61%);
    --color-warning-h: 46;
    --color-warning-s: 100%;
    --color-warning-l: 61%;
    --color-warning-light: hsl(46, 100%, 71%);
    --color-warning-light-h: 46;
    --color-warning-light-s: 100%;
    --color-warning-light-l: 71%;
    --color-warning-lighter: hsl(46, 100%, 80%);
    --color-warning-lighter-h: 46;
    --color-warning-lighter-s: 100%;
    --color-warning-lighter-l: 80%;
    --color-success-darker: hsl(94, 48%, 42%);
    --color-success-darker-h: 94;
    --color-success-darker-s: 48%;
    --color-success-darker-l: 42%;
    --color-success-dark: hsl(94, 48%, 48%);
    --color-success-dark-h: 94;
    --color-success-dark-s: 48%;
    --color-success-dark-l: 48%;
    --color-success: hsl(94, 48%, 56%);
    --color-success-h: 94;
    --color-success-s: 48%;
    --color-success-l: 56%;
    --color-success-light: hsl(94, 48%, 65%);
    --color-success-light-h: 94;
    --color-success-light-s: 48%;
    --color-success-light-l: 65%;
    --color-success-lighter: hsl(94, 48%, 74%);
    --color-success-lighter-h: 94;
    --color-success-lighter-s: 48%;
    --color-success-lighter-l: 74%;
    --color-error-darker: hsl(349, 75%, 36%);
    --color-error-darker-h: 349;
    --color-error-darker-s: 75%;
    --color-error-darker-l: 36%;
    --color-error-dark: hsl(349, 75%, 44%);
    --color-error-dark-h: 349;
    --color-error-dark-s: 75%;
    --color-error-dark-l: 44%;
    --color-error: hsl(349, 75%, 51%);
    --color-error-h: 349;
    --color-error-s: 75%;
    --color-error-l: 51%;
    --color-error-light: hsl(349, 75%, 59%);
    --color-error-light-h: 349;
    --color-error-light-s: 75%;
    --color-error-light-l: 59%;
    --color-error-lighter: hsl(349, 75%, 67%);
    --color-error-lighter-h: 349;
    --color-error-lighter-s: 75%;
    --color-error-lighter-l: 67%;
    --color-bg: hsl(0, 0%, 100%);
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 100%;
    --color-contrast-lower: hsl(0, 0%, 95%);
    --color-contrast-lower-h: 0;
    --color-contrast-lower-s: 0%;
    --color-contrast-lower-l: 95%;
    --color-contrast-low: hsl(240, 1%, 83%);
    --color-contrast-low-h: 240;
    --color-contrast-low-s: 1%;
    --color-contrast-low-l: 83%;
    --color-contrast-medium: hsl(240, 1%, 48%);
    --color-contrast-medium-h: 240;
    --color-contrast-medium-s: 1%;
    --color-contrast-medium-l: 48%;
    --color-contrast-high: hsl(240, 4%, 20%);
    --color-contrast-high-h: 240;
    --color-contrast-high-s: 4%;
    --color-contrast-high-l: 20%;
    --color-contrast-higher: hsl(240, 8%, 12%);
    --color-contrast-higher-h: 240;
    --color-contrast-higher-s: 8%;
    --color-contrast-higher-l: 12%
}

[data-theme="white"],
.main-header--transparent:not(.main-header--expanded) .main-header__nav,
.main-header__mobile-content {
    --color-bg: hsl(240, 8%, 12%);
    --color-bg-h: 240;
    --color-bg-s: 8%;
    --color-bg-l: 12%;
    --color-contrast-lower: hsl(240, 4%, 20%);
    --color-contrast-lower-h: 240;
    --color-contrast-lower-s: 4%;
    --color-contrast-lower-l: 20%;
    --color-contrast-low: hsl(240, 1%, 48%);
    --color-contrast-low-h: 240;
    --color-contrast-low-s: 1%;
    --color-contrast-low-l: 48%;
    --color-contrast-medium: hsl(240, 1%, 83%);
    --color-contrast-medium-h: 240;
    --color-contrast-medium-s: 1%;
    --color-contrast-medium-l: 83%;
    --color-contrast-high: hsl(0, 0%, 95%);
    --color-contrast-high-h: 0;
    --color-contrast-high-s: 0%;
    --color-contrast-high-l: 95%;
    --color-contrast-higher: hsl(0, 0%, 100%);
    --color-contrast-higher-h: 0;
    --color-contrast-higher-s: 0%;
    --color-contrast-higher-l: 100%
}

@supports (--css: variables) {
    @media (min-width: 64rem) {
        :root {
            --space-unit: 1.25em
        }
    }
}

:root {
    --radius: 0.25em
}

.hover\:elevate {
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease
}

.hover\:elevate:hover {
    box-shadow: var(--shadow-md)
}

.hover\:scale {
    transition: all 0.3s var(--ease-out-back)
}

.hover\:scale:hover {
    transform: scale(1.1)
}

.hover\:reduce-opacity {
    opacity: 1;
    transition: all 0.3s ease
}

.hover\:reduce-opacity:hover {
    opacity: 0.8
}

.link-subtle {
    color: var(--color-contrast-high);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease
}

.link-subtle:hover {
    color: var(--color-primary)
}

:root {
    --font-primary: Inter, system-ui, sans-serif;
    --font-secondary: Inter, system-ui, sans-serif;
    --font-headings: Inter, system-ui, sans-serif;
    --text-base-size: 1em;
    --text-scale-ratio: 1.2;
    --body-line-height: 1.4;
    --heading-line-height: 1.2;
    --font-primary-capital-letter: 1;
    --text-unit: 1em;
    --heading-font-weight: 400
}

:root,
* {
    --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio))
}

@supports (--css: variables) {
    @media (min-width: 64rem) {
        :root {
            --text-base-size: 1.1em;
            --text-scale-ratio: 1.2
        }
    }
}

body {
    font-family: var(--font-primary)
}
.font-primary {
    font-family: var(--font-primary)
}

.font-secondary {
    font-family: var(--font-secondary)
}

.font-headings {
    font-family: var(--font-headings)
}

mark {
    background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
    color: inherit
}

.text-component {
    --line-height-multiplier: 1;
    --text-vspace-multiplier: 1
}

.text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid var(--color-contrast-low)
}

.text-component hr {
    background: var(--color-contrast-low);
    height: 1px
}

.text-component figcaption {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium)
}

.article {
    --body-line-height: 1.58;
    --text-vspace-multiplier: 1.2
}

.btn {
    --btn-font-size: 1em;
    --btn-padding-x: var(--space-lg);
    --btn-padding-y: var(--space-xs);
    --btn-radius: 0em;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease
}

.btn:focus {
    outline: none
}

.btn:active {
    transform: translateY(2px)
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white)
}

.btn--primary:hover {
    background-color: var(--color-primary-dark)
}

.btn--primary:focus {
    box-shadow: 0px 0px 0px 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.btn--subtle {
    background-color: var(--color-bg);
    color: var(--color-contrast-higher);
    border: 1px solid #999
}

.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-white)
}

.btn--accent:hover {
    background-color: var(--color-accent-dark)
}

.btn--accent:focus {
    box-shadow: 0px 0px 0px 2px hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2)
}

.btn--disabled,
.btn[disabled],
.btn[readonly] {
    opacity: 0.6;
    cursor: not-allowed
}

.btn--sm {
    font-size: 0.8em
}

.btn--md {
    --btn-padding-y: var(--space-sm);
    font-size: 1em
}

.btn--lg {
    --btn-padding-y: var(--space-sm);
    font-size: 1em
}

.form-control,
.product-configure select,
.product-configure input:not([type="checkbox"]):not([type="radio"]) {
    --form-control-font-size: 1em;
    --form-control-padding-x: var(--space-xs);
    --form-control-padding-y: var(--space-xxs);
    --form-control-radius: 0em;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid #999;
    line-height: 1.2;
    transition: all 0.2s ease
}

.form-control::-moz-placeholder,
.product-configure select::-moz-placeholder,
.product-configure input:not([type="radio"]):not([type="checkbox"])::-moz-placeholder {
    opacity: 1;
    color: var(--color-contrast-medium)
}

.form-control:-ms-input-placeholder,
.product-configure select:-ms-input-placeholder,
.product-configure input:not([type="radio"]):not([type="checkbox"]):-ms-input-placeholder {
    opacity: 1;
    color: var(--color-contrast-medium)
}

.form-control::placeholder,
.product-configure select::placeholder,
.product-configure input:not([type="radio"]):not([type="checkbox"])::placeholder {
    opacity: 1;
    color: var(--color-contrast-medium)
}

/* .form-control:focus,
.product-configure select:focus,
.product-configure input:focus:not([type="checkbox"]):not([type="radio"]) {
    border-color: var(--color-primary);
    box-shadow: 0px 0px 0px 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline: none
} */

.form-control--disabled,
.form-control[disabled],
.product-configure select[disabled],
.product-configure input[disabled]:not([type="checkbox"]):not([type="radio"]),
.form-control[readonly],
.product-configure select[readonly],
.product-configure input[readonly]:not([type="checkbox"]):not([type="radio"]) {
    cursor: not-allowed
}

.form-control[aria-invalid="true"],
.product-configure select[aria-invalid="true"],
.product-configure input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.form-control--error {
    border-color: var(--color-error)
}

.form-control[aria-invalid="true"]:focus,
.product-configure select[aria-invalid="true"]:focus,
.product-configure input[aria-invalid="true"]:focus:not([type="checkbox"]):not([type="radio"]),
.form-control--error:focus {
    box-shadow: 0px 0px 0px 2px hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2)
}

.form-legend {
    font-size: var(--text-md)
}
.media-wrapper--3\:4 {
    padding-bottom: 133%
}

body {
    overflow-x: hidden
}

.text-underline-hover {
    text-decoration: none
}

.text-underline-hover:hover {
    text-decoration: underline
}

:root {
    --accordion-border-width: 1px;
    --accordion-border-color: var(--color-contrast-low);
    --accordion-icon-size: 1em;
    --accordion-icon-stroke-width: 1.5px
}

.accordion__item {
    border-style: solid;
    border-color: var(--accordion-border-color);
    border-bottom-width: var(--accordion-border-width)
}

.accordion__item:first-child {
    border-top-width: var(--accordion-border-width)
}

.accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer
}

.accordion__header .icon {
    font-size: var(--accordion-icon-size)
}

.accordion__header .icon .icon__group {
    stroke-width: var(--accordion-icon-stroke-width)
}

.accordion__icon-arrow .icon__group,
.accordion__icon-arrow-v2 .icon__group,
.accordion__icon-plus .icon__group {
    will-change: transform;
    transform-origin: 8px 8px
}

.accordion__icon-arrow .icon__group>*,
.accordion__icon-arrow-v2 .icon__group>*,
.accordion__icon-plus .icon__group>* {
    transform-origin: 8px 8px
}

.accordion__icon-arrow .icon__group>*,
.accordion__icon-arrow-v2 .icon__group>* {
    stroke-dasharray: 17;
    transform: translateY(3px)
}

.accordion__icon-arrow .icon__group>*:first-child,
.accordion__icon-arrow-v2 .icon__group>*:first-child {
    stroke-dashoffset: 8.5
}

.accordion__icon-arrow .icon__group>*:last-child,
.accordion__icon-arrow-v2 .icon__group>*:last-child {
    stroke-dashoffset: 8.5
}

.accordion__icon-plus .icon__group {
    transform: rotate(-90deg)
}

.accordion__icon-plus .icon__group>*:first-child {
    transform: rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>*:first-child {
    transform: translateY(-3px) rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>*:last-child {
    transform: translateY(-3px) rotate(90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group {
    transform: rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group>*:first-child,
.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group *:last-child {
    stroke-dashoffset: 0;
    transform: translateY(0px)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group {
    transform: rotate(0)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group>*:first-child {
    transform: rotate(0)
}

.js .accordion__panel {
    display: none;
    will-change: height;
    transform: translateZ(0px)
}

.js .accordion__item--is-open>.accordion__panel {
    display: block
}

.accordion[data-animation="on"] .accordion__item--is-open .accordion__panel>* {
    -webkit-animation: accordion-entry-animation 0.4s var(--ease-out);
    animation: accordion-entry-animation 0.4s var(--ease-out)
}

.accordion[data-animation="on"] .accordion__icon-arrow .icon__group,
.accordion[data-animation="on"] .accordion__icon-arrow-v2 .icon__group,
.accordion[data-animation="on"] .accordion__icon-plus .icon__group {
    transition: transform 0.3s var(--ease-out)
}

.accordion[data-animation="on"] .accordion__icon-arrow .icon__group>*,
.accordion[data-animation="on"] .accordion__icon-arrow-v2 .icon__group>*,
.accordion[data-animation="on"] .accordion__icon-plus .icon__group>* {
    transition: transform .3s, stroke-dashoffset .3s;
    transition-timing-function: var(--ease-out)
}

@-webkit-keyframes accordion-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0px)
    }
}

@keyframes accordion-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0px)
    }
}

:root {
    --anim-menu-btn-size: 48px;
    --anim-menu-btn-transition-duration: .2s;
    --anim-menu-btn-icon-size: 32px;
    --anim-menu-btn-icon-stroke: 2px
}

.anim-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--anim-menu-btn-size);
    height: var(--anim-menu-btn-size)
}

.anim-menu-btn__icon {
    position: relative;
    display: block;
    font-size: var(--anim-menu-btn-icon-size);
    width: 1em;
    height: var(--anim-menu-btn-icon-stroke);
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    transform: scale(1)
}

.anim-menu-btn__icon::before,
.anim-menu-btn__icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: inherit;
    border-radius: inherit
}

.anim-menu-btn__icon--close {
    background-size: 100% 100%;
    will-change: transform, background-size;
    transition-property: transform, background-size;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn:active .anim-menu-btn__icon--close {
    transform: scale(0.9)
}

.anim-menu-btn__icon--close::before,
.anim-menu-btn__icon--close::after {
    will-change: inherit;
    transition: inherit
}

.anim-menu-btn__icon--close::before {
    transform: translateY(-0.25em) rotate(0)
}

.anim-menu-btn__icon--close::after {
    transform: translateY(0.25em) rotate(0)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close {
    background-size: 0% 100%
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close::before {
    transform: translateY(0) rotate(45deg)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close::after {
    transform: translateY(0) rotate(-45deg)
}

.anim-menu-btn__icon--arrow-left,
.anim-menu-btn__icon--arrow-right,
.anim-menu-btn__icon--arrow-up,
.anim-menu-btn__icon--arrow-down {
    border-radius: 50em;
    will-change: transform;
    transition-property: transform;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-left,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-right,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-up,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-down {
    transform: scale(0.9)
}

.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn__icon--arrow-down::after {
    transform-origin: calc(var(--anim-menu-btn-icon-stroke)/2) 50%;
    will-change: transform, width;
    transition-property: transform, width;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-down::before {
    transform: translateY(-0.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    width: 50%
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before {
    transform: translateY(0) rotate(-45deg)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0) rotate(45deg)
}

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg)
}

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg)
}

.story__img {
    display: block;
    transition: opacity .2s;
    margin-bottom: var(--space-xs)
}

.story__img:hover {
    opacity: 0.85
}

.story__img img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md)
}

.story__category {
    display: inline-flex;
    align-items: center;
    color: var(--color-contrast-higher);
    line-height: 1;
    text-decoration: none;
    font-size: var(--text-sm);
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    padding: var(--space-xxs);
    border-radius: var(--radius-md);
    transition: background-color .2s
}

.story__category:hover {
    text-decoration: underline;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3)
}

.story .story__title {
    margin-bottom: var(--space-xs);
    margin-top: var(--space-sm)
}

.story__title a {
    color: var(--color-contrast-higher);
    text-decoration: none
}

.story__title a:hover {
    text-decoration: underline
}

.story__author {
    --author-img-size: 50px;
    display: grid;
    grid-template-columns: var(--author-img-size) 1fr;
    align-items: center;
    gap: var(--space-xs)
}

.story__author img {
    display: block;
    width: var(--author-img-size);
    height: var(--author-img-size);
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%
}

.story__author-name {
    margin-bottom: var(--space-xxxxs)
}

.story__author-name a {
    text-decoration: none;
    color: var(--color-contrast-higher)
}

.story__author-name a:hover {
    text-decoration: underline
}

.story__meta {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium)
}

@media (min-width: 64rem) {
    .story--featured {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-gap: var(--space-md);
        align-items: center
    }
    .story--featured .story__img {
        margin: 0
    }
    .story--featured .story__title {
        font-size: var(--text-xxl)
    }
}

.bones__line {
    display: inline-block;
    background-color: var(--color-contrast-low);
    height: 1em;
    margin-bottom: var(--space-xs);
    min-width: 33%
}

h1 .bones__line,
h2 .bones__line,
h3 .bones__line,
h4 .bones__line {
    margin-bottom: var(--space-xxxs)
}

h1 .bones__line:last-of-type,
h2 .bones__line:last-of-type,
h3 .bones__line:last-of-type,
h4 .bones__line:last-of-type {
    margin-bottom: var(--space-xs)
}

.bones__line.bones__line--full {
    width: 100%
}

.bones__line.bones__line--half {
    width: 50%
}

.bones__line.bones__line--large {
    width: 75%
}

.breadcrumbs__item {
    display: inline-block;
    display: inline-flex;
    align-items: center
}

:root {
    --btns-button-radius: 0.25em;
    --btns-button-padding-x: var(--space-xs);
    --btns-button-padding-y: var(--space-xs)
}

.btns {
    display: inline-block;
    display: inline-flex
}

.btns>* {
    display: inline-block
}

.btns>*:first-child,
.btns *:first-child .btns__btn {
    border-radius: var(--btns-button-radius) 0 0 var(--btns-button-radius)
}

.btns>*:last-child,
.btns *:last-child .btns__btn {
    border-radius: 0 var(--btns-button-radius) var(--btns-button-radius) 0
}

.btns[class*="gap-xxxxs"],
.btns[class*="gap-xxxs"],
.btns[class*="gap-xxs"],
.btns[class*="gap-xs"],
.btns[class*="gap-sm"],
.btns[class*="gap-md"],
.btns[class*="gap-lg"],
.btns[class*="gap-xl"],
.btns[class*="gap-xxl"],
.btns[class*="gap-xxxl"],
.btns[class*="gap-xxxxl"] {
    flex-wrap: wrap
}

.btns[class*="gap-xxxxs"] .btns__btn,
.btns[class*="gap-xxxs"] .btns__btn,
.btns[class*="gap-xxs"] .btns__btn,
.btns[class*="gap-xs"] .btns__btn,
.btns[class*="gap-sm"] .btns__btn,
.btns[class*="gap-md"] .btns__btn,
.btns[class*="gap-lg"] .btns__btn,
.btns[class*="gap-xl"] .btns__btn,
.btns[class*="gap-xxl"] .btns__btn,
.btns[class*="gap-xxxl"] .btns__btn,
.btns[class*="gap-xxxxl"] .btns__btn {
    border-radius: var(--btns-button-radius) !important
}

.btns__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-contrast-lower);
    transition: .2s;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btns__btn:hover:not(.btns__btn--selected) {
    background-color: hsl(var(--color-contrast-lower-h), var(--color-contrast-lower-s), calc(var(--color-contrast-lower-l) * .98))
}

.btns__btn:focus {
    z-index: 1;
    outline: none;
    box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.btns__btn--selected,
.btns--radio input[type="radio"]:checked+label,
.btns--radio input[type="checkbox"]:checked+label,
.btns--checkbox input[type="radio"]:checked+label,
.btns--checkbox input[type="checkbox"]:checked+label {
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    box-shadow: var(--shadow-sm)
}

.btns__btn--disabled {
    opacity: 0.7;
    cursor: not-allowed;
    text-decoration: line-through
}

.btns--radio>*,
.btns--checkbox>* {
    position: relative
}

.btns--radio input[type="radio"],
.btns--radio input[type="checkbox"],
.btns--checkbox input[type="radio"],
.btns--checkbox input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none
}

.btns--radio input[type="radio"]+label,
.btns--radio input[type="checkbox"]+label,
.btns--checkbox input[type="radio"]+label,
.btns--checkbox input[type="checkbox"]+label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btns--radio input[type="radio"]:focus+label,
.btns--radio input[type="checkbox"]:focus+label,
.btns--checkbox input[type="radio"]:focus+label,
.btns--checkbox input[type="checkbox"]:focus+label {
    z-index: 1;
    box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.btns__btn--icon {
    padding: var(--btns-button-padding-x)
}

.btns__btn--icon .icon {
    display: block;
    color: inherit
}

.btns--grid-layout {
    --btns-button-padding-x: var(--space-xxs);
    --btns-button-padding-y: var(--space-xxs)
}

.btns--grid-layout input[type="radio"]+label,
.btns--grid-layout input[type="checkbox"]+label {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--color-inherit);
    box-shadow: none;
    border-radius: 0 !important
}

.btns--grid-layout input[type="radio"]+label:hover:not(.btns__btn--selected),
.btns--grid-layout input[type="checkbox"]+label:hover:not(.btns__btn--selected) {
    background-color: transparent
}

.btns--grid-layout input[type="radio"]:focus+label,
.btns--grid-layout input[type="checkbox"]:focus+label {
    box-shadow: none
}

.btns--grid-layout input[type="radio"]:checked+label,
.btns--grid-layout input[type="checkbox"]:checked+label {
    box-shadow: none;
    border: 1px solid;
    color: var(--color-inherit);
    background-color: transparent
}

.banner-card {
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: var(--color-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    transition: .3s;
    padding-bottom: 62.5%
}
.banner-card__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2
}

.banner-card__btn {
    position: relative;
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.banner-card__btn i {
    position: relative;
    z-index: 2;
    color: var(--color-bg);
    opacity: 0;
    transition: opacity .3s
}

.banner-card__btn::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    opacity: 0;
    transform: translateY(25%);
    transition: opacity 0.3s, transform 0.3s var(--ease-out)
}

.banner-card:hover .banner-card__btn i {
    opacity: 1
}

.banner-card:hover .banner-card__btn::after {
    opacity: 1;
    transform: translateY(0)
}

.banner-card--overlay-bg::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-card--overlay-bg:hover::before {
}

.category-card__title {
    text-align: center;
    margin-top: var(--space-xs)
}

.category-card__title a {
    text-decoration: none;
    color: inherit
}

.category-card__title a:hover {
    text-decoration: underline
}

.coming-soon {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.coming-soon__login {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md)
}

.customer-logos__item {
    display: block;
    padding: var(--space-sm);
    max-width: 150px
}

.customer-logos__item img {
    height: auto
}

@media (min-width: 64rem) {
    .customer-logos__item {
        max-width: 250px;
        padding: var(--space-md)
    }
}

.customer-logos__item--placeholder {
    width: 100px
}

@media (min-width: 64rem) {
    .customer-logos__item--placeholder {
        width: 200px
    }
}

:root {
    --select-icon-size: 1em;
    --select-icon-right-margin: var(--space-sm);
    --select-text-icon-gap: var(--space-xxxs)
}

.select {
    position: relative
}

.select__input {
    width: 100%;
    height: 100%;
    padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important
}

.select__icon {
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    pointer-events: none;
    position: absolute;
    right: var(--select-icon-right-margin);
    top: 50%;
    transform: translateY(-50%)
}

:root {
    --select-dropdown-gap: 4px
}

.select__button {
    width: 100%
}

.select__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    max-height: 1px;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
    padding: var(--space-xxs) 0;
    border-radius: var(--radius-md);
    z-index: var(--zindex-popover);
    margin-top: var(--select-dropdown-gap);
    margin-bottom: var(--select-dropdown-gap);
    overflow: auto;
    --space-unit: 1rem;
    --text-unit: 1rem;
    font-size: var(--text-unit);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .2s, opacity .2s
}

.select__dropdown--right {
    right: 0;
    left: auto
}

.select__dropdown--up {
    bottom: 100%;
    top: auto
}

.select__button[aria-expanded="true"]+.select__dropdown {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity .2s
}

.select__list {
    list-style: none !important
}

.select__list:not(:first-of-type) {
    padding-top: var(--space-xxs)
}

.select__list:not(:last-of-type) {
    border-bottom: 1px solid var(--color-contrast-low);
    padding-bottom: var(--space-xxs)
}

.select__item {
    display: block;
    padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-md);
    color: var(--color-contrast-high);
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.select__item--optgroup {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium)
}

.select__item--option {
    cursor: pointer
}

.select__item--option:hover {
    background-color: var(--color-contrast-lower)
}

.select__item--option:focus {
    outline: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1)
}

.select__item--option[aria-selected=true] {
    background-color: var(--color-primary);
    color: var(--color-white);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.select__item--option[aria-selected=true]::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    right: var(--space-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='1.5' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

html:not(.js) .select .icon {
    display: none
}

:root {
    --drawer-width: 400px
}

.drawer {
    position: fixed;
    z-index: var(--zindex-overlay);
    height: 100%;
    width: 100%;
    max-width: var(--drawer-width);
    top: 0;
    right: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s
}

.drawer:focus {
    outline: none
}

.drawer--is-visible {
    visibility: visible;
    transition: none
}

.drawer--open-left {
    right: auto;
    left: 0
}

.drawer__content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.3s;
    transition-timing-function: var(--ease-in-out)
}

.drawer--open-left .drawer__content {
    transform: translateX(-100%)
}

.drawer--is-visible .drawer__content {
    transform: translateX(0)
}

.drawer__body {
    height: 100%;
    overflow: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch
}

.drawer__close-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: .2s
}

.drawer__close-btn .icon {
    display: block
}

.drawer--modal {
    max-width: none;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0);
    transition: background-color 0.3s, visibility 0s 0.3s
}

.drawer--modal.drawer--is-visible {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.75);
    transition: background-color 0.3s
}

.drawer--modal.drawer--open-left .drawer__content {
    right: auto;
    left: 0
}

.drawer--modal .drawer__content {
    max-width: var(--drawer-width)
}

.product-configure select {
    padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon select__icon' aria-hidden='true' viewBox='0 0 16 16'%3E%3Cg stroke-width='2' stroke='currentColor'%3E%3Cpolyline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='15.5,4.5 8,12 0.5,4.5 '%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom var(--space-xs) right var(--space-xs);
    background-size: 14px;
    display: block
}

.product-configure-variants {
    margin-bottom: var(--space-sm)
}

.product-configure-variants label {
    display: inline-block;
    font-size: var(--text-sm);
    margin-bottom: var(--space-xxs)
}

.product-configure-variants select {
    display: block
}

.gui {
    --line-height-multiplier: 1;
    --text-vspace-multiplier: 1
}

.gui-modal-product-inventory-location-background {
    z-index: 4
}

.product-configure input:not([type="checkbox"]):not([type="radio"]) {
    display: block
}

.product-configure input[type="checkbox"]+label,
.product-configure input[type="radio"]+label {
    margin-bottom: 0
}

.product-configure label {
    display: inline-block;
    font-size: var(--text-sm);
    margin-bottom: var(--text-sm)
}

.product-configure-custom-option {
    margin-bottom: var(--space-sm)
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
    border-color: var(--color-contrast-low) !important
}

.gui-block-title {
    padding-top: var(--space-sm);
    border-bottom: 0;
    background: transparent
}

#gui-form-cart .gui-table {
    border: 0
}

#gui-form-cart .gui-table thead tr th {
    border-color: var(--color-contrast-low);
    background-color: transparent
}

.gui-page-title {
    text-align: center;
    margin-bottom: var(--space-md)
}

.messages--overlay {
    margin-bottom: 20px
}

@media (min-width: 64rem) {
    .messages--overlay {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(var(--main-header-height) + var(--space-md));
        z-index: 1
    }
}

.hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--color-white);
    position: relative
}

.hero h1,
.hero h2,
.hero h3,
.hero h4 {
    color: var(--color-white)
}

.hero:not(.hero--no-overlay):before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3)
}

.hero>* {
    position: relative
}

.hero--overlay-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.65);
    z-index: 1
}

.img-mag {
    overflow: hidden
}

.img-mag__asset {
    display: block;
    width: 100%;
    transform-origin: left top;
    position: absolute;
    top: 0
}

.img-mag__primary-asset {
    display: block;
    width: 100%
}

.list,
.text-component .list {
    --list-v-space: 0.65;
    --list-offset: 1;
    padding-left: 0;
    list-style: none
}

.list ul,
.list ol,
.text-component .list ul,
.text-component .list ol {
    list-style: none;
    margin: 0;
    margin-top: calc( var(--space-xxxs) * var(--list-v-space, 1));
    padding-top: calc( var(--space-xxxs) * var(--list-v-space, 1));
    padding-left: calc(var(--space-xs) * var(--list-offset, 1))
}

.list li,
.text-component .list li {
    padding-bottom: calc( var(--space-xxxs) * var(--list-v-space, 1));
    margin-bottom: calc( var(--space-xxxs) * var(--list-v-space, 1))
}

.list>li:last-child,
.list ul>li:last-child,
.list ol>li:last-child,
.text-component .list>li:last-child,
.text-component .list ul>li:last-child,
.text-component .list ol>li:last-child {
    margin-bottom: 0
}

.list:not(.list--border)>li:last-child,
.list ul>li:last-child,
.list ol>li:last-child,
.text-component .list:not(.list--border)>li:last-child,
.text-component .list ul>li:last-child,
.text-component .list ol>li:last-child {
    padding-bottom: 0
}

.list--ul li,
.list--ol li {
    padding-left: calc(var(--bullet-size) + var(--bullet-margin-right))
}

.list--ul li::before,
.list--ol li::before {
    width: var(--bullet-size);
    height: var(--bullet-size);
    margin-left: calc(var(--bullet-size) * -1);
    display: inline-flex;
    vertical-align: middle;
    position: relative;
    left: calc(var(--bullet-margin-right) * -1)
}

.list--ul {
    --bullet-size: 7px;
    --bullet-margin-right: var(--space-xxs)
}

.list--ul li::before {
    content: '';
    border-radius: 50%;
    color: var(--color-primary);
    background-color: currentColor;
    border: 2px solid currentColor
}

.list--ul ul li::before {
    background-color: transparent
}

.list--ol {
    --bullet-size: 26px;
    --bullet-margin-right: 6px;
    counter-reset: list-items
}

.list--ol li {
    counter-increment: list-items
}

.list--ol ol {
    counter-reset: list-items
}

.list--ol li::before {
    content: counter(list-items);
    font-size: 0.75em;
    justify-content: center;
    align-items: center;
    top: -0.1em;
    border-radius: 50%;
    background-color: var(--color-contrast-lower);
    border: 2px solid var(--color-contrast-lower);
    color: var(--color-contrast-high);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.list--ol ol li::before {
    background-color: transparent
}

.list--border li {
    border-bottom: 1px solid var(--color-contrast-low)
}

.list--border ul,
.list--border ol {
    border-top: 1px solid var(--color-contrast-low)
}

.list--border ul li:last-child,
.list--border ol li:last-child {
    border-bottom-width: 0
}

.main-footer {
    position: relative;
    z-index: 1
}

.main-footer__link {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

.main-footer__link:hover {
    color: var(--color-primary);
    text-decoration: underline
}

.main-footer__social-btn {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color .2s
}

.main-footer__social-btn .icon {
    display: block
}

.main-footer__social-btn:hover {
    color: var(--color-contrast-high)
}

.main-footer__list {
    margin-left: var(--space-xs)
}

.main-footer__item {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    font-size: var(--text-sm)
}

.js .main-footer__item .dropdown__menu {
    top: auto;
    bottom: calc(100% + 4px)
}

.number-input__btn {
    display: none
}

.js .number-input .form-control::-webkit-inner-spin-button,
.js .number-input .product-configure select::-webkit-inner-spin-button,
.product-configure .js .number-input select::-webkit-inner-spin-button,
.js .number-input .product-configure input:not([type="radio"]):not([type="checkbox"])::-webkit-inner-spin-button,
.product-configure .js .number-input input:not([type="radio"]):not([type="checkbox"])::-webkit-inner-spin-button,
.js .number-input .form-control::-webkit-outer-spin-button,
.js .number-input .product-configure select::-webkit-outer-spin-button,
.product-configure .js .number-input select::-webkit-outer-spin-button,
.js .number-input .product-configure input:not([type="radio"]):not([type="checkbox"])::-webkit-outer-spin-button,
.product-configure .js .number-input input:not([type="radio"]):not([type="checkbox"])::-webkit-outer-spin-button {
    display: none
}

.js .number-input .form-control,
.js .number-input .product-configure select,
.product-configure .js .number-input select,
.js .number-input .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .js .number-input input:not([type="checkbox"]):not([type="radio"]) {
    -moz-appearance: textfield;
    display: block
}

.js .number-input__btn {
    display: inline-block;
    display: flex
}

.js .number-input--v1 {
    --number-input-btn-width: 40px;
    position: relative;
    width: 5em
}

.js .number-input--v1 .form-control,
.js .number-input--v1 .product-configure select,
.product-configure .js .number-input--v1 select,
.js .number-input--v1 .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .js .number-input--v1 input:not([type="checkbox"]):not([type="radio"]) {
    padding-right: var(--number-input-btn-width);
    width: 100%
}

.js .number-input--v1 .number-input__btns {
    position: absolute;
    height: calc(100% - var(--space-xxxs)*2);
    top: var(--space-xxxs);
    right: 0;
    width: var(--number-input-btn-width);
    display: flex;
    flex-direction: column
}

.js .number-input--v1 .number-input__btn {
    position: relative;
    height: 50%;
    width: calc(100% - var(--space-xxxs));
    background: var(--color-contrast-lower);
    border-radius: var(--radius-sm)
}

.js .number-input--v1 .number-input__btn .icon {
    display: block;
    font-size: 0.8em;
    width: 1em;
    height: 1em;
    position: absolute;
    left: calc(50% - 0.5em);
    top: calc(50% - 0.5em)
}

.js .number-input--v1 .number-input__btn:hover {
    background-color: var(--color-contrast-low)
}

.js .number-input--v1 .number-input__btn:focus {
    outline: none;
    background-color: var(--color-primary)
}

.js .number-input--v1 .number-input__btn:focus .icon {
    color: var(--color-white)
}

.js .number-input--v1 .number-input__btn:active {
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * .9))
}

.js .number-input--v1 .number-input__btn--plus {
    margin-bottom: var(--space-xxxxs)
}

.js .number-input--v2 {
    --number-input-btn-width: 1.6em;
    position: relative;
    display: inline-block
}

.js .number-input--v2 .form-control,
.js .number-input--v2 .product-configure select,
.product-configure .js .number-input--v2 select,
.js .number-input--v2 .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .js .number-input--v2 input:not([type="checkbox"]):not([type="radio"]) {
    width: 5em;
    text-align: center;
    
}

.js .number-input--v2 .number-input__btn {
    width: var(--number-input-btn-width);
    height: var(--number-input-btn-width);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.js .number-input--v2 .number-input__btn:hover {
    background-color: var(--color-contrast-lower)
}

.js .number-input--v2 .number-input__btn:focus {
    outline: none;
}

.js .number-input--v2 .number-input__btn:focus .icon {
    color: var(--color-white)
}

.js .number-input--v2 .number-input__btn:active {
    background-color: transparent!important;
}

.js .number-input--v2 .number-input__btn.number-input__btn--plus {
    right: var(--space-xxs)
}

.js .number-input--v2 .number-input__btn.number-input__btn--minus {
    left: var(--space-xxs)
}

.js .number-input--v2 .number-input__btn .icon {
    font-size: 12px;
    width: 1em;
    height: 1em
}

.js .number-input--v2 .number-input__btn--plus {
    order: 2
}

.pagination__list>li {
    display: inline-block
}

.pagination--split .pagination__list {
    width: 100%
}

.pagination--split .pagination__list>*:first-child {
    margin-right: auto
}

.pagination--split .pagination__list>*:last-child {
    margin-left: auto
}

.pagination__item {
    display: inline-block;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    padding-left: calc(1.355 * var(--space-xs));
    padding-right: calc(1.355 * var(--space-xs));
    text-decoration: none;
    height: 100%;
    color: var(--color-contrast-higher);
    transition: .2s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.pagination__item:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) {
    background-color: var(--color-contrast-lower)
}

.pagination__item:active {
    transform: translateY(2px)
}

.pagination__item--selected {
    background-color: var(--color-contrast-higher);
    color: var(--color-bg)
}

.pagination__item--disabled {
    opacity: 0.5;
    pointer-events: none
}

.pagination__jumper .form-control,
.pagination__jumper .product-configure select,
.product-configure .pagination__jumper select,
.pagination__jumper .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .pagination__jumper input:not([type="checkbox"]):not([type="radio"]) {
    width: 3.2em;
    margin-right: var(--space-xs);
    padding: var(--space-xs)
}

.pagination__jumper em {
    flex-shrink: 0;
    white-space: nowrap
}

.spec-table__cell {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    width: 50%
}

.spec-table__cell--th {
    text-align: left
}

:root {
    --checkbox-radio-size: 18px;
    --checkbox-radio-gap: var(--space-xxxs);
    --checkbox-radio-border-width: 1px;
    --checkbox-radio-line-height: var(--body-line-height);
    --radio-marker-size: 8px;
    --checkbox-marker-size: 12px;
    --checkbox-radius: 0
}

.radio,
.checkbox {
    position: absolute;
    padding: 0;
    margin: 0;
    margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
    opacity: 0;
    height: var(--checkbox-radio-size);
    width: var(--checkbox-radio-size);
    pointer-events: none
}

.radio+label,
.checkbox+label {
    display: inline-flex;
    align-items: flex-start;
    line-height: var(--checkbox-radio-line-height);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer
}

.radio+label::before,
.checkbox+label::before {
    content: '';
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
    flex-shrink: 0;
    width: var(--checkbox-radio-size);
    height: var(--checkbox-radio-size);
    background-color: var(--color-bg);
    border-width: var(--checkbox-radio-border-width);
    border-color: var(--color-contrast-high);
    border-style: solid;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--checkbox-radio-gap);
    transition: transform .2s, border .2s
}

.radio:not(:checked):not(:focus)+label:hover::before,
.checkbox:not(:checked):not(:focus)+label:hover::before {
    border-color: hsl(var(--color-contrast-higher-h), var(--color-contrast-higher-s), calc(var(--color-contrast-higher-l) * .7))
}

.radio+label::before {
    border-radius: 50%
}

.checkbox+label::before {
    border-radius: var(--checkbox-radius)
}

.radio:checked+label::before,
.checkbox:checked+label::before {
    background-color: var(--color-primary);
    box-shadow: none;
    border-color: var(--color-primary);
    transition: transform .2s
}

.radio:active+label::before,
.checkbox:active+label::before {
    transform: scale(0.8);
    transition: transform .2s
}

.radio:checked:active+label::before,
.checkbox:checked:active+label::before {
    transform: none;
    transition: none
}

.radio:checked+label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--radio-marker-size)
}

.checkbox:checked+label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-size: var(--checkbox-marker-size)
}

.radio:checked:active+label::before,
.checkbox:checked:active+label::before,
.radio:focus+label::before,
.checkbox:focus+label::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.radio--bg+label,
.checkbox--bg+label {
    padding: var(--space-xxxxs) var(--space-xxxs);
    border-radius: var(--radius-md);
    transition: background .2s
}

.radio--bg+label:hover,
.checkbox--bg+label:hover {
    background-color: var(--color-contrast-lower)
}

.radio--bg:active+label,
.checkbox--bg:active+label,
.radio--bg:focus+label,
.checkbox--bg:focus+label {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1)
}

:root {
    --rating-icon-size: 1.5em
}

.rating__control ul {
    display: inline-block;
    display: inline-flex;
    vertical-align: top
}

.rating__control li {
    position: relative;
    height: var(--rating-icon-size);
    width: var(--rating-icon-size);
    float: left;
    cursor: pointer;
    margin-right: var(--space-xxxxs)
}

.rating__control li:focus {
    outline: none
}

.rating__control li:focus::before {
    transform: scale(1);
    opacity: 0.2
}

.rating__control li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: 0.2s
}

.rating__control li.rating__item--zero {
    display: none
}

.rating__control--is-hidden {
    display: none
}

.rating__icon,
.rating__control li::before,
.rating[data-animation="on"] .rating__control ul:hover .rating__icon {
    color: var(--color-primary)
}

.rating__icon--inactive,
.rating[data-animation="on"] .rating__control li:hover~li .rating__icon,
.rating__item--checked~li .rating__icon {
    color: var(--color-contrast-higher)
}

.rating__icon--inactive svg>*,
.rating[data-animation="on"] .rating__control li:hover~li .rating__icon svg>*,
.rating__item--checked~li .rating__icon svg>* {
    fill: #transparent;
    stroke: #999999
}

.rating__icon {
    overflow: hidden
}

.rating__icon svg {
    display: block;
    height: var(--rating-icon-size);
    width: var(--rating-icon-size);
    max-width: var(--rating-icon-size);
    pointer-events: none
}

.rating--read-only .rating__control li {
    cursor: default
}

.rating__icon--inactive {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.rating__icon--inactive svg>* {
    fill: #fa7595;
    stroke: transparent
}

.rating__item--half .rating__icon:not(.rating__icon--inactive) {
    position: relative;
    z-index: 2;
    width: 50%
}

.rating[data-animation="on"] .rating__control li:active .rating__icon {
    transform: scale(0.8)
}

.rating[data-animation="on"] .rating__icon {
    transition: .2s
}

.js .rating__select {
    display: none
}

.rating__link {
  transition: opacity .2s;
  display: flex;
  align-items: baseline;
}

.rating__link:hover {
    opacity: 0.85
}

.sidebar:not(.sidebar--static) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--zindex-fixed-element);
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s .3s
}

.sidebar:not(.sidebar--static)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
    transition: background-color .3s;
    z-index: 1
}

.sidebar:not(.sidebar--static) .sidebar__panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-bg);
    transform: translateX(-100%);
    transition: .3s
}

.sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
    left: auto;
    right: 0;
    transform: translateX(100%)
}

.sidebar:not(.sidebar--static).sidebar--is-visible {
    visibility: visible;
    transition: none
}

.sidebar:not(.sidebar--static).sidebar--is-visible::after {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.85)
}

.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
    transform: translateX(0);
    box-shadow: var(--shadow-md)
}

.sidebar__header {
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid var(--color-contrast-lower);
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.sidebar__close-btn {
    width: 2em;
    height: 2em;
    display: flex;
    border-radius: 50%;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    transition: .2s;
    flex-shrink: 0
}

.sidebar__close-btn:hover {
    box-shadow: var(--shadow-md)
}

.sidebar__close-btn .icon {
    display: block;
    color: var(--color-contrast-high);
    margin: auto
}

.sidebar--static,
html:not(.js) .sidebar {
    flex-shrink: 0;
    flex-grow: 1
}

.sidebar--static .sidebar__header,
html:not(.js) .sidebar .sidebar__header {
    display: none
}

.sidebar--sticky-on-desktop {
    position: -webkit-sticky;
    position: sticky;
    top: var(--space-sm);
    max-height: calc(100vh - var(--space-sm));
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.js .sidebar {
    opacity: 0
}

.js .sidebar--loaded {
    opacity: 1
}

html:not(.js) .sidebar {
    position: static
}

[class*="sidebar--static"]::before {
    display: none
}

.sidebar--static\@xs: :before {
    content: 'mobile'
}

@media (min-width: 32rem) {
    .sidebar--static\@xs: :before {
        content: 'static'
    }
}

.sidebar--static\@sm: :before {
    content: 'mobile'
}

@media (min-width: 48rem) {
    .sidebar--static\@sm: :before {
        content: 'static'
    }
}

.sidebar--static\@md: :before {
    content: 'mobile'
}

@media (min-width: 64rem) {
    .sidebar--static\@md: :before {
        content: 'static'
    }
}

.sidebar--static\@lg: :before {
    content: 'mobile'
}

@media (min-width: 80rem) {
    .sidebar--static\@lg: :before {
        content: 'static'
    }
}

.sidebar--static\@xl: :before {
    content: 'mobile'
}

@media (min-width: 90rem) {
    .sidebar--static\@xl: :before {
        content: 'static'
    }
}

@media (min-width: 64rem) {
    .sidebar--collection-filters {
        max-width: 250px
    }
}

.sidebar--collection-filters .accordion {
    --accordion-border-width: 0;
    --accordion-icon-size: .65em
}

:root {
    --search-input-btn-width: 2.5em;
    --search-input-icon-size: 1.25em
}

.search-input {
    position: relative
}

.search-input__input {
    width: 100%;
    height: 100%
}

.search-input__input::-webkit-search-decoration,
.search-input__input::-webkit-search-cancel-button,
.search-input__input::-webkit-search-results-button,
.search-input__input::-webkit-search-results-decoration {
    -webkit-appearance: none
}

.search-input__input::-ms-clear,
.search-input__input::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

.search-input--icon-right .search-input__input {
    padding-right: var(--search-input-btn-width)
}

.search-input--icon-left .search-input__input {
    padding-left: var(--search-input-btn-width)
}

.search-input__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--search-input-btn-width)
}

.search-input__btn:active .icon {
    transform: translateY(2px)
}

.search-input__btn .icon {
    display: block;
    width: var(--search-input-icon-size);
    height: var(--search-input-icon-size);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-contrast-medium);
    transition: .2s
}

.search-input--icon-left .search-input__btn {
    left: 0;
    right: auto;
    pointer-events: none
}

.search-input__btn:focus .icon,
.search-input .search-input__input:focus+.search-input__btn .icon {
    color: var(--color-primary)
}

:root {
    --slider-width: 200px;
    --slider-track-height: 8px;
    --slide-thumb-size: 20px
}

.slider {
    position: relative;
    width: var(--slider-width)
}

.slider__range {
    width: 100%;
    --slider-fill-value: 0%;
    --slider-empty-value: 100%
}

.slider__input {
    display: block;
    -webkit-appearance: none;
    width: 100%;
    background: transparent
}

.slider__input:focus {
    outline: none
}

.slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--slide-thumb-size);
    height: var(--slide-thumb-size);
    border-radius: 50%;
    border: none;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    cursor: -webkit-grab;
    cursor: grab;
    margin-top: calc((var(--slider-track-height) - var(--slide-thumb-size))*0.5)
}

.slider__input:active::-webkit-slider-thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.slider__input::-moz-range-thumb {
    width: var(--slide-thumb-size);
    height: var(--slide-thumb-size);
    border-radius: 50%;
    border: none;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    cursor: grab
}

.slider__input:active::-moz-range-thumb {
    cursor: grabbing
}

.slider__input:active::-ms-thumb {
    cursor: grabbing
}

.slider__input:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2), var(--shadow-md)
}

.slider__input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2), var(--shadow-md)
}

.slider__input::-webkit-slider-runnable-track {
    height: var(--slider-track-height);
    border-radius: 50em;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-low) var(--slider-fill-value), var(--color-contrast-low) var(--slider-empty-value));
    margin-top: calc((var(--slide-thumb-size) - var(--slider-track-height))*0.5)
}

.slider__input::-moz-range-track {
    height: var(--slider-track-height);
    border-radius: 50em;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-low) var(--slider-fill-value), var(--color-contrast-low) var(--slider-empty-value))
}

.slider__input::-moz-focus-outer {
    border: 0
}

.js .slider__input::-ms-tooltip {
    display: none
}

.slider__input::-ms-thumb {
    width: var(--slide-thumb-size);
    height: var(--slide-thumb-size);
    border-radius: 50%;
    border: none;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    cursor: grab;
    transform: translateY(0);
    background-color: white !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    height: 20px;
    width: 20px
}

.slider__input:focus::-ms-thumb {
    box-shadow: inset 0 0 0 2px rgba(42, 109, 244, 0.2)
}

.slider__input::-ms-track {
    height: var(--slider-track-height);
    border-radius: 50em;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-low) var(--slider-fill-value), var(--color-contrast-low) var(--slider-empty-value));
    background-color: #98989a;
    color: transparent;
    height: 8px
}

.slider--floating-value .slider__value {
    position: absolute;
    top: calc(0px - var(--space-md));
    left: var(--slide-thumb-size);
    transform: translateX(-50%);
    font-size: var(--text-sm)
}

.slider--input .form-control,
.slider--input .product-configure select,
.product-configure .slider--input select,
.slider--input .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .slider--input input:not([type="checkbox"]):not([type="radio"]) {
    font-size: var(--text-sm);
    text-align: center;
    width: 4em
}

.slider--range-not-supported .slider__value,
html:not(.js) .slider__value {
    display: none
}

.switch-icon {
    position: relative;
    padding: var(--space-xxs)
}

.switch-icon--disabled {
    pointer-events: none
}

.switch-icon__icon {
    display: block;
    fill: currentColor;
    color: var(--color-contrast-higher);
    font-size: 2em;
    height: 1em;
    width: 1em;
    line-height: 1;
    will-change: transform
}

.switch-icon__icon--a {
    opacity: 1
}

.switch-icon__icon--b {
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    opacity: 0
}

.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--hover:hover .switch-icon__icon--a {
    opacity: 0
}

.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--hover:hover .switch-icon__icon--b {
    opacity: 1
}

.switch-icon--scale .switch-icon__icon {
    transition: opacity 0s 0.2s, transform 0.4s
}

.switch-icon--scale .switch-icon__icon--a {
    transform: scale(1)
}

.switch-icon--scale .switch-icon__icon--b {
    transform: scale(0.8)
}

.switch-icon--scale.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--scale.switch-icon--hover:hover .switch-icon__icon--a {
    transform: scale(0.8)
}

.switch-icon--scale.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--scale.switch-icon--hover:hover .switch-icon__icon--b {
    transform: scale(1)
}

.switch-icon--rotate .switch-icon__icon {
    transition: opacity 0s 0.2s, transform 0.4s
}

.switch-icon--rotate .switch-icon__icon--a {
    transform: rotate(0)
}

.switch-icon--rotate .switch-icon__icon--b {
    transform: rotate(90deg)
}

.switch-icon--rotate.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--rotate.switch-icon--hover:hover .switch-icon__icon--a {
    transform: rotate(-90deg)
}

.switch-icon--rotate.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--rotate.switch-icon--hover:hover .switch-icon__icon--b {
    transform: rotate(0)
}

.switch-icon--flip {
    perspective: 10em
}

.switch-icon--flip .switch-icon__icon {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: opacity 0s 0.2s, transform 0.4s var(--ease-out-back)
}

.switch-icon--flip .switch-icon__icon--a {
    opacity: 1;
    transform: rotateY(0deg)
}

.switch-icon--flip .switch-icon__icon--b {
    opacity: 1;
    transform: rotateY(-180deg)
}

.switch-icon--flip.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--flip.switch-icon--hover:hover .switch-icon__icon--a {
    opacity: 1;
    transform: rotateY(180deg)
}

.switch-icon--flip.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--flip.switch-icon--hover:hover .switch-icon__icon--b {
    opacity: 1;
    transform: rotateY(0deg)
}

.switch-icon--slide-up,
.switch-icon--slide-down,
.switch-icon--slide-right,
.switch-icon--slide-left {
    overflow: hidden
}

.switch-icon--slide-up .switch-icon__icon,
.switch-icon--slide-down .switch-icon__icon,
.switch-icon--slide-right .switch-icon__icon,
.switch-icon--slide-left .switch-icon__icon {
    transition: opacity 0.3s, transform 0.3s
}

.switch-icon--slide-up .switch-icon__icon--a {
    transform: translateY(0)
}

.switch-icon--slide-up .switch-icon__icon--b {
    transform: translateY(100%)
}

.switch-icon--slide-up.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-up.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateY(-100%)
}

.switch-icon--slide-up.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-up.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateY(0)
}

.switch-icon--slide-down .switch-icon__icon--a {
    transform: translateY(0)
}

.switch-icon--slide-down .switch-icon__icon--b {
    transform: translateY(-100%)
}

.switch-icon--slide-down.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-down.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateY(100%)
}

.switch-icon--slide-down.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-down.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateY(0)
}

.switch-icon--slide-right .switch-icon__icon--a {
    transform: translateX(0)
}

.switch-icon--slide-right .switch-icon__icon--b {
    transform: translateX(-100%)
}

.switch-icon--slide-right.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-right.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateX(100%)
}

.switch-icon--slide-right.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-right.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateX(0)
}

.switch-icon--slide-left .switch-icon__icon--a {
    transform: translateX(0)
}

.switch-icon--slide-left .switch-icon__icon--b {
    transform: translateX(100%)
}

.switch-icon--slide-left.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-left.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateX(-100%)
}

.switch-icon--slide-left.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-left.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateX(0)
}

:root {
    --s-tabs-border-bottom-width: 1px;
    --s-tabs-selected-item-border-bottom-width: 1px
}

.s-tabs {
    position: relative
}

.s-tabs::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    height: calc(100% - var(--s-tabs-border-bottom-width));
    width: 2em;
    background: linear-gradient(90deg, hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0), var(--color-bg));
    pointer-events: none;
    z-index: 1
}

.s-tabs__list {
    display: flex;
    overflow: auto;
    -webkit-overflow-scrolling: auto
}

.s-tabs__list::after {
    content: '';
    position: absolute;
    width: 100%;
    height: var(--s-tabs-border-bottom-width);
    left: 0;
    bottom: 0;
    background-color: var(--color-contrast-low)
}

.s-tabs__link {
    color: var(--color-contrast-medium);
    text-decoration: none;
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    white-space: nowrap;
    border-bottom: var(--s-tabs-selected-item-border-bottom-width) solid transparent;
    z-index: 1;
    transition: .2s
}

.s-tabs__link:hover:not(.s-tabs__link--current) {
    color: var(--color-contrast-high)
}

.s-tabs__link--current,
.s-tabs__link[aria-selected="true"] {
    position: relative;
    color: var(--color-primary);
    border-bottom: 3px solid #FA7595;
}

.tabs__control {
    text-decoration: none;
    color: var(--color-contrast-medium)
}

.tabs__control:focus {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 2px
}

.tabs__control:hover {
    color: var(--color-contrast-high)
}

.js .tabs__control[aria-selected="true"] {
    color: var(--color-contrast-high);
    text-decoration: underline;
    font-weight: 600;
}

:root {
    --carousel-grid-gap: var(--space-md);
    --carousel-item-auto-size: 260px;
    --carousel-transition-duration: 0.5s
}

.carousel {
    position: relative
}

.carousel__list {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform
}

.carousel__item {
    flex-shrink: 0;
    width: var(--carousel-item-auto-size);
    margin-right: var(--carousel-grid-gap);
    margin-bottom: var(--carousel-grid-gap)
}

.js .carousel__list--animating {
    transition-property: transform;
    transition-duration: var(--carousel-transition-duration);
    transition-timing-function: var(--ease-out)
}

.js .carousel__item {
    opacity: 0;
    margin-bottom: 0
}

.js .carousel--loaded .carousel__item {
    opacity: 1
}

.js .carousel:not(.carousel--is-dragging) .carousel__list:not(.carousel__list--animating) .carousel__item[tabindex="-1"]>* {
    visibility: hidden
}

.js .carousel[data-drag="on"] .carousel__item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.js .carousel[data-drag="on"] .carousel__item img {
    pointer-events: none
}

.carousel__controls .carousel__control {
    position: absolute;
    top: 50%;
    transition: all .3s ease;
    transform: translate(-50%, -50%) scale(0.9);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #999999;
      
}

.carousel__controls .carousel__control:hover {
    transform: translate(-50%, -50%) scale(1)
}

.carousel__controls .carousel__control:active {
    transform: translate(-50%, -50%) scale(0.9)
}

.carousel__controls .carousel__control--prev {
    left: 0
}

.carousel__controls .carousel__control--next {
    left: 100%
}

.carousel__control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 60px;
    background-color: var(--color-bg);
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
    transition: .2s
}

@media (min-width: 64rem) {
    .carousel__control {
        width: 40px;
        height: 80px
    }
}

.carousel__control:active {
    transform: translateY(1px)
}

.carousel__control[disabled] {
    pointer-events: none;
    background-color: var(--color-contrast-lower);
    color: var(--color-contrast-low);
    opacity: 1;
    visibility: visible;
}

.carousel__control .icon {
    display: block;
    font-size: 16px
}

@media (min-width: 64rem) {
    .carousel__control .icon {
        font-size: 20px
    }
}

.carousel__navigation {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 10px);
    gap: var(--space-xs);
    justify-content: center;
    align-items: center;
    margin-top: var(--space-sm)
}

.carousel__nav-item {
    display: inline-block;
    margin: 0 var(--space-xxxs)
}

@supports (grid-area: auto) {
    .carousel__nav-item {
        margin: 0
    }
}

.carousel__nav-item button {
    display: block;
    position: relative;
    font-size: 10px;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: var(--color-contrast-high);
    opacity: 0.4;
    cursor: pointer;
    transition: background .3s
}

.carousel__nav-item button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    border: 1px solid var(--color-contrast-high);
    opacity: 0;
    transform: scale(0);
    transition: 0.3s
}

.carousel__nav-item button:focus {
    outline: none
}

.carousel__nav-item button:focus::before {
    opacity: 1;
    transform: scale(1)
}

.carousel__nav-item--selected button {
    opacity: 1
}

.carousel__navigation--pagination {
    grid-template-columns: repeat(auto-fit, minmax(24px, auto));
    position: absolute;
    bottom: var(--space-md);
    left: 0;
    right: 0
}

.carousel__navigation--pagination .carousel__nav-item button {
    width: 100%;
    height: auto;
    color: var(--color-bg);
    font-size: var(--text-xs);
    padding: var(--space-xxxs) var(--space-xxs);
    border-radius: 15px;
    text-align: center
}

.carousel__navigation--pagination .carousel__nav-item button:focus {
    outline: 1px solid var(--color-primary);
    outline-offset: 2px
}

.carousel__navigation--pagination .carousel__nav-item button span {
    display: none
}

html:not(.js) .carousel__list {
    overflow: auto
}

.carousel--hide-controls .carousel__navigation,
.carousel--hide-controls .carousel__control {
    display: none
}

.dr-cart__product {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    grid-gap: var(--space-xs);
    align-items: start;
    padding: var(--space-sm) 0
}

.dr-cart__product:not(:last-child) {
    border-bottom: 1px solid var(--color-contrast-lower)
}

.dr-cart__img {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    transition: .2s
}

.dr-cart__img img {
    display: block
}

.dr-cart__img:hover {
    opacity: 0.85
}

.dr-cart__select {
    --select-icon-size: 0.85em;
    --select-icon-right-margin: var(--space-xxs);
    font-size: 0.875em;
    width: 3.6em
}

.dr-cart__select .select__input {
    padding: var(--space-xxxxs) var(--space-xxxs)
}

.dr-cart__remove-btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: var(--text-sm);
    color: var(--color-primary);
    cursor: pointer
}

.dr-cart__remove-btn:hover {
    text-decoration: underline
}

.dr-cart__remove-btn:focus {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 2px
}

:root {
    --dropdown-item-padding: var(--space-xxs) var(--space-sm)
}

.dropdown {
    position: relative
}

.dropdown__menu {
    width: 200px;
    border-radius: var(--radius-md);
    padding: var(--space-xxs) 0;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    z-index: var(--zindex-popover);
    position: absolute;
    left: 0;
    top: 100%;
    --space-unit: 1rem;
    --text-unit: 1rem;
    font-size: var(--text-unit);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s .2s
}

@media (pointer: fine) {
    .dropdown__wrapper:hover>.dropdown__menu,
    .dropdown__sub-wrapper:hover>.dropdown__menu {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s
    }
    .dropdown__sub-wrapper:hover>.dropdown__menu {
        left: 100%
    }
}

@media not all and (pointer: fine) {
    .dropdown__trigger-icon {
        display: none
    }
}

.dropdown__item {
    display: block;
    text-decoration: none;
    color: var(--color-contrast-high);
    padding: var(--dropdown-item-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.dropdown__item:hover,
.dropdown__item.dropdown__item--hover {
    background-color: var(--color-contrast-lower)
}

.dropdown__separator {
    height: 1px;
    background-color: var(--color-contrast-low);
    margin: var(--dropdown-item-padding)
}

.dropdown__sub-wrapper {
    position: relative
}

.dropdown__sub-wrapper>.dropdown__item {
    position: relative;
    padding-right: calc(var(--space-sm) + 12px)
}

.dropdown__sub-wrapper>.dropdown__item .icon {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    right: var(--space-xxs);
    top: calc(50% - 6px)
}

.dropdown__sub-wrapper>.dropdown__menu {
    top: calc(var(--space-xxs) * -1);
    box-shadow: var(--shadow-md)
}

.js .dropdown__menu {
    top: calc(100% + 4px)
}

.js .dropdown__sub-wrapper .dropdown__menu {
    top: calc(var(--space-xxs) * -1)
}

@media (pointer: fine) {
    .js .dropdown__menu--is-visible {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s
    }
}

.js .dropdown__menu--is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s .2s
}

.js .dropdown__sub-wrapper>.dropdown__menu--is-visible,
.js .dropdown__sub-wrapper>.dropdown__menu--is-hidden {
    left: 100%
}

.js .dropdown__sub-wrapper>.dropdown__menu--is-visible.dropdown__menu--left,
.js .dropdown__sub-wrapper>.dropdown__menu--is-hidden.dropdown__menu--left {
    left: -100%
}

:root {
    --main-header-height: 50px;
    --main-header-logo-height: 60px
}

@media (min-width: 64rem) {
    :root {
        --main-header-height: 70px
    }
}

.main-header {
    width: 100%;
    z-index: var(--zindex-header)
}

.main-header::before {
    display: none;
    content: 'mobile'
}

@media (min-width: 64rem) {
    .main-header::before {
        content: 'desktop'
    }
}

@media (min-width: 64rem) {
    .main-header--transparent {
        background: transparent;
        position: absolute;
        top: 0
    }
}

.main-header__mobile-content {
    position: relative;
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    z-index: 2
}

.main-header__logo {
    display: flex;
    align-items: center;
    height: var(--main-header-logo-height);
    flex-shrink: 0;
    text-decoration: none;
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xxs)
}

.main-header__logo svg,
.main-header__logo img {
    display: block;
    max-height: 100%
}

.main-header__logo .main-header__logo-white {
    display: none
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__logo .main-header__logo-white {
        display: block
    }
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__logo img:not(.main-header__logo-white) {
        display: none
    }
}

.main-header__nav-control {
    --anim-menu-btn-size: 40px;
    --anim-menu-btn-icon-size: 28px;
    --anim-menu-btn-icon-stroke: 2px
}

.main-header__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    padding: 0 0 var(--space-md);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
    font-size: var(--text-md);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1em)
}

.main-header__nav::before {
    content: '';
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: inherit;
    border-bottom: 1px solid var(--color-contrast-lower)
}

.main-header__nav--is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: visibility 0s, opacity .3s, transform .3s
}

.main-header__nav-logo-wrapper {
    display: none
}

.main-header__item {
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-contrast-lower)
}

.main-header__list--mobile-items .main-header__item,
.main-header--mobile .main-header__list--mobile-items .main-header__item {
    border-bottom: 0
}

.main-header__list--mobile-items {
    margin-top: var(--space-md);
    font-size: var(--text-sm)
}

.main-header__dropdown-icon {
    display: none
}

.main-header__link,
.main-header__dropdown-link {
    display: block;
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding: var(--space-xs) 0
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__link,
    .main-header--transparent .main-header__dropdown-link {
        color: var(--color-contrast-higher)
    }
}

.main-header__link:hover,
.main-header__link[aria-current="page"],
.main-header__dropdown-link:hover,
.main-header__dropdown-link[aria-current="page"] {
    text-decoration: underline;
    color: var(--color-primary)
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__link:hover,
    .main-header--transparent .main-header__link[aria-current="page"],
    .main-header--transparent .main-header__dropdown-link:hover,
    .main-header--transparent .main-header__dropdown-link[aria-current="page"] {
        color: var(--color-contrast-higher)
    }
}

.main-header__link .icon,
.main-header__dropdown-link .icon {
    flex-shrink: 0
}

.main-header__link--icon {
    font-size: var(--text-lg);
    padding: var(--space-xxxs) var(--space-xxxxs)
}

.main-header__btn,
.main-header__form-control {
    width: 100%;
    margin: var(--space-xs) 0
}

.main-header__dropdown,
.dropdown__menu {
    padding-left: var(--space-md)
}

.main-header__search-form {
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: var(--space-xs) 0;
    background-color: var(--color-bg);
    z-index: var(--zindex-popover);
    visibility: hidden;
    opacity: 0
}

.main-header--search-expanded .main-header__search-form {
    visibility: visible;
    opacity: 1
}

.main-header--transparent .main-header__search-form {
    background-color: transparent
}

.main-header--expanded .main-header__top-section {
    display: none
}

.main-header__mobile-btn {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit
}

.main-header__mobile-btn .icon {
    font-size: 26px
}

@media (min-width: 64rem) {
    .main-header__mobile-content {
        display: none
    }
    .main-header__nav {
        position: static;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: none;
        max-height: none;
        overflow: visible;
        -ms-scroll-chaining: chained;
        overscroll-behavior: auto;
        font-size: 0.875em
    }
    .main-header__nav::before {
        display: none
    }
    .main-header__nav-logo-wrapper {
        display: block;
        display: flex
    }
    .main-header__nav-grid,
    .main-header__list {
        display: flex;
        align-items: center
    }
    .main-header__nav-grid {
        height: 100%
    }
    .main-header__item {
        display: inline-block;
        position: relative;
        border-bottom: none;
        margin-right: var(--space-xs)
    }
    .main-header__item:last-child {
        margin-right: 0
    }
    .main-header__dropdown-icon {
        display: block;
        margin-left: var(--space-xxxxs);
        width: 12px;
        height: 12px;
        flex-shrink: 0
    }
    .main-header__link {
        padding: var(--space-xxxs) var(--space-xxs)
    }
    .main-header__link--icon {
        padding: var(--space-xxxs) var(--space-xxxxs)
    }
    .main-header__link--icon span {
        display: none
    }
    .main-header__link--icon .counter {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        background-color: var(--color-error);
        color: var(--color-white);
        position: absolute;
        left: 60%;
        top: 5%;
        font-size: .5em
    }
    .main-header__btn,
    .main-header__form-control {
        margin: 0
    }
    .main-header__dropdown {
        font-size: 1rem;
        position: absolute;
        top: 100%;
        width: 200px;
        left: calc(50% - 100px);
        padding: var(--space-xxxs) 0;
        background-color: var(--color-bg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        z-index: var(--zindex-popover);
        visibility: hidden;
        opacity: 0;
        transition: visibility .2s .2s, opacity .2s 0s
    }
    .main-header__item:hover>.main-header__dropdown,
    .main-header__dropdown-item:hover>.main-header__dropdown {
        visibility: visible;
        opacity: 1;
        transition: visibility .2s 0s, opacity .2s 0s
    }
    .main-header__dropdown .main-header__dropdown {
        left: 100%;
        top: 0
    }
    .dropdown__menu {
        font-size: 1rem;
        position: absolute;
        top: 0;
        width: 200px;
        left: calc(100% + var(--space-xxs));
        padding: var(--space-xxxs) 0;
        background-color: var(--color-bg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        z-index: var(--zindex-popover);
        visibility: hidden;
        opacity: 0;
        transition: visibility .2s .2s, opacity .2s 0s
    }
    .dropdown__sub-wrapper:hover .dropdown__menu {
        visibility: visible;
        opacity: 1;
        transition: visibility .2s 0s, opacity .2s 0s
    }
    .main-header__dropdown-link {
        color: var(--color-contrast-high);
        padding: var(--space-xs) var(--space-sm)
    }
}

html:not(.js) .main-header__nav-control {
    display: none
}

html:not(.js) .main-header__nav {
    position: static;
    padding: var(--space-xxs) 0 var(--space-md);
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.main-header__arrow-icon {
    font-size: 16px;
    color: currentColor;
    transition: color .2s;
    margin-left: auto
}

.main-header__arrow-icon .icon {
    display: block
}

.main-header__arrow-icon .icon__group {
    stroke-width: 1px;
    will-change: transform;
    transform-origin: 8px 8px;
    transition: transform 0.3s var(--ease-out)
}

.main-header__arrow-icon .icon__group>* {
    stroke-dasharray: 17;
    transform-origin: 8px 8px;
    transform: translateY(3px);
    transition: transform .3s, stroke-dashoffset .3s;
    transition-timing-function: var(--ease-out)
}

.main-header__arrow-icon .icon__group>*:first-child {
    stroke-dashoffset: 8.5
}

.main-header__arrow-icon .icon__group>*:last-child {
    stroke-dashoffset: 8.5
}

.main-header--mobile .js-main-nav__item>.main-header__dropdown {
    display: none
}

.main-header--mobile .js-main-nav__item.main-nav__item--expanded>.main-header__dropdown {
    display: block
}

.main-header--mobile .js-main-nav__item.main-nav__item--expanded>*>.main-header__arrow-icon .icon__group>*:first-child {
    transform: translateY(-3px) rotate(-90deg)
}

.main-header--mobile .js-main-nav__item.main-nav__item--expanded>*>.main-header__arrow-icon .icon__group>*:last-child {
    transform: translateY(-3px) rotate(90deg)
}

.main-header--mobile .dropdown__desktop-icon {
    display: none !important
}

.main-header--desktop .main-header__arrow-icon {
    display: none
}

.prod-card {
    --rating-icon-size: 1.475em;
    position: relative
}

.prod-card__img-link {
    display: block;
    position: relative;
    overflow: hidden
}

.prod-card__img-link img {
    display: block;
    width: 100%;
    transition: .3s
}

.prod-card__img-link img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0
}

.prod-card__img-link:hover img:nth-child(1) {
    opacity: 0.85
}

.prod-card__img-link:hover img:nth-child(2) {
    opacity: 1
}

.prod-card__img-wrapper {
    position: relative
}

.prod-card__action-button {
    position: absolute;
    background: var(--color-bg);
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
    opacity: 0;
    visibility: hidden
}

@media (min-width: 48rem) {
    .prod-card:hover .prod-card__action-button {
        opacity: 1;
        visibility: visible
    }
}

.prod-card__wishlist {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    background-color: var(--color-bg);
    border-radius: 50%;
    font-size: .8em;
    padding: .5em
}

@media (min-width: 64rem) {
    .prod-card__wishlist {
        opacity: 0;
        visibility: visible
    }
    .prod-card:hover .prod-card__wishlist {
        opacity: 1;
        visibility: visible
    }
}

.prod-card__badge {
    position: absolute;
    z-index: 1;
    top: var(--space-sm);
    left: var(--space-sm);
    background-color: var(--color-contrast-higher);
    padding: var(--space-xxs) var(--space-sm);
    pointer-events: none;
    font-size: var(--text-sm);
    color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.product-card__title {
    color: inherit;
    font-size: var(--text-base);
    text-decoration: none;
    font-size: 14px!important;
}

.product-card__title:hover {
    text-decoration: underline
}

.prod-card__price {
    text-decoration: none
}

.prod-card__old-price {
    color: var(--color-contrast-medium);
    text-decoration: line-through
}

.prod-card__old-price::before {
    content: 'original price';
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%)
}

.prod-card--bundle-main {
    position: relative
}

.bundle__plus {
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2em;
    background: var(--color-primary);
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%)
}

.slider--multi-value {
    position: relative
}

.slider--multi-value .slider__range {
    pointer-events: none
}

.slider--multi-value .slider__range:nth-of-type(1) {
    --slider-fill-value-start: 0%;
    --slider-fill-value-end: 100%
}

.slider--multi-value .slider__range:nth-of-type(2) {
    position: absolute;
    top: 0;
    left: 0
}

.slider--multi-value .slider__input::-webkit-slider-thumb {
    position: relative;
    z-index: 2;
    pointer-events: auto
}

.slider--multi-value .slider__input::-moz-range-thumb {
    position: relative;
    z-index: 2;
    pointer-events: auto
}

.slider--multi-value .slider__input::-webkit-slider-runnable-track {
    pointer-events: none;
    background-image: linear-gradient(to right, var(--color-contrast-low) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-end), var(--color-contrast-low) var(--slider-fill-value-end))
}

.slider--multi-value .slider__input::-moz-range-track {
    pointer-events: none;
    background-image: linear-gradient(to right, var(--color-contrast-low) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-end), var(--color-contrast-low) var(--slider-fill-value-end))
}

.slider--multi-value .slider__range:nth-of-type(2) .slider__input::-moz-range-track {
    background-image: none
}

:not(*)::-ms-track,
.slider--multi-value.slider--ms-fallback {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

:not(*)::-ms-track,
.slider--multi-value.slider--ms-fallback .slider__range {
    pointer-events: auto;
    width: 48%
}

:not(*)::-ms-track,
.slider--multi-value.slider--ms-fallback .slider__range:nth-of-type(2) {
    position: relative
}

.slider__separator {
    margin: auto var(--space-xs)
}

.slider--multi-value.slider--range-not-supported .slider__range {
    display: inline-block;
    width: 45%
}

.slider--multi-value.slider--range-not-supported .slider__range:nth-of-type(2) {
    position: relative
}

.slider--range-not-supported .slider__separator,
html:not(.js) .slider__separator {
    display: none
}

:root {
    --slideshow-height: 280px;
    --slideshow-fade-transition-duration: 0.25s;
    --slideshow-slide-transition-duration: 0.35s;
    --slideshow-prx-transition-duration: 0.5s;
    --slideshow-btn-width: 1.6em;
    --slideshow-btn-height: 3.2em;
    --slideshow-btn-icon-size: 1.6em;
    --slideshow-btn-offset: var(--space-xs)
}

@media (min-width: 48rem) {
    :root {
        --slideshow-height: 380px
    }
}

@media (min-width: 64rem) {
    :root {
        --slideshow-height: 480px
    }
}

@media (min-width: 80rem) {
    :root {
        --slideshow-height: 580px
    }
}

.slideshow__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--slideshow-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

.slideshow__item:focus {
    outline: none
}

.slideshow--ratio-16\:9 .slideshow__item {
    height: 0;
    padding-bottom: 56.25%
}

.slideshow--ratio-4\:3 .slideshow__item {
    height: 0;
    padding-bottom: 75%
}

.slideshow--ratio-1\:1 .slideshow__item {
    height: 0;
    padding-bottom: 100%
}
.slideshow--ratio-5\:7 .slideshow__item {
    height: 0;
    padding-bottom: 115%;
}

.slideshow--ratio-3\:4 .slideshow__item {
    height: 0;
    padding-bottom: 133.33%
}

.js .slideshow {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.js .slideshow__content {
    overflow: hidden
}

.js .slideshow__item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden
}

.js .slideshow__item--selected {
    position: relative;
    z-index: 3;
    visibility: visible
}

.js .slideshow--transition-fade .slideshow__item {
    opacity: 0;
    transition: opacity 0s var(--slideshow-fade-transition-duration), visibility 0s var(--slideshow-fade-transition-duration)
}

.js .slideshow--transition-fade .slideshow__item--selected {
    opacity: 1;
    transition: opacity var(--slideshow-fade-transition-duration)
}

.js .slideshow--transition-slide .slideshow__item {
    -webkit-animation-duration: var(--slideshow-slide-transition-duration);
    animation-duration: var(--slideshow-slide-transition-duration);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: var(--ease-out);
    animation-timing-function: var(--ease-out)
}

.js .slideshow--transition-slide .slideshow__item>* {
    visibility: hidden
}

.js .slideshow--transition-slide .slideshow__item--selected>* {
    visibility: visible;
    border: 1px solid #DDDDDD;
}

.js .slideshow--transition-slide .slideshow__item--slide-in-left {
    -webkit-animation-name: slide-in-left;
    animation-name: slide-in-left
}

.js .slideshow--transition-slide .slideshow__item--slide-in-right {
    -webkit-animation-name: slide-in-right;
    animation-name: slide-in-right
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left {
    -webkit-animation-name: slide-out-left;
    animation-name: slide-out-left
}

.js .slideshow--transition-slide .slideshow__item--slide-out-right {
    -webkit-animation-name: slide-out-right;
    animation-name: slide-out-right
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left,
.js .slideshow--transition-slide .slideshow__item--slide-out-right {
    z-index: 2
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left.slideshow__item--selected,
.js .slideshow--transition-slide .slideshow__item--slide-out-right.slideshow__item--selected {
    z-index: 3
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left>*,
.js .slideshow--transition-slide .slideshow__item--slide-out-right>* {
    visibility: visible
}

@-webkit-keyframes slide-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes slide-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes slide-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }
    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes slide-out-left {
    0% {
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        transform: translateX(100%)
    }
}

@keyframes slide-out-left {
    0% {
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        transform: translateX(100%)
    }
}

@-webkit-keyframes slide-out-right {
    0% {
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        transform: translateX(-100%)
    }
}

@keyframes slide-out-right {
    0% {
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        transform: translateX(-100%)
    }
}

.js .slideshow--transition-prx .slideshow__item {
    -webkit-animation-duration: var(--slideshow-prx-transition-duration);
    animation-duration: var(--slideshow-prx-transition-duration);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: var(--ease-out);
    animation-timing-function: var(--ease-out)
}

.js .slideshow--transition-prx .slideshow__item>* {
    visibility: hidden
}

.js .slideshow--transition-prx .slideshow__item--selected>* {
    visibility: visible
}

.js .slideshow--transition-prx .slideshow__item--prx-in-left {
    -webkit-animation-name: prx-in-left;
    animation-name: prx-in-left
}

.js .slideshow--transition-prx .slideshow__item--prx-in-right {
    -webkit-animation-name: prx-in-right;
    animation-name: prx-in-right
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left {
    -webkit-animation-name: prx-out-left;
    animation-name: prx-out-left
}

.js .slideshow--transition-prx .slideshow__item--prx-out-right {
    -webkit-animation-name: prx-out-right;
    animation-name: prx-out-right
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left,
.js .slideshow--transition-prx .slideshow__item--prx-out-right {
    z-index: 2
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left.slideshow__item--selected,
.js .slideshow--transition-prx .slideshow__item--prx-out-right.slideshow__item--selected {
    z-index: 3
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left>*,
.js .slideshow--transition-prx .slideshow__item--prx-out-right>* {
    visibility: visible
}

@-webkit-keyframes prx-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes prx-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes prx-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes prx-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }
    100% {
        transform: translateX(0)
    }
}

@-webkit-keyframes prx-out-left {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        opacity: 0.3;
        transform: translateX(40%)
    }
}

@keyframes prx-out-left {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        opacity: 0.3;
        transform: translateX(40%)
    }
}

@-webkit-keyframes prx-out-right {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        opacity: 0.3;
        transform: translateX(-40%)
    }
}

@keyframes prx-out-right {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        opacity: 0.3;
        transform: translateX(-40%)
    }
}

.js .slideshow[data-swipe="on"] .slideshow__content {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.js .slideshow[data-swipe="on"] .slideshow__content img {
    pointer-events: none
}

.slideshow__control {
    display: none
}

.js .slideshow[data-controls="hover"] .slideshow__control {
    opacity: 0;
    transition: opacity .3s
}

.js .slideshow[data-controls="hover"]:hover .slideshow__control {
    opacity: 1
}

.js .slideshow[data-swipe="on"] .slideshow__control {
    display: none
}

.js .slideshow__control {
    display: block;
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%)
}

.js .slideshow__control:first-of-type {
    left: var(--slideshow-btn-offset)
}

.js .slideshow__control:last-of-type {
    right: var(--slideshow-btn-offset)
}

@media (min-width: 64rem) {
    .js .slideshow[data-swipe="on"] .slideshow__control {
        display: block
    }
}

.slideshow__btn {
    display: block;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.75);
    height: var(--slideshow-btn-height);
    width: var(--slideshow-btn-width);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .2s, transform 0.2s
}

.slideshow__btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.85)
}

.slideshow__btn:hover .icon {
    color: var(--color-bg)
}

.slideshow:not(.slideshow--is-animating) .slideshow__btn:active {
    transform: translateY(2px)
}

.slideshow__btn .icon {
    display: block;
    width: var(--slideshow-btn-icon-size);
    height: var(--slideshow-btn-icon-size);
    margin: 0 auto;
    transition: color .2s;
    color: var(--color-white)
}

@supports (grid-area: auto) {
    .slideshow__btn {
        background-color: transparent
    }
    .slideshow__btn .icon {
        color: var(--color-contrast-higher)
    }
}

.slideshow__navigation {
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent
}

.slideshow__nav-item {
    display: inline-block;
    margin: 0 var(--space-xxxs)
}

.slideshow__nav-item button {
    display: block;
    position: relative;
    font-size: 8px;
    color: var(--color-contrast-high);
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.4;
    cursor: pointer;
    transition: background .3s
}

.slideshow__nav-item button::before {
    content: '';
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    height: 1em;
    width: 1em;
    font-size: 14px;
    border-radius: inherit;
    border: 1px solid var(--color-contrast-high);
    opacity: 0;
    transform: scale(0);
    transition: 0.3s
}

.slideshow__nav-item button:focus {
    outline: none
}

.slideshow__nav-item button:focus::before {
    opacity: 1;
    transform: scale(1)
}

.slideshow__nav-item--selected button {
    opacity: 1
}

@media (min-width: 64rem) {
    .slideshow__navigation {
        height: 40px
    }
    .slideshow__nav-item button {
        font-size: 10px
    }
    .slideshow__nav-item button::before {
        font-size: 16px
    }
}

.hero-slideshow {
    --carousel-grid-gap: 0;
    --carousel-item-auto-size: 100%
}

.hero-slideshow .carousel__nav-item button {
    background-color: var(--color-bg)
}

@media (min-width: 64rem) {
    .main-header--transparent+section .hero-slideshow {
        margin-top: 30px
    }
}

.hero-slideshow__banner {
    height: 100%;
    min-height: 43vw;
    background-position: center;
    background-size: cover;
    color: var(--color-white)
}

.hero-slideshow__banner:not(.hero-slideshow__banner--no-overlay):before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3)
}

.hero-slideshow__banner h1,
.hero-slideshow__banner h2,
.hero-slideshow__banner h3,
.hero-slideshow__banner h4,
.hero-slideshow__banner a:not(.btn--primary) {
    color: var(--color-white)
}

.hero-slideshow__wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.hero-slideshow .carousel__navigation--pagination .carousel__nav-item button {
    padding: var(--space-xxxs) var(--space-lg)
}

.hero-slideshow .carousel__controls .carousel__control--next {
    left: auto;
    right: 0
}

.hero-slideshow .carousel__controls .carousel__control--prev {
    left: 0
}

.hero-slideshow .carousel__controls .carousel__control {
    width: 25px;
    height: 50px;
    transform: translate(0, -50%)
}

.hero-slideshow .carousel__controls .carousel__control .icon {
    font-size: 14px
}

.hero-slideshow .carousel__controls .carousel__control:hover {
    transform: translate(0, -50%)
}

@media (min-width: 64rem) {
    .hero-slideshow .carousel__controls .carousel__control {
        width: 40px;
        height: 80px
    }
    .hero-slideshow .carousel__controls .carousel__control .icon {
        font-size: 20px
    }
}

.hero-slideshow__wrapper .hero-slideshow__tite {
    margin-bottom: var(--space-sm);
    margin-top: var(--space-xxxs)
}

.products__carousel {
    --carousel-item-auto-size: 150px
}

@media (min-width: 64rem) {
    .products__carousel {
        --carousel-item-auto-size: 260px
    }
}

.products__carousel--bundle {
    --carousel-item-auto-size: 150px
}

@media (min-width: 64rem) {
    .products__carousel--bundle {
        --carousel-item-auto-size: 200px
    }
}

:root {
    --thumbslide-thumbnail-auto-size: 80px;
    --thumbslide-thumbnail-grid-gap: var(--space-xs)
}

.js .thumbslide .slideshow {
    --slideshow-fade-transition-duration: 0.3s;
    --slideshow-slide-transition-duration: 0.3s
}

html:not(.js) .thumbslide__nav-wrapper {
    display: none
}

.thumbslide__nav {
    display: flex;
    overflow: hidden;
    padding: var(--thumbslide-thumbnail-grid-gap) 0;
    position: relative
}

.thumbslide__nav::after {
  display:none;
  position: absolute;
  z-index: 1000;
  font-family: "Font Awesome 5 Free";
  content: "\f106";
  font-weight: 900;
  top: 0px!important;
  left: 36px!important;
}
.thumbslide__nav::before {
  	display:none;
    position: absolute;
    z-index: 1000;
    height: 80%;
    font-family: "Font Awesome 5 Free";
    content: "\f107";
    font-weight: 900;
    opacity: 1;
    top: 372px!important;
    left: 36px!important;
}

.thumbslide__nav::before {
    transform: rotate(0deg);
}

.thumbslide__nav--scroll-end::after {
    opacity: 1
}

.thumbslide__nav--scroll-start::before {
    opacity: 1
}

.thumbslide__nav-list {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    will-change: transform;
    transition: transform 0.5s
}

.thumbslide__nav-list:hover .thumbslide__nav-item {
    opacity: 0.6
}

.thumbslide__nav-list--dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.thumbslide__nav-list--no-transition {
    transition: none
}

.thumbslide__nav-item {
    float: left;
    flex-shrink: 0;
    width: var(--thumbslide-thumbnail-auto-size);
    margin-right: var(--thumbslide-thumbnail-grid-gap);
    transition: opacity 0.3s, transform 0.3s;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.thumbslide__nav-item img {
    display: block;
    pointer-events: none
}

.thumbslide__nav-item:hover {
    opacity: 1 !important
}

.thumbslide__nav-item--active {
    position: relative;
    opacity: 1 !important;
    border: none!important;
}

.thumbslide__nav-item--active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.thumbslide__caption {
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.85);
    padding: var(--component-padding);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.thumbslide--top {
    display: flex;
    flex-direction: column
}

.thumbslide--top .slideshow {
    order: 1
}

.thumbslide--vertical {
    display: flex
}

@media not all and (min-width: 48rem) {
    .thumbslide--vertical {
        --thumbslide-thumbnail-auto-size: 50px
    }
}

.thumbslide--vertical .slideshow {
    display: inline-block;
    flex-grow: 1
}

.thumbslide--vertical .thumbslide__nav-wrapper {
    float: right;
    width: var(--thumbslide-thumbnail-auto-size);
    flex-shrink: 0
}

.thumbslide--vertical .thumbslide__nav {
    width: 100%;
    height: 100%
}

.thumbslide--vertical .thumbslide__nav::after,
.thumbslide--vertical .thumbslide__nav::before {
    width: 80%;
    height: 0;
    left: 10%
}

.thumbslide--vertical .thumbslide__nav::before {
    top: 0
}

.thumbslide--vertical .thumbslide__nav::after {
    top: auto;
    bottom: 0
}

.thumbslide--vertical .thumbslide__nav-list {
    flex-direction: column;
    position: absolute;
    top: 0
}

.thumbslide--vertical .thumbslide__nav-item {
    margin-right: 0;
    margin-bottom: var(--thumbslide-thumbnail-grid-gap)
}

.thumbslide--vertical .thumbslide__nav-item img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.thumbslide--left .slideshow {
    order: 1
}

.separator {
    width: 1px;
    height: 1em;
    background-color: currentColor
}

.btn--wishlist {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm)
}

:root {
    --accordion-border-width: 1px;
    --accordion-border-color: var(--color-contrast-low);
    --accordion-icon-size: 1em;
    --accordion-icon-stroke-width: 1.5px
}

.accordion__item {
    border-style: solid;
    border-color: var(--accordion-border-color);
    border-bottom-width: var(--accordion-border-width)
}

.accordion__item:first-child {
    border-top-width: var(--accordion-border-width)
}

.accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer
}

.accordion__header .icon {
    font-size: var(--accordion-icon-size)
}

.accordion__header .icon .icon__group {
    stroke-width: var(--accordion-icon-stroke-width)
}

.accordion__icon-arrow .icon__group,
.accordion__icon-arrow-v2 .icon__group,
.accordion__icon-plus .icon__group {
    will-change: transform;
    transform-origin: 8px 8px
}

.accordion__icon-arrow .icon__group>*,
.accordion__icon-arrow-v2 .icon__group>*,
.accordion__icon-plus .icon__group>* {
    transform-origin: 8px 8px
}

.accordion__icon-arrow .icon__group>*,
.accordion__icon-arrow-v2 .icon__group>* {
    stroke-dasharray: 17;
    transform: translateY(3px)
}

.accordion__icon-arrow .icon__group>*:first-child,
.accordion__icon-arrow-v2 .icon__group>*:first-child {
    stroke-dashoffset: 8.5
}

.accordion__icon-arrow .icon__group>*:last-child,
.accordion__icon-arrow-v2 .icon__group>*:last-child {
    stroke-dashoffset: 8.5
}

.accordion__icon-plus .icon__group {
    transform: rotate(-90deg)
}

.accordion__icon-plus .icon__group>*:first-child {
    transform: rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>*:first-child {
    transform: translateY(-3px) rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>*:last-child {
    transform: translateY(-3px) rotate(90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group {
    transform: rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group>*:first-child,
.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group *:last-child {
    stroke-dashoffset: 0;
    transform: translateY(0px)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group {
    transform: rotate(0)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group>*:first-child {
    transform: rotate(0)
}

.js .accordion__panel {
    display: none;
    will-change: height;
    transform: translateZ(0px)
}

.js .accordion__item--is-open>.accordion__panel {
    display: block
}

.accordion[data-animation="on"] .accordion__item--is-open .accordion__panel>* {
    -webkit-animation: accordion-entry-animation 0.4s var(--ease-out);
    animation: accordion-entry-animation 0.4s var(--ease-out)
}

.accordion[data-animation="on"] .accordion__icon-arrow .icon__group,
.accordion[data-animation="on"] .accordion__icon-arrow-v2 .icon__group,
.accordion[data-animation="on"] .accordion__icon-plus .icon__group {
    transition: transform 0.3s var(--ease-out)
}

.accordion[data-animation="on"] .accordion__icon-arrow .icon__group>*,
.accordion[data-animation="on"] .accordion__icon-arrow-v2 .icon__group>*,
.accordion[data-animation="on"] .accordion__icon-plus .icon__group>* {
    transition: transform .3s, stroke-dashoffset .3s;
    transition-timing-function: var(--ease-out)
}

@keyframes accordion-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0px)
    }
}

:root {
    --anim-menu-btn-size: 48px;
    --anim-menu-btn-transition-duration: .2s;
    --anim-menu-btn-icon-size: 32px;
    --anim-menu-btn-icon-stroke: 2px
}

.anim-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--anim-menu-btn-size);
    height: var(--anim-menu-btn-size)
}

.anim-menu-btn__icon {
    position: relative;
    display: block;
    font-size: var(--anim-menu-btn-icon-size);
    width: 1em;
    height: var(--anim-menu-btn-icon-stroke);
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    transform: scale(1)
}

.anim-menu-btn__icon::before,
.anim-menu-btn__icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: inherit;
    border-radius: inherit
}

.anim-menu-btn__icon--close {
    background-size: 100% 100%;
    will-change: transform, background-size;
    transition-property: transform, background-size;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn:active .anim-menu-btn__icon--close {
    transform: scale(0.9)
}

.anim-menu-btn__icon--close::before,
.anim-menu-btn__icon--close::after {
    will-change: inherit;
    transition: inherit
}

.anim-menu-btn__icon--close::before {
    transform: translateY(-0.25em) rotate(0)
}

.anim-menu-btn__icon--close::after {
    transform: translateY(0.25em) rotate(0)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close {
    background-size: 0% 100%
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close::before {
    transform: translateY(0) rotate(45deg)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close::after {
    transform: translateY(0) rotate(-45deg)
}

.anim-menu-btn__icon--arrow-left,
.anim-menu-btn__icon--arrow-right,
.anim-menu-btn__icon--arrow-up,
.anim-menu-btn__icon--arrow-down {
    border-radius: 50em;
    will-change: transform;
    transition-property: transform;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-left,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-right,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-up,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-down {
    transform: scale(0.9)
}

.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn__icon--arrow-down::after {
    transform-origin: calc(var(--anim-menu-btn-icon-stroke)/2) 50%;
    will-change: transform, width;
    transition-property: transform, width;
    transition-duration: var(--anim-menu-btn-transition-duration, 0.2s)
}

.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-down::before {
    transform: translateY(-0.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    width: 50%
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before {
    transform: translateY(0) rotate(-45deg)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
    transform: translateY(0) rotate(45deg)
}

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up {
    transform: rotate(90deg)
}

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg) scale(0.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down {
    transform: rotate(-90deg)
}

.story__img {
    display: block;
    transition: opacity .2s;
    margin-bottom: var(--space-xs)
}

.story__img:hover {
    opacity: 0.85
}

.story__img img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md)
}

.story__category {
    display: inline-flex;
    align-items: center;
    color: var(--color-contrast-higher);
    line-height: 1;
    text-decoration: none;
    font-size: var(--text-sm);
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    padding: var(--space-xxs);
    border-radius: var(--radius-md);
    transition: background-color .2s
}

.story__category:hover {
    text-decoration: underline;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3)
}

.story .story__title {
    margin-bottom: var(--space-xs);
    margin-top: var(--space-sm)
}

.story__title a {
    color: var(--color-contrast-higher);
    text-decoration: none
}

.story__title a:hover {
    text-decoration: underline
}

.story__author {
    --author-img-size: 50px;
    display: grid;
    grid-template-columns: var(--author-img-size) 1fr;
    align-items: center;
    gap: var(--space-xs)
}

.story__author img {
    display: block;
    width: var(--author-img-size);
    height: var(--author-img-size);
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%
}

.story__author-name {
    margin-bottom: var(--space-xxxxs)
}

.story__author-name a {
    text-decoration: none;
    color: var(--color-contrast-higher)
}

.story__author-name a:hover {
    text-decoration: underline
}

.story__meta {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium)
}

@media (min-width: 64rem) {
    .story--featured {
        display: grid;
        grid-template-columns: 3fr 2fr;
        grid-gap: var(--space-md);
        align-items: center
    }
    .story--featured .story__img {
        margin: 0
    }
    .story--featured .story__title {
        font-size: var(--text-xxl)
    }
}

.bones__line {
    display: inline-block;
    background-color: var(--color-contrast-low);
    height: 1em;
    margin-bottom: var(--space-xs);
    min-width: 33%
}

h1 .bones__line,
h2 .bones__line,
h3 .bones__line,
h4 .bones__line {
    margin-bottom: var(--space-xxxs)
}

h1 .bones__line:last-of-type,
h2 .bones__line:last-of-type,
h3 .bones__line:last-of-type,
h4 .bones__line:last-of-type {
    margin-bottom: var(--space-xs)
}

.bones__line.bones__line--full {
    width: 100%
}

.bones__line.bones__line--half {
    width: 50%
}

.bones__line.bones__line--large {
    width: 75%
}

.breadcrumbs__item {
    display: inline-block;
    display: inline-flex;
    align-items: center
}

:root {
    --btns-button-radius: 0.25em;
    --btns-button-padding-x: var(--space-xs);
    --btns-button-padding-y: var(--space-xs)
}

.btns {
    display: inline-block;
    display: inline-flex
}

.btns>* {
    display: inline-block
}

.btns>*:first-child,
.btns *:first-child .btns__btn {
    border-radius: var(--btns-button-radius) 0 0 var(--btns-button-radius)
}

.btns>*:last-child,
.btns *:last-child .btns__btn {
    border-radius: 0 var(--btns-button-radius) var(--btns-button-radius) 0
}

.btns[class*="gap-xxxxs"],
.btns[class*="gap-xxxs"],
.btns[class*="gap-xxs"],
.btns[class*="gap-xs"],
.btns[class*="gap-sm"],
.btns[class*="gap-md"],
.btns[class*="gap-lg"],
.btns[class*="gap-xl"],
.btns[class*="gap-xxl"],
.btns[class*="gap-xxxl"],
.btns[class*="gap-xxxxl"] {
    flex-wrap: wrap
}

.btns[class*="gap-xxxxs"] .btns__btn,
.btns[class*="gap-xxxs"] .btns__btn,
.btns[class*="gap-xxs"] .btns__btn,
.btns[class*="gap-xs"] .btns__btn,
.btns[class*="gap-sm"] .btns__btn,
.btns[class*="gap-md"] .btns__btn,
.btns[class*="gap-lg"] .btns__btn,
.btns[class*="gap-xl"] .btns__btn,
.btns[class*="gap-xxl"] .btns__btn,
.btns[class*="gap-xxxl"] .btns__btn,
.btns[class*="gap-xxxxl"] .btns__btn {
    border-radius: var(--btns-button-radius) !important
}

.btns__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-contrast-lower);
    transition: .2s;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btns__btn:hover:not(.btns__btn--selected) {
    background-color: hsl(var(--color-contrast-lower-h), var(--color-contrast-lower-s), calc(var(--color-contrast-lower-l) * .98))
}

.btns__btn:focus {
    z-index: 1;
    outline: none;
    box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.btns__btn--selected,
.btns--radio input[type="radio"]:checked+label,
.btns--radio input[type="checkbox"]:checked+label,
.btns--checkbox input[type="radio"]:checked+label,
.btns--checkbox input[type="checkbox"]:checked+label {
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    box-shadow: var(--shadow-sm)
}

.btns__btn--disabled {
    opacity: 0.7;
    cursor: not-allowed;
    text-decoration: line-through
}

.btns--radio>*,
.btns--checkbox>* {
    position: relative
}

.btns--radio input[type="radio"],
.btns--radio input[type="checkbox"],
.btns--checkbox input[type="radio"],
.btns--checkbox input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none
}

.btns--radio input[type="radio"]+label,
.btns--radio input[type="checkbox"]+label,
.btns--checkbox input[type="radio"]+label,
.btns--checkbox input[type="checkbox"]+label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btns--radio input[type="radio"]:focus+label,
.btns--radio input[type="checkbox"]:focus+label,
.btns--checkbox input[type="radio"]:focus+label,
.btns--checkbox input[type="checkbox"]:focus+label {
    z-index: 1;
    box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.btns__btn--icon {
    padding: var(--btns-button-padding-x)
}

.btns__btn--icon .icon {
    display: block;
    color: inherit
}

.btns--grid-layout {
    --btns-button-padding-x: var(--space-xxs);
    --btns-button-padding-y: var(--space-xxs)
}

.btns--grid-layout input[type="radio"]+label,
.btns--grid-layout input[type="checkbox"]+label {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--color-inherit);
    box-shadow: none;
    border-radius: 0 !important
}

.btns--grid-layout input[type="radio"]+label:hover:not(.btns__btn--selected),
.btns--grid-layout input[type="checkbox"]+label:hover:not(.btns__btn--selected) {
    background-color: transparent
}

.btns--grid-layout input[type="radio"]:focus+label,
.btns--grid-layout input[type="checkbox"]:focus+label {
    box-shadow: none
}

.btns--grid-layout input[type="radio"]:checked+label,
.btns--grid-layout input[type="checkbox"]:checked+label {
    box-shadow: none;
    border: 1px solid;
    color: var(--color-inherit);
    background-color: transparent
}

.banner-card {
    display: block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    color: var(--color-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    transition: .3s;
    padding-bottom: 62.5%
}


.banner-card__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2
}

.banner-card__btn {
    position: relative;
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.banner-card__btn i {
    position: relative;
    z-index: 2;
    color: var(--color-bg);
    opacity: 0;
    transition: opacity .3s
}

.banner-card__btn::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    opacity: 0;
    transform: translateY(25%);
    transition: opacity 0.3s, transform 0.3s var(--ease-out)
}

.banner-card:hover .banner-card__btn i {
    opacity: 1
}

.banner-card:hover .banner-card__btn::after {
    opacity: 1;
    transform: translateY(0)
}

.banner-card--overlay-bg::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-color .3s
}

.banner-card--overlay-bg:hover::before {
}

.category-card__title {
    text-align: center;
    margin-top: var(--space-xs)
}

.category-card__title a {
    text-decoration: none;
    color: inherit
}

.category-card__title a:hover {
    text-decoration: underline
}

.coming-soon {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.coming-soon__login {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md)
}

.customer-logos__item {
    display: block;
    padding: var(--space-sm);
    max-width: 150px
}

.customer-logos__item img {
    height: auto
}

@media (min-width: 64rem) {
    .customer-logos__item {
        max-width: 250px;
        padding: var(--space-md)
    }
}

.customer-logos__item--placeholder {
    width: 100px
}

@media (min-width: 64rem) {
    .customer-logos__item--placeholder {
        width: 200px
    }
}

:root {
    --select-icon-size: 1em;
    --select-icon-right-margin: var(--space-sm);
    --select-text-icon-gap: var(--space-xxxs)
}

.select {
    position: relative
}

.select__input {
    width: 100%;
    height: 100%;
    padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important
}

.select__icon {
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    pointer-events: none;
    position: absolute;
    right: var(--select-icon-right-margin);
    top: 50%;
    transform: translateY(-50%)
}

:root {
    --select-dropdown-gap: 4px
}

.select__button {
    width: 100%
}

.select__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    max-height: 1px;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
    padding: var(--space-xxs) 0;
    border-radius: var(--radius-md);
    z-index: var(--zindex-popover);
    margin-top: var(--select-dropdown-gap);
    margin-bottom: var(--select-dropdown-gap);
    overflow: auto;
    --space-unit: 1rem;
    --text-unit: 1rem;
    font-size: var(--text-unit);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .2s, opacity .2s
}

.select__dropdown--right {
    right: 0;
    left: auto
}

.select__dropdown--up {
    bottom: 100%;
    top: auto
}

.select__button[aria-expanded="true"]+.select__dropdown {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity .2s
}

.select__list {
    list-style: none !important
}

.select__list:not(:first-of-type) {
    padding-top: var(--space-xxs)
}

.select__list:not(:last-of-type) {
    border-bottom: 1px solid var(--color-contrast-low);
    padding-bottom: var(--space-xxs)
}

.select__item {
    display: block;
    padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-md);
    color: var(--color-contrast-high);
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.select__item--optgroup {
    font-size: var(--text-sm);
    color: var(--color-contrast-medium)
}

.select__item--option {
    cursor: pointer
}

.select__item--option:hover {
    background-color: var(--color-contrast-lower)
}

.select__item--option:focus {
    outline: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1)
}

.select__item--option[aria-selected=true] {
    background-color: var(--color-primary);
    color: var(--color-white);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.select__item--option[aria-selected=true]::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    right: var(--space-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='1.5' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

html:not(.js) .select .icon {
    display: none
}

:root {
    --drawer-width: 400px
}

.drawer {
    position: fixed;
    z-index: var(--zindex-overlay);
    height: 100%;
    width: 100%;
    max-width: var(--drawer-width);
    top: 0;
    right: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s
}

.drawer:focus {
    outline: none
}

.drawer--is-visible {
    visibility: visible;
    transition: none
}

.drawer--open-left {
    right: auto;
    left: 0
}

.drawer__content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.3s;
    transition-timing-function: var(--ease-in-out)
}

.drawer--open-left .drawer__content {
    transform: translateX(-100%)
}

.drawer--is-visible .drawer__content {
    transform: translateX(0)
}

.drawer__body {
    height: 100%;
    overflow: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch
}

.drawer__close-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: .2s
}

.drawer__close-btn .icon {
    display: block
}

.drawer--modal {
    max-width: none;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0);
    transition: background-color 0.3s, visibility 0s 0.3s
}

.drawer--modal.drawer--is-visible {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.75);
    transition: background-color 0.3s
}

.drawer--modal.drawer--open-left .drawer__content {
    right: auto;
    left: 0
}

.drawer--modal .drawer__content {
    max-width: var(--drawer-width)
}

.product-configure select {
    padding-right: calc(var(--select-icon-size) + var(--select-icon-right-margin) + var(--select-text-icon-gap)) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon select__icon' aria-hidden='true' viewBox='0 0 16 16'%3E%3Cg stroke-width='2' stroke='currentColor'%3E%3Cpolyline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='15.5,4.5 8,12 0.5,4.5 '%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom var(--space-xs) right var(--space-xs);
    background-size: 14px;
    display: block
}

.product-configure-variants {
    margin-bottom: var(--space-sm)
}

.product-configure-variants label {
    display: inline-block;
    font-size: var(--text-sm);
    margin-bottom: var(--space-xxs)
}

.product-configure-variants select {
    display: block
}

.gui {
    --line-height-multiplier: 1;
    --text-vspace-multiplier: 1
}

.gui-modal-product-inventory-location-background {
    z-index: 4
}

.product-configure input:not([type="checkbox"]):not([type="radio"]) {
    display: block
}

.product-configure input[type="checkbox"]+label,
.product-configure input[type="radio"]+label {
    margin-bottom: 0
}

.product-configure label {
    display: inline-block;
    font-size: var(--text-sm);
    margin-bottom: var(--text-sm)
}

.product-configure-custom-option {
    margin-bottom: var(--space-sm)
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
    border-color: var(--color-contrast-low) !important
}

.gui-block-title {
    padding-top: var(--space-sm);
    border-bottom: 0;
    background: transparent
}

#gui-form-cart .gui-table {
    border: 0
}

#gui-form-cart .gui-table thead tr th {
    border-color: var(--color-contrast-low);
    background-color: transparent
}

.gui-page-title {
    text-align: center;
    margin-bottom: var(--space-md)
}

.messages--overlay {
    margin-bottom: 20px
}

@media (min-width: 64rem) {
    .messages--overlay {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(var(--main-header-height) + var(--space-md));
        z-index: 1
    }
}

.hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--color-white);
    position: relative
}

.hero h1,
.hero h2,
.hero h3,
.hero h4 {
    color: var(--color-white)
}

.hero:not(.hero--no-overlay):before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3)
}

.hero>* {
    position: relative
}

.hero--overlay-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.65);
    z-index: 1
}

.img-mag {
    overflow: hidden
}

.img-mag__asset {
    display: block;
    width: 100%;
    transform-origin: left top;
    position: absolute;
    top: 0
}

.img-mag__primary-asset {
    display: block;
    width: 100%
}

.list,
.text-component .list {
    --list-v-space: 0.65;
    --list-offset: 1;
    padding-left: 0;
    list-style: none
}

.list ul,
.list ol,
.text-component .list ul,
.text-component .list ol {
    list-style: none;
    margin: 0;
    margin-top: calc( var(--space-xxxs) * var(--list-v-space, 1));
    padding-top: calc( var(--space-xxxs) * var(--list-v-space, 1));
    padding-left: calc(var(--space-xs) * var(--list-offset, 1))
}

.list li,
.text-component .list li {
    padding-bottom: calc( var(--space-xxxs) * var(--list-v-space, 1));
    margin-bottom: calc( var(--space-xxxs) * var(--list-v-space, 1))
}

.list>li:last-child,
.list ul>li:last-child,
.list ol>li:last-child,
.text-component .list>li:last-child,
.text-component .list ul>li:last-child,
.text-component .list ol>li:last-child {
    margin-bottom: 0
}

.list:not(.list--border)>li:last-child,
.list ul>li:last-child,
.list ol>li:last-child,
.text-component .list:not(.list--border)>li:last-child,
.text-component .list ul>li:last-child,
.text-component .list ol>li:last-child {
    padding-bottom: 0
}

.list--ul li,
.list--ol li {
    padding-left: calc(var(--bullet-size) + var(--bullet-margin-right))
}

.list--ul li::before,
.list--ol li::before {
    width: var(--bullet-size);
    height: var(--bullet-size);
    margin-left: calc(var(--bullet-size) * -1);
    display: inline-flex;
    vertical-align: middle;
    position: relative;
    left: calc(var(--bullet-margin-right) * -1)
}

.list--ul {
    --bullet-size: 7px;
    --bullet-margin-right: var(--space-xxs)
}

.list--ul li::before {
    content: '';
    border-radius: 50%;
    color: var(--color-primary);
    background-color: currentColor;
    border: 2px solid currentColor
}

.list--ul ul li::before {
    background-color: transparent
}

.list--ol {
    --bullet-size: 26px;
    --bullet-margin-right: 6px;
    counter-reset: list-items
}

.list--ol li {
    counter-increment: list-items
}

.list--ol ol {
    counter-reset: list-items
}

.list--ol li::before {
    content: counter(list-items);
    font-size: 0.75em;
    justify-content: center;
    align-items: center;
    top: -0.1em;
    border-radius: 50%;
    background-color: var(--color-contrast-lower);
    border: 2px solid var(--color-contrast-lower);
    color: var(--color-contrast-high);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.list--ol ol li::before {
    background-color: transparent
}

.list--border li {
    border-bottom: 1px solid var(--color-contrast-low)
}

.list--border ul,
.list--border ol {
    border-top: 1px solid var(--color-contrast-low)
}

.list--border ul li:last-child,
.list--border ol li:last-child {
    border-bottom-width: 0
}

.main-footer {
    position: relative;
    z-index: 1
}

.main-footer__link {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

.main-footer__link:hover {
    color: var(--color-primary);
    text-decoration: underline
}

.main-footer__social-btn {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color .2s
}

.main-footer__social-btn .icon {
    display: block
}

.main-footer__social-btn:hover {
    color: var(--color-contrast-high)
}

.main-footer__list {
    margin-left: var(--space-xs)
}

.main-footer__item {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
    font-size: var(--text-sm)
}

.js .main-footer__item .dropdown__menu {
    top: auto;
    bottom: calc(100% + 4px)
}

.number-input__btn {
    display: none
}

.js .number-input .form-control::-webkit-inner-spin-button,
.js .number-input .product-configure select::-webkit-inner-spin-button,
.product-configure .js .number-input select::-webkit-inner-spin-button,
.js .number-input .product-configure input:not([type="radio"]):not([type="checkbox"])::-webkit-inner-spin-button,
.product-configure .js .number-input input:not([type="radio"]):not([type="checkbox"])::-webkit-inner-spin-button,
.js .number-input .form-control::-webkit-outer-spin-button,
.js .number-input .product-configure select::-webkit-outer-spin-button,
.product-configure .js .number-input select::-webkit-outer-spin-button,
.js .number-input .product-configure input:not([type="radio"]):not([type="checkbox"])::-webkit-outer-spin-button,
.product-configure .js .number-input input:not([type="radio"]):not([type="checkbox"])::-webkit-outer-spin-button {
    display: none
}

.js .number-input .form-control,
.js .number-input .product-configure select,
.product-configure .js .number-input select,
.js .number-input .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .js .number-input input:not([type="checkbox"]):not([type="radio"]) {
    -moz-appearance: textfield;
    display: block
}

.js .number-input__btn {
    display: inline-block;
    display: flex
}

.js .number-input--v1 {
    --number-input-btn-width: 40px;
    position: relative;
    width: 5em
}

.js .number-input--v1 .form-control,
.js .number-input--v1 .product-configure select,
.product-configure .js .number-input--v1 select,
.js .number-input--v1 .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .js .number-input--v1 input:not([type="checkbox"]):not([type="radio"]) {
    padding-right: var(--number-input-btn-width);
    width: 100%
}

.js .number-input--v1 .number-input__btns {
    position: absolute;
    height: calc(100% - var(--space-xxxs)*2);
    top: var(--space-xxxs);
    right: 0;
    width: var(--number-input-btn-width);
    display: flex;
    flex-direction: column
}

.js .number-input--v1 .number-input__btn {
    position: relative;
    height: 50%;
    width: calc(100% - var(--space-xxxs));
    background: var(--color-contrast-lower);
    border-radius: var(--radius-sm)
}

.js .number-input--v1 .number-input__btn .icon {
    display: block;
    font-size: 0.8em;
    width: 1em;
    height: 1em;
    position: absolute;
    left: calc(50% - 0.5em);
    top: calc(50% - 0.5em)
}

.js .number-input--v1 .number-input__btn:hover {
    background-color: var(--color-contrast-low)
}

.js .number-input--v1 .number-input__btn:focus {
    outline: none;
    background-color: var(--color-primary)
}

.js .number-input--v1 .number-input__btn:focus .icon {
    color: var(--color-white)
}

.js .number-input--v1 .number-input__btn:active {
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * .9))
}

.js .number-input--v1 .number-input__btn--plus {
    margin-bottom: var(--space-xxxxs)
}

.js .number-input--v2 {
    --number-input-btn-width: 1.6em;
    position: relative;
    display: inline-block
}

.js .number-input--v2 .form-control,
.js .number-input--v2 .product-configure select,
.product-configure .js .number-input--v2 select,
.js .number-input--v2 .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .js .number-input--v2 input:not([type="checkbox"]):not([type="radio"]) {
    width: 5.8em;
    height: auto;
    font-size: 15px;
    text-align: center;
    font-weight: 600;
    color: #000;
}

.js .number-input--v2 .number-input__btn {
    width: var(--number-input-btn-width);
    height: var(--number-input-btn-width);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.js .number-input--v2 .number-input__btn:hover {
    background-color: var(--color-contrast-lower)
}

.js .number-input--v2 .number-input__btn:focus {
    outline: none;
}

.js .number-input--v2 .number-input__btn:focus .icon {
    color: var(--color-white)
}

.js .number-input--v2 .number-input__btn:active {
    background-color: transparent!important;
}

.js .number-input--v2 .number-input__btn.number-input__btn--plus {
    right: var(--space-xxs)
}

.js .number-input--v2 .number-input__btn.number-input__btn--minus {
    left: var(--space-xxs)
}

.js .number-input--v2 .number-input__btn .icon {
    font-size: 12px;
    width: 1em;
    height: 1em
}

.js .number-input--v2 .number-input__btn--plus {
    order: 2
}

.pagination__list>li {
    display: inline-block
}

.pagination--split .pagination__list {
    width: 100%
}

.pagination--split .pagination__list>*:first-child {
    margin-right: auto
}

.pagination--split .pagination__list>*:last-child {
    margin-left: auto
}

.pagination__item {
    display: inline-block;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    padding-left: calc(1.355 * var(--space-xs));
    padding-right: calc(1.355 * var(--space-xs));
    text-decoration: none;
    height: 100%;
    color: var(--color-contrast-higher);
    transition: .2s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.pagination__item:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) {
    background-color: var(--color-contrast-lower)
}

.pagination__item:active {
    transform: translateY(2px)
}

.pagination__item--selected {
    background-color: var(--color-contrast-higher);
    color: var(--color-bg)
}

.pagination__item--disabled {
    opacity: 0.5;
    pointer-events: none
}

.pagination__jumper .form-control,
.pagination__jumper .product-configure select,
.product-configure .pagination__jumper select,
.pagination__jumper .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .pagination__jumper input:not([type="checkbox"]):not([type="radio"]) {
    width: 3.2em;
    margin-right: var(--space-xs);
    padding: var(--space-xs)
}

.pagination__jumper em {
    flex-shrink: 0;
    white-space: nowrap
}

.spec-table__cell {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    width: 50%
}

.spec-table__cell--th {
    text-align: left
}

:root {
    --checkbox-radio-size: 18px;
    --checkbox-radio-gap: var(--space-xxxs);
    --checkbox-radio-border-width: 1px;
    --checkbox-radio-line-height: var(--body-line-height);
    --radio-marker-size: 8px;
    --checkbox-marker-size: 12px;
    --checkbox-radius: 0
}

.radio,
.checkbox {
    position: absolute;
    padding: 0;
    margin: 0;
    margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
    opacity: 0;
    height: var(--checkbox-radio-size);
    width: var(--checkbox-radio-size);
    pointer-events: none
}

.radio+label,
.checkbox+label {
    display: inline-flex;
    align-items: flex-start;
    line-height: var(--checkbox-radio-line-height);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer
}

.radio+label::before,
.checkbox+label::before {
    content: '';
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
    flex-shrink: 0;
    width: var(--checkbox-radio-size);
    height: var(--checkbox-radio-size);
    background-color: var(--color-bg);
    border-width: var(--checkbox-radio-border-width);
    border-color: var(--color-contrast-high);
    border-style: solid;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--checkbox-radio-gap);
    transition: transform .2s, border .2s
}

.radio:not(:checked):not(:focus)+label:hover::before,
.checkbox:not(:checked):not(:focus)+label:hover::before {
    border-color: hsl(var(--color-contrast-higher-h), var(--color-contrast-higher-s), calc(var(--color-contrast-higher-l) * .7))
}

.radio+label::before {
    border-radius: 50%
}

.checkbox+label::before {
    border-radius: var(--checkbox-radius)
}

.radio:checked+label::before,
.checkbox:checked+label::before {
    background-color: var(--color-primary);
    box-shadow: none;
    border-color: var(--color-primary);
    transition: transform .2s
}

.radio:active+label::before,
.checkbox:active+label::before {
    transform: scale(0.8);
    transition: transform .2s
}

.radio:checked:active+label::before,
.checkbox:checked:active+label::before {
    transform: none;
    transition: none
}

.radio:checked+label::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--radio-marker-size)
}

.checkbox:checked+label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-size: var(--checkbox-marker-size)
}

.radio:checked:active+label::before,
.checkbox:checked:active+label::before,
.radio:focus+label::before,
.checkbox:focus+label::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.radio--bg+label,
.checkbox--bg+label {
    padding: var(--space-xxxxs) var(--space-xxxs);
    border-radius: var(--radius-md);
    transition: background .2s
}

.radio--bg+label:hover,
.checkbox--bg+label:hover {
    background-color: var(--color-contrast-lower)
}

.radio--bg:active+label,
.checkbox--bg:active+label,
.radio--bg:focus+label,
.checkbox--bg:focus+label {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1)
}

:root {
    --rating-icon-size: 1.5em
}

.rating__control ul {
    display: inline-block;
    display: inline-flex;
    vertical-align: top
}

.rating__control li {
    position: relative;
    height: var(--rating-icon-size);
    width: var(--rating-icon-size);
    float: left;
    cursor: pointer;
    margin-right: var(--space-xxxxs)
}

.rating__control li:focus {
    outline: none
}

.rating__control li:focus::before {
    transform: scale(1);
    opacity: 0.2
}

.rating__control li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: 0.2s
}

.rating__control li.rating__item--zero {
    display: none
}

.rating__control--is-hidden {
    display: none
}

.rating__icon,
.rating__control li::before,
.rating[data-animation="on"] .rating__control ul:hover .rating__icon {
    color: var(--color-primary)
}

.rating__icon--inactive,
.rating[data-animation="on"] .rating__control li:hover~li .rating__icon,
.rating__item--checked~li .rating__icon {
    color: var(--color-contrast-higher)
}

.rating__icon--inactive svg>*,
.rating[data-animation="on"] .rating__control li:hover~li .rating__icon svg>*,
.rating__item--checked~li .rating__icon svg>* {
    fill: transparent;
    stroke: #999999 
}
.rating__icon>svg>polygon {
	color: #FA7595;
}
.reviews-title {
	font-size: 13px;
}
.review-section.text-component {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}
.review-section .review {
	border: 1px solid #ddd;
  padding: 7px;
  margin-bottom: 20px;
}
.owl-carousel.owl-review .owl-nav {
	display: none;
}
.review .rating {
	margin-bottom: 0px;
}
.reviw-owner-name {
  font-size: 17px;
  margin-bottom: 5px;
  display: block;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}
.review .review-content {
  font-size: 13px;
  height: 100px;
  overflow: hidden;
  line-height: 20px;
}
.send-review-button a {
	margin-top: 65px;
}
.rating__icon {
    overflow: hidden
}

.rating__icon svg {
    display: block;
    height: var(--rating-icon-size);
    width: var(--rating-icon-size);
    max-width: var(--rating-icon-size);
    pointer-events: none
}

.rating--read-only .rating__control li {
    cursor: default
}

.rating__icon--inactive {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.rating__icon--inactive svg>* {
    fill: #fa7595;
    stroke: transparent
}

.rating__item--half .rating__icon:not(.rating__icon--inactive) {
    position: relative;
    z-index: 2;
    width: 50%
}

.rating[data-animation="on"] .rating__control li:active .rating__icon {
    transform: scale(0.8)
}

.rating[data-animation="on"] .rating__icon {
    transition: .2s
}

.js .rating__select {
    display: none
}

.rating__link {
    transition: opacity .2s
}

.rating__link:hover {
    opacity: 0.85
}

.sidebar:not(.sidebar--static) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--zindex-fixed-element);
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s .3s
}

.sidebar:not(.sidebar--static)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
    transition: background-color .3s;
    z-index: 1
}

.sidebar:not(.sidebar--static) .sidebar__panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-bg);
    transform: translateX(-100%);
    transition: .3s
}

.sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
    left: auto;
    right: 0;
    transform: translateX(100%)
}

.sidebar:not(.sidebar--static).sidebar--is-visible {
    visibility: visible;
    transition: none
}

.sidebar:not(.sidebar--static).sidebar--is-visible::after {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.85)
}

.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
    transform: translateX(0);
    box-shadow: var(--shadow-md)
}

.sidebar__header {
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 2px solid var(--color-contrast-lower);
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.sidebar__close-btn {
    width: 2em;
    height: 2em;
    display: flex;
    border-radius: 50%;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    transition: .2s;
    flex-shrink: 0
}

.sidebar__close-btn:hover {
    box-shadow: var(--shadow-md)
}

.sidebar__close-btn .icon {
    display: block;
    color: var(--color-contrast-high);
    margin: auto
}

.sidebar--static,
html:not(.js) .sidebar {
    flex-shrink: 0;
    flex-grow: 1
}

.sidebar--static .sidebar__header,
html:not(.js) .sidebar .sidebar__header {
    display: none
}

.sidebar--sticky-on-desktop {
    position: -webkit-sticky;
    position: sticky;
    top: var(--space-sm);
    max-height: calc(100vh - var(--space-sm));
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.js .sidebar {
    opacity: 0
}

.js .sidebar--loaded {
    opacity: 1
}

html:not(.js) .sidebar {
    position: static
}

[class*="sidebar--static"]::before {
    display: none
}

.sidebar--static\@xs: :before {
    content: 'mobile'
}

@media (min-width: 32rem) {
    .sidebar--static\@xs: :before {
        content: 'static'
    }
}

.sidebar--static\@sm: :before {
    content: 'mobile'
}

@media (min-width: 48rem) {
    .sidebar--static\@sm: :before {
        content: 'static'
    }
}

.sidebar--static\@md: :before {
    content: 'mobile'
}

@media (min-width: 64rem) {
    .sidebar--static\@md: :before {
        content: 'static'
    }
}

.sidebar--static\@lg: :before {
    content: 'mobile'
}

@media (min-width: 80rem) {
    .sidebar--static\@lg: :before {
        content: 'static'
    }
}

.sidebar--static\@xl: :before {
    content: 'mobile'
}

@media (min-width: 90rem) {
    .sidebar--static\@xl: :before {
        content: 'static'
    }
}

@media (min-width: 64rem) {
    .sidebar--collection-filters {
        max-width: 250px
    }
}

.sidebar--collection-filters .accordion {
    --accordion-border-width: 0;
    --accordion-icon-size: .65em
}

:root {
    --search-input-btn-width: 2.5em;
    --search-input-icon-size: 1.25em
}

.search-input {
    position: relative
}

.search-input__input {
    width: 100%;
    height: 100%
}

.search-input__input::-webkit-search-decoration,
.search-input__input::-webkit-search-cancel-button,
.search-input__input::-webkit-search-results-button,
.search-input__input::-webkit-search-results-decoration {
    -webkit-appearance: none
}

.search-input__input::-ms-clear,
.search-input__input::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

.search-input--icon-right .search-input__input {
    padding-right: var(--search-input-btn-width)
}

.search-input--icon-left .search-input__input {
    padding-left: var(--search-input-btn-width)
}

.search-input__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--search-input-btn-width)
}

.search-input__btn:active .icon {
    transform: translateY(2px)
}

.search-input__btn .icon {
    display: block;
    width: var(--search-input-icon-size);
    height: var(--search-input-icon-size);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-contrast-medium);
    transition: .2s
}

.search-input--icon-left .search-input__btn {
    left: 0;
    right: auto;
    pointer-events: none
}

.search-input__btn:focus .icon,
.search-input .search-input__input:focus+.search-input__btn .icon {
    color: var(--color-primary)
}

:root {
    --slider-width: 200px;
    --slider-track-height: 8px;
    --slide-thumb-size: 20px
}

.slider {
    position: relative;
    width: var(--slider-width)
}

.slider__range {
    width: 100%;
    --slider-fill-value: 0%;
    --slider-empty-value: 100%
}

.slider__input {
    display: block;
    -webkit-appearance: none;
    width: 100%;
    background: transparent
}

.slider__input:focus {
    outline: none
}

.slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--slide-thumb-size);
    height: var(--slide-thumb-size);
    border-radius: 50%;
    border: none;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    cursor: -webkit-grab;
    cursor: grab;
    margin-top: calc((var(--slider-track-height) - var(--slide-thumb-size))*0.5)
}

.slider__input:active::-webkit-slider-thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.slider__input::-moz-range-thumb {
    width: var(--slide-thumb-size);
    height: var(--slide-thumb-size);
    border-radius: 50%;
    border: none;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    cursor: grab
}

.slider__input:active::-moz-range-thumb {
    cursor: grabbing
}

.slider__input:active::-ms-thumb {
    cursor: grabbing
}

.slider__input:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2), var(--shadow-md)
}

.slider__input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2), var(--shadow-md)
}

.slider__input::-webkit-slider-runnable-track {
    height: var(--slider-track-height);
    border-radius: 50em;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-low) var(--slider-fill-value), var(--color-contrast-low) var(--slider-empty-value));
    margin-top: calc((var(--slide-thumb-size) - var(--slider-track-height))*0.5)
}

.slider__input::-moz-range-track {
    height: var(--slider-track-height);
    border-radius: 50em;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-low) var(--slider-fill-value), var(--color-contrast-low) var(--slider-empty-value))
}

.slider__input::-moz-focus-outer {
    border: 0
}

.js .slider__input::-ms-tooltip {
    display: none
}

.slider__input::-ms-thumb {
    width: var(--slide-thumb-size);
    height: var(--slide-thumb-size);
    border-radius: 50%;
    border: none;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    cursor: grab;
    transform: translateY(0);
    background-color: white !important;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    height: 20px;
    width: 20px
}

.slider__input:focus::-ms-thumb {
    box-shadow: inset 0 0 0 2px rgba(42, 109, 244, 0.2)
}

.slider__input::-ms-track {
    height: var(--slider-track-height);
    border-radius: 50em;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-low) var(--slider-fill-value), var(--color-contrast-low) var(--slider-empty-value));
    background-color: #98989a;
    color: transparent;
    height: 8px
}

.slider--floating-value .slider__value {
    position: absolute;
    top: calc(0px - var(--space-md));
    left: var(--slide-thumb-size);
    transform: translateX(-50%);
    font-size: var(--text-sm)
}

.slider--input .form-control,
.slider--input .product-configure select,
.product-configure .slider--input select,
.slider--input .product-configure input:not([type="checkbox"]):not([type="radio"]),
.product-configure .slider--input input:not([type="checkbox"]):not([type="radio"]) {
    font-size: var(--text-sm);
    text-align: center;
    width: 4em
}

.slider--range-not-supported .slider__value,
html:not(.js) .slider__value {
    display: none
}

.switch-icon {
    position: relative;
    padding: var(--space-xxs)
}

.switch-icon--disabled {
    pointer-events: none
}

.switch-icon__icon {
    display: block;
    fill: currentColor;
    color: var(--color-contrast-higher);
    font-size: 2em;
    height: 1em;
    width: 1em;
    line-height: 1;
    will-change: transform
}

.switch-icon__icon--a {
    opacity: 1
}

.switch-icon__icon--b {
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    opacity: 0
}

.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--hover:hover .switch-icon__icon--a {
    opacity: 0
}

.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--hover:hover .switch-icon__icon--b {
    opacity: 1
}

.switch-icon--scale .switch-icon__icon {
    transition: opacity 0s 0.2s, transform 0.4s
}

.switch-icon--scale .switch-icon__icon--a {
    transform: scale(1)
}

.switch-icon--scale .switch-icon__icon--b {
    transform: scale(0.8)
}

.switch-icon--scale.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--scale.switch-icon--hover:hover .switch-icon__icon--a {
    transform: scale(0.8)
}

.switch-icon--scale.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--scale.switch-icon--hover:hover .switch-icon__icon--b {
    transform: scale(1)
}

.switch-icon--rotate .switch-icon__icon {
    transition: opacity 0s 0.2s, transform 0.4s
}

.switch-icon--rotate .switch-icon__icon--a {
    transform: rotate(0)
}

.switch-icon--rotate .switch-icon__icon--b {
    transform: rotate(90deg)
}

.switch-icon--rotate.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--rotate.switch-icon--hover:hover .switch-icon__icon--a {
    transform: rotate(-90deg)
}

.switch-icon--rotate.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--rotate.switch-icon--hover:hover .switch-icon__icon--b {
    transform: rotate(0)
}

.switch-icon--flip {
    perspective: 10em
}

.switch-icon--flip .switch-icon__icon {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: opacity 0s 0.2s, transform 0.4s var(--ease-out-back)
}

.switch-icon--flip .switch-icon__icon--a {
    opacity: 1;
    transform: rotateY(0deg)
}

.switch-icon--flip .switch-icon__icon--b {
    opacity: 1;
    transform: rotateY(-180deg)
}

.switch-icon--flip.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--flip.switch-icon--hover:hover .switch-icon__icon--a {
    opacity: 1;
    transform: rotateY(180deg)
}

.switch-icon--flip.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--flip.switch-icon--hover:hover .switch-icon__icon--b {
    opacity: 1;
    transform: rotateY(0deg)
}

.switch-icon--slide-up,
.switch-icon--slide-down,
.switch-icon--slide-right,
.switch-icon--slide-left {
    overflow: hidden
}

.switch-icon--slide-up .switch-icon__icon,
.switch-icon--slide-down .switch-icon__icon,
.switch-icon--slide-right .switch-icon__icon,
.switch-icon--slide-left .switch-icon__icon {
    transition: opacity 0.3s, transform 0.3s
}

.switch-icon--slide-up .switch-icon__icon--a {
    transform: translateY(0)
}

.switch-icon--slide-up .switch-icon__icon--b {
    transform: translateY(100%)
}

.switch-icon--slide-up.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-up.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateY(-100%)
}

.switch-icon--slide-up.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-up.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateY(0)
}

.switch-icon--slide-down .switch-icon__icon--a {
    transform: translateY(0)
}

.switch-icon--slide-down .switch-icon__icon--b {
    transform: translateY(-100%)
}

.switch-icon--slide-down.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-down.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateY(100%)
}

.switch-icon--slide-down.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-down.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateY(0)
}

.switch-icon--slide-right .switch-icon__icon--a {
    transform: translateX(0)
}

.switch-icon--slide-right .switch-icon__icon--b {
    transform: translateX(-100%)
}

.switch-icon--slide-right.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-right.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateX(100%)
}

.switch-icon--slide-right.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-right.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateX(0)
}

.switch-icon--slide-left .switch-icon__icon--a {
    transform: translateX(0)
}

.switch-icon--slide-left .switch-icon__icon--b {
    transform: translateX(100%)
}

.switch-icon--slide-left.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-left.switch-icon--hover:hover .switch-icon__icon--a {
    transform: translateX(-100%)
}

.switch-icon--slide-left.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-left.switch-icon--hover:hover .switch-icon__icon--b {
    transform: translateX(0)
}

:root {
    --s-tabs-border-bottom-width: 1px;
    --s-tabs-selected-item-border-bottom-width: 1px
}

.s-tabs {
    position: relative
}

.s-tabs::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    height: calc(100% - var(--s-tabs-border-bottom-width));
    width: 2em;
    background: linear-gradient(90deg, hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0), var(--color-bg));
    pointer-events: none;
    z-index: 1
}

.s-tabs__list {
    display: flex;
    overflow: auto;
    -webkit-overflow-scrolling: auto
}

.s-tabs__list::after {
    content: '';
    position: absolute;
    width: 100%;
    height: var(--s-tabs-border-bottom-width);
    left: 0;
    bottom: 0;
    background-color: var(--color-contrast-low)
}

.s-tabs__link {
    color: var(--color-contrast-medium);
    text-decoration: none;
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    white-space: nowrap;
    border-bottom: var(--s-tabs-selected-item-border-bottom-width) solid transparent;
    z-index: 1;
    transition: .2s
}

.s-tabs__link:hover:not(.s-tabs__link--current) {
    color: var(--color-contrast-high)
}

.s-tabs__link--current,
.s-tabs__link[aria-selected="true"] {
    position: relative;
    color: var(--color-primary);
}

.tabs__control {
    text-decoration: none;
    color: var(--color-contrast-medium)
}

.tabs__control:focus {
    outline: none;
    outline-offset: 2px
}

.tabs__control:hover {
    color: var(--color-contrast-high)
}

.js .tabs__control[aria-selected="true"] {
    color: var(--color-contrast-high);
    text-decoration: underline
}

:root {
    --carousel-grid-gap: var(--space-md);
    --carousel-item-auto-size: 260px;
    --carousel-transition-duration: 0.5s
}

.carousel {
    position: relative
}

.carousel__list {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform
}

.carousel__item {
    flex-shrink: 0;
    width: var(--carousel-item-auto-size);
    margin-right: var(--carousel-grid-gap);
    margin-bottom: var(--carousel-grid-gap)
}

.js .carousel__list--animating {
    transition-property: transform;
    transition-duration: var(--carousel-transition-duration);
    transition-timing-function: var(--ease-out)
}

.js .carousel__item {
    opacity: 0;
    margin-bottom: 0
}

.js .carousel--loaded .carousel__item {
    opacity: 1
}

.js .carousel:not(.carousel--is-dragging) .carousel__list:not(.carousel__list--animating) .carousel__item[tabindex="-1"]>* {
    visibility: hidden
}

.js .carousel[data-drag="on"] .carousel__item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.js .carousel[data-drag="on"] .carousel__item img {
    pointer-events: none
}

.carousel__controls .carousel__control {
    position: absolute;
    top: 50%;
    transition: all .3s ease;
    transform: translate(-50%, -50%) scale(0.9)
}

.carousel__controls .carousel__control:hover {
    transform: translate(-50%, -50%) scale(1)
}

.carousel__controls .carousel__control:active {
    transform: translate(-50%, -50%) scale(0.9)
}

.carousel__controls .carousel__control--prev {
    left: 0
}

.carousel__controls .carousel__control--next {
    left: 100%
}

.carousel__control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 60px;
    background-color: var(--color-bg);
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
    transition: .2s
}

@media (min-width: 64rem) {
    .carousel__control {
        width: 40px;
        height: 80px
    }
}

.carousel__control:active {
    transform: translateY(1px)
}

.carousel__control[disabled] {
    pointer-events: none;
    background-color: var(--color-contrast-lower);
    color: var(--color-contrast-low);
    opacity: 1;
    visibility: visible;
}

.carousel__control .icon {
    display: block;
    font-size: 16px
}

@media (min-width: 64rem) {
    .carousel__control .icon {
        font-size: 20px
    }
}

.carousel__navigation {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 10px);
    gap: var(--space-xs);
    justify-content: center;
    align-items: center;
    margin-top: var(--space-sm)
}

.carousel__nav-item {
    display: inline-block;
    margin: 0 var(--space-xxxs)
}

@supports (grid-area: auto) {
    .carousel__nav-item {
        margin: 0
    }
}

.carousel__nav-item button {
    display: block;
    position: relative;
    font-size: 10px;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: var(--color-contrast-high);
    opacity: 0.4;
    cursor: pointer;
    transition: background .3s
}

.carousel__nav-item button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    border: 1px solid var(--color-contrast-high);
    opacity: 0;
    transform: scale(0);
    transition: 0.3s
}

.carousel__nav-item button:focus {
    outline: none
}

.carousel__nav-item button:focus::before {
    opacity: 1;
    transform: scale(1)
}

.carousel__nav-item--selected button {
    opacity: 1
}

.carousel__navigation--pagination {
    grid-template-columns: repeat(auto-fit, minmax(24px, auto));
    position: absolute;
    bottom: var(--space-md);
    left: 0;
    right: 0
}

.carousel__navigation--pagination .carousel__nav-item button {
    width: 100%;
    height: auto;
    color: var(--color-bg);
    font-size: var(--text-xs);
    padding: var(--space-xxxs) var(--space-xxs);
    border-radius: 15px;
    text-align: center
}

.carousel__navigation--pagination .carousel__nav-item button:focus {
    outline: 1px solid var(--color-primary);
    outline-offset: 2px
}

.carousel__navigation--pagination .carousel__nav-item button span {
    display: none
}

html:not(.js) .carousel__list {
    overflow: auto
}

.carousel--hide-controls .carousel__navigation,
.carousel--hide-controls .carousel__control {
    display: none
}

.dr-cart__product {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    grid-gap: var(--space-xs);
    align-items: start;
    padding: var(--space-sm) 0
}

.dr-cart__product:not(:last-child) {
    border-bottom: 1px solid var(--color-contrast-lower)
}

.dr-cart__img {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    transition: .2s
}

.dr-cart__img img {
    display: block
}

.dr-cart__img:hover {
    opacity: 0.85
}

.dr-cart__select {
    --select-icon-size: 0.85em;
    --select-icon-right-margin: var(--space-xxs);
    font-size: 0.875em;
    width: 3.6em
}

.dr-cart__select .select__input {
    padding: var(--space-xxxxs) var(--space-xxxs)
}

.dr-cart__remove-btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: var(--text-sm);
    color: var(--color-primary);
    cursor: pointer
}

.dr-cart__remove-btn:hover {
    text-decoration: underline
}

.dr-cart__remove-btn:focus {
    outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    outline-offset: 2px
}

:root {
    --dropdown-item-padding: var(--space-xxs) var(--space-sm)
}

.dropdown {
    position: relative
}

.dropdown__menu {
    width: 200px;
    border-radius: var(--radius-md);
    padding: var(--space-xxs) 0;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    z-index: var(--zindex-popover);
    position: absolute;
    left: 0;
    top: 100%;
    --space-unit: 1rem;
    --text-unit: 1rem;
    font-size: var(--text-unit);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s .2s
}

@media (pointer: fine) {
    .dropdown__wrapper:hover>.dropdown__menu,
    .dropdown__sub-wrapper:hover>.dropdown__menu {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s
    }
    .dropdown__sub-wrapper:hover>.dropdown__menu {
        left: 100%
    }
}

@media not all and (pointer: fine) {
    .dropdown__trigger-icon {
        display: none
    }
}

.dropdown__item {
    display: block;
    text-decoration: none;
    color: var(--color-contrast-high);
    padding: var(--dropdown-item-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.dropdown__item:hover,
.dropdown__item.dropdown__item--hover {
    background-color: var(--color-contrast-lower)
}

.dropdown__separator {
    height: 1px;
    background-color: var(--color-contrast-low);
    margin: var(--dropdown-item-padding)
}

.dropdown__sub-wrapper {
    position: relative
}

.dropdown__sub-wrapper>.dropdown__item {
    position: relative;
    padding-right: calc(var(--space-sm) + 12px)
}

.dropdown__sub-wrapper>.dropdown__item .icon {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    right: var(--space-xxs);
    top: calc(50% - 6px)
}

.dropdown__sub-wrapper>.dropdown__menu {
    top: calc(var(--space-xxs) * -1);
    box-shadow: var(--shadow-md)
}

.js .dropdown__menu {
    top: calc(100% + 4px)
}

.js .dropdown__sub-wrapper .dropdown__menu {
    top: calc(var(--space-xxs) * -1)
}

@media (pointer: fine) {
    .js .dropdown__menu--is-visible {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s
    }
}

.js .dropdown__menu--is-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s .2s
}

.js .dropdown__sub-wrapper>.dropdown__menu--is-visible,
.js .dropdown__sub-wrapper>.dropdown__menu--is-hidden {
    left: 100%
}

.js .dropdown__sub-wrapper>.dropdown__menu--is-visible.dropdown__menu--left,
.js .dropdown__sub-wrapper>.dropdown__menu--is-hidden.dropdown__menu--left {
    left: -100%
}

:root {
    --main-header-height: 50px;
    --main-header-logo-height: 60px
}

@media (min-width: 64rem) {
    :root {
        --main-header-height: 70px
    }
}

.main-header {
    width: 100%;
    z-index: var(--zindex-header)
}

.main-header::before {
    display: none;
    content: 'mobile'
}

@media (min-width: 64rem) {
    .main-header::before {
        content: 'desktop'
    }
}

@media (min-width: 64rem) {
    .main-header--transparent {
        background: transparent;
        position: absolute;
        top: 0
    }
}

.main-header__mobile-content {
    position: relative;
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    z-index: 2
}

.main-header__logo {
    display: flex;
    align-items: center;
    height: var(--main-header-logo-height);
    flex-shrink: 0;
    text-decoration: none;
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xxs)
}

.main-header__logo svg,
.main-header__logo img {
    display: block;
    max-height: 100%
}

.main-header__logo .main-header__logo-white {
    display: none
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__logo .main-header__logo-white {
        display: block
    }
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__logo img:not(.main-header__logo-white) {
        display: none
    }
}

.main-header__nav-control {
    --anim-menu-btn-size: 40px;
    --anim-menu-btn-icon-size: 28px;
    --anim-menu-btn-icon-stroke: 2px
}

.main-header__nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    padding: 0 0 var(--space-md);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
    font-size: var(--text-md);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1em)
}

.main-header__nav::before {
    content: '';
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: inherit;
    border-bottom: 1px solid var(--color-contrast-lower)
}

.main-header__nav--is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: visibility 0s, opacity .3s, transform .3s
}

.main-header__nav-logo-wrapper {
    display: none
}

.main-header__item {
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-contrast-lower)
}

.main-header__list--mobile-items .main-header__item,
.main-header--mobile .main-header__list--mobile-items .main-header__item {
    border-bottom: 0
}

.main-header__list--mobile-items {
    margin-top: var(--space-md);
    font-size: var(--text-sm)
}

.main-header__dropdown-icon {
    display: none
}

.main-header__link,
.main-header__dropdown-link {
    display: block;
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding: var(--space-xs) 0
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__link,
    .main-header--transparent .main-header__dropdown-link {
        color: var(--color-contrast-higher)
    }
}

.main-header__link:hover,
.main-header__link[aria-current="page"],
.main-header__dropdown-link:hover,
.main-header__dropdown-link[aria-current="page"] {
    text-decoration: underline;
    color: var(--color-primary)
}

@media (min-width: 64rem) {
    .main-header--transparent .main-header__link:hover,
    .main-header--transparent .main-header__link[aria-current="page"],
    .main-header--transparent .main-header__dropdown-link:hover,
    .main-header--transparent .main-header__dropdown-link[aria-current="page"] {
        color: var(--color-contrast-higher)
    }
}

.main-header__link .icon,
.main-header__dropdown-link .icon {
    flex-shrink: 0
}

.main-header__link--icon {
    font-size: var(--text-lg);
    padding: var(--space-xxxs) var(--space-xxxxs)
}

.main-header__btn,
.main-header__form-control {
    width: 100%;
    margin: var(--space-xs) 0
}

.main-header__dropdown,
.dropdown__menu {
    padding-left: var(--space-md)
}

.main-header__search-form {
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: var(--space-xs) 0;
    background-color: var(--color-bg);
    z-index: var(--zindex-popover);
    visibility: hidden;
    opacity: 0
}

.main-header--search-expanded .main-header__search-form {
    visibility: visible;
    opacity: 1
}

.main-header--transparent .main-header__search-form {
    background-color: transparent
}

.main-header--expanded .main-header__top-section {
    display: none
}

.main-header__mobile-btn {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit
}

.main-header__mobile-btn .icon {
    font-size: 26px
}

@media (min-width: 64rem) {
    .main-header__mobile-content {
        display: none
    }
    .main-header__nav {
        position: static;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: none;
        max-height: none;
        overflow: visible;
        -ms-scroll-chaining: chained;
        overscroll-behavior: auto;
        font-size: 0.875em
    }
    .main-header__nav::before {
        display: none
    }
    .main-header__nav-logo-wrapper {
        display: block;
        display: flex
    }
    .main-header__nav-grid,
    .main-header__list {
        display: flex;
        align-items: center
    }
    .main-header__nav-grid {
        height: 100%
    }
    .main-header__item {
        display: inline-block;
        position: relative;
        border-bottom: none;
        margin-right: var(--space-xs)
    }
    .main-header__item:last-child {
        margin-right: 0
    }
    .main-header__dropdown-icon {
        display: block;
        margin-left: var(--space-xxxxs);
        width: 12px;
        height: 12px;
        flex-shrink: 0
    }
    .main-header__link {
        padding: var(--space-xxxs) var(--space-xxs)
    }
    .main-header__link--icon {
        padding: var(--space-xxxs) var(--space-xxxxs)
    }
    .main-header__link--icon span {
        display: none
    }
    .main-header__link--icon .counter {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        background-color: var(--color-error);
        color: var(--color-white);
        position: absolute;
        left: 60%;
        top: 5%;
        font-size: .5em
    }
    .main-header__btn,
    .main-header__form-control {
        margin: 0
    }
    .main-header__dropdown {
        font-size: 1rem;
        position: absolute;
        top: 100%;
        width: 200px;
        left: calc(50% - 100px);
        padding: var(--space-xxxs) 0;
        background-color: var(--color-bg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        z-index: var(--zindex-popover);
        visibility: hidden;
        opacity: 0;
        transition: visibility .2s .2s, opacity .2s 0s
    }
    .main-header__item:hover>.main-header__dropdown,
    .main-header__dropdown-item:hover>.main-header__dropdown {
        visibility: visible;
        opacity: 1;
        transition: visibility .2s 0s, opacity .2s 0s
    }
    .main-header__dropdown .main-header__dropdown {
        left: 100%;
        top: 0
    }
    .dropdown__menu {
        font-size: 1rem;
        position: absolute;
        top: 0;
        width: 200px;
        left: calc(100% + var(--space-xxs));
        padding: var(--space-xxxs) 0;
        background-color: var(--color-bg);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        z-index: var(--zindex-popover);
        visibility: hidden;
        opacity: 0;
        transition: visibility .2s .2s, opacity .2s 0s
    }
    .dropdown__sub-wrapper:hover .dropdown__menu {
        visibility: visible;
        opacity: 1;
        transition: visibility .2s 0s, opacity .2s 0s
    }
    .main-header__dropdown-link {
        color: var(--color-contrast-high);
        padding: var(--space-xs) var(--space-sm)
    }
}

html:not(.js) .main-header__nav-control {
    display: none
}

html:not(.js) .main-header__nav {
    position: static;
    padding: var(--space-xxs) 0 var(--space-md);
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.main-header__arrow-icon {
    font-size: 16px;
    color: currentColor;
    transition: color .2s;
    margin-left: auto
}

.main-header__arrow-icon .icon {
    display: block
}

.main-header__arrow-icon .icon__group {
    stroke-width: 1px;
    will-change: transform;
    transform-origin: 8px 8px;
    transition: transform 0.3s var(--ease-out)
}

.main-header__arrow-icon .icon__group>* {
    stroke-dasharray: 17;
    transform-origin: 8px 8px;
    transform: translateY(3px);
    transition: transform .3s, stroke-dashoffset .3s;
    transition-timing-function: var(--ease-out)
}

.main-header__arrow-icon .icon__group>*:first-child {
    stroke-dashoffset: 8.5
}

.main-header__arrow-icon .icon__group>*:last-child {
    stroke-dashoffset: 8.5
}

.main-header--mobile .js-main-nav__item>.main-header__dropdown {
    display: none
}

.main-header--mobile .js-main-nav__item.main-nav__item--expanded>.main-header__dropdown {
    display: block
}

.main-header--mobile .js-main-nav__item.main-nav__item--expanded>*>.main-header__arrow-icon .icon__group>*:first-child {
    transform: translateY(-3px) rotate(-90deg)
}

.main-header--mobile .js-main-nav__item.main-nav__item--expanded>*>.main-header__arrow-icon .icon__group>*:last-child {
    transform: translateY(-3px) rotate(90deg)
}

.main-header--mobile .dropdown__desktop-icon {
    display: none !important
}

.main-header--desktop .main-header__arrow-icon {
    display: none
}

.prod-card {
    --rating-icon-size: 1.475em;
    position: relative
}

.prod-card__img-link {
    display: block;
    position: relative;
    overflow: hidden
}

.prod-card__img-link img {
    display: block;
    width: 100%;
    transition: .3s
}

.prod-card__img-link img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0
}

.prod-card__img-link:hover img:nth-child(1) {
    opacity: 0.85
}

.prod-card__img-link:hover img:nth-child(2) {
    opacity: 1
}

.prod-card__img-wrapper {
    position: relative
}

.prod-card__action-button {
    position: absolute;
    background: var(--color-bg);
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
    opacity: 0;
    visibility: hidden
}

@media (min-width: 48rem) {
    .prod-card:hover .prod-card__action-button {
        opacity: 1;
        visibility: visible
    }
}

.prod-card__wishlist {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    background-color: var(--color-bg);
    border-radius: 50%;
    font-size: .8em;
    padding: .5em
}

@media (min-width: 64rem) {
    .prod-card__wishlist {
        opacity: 0;
        visibility: visible
    }
    .prod-card:hover .prod-card__wishlist {
        opacity: 1;
        visibility: visible
    }
}

.prod-card__badge {
    position: absolute;
    z-index: 1;
    top: var(--space-sm);
    left: var(--space-sm);
    background-color: var(--color-contrast-higher);
    padding: var(--space-xxs) var(--space-sm);
    pointer-events: none;
    font-size: var(--text-sm);
    color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.product-card__title {
    color: inherit;
    font-size: var(--text-base);
    text-decoration: none
}

.product-card__title:hover {
    text-decoration: underline
}

.prod-card__price {
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.prod-card__old-price {
    color: var(--color-contrast-medium);
    text-decoration: line-through
}

.prod-card__old-price::before {
    content: 'original price';
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%)
}

.prod-card--bundle-main {
    position: relative
}

.bundle__plus {
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2em;
    background: var(--color-primary);
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%)
}

.slider--multi-value {
    position: relative
}

.slider--multi-value .slider__range {
    pointer-events: none
}

.slider--multi-value .slider__range:nth-of-type(1) {
    --slider-fill-value-start: 0%;
    --slider-fill-value-end: 100%
}

.slider--multi-value .slider__range:nth-of-type(2) {
    position: absolute;
    top: 0;
    left: 0
}

.slider--multi-value .slider__input::-webkit-slider-thumb {
    position: relative;
    z-index: 2;
    pointer-events: auto
}

.slider--multi-value .slider__input::-moz-range-thumb {
    position: relative;
    z-index: 2;
    pointer-events: auto
}

.slider--multi-value .slider__input::-webkit-slider-runnable-track {
    pointer-events: none;
    background-image: linear-gradient(to right, var(--color-contrast-low) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-end), var(--color-contrast-low) var(--slider-fill-value-end))
}

.slider--multi-value .slider__input::-moz-range-track {
    pointer-events: none;
    background-image: linear-gradient(to right, var(--color-contrast-low) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-start), var(--color-primary) var(--slider-fill-value-end), var(--color-contrast-low) var(--slider-fill-value-end))
}

.slider--multi-value .slider__range:nth-of-type(2) .slider__input::-moz-range-track {
    background-image: none
}

:not(*)::-ms-track,
.slider--multi-value.slider--ms-fallback {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

:not(*)::-ms-track,
.slider--multi-value.slider--ms-fallback .slider__range {
    pointer-events: auto;
    width: 48%
}

:not(*)::-ms-track,
.slider--multi-value.slider--ms-fallback .slider__range:nth-of-type(2) {
    position: relative
}

.slider__separator {
    margin: auto var(--space-xs)
}

.slider--multi-value.slider--range-not-supported .slider__range {
    display: inline-block;
    width: 45%
}

.slider--multi-value.slider--range-not-supported .slider__range:nth-of-type(2) {
    position: relative
}

.slider--range-not-supported .slider__separator,
html:not(.js) .slider__separator {
    display: none
}

:root {
    --slideshow-height: 280px;
    --slideshow-fade-transition-duration: 0.25s;
    --slideshow-slide-transition-duration: 0.35s;
    --slideshow-prx-transition-duration: 0.5s;
    --slideshow-btn-width: 1.6em;
    --slideshow-btn-height: 3.2em;
    --slideshow-btn-icon-size: 1.6em;
    --slideshow-btn-offset: var(--space-xs)
}

@media (min-width: 48rem) {
    :root {
        --slideshow-height: 380px
    }
}

@media (min-width: 64rem) {
    :root {
        --slideshow-height: 480px
    }
}

@media (min-width: 80rem) {
    :root {
        --slideshow-height: 580px
    }
}

.slideshow__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--slideshow-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

.slideshow__item:focus {
    outline: none
}

.slideshow--ratio-16\:9 .slideshow__item {
    height: 0;
    padding-bottom: 56.25%
}

.slideshow--ratio-4\:3 .slideshow__item {
    height: 0;
    padding-bottom: 75%
}

.slideshow--ratio-1\:1 .slideshow__item {
    height: 0;
    padding-bottom: 100%
}
.slideshow--ratio-5\:7 .slideshow__item {
    height: 0;
    padding-bottom: 115%;
}

.slideshow--ratio-3\:4 .slideshow__item {
    height: 0;
    padding-bottom: 133.33%
}

.js .slideshow {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.js .slideshow__content {
    overflow: hidden
}

.js .slideshow__item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden
}

.js .slideshow__item--selected {
    position: relative;
    z-index: 3;
    visibility: visible
}

.js .slideshow--transition-fade .slideshow__item {
    opacity: 0;
    transition: opacity 0s var(--slideshow-fade-transition-duration), visibility 0s var(--slideshow-fade-transition-duration)
}

.js .slideshow--transition-fade .slideshow__item--selected {
    opacity: 1;
    transition: opacity var(--slideshow-fade-transition-duration)
}

.js .slideshow--transition-slide .slideshow__item {
    -webkit-animation-duration: var(--slideshow-slide-transition-duration);
    animation-duration: var(--slideshow-slide-transition-duration);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: var(--ease-out);
    animation-timing-function: var(--ease-out)
}

.js .slideshow--transition-slide .slideshow__item>* {
    visibility: hidden
}

.js .slideshow--transition-slide .slideshow__item--selected>* {
    visibility: visible;
    border: 1px solid #DDDDDD;
}

.js .slideshow--transition-slide .slideshow__item--slide-in-left {
    -webkit-animation-name: slide-in-left;
    animation-name: slide-in-left
}

.js .slideshow--transition-slide .slideshow__item--slide-in-right {
    -webkit-animation-name: slide-in-right;
    animation-name: slide-in-right
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left {
    -webkit-animation-name: slide-out-left;
    animation-name: slide-out-left
}

.js .slideshow--transition-slide .slideshow__item--slide-out-right {
    -webkit-animation-name: slide-out-right;
    animation-name: slide-out-right
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left,
.js .slideshow--transition-slide .slideshow__item--slide-out-right {
    z-index: 2
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left.slideshow__item--selected,
.js .slideshow--transition-slide .slideshow__item--slide-out-right.slideshow__item--selected {
    z-index: 3
}

.js .slideshow--transition-slide .slideshow__item--slide-out-left>*,
.js .slideshow--transition-slide .slideshow__item--slide-out-right>* {
    visibility: visible
}

@keyframes slide-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes slide-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes slide-out-left {
    0% {
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        transform: translateX(100%)
    }
}

@keyframes slide-out-right {
    0% {
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        transform: translateX(-100%)
    }
}

.js .slideshow--transition-prx .slideshow__item {
    -webkit-animation-duration: var(--slideshow-prx-transition-duration);
    animation-duration: var(--slideshow-prx-transition-duration);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: var(--ease-out);
    animation-timing-function: var(--ease-out)
}

.js .slideshow--transition-prx .slideshow__item>* {
    visibility: hidden
}

.js .slideshow--transition-prx .slideshow__item--selected>* {
    visibility: visible
}

.js .slideshow--transition-prx .slideshow__item--prx-in-left {
    -webkit-animation-name: prx-in-left;
    animation-name: prx-in-left
}

.js .slideshow--transition-prx .slideshow__item--prx-in-right {
    -webkit-animation-name: prx-in-right;
    animation-name: prx-in-right
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left {
    -webkit-animation-name: prx-out-left;
    animation-name: prx-out-left
}

.js .slideshow--transition-prx .slideshow__item--prx-out-right {
    -webkit-animation-name: prx-out-right;
    animation-name: prx-out-right
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left,
.js .slideshow--transition-prx .slideshow__item--prx-out-right {
    z-index: 2
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left.slideshow__item--selected,
.js .slideshow--transition-prx .slideshow__item--prx-out-right.slideshow__item--selected {
    z-index: 3
}

.js .slideshow--transition-prx .slideshow__item--prx-out-left>*,
.js .slideshow--transition-prx .slideshow__item--prx-out-right>* {
    visibility: visible
}

@keyframes prx-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes prx-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }
    100% {
        transform: translateX(0)
    }
}

@keyframes prx-out-left {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        opacity: 0.3;
        transform: translateX(40%)
    }
}

@keyframes prx-out-right {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }
    100% {
        opacity: 0.3;
        transform: translateX(-40%)
    }
}

.js .slideshow[data-swipe="on"] .slideshow__content {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.js .slideshow[data-swipe="on"] .slideshow__content img {
    pointer-events: none
}

.slideshow__control {
    display: none
}

.js .slideshow[data-controls="hover"] .slideshow__control {
    opacity: 0;
    transition: opacity .3s
}

.js .slideshow[data-controls="hover"]:hover .slideshow__control {
    opacity: 1
}

.js .slideshow[data-swipe="on"] .slideshow__control {
    display: none
}

.js .slideshow__control {
    display: block;
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%)
}

.js .slideshow__control:first-of-type {
    left: var(--slideshow-btn-offset)
}

.js .slideshow__control:last-of-type {
    right: var(--slideshow-btn-offset)
}

@media (min-width: 64rem) {
    .js .slideshow[data-swipe="on"] .slideshow__control {
        display: block
    }
}

.slideshow__btn {
    display: block;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.75);
    height: var(--slideshow-btn-height);
    width: var(--slideshow-btn-width);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .2s, transform 0.2s
}

.slideshow__btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.85)
}

.slideshow__btn:hover .icon {
    color: var(--color-bg)
}

.slideshow:not(.slideshow--is-animating) .slideshow__btn:active {
    transform: translateY(2px)
}

.slideshow__btn .icon {
    display: block;
    width: var(--slideshow-btn-icon-size);
    height: var(--slideshow-btn-icon-size);
    margin: 0 auto;
    transition: color .2s;
    color: var(--color-white)
}

@supports (grid-area: auto) {
    .slideshow__btn {
        background-color: transparent
    }
    .slideshow__btn .icon {
        color: var(--color-contrast-higher)
    }
}

.slideshow__navigation {
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent
}

.slideshow__nav-item {
    display: inline-block;
    margin: 0 var(--space-xxxs)
}

.slideshow__nav-item button {
    display: block;
    position: relative;
    font-size: 8px;
    color: var(--color-contrast-high);
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.4;
    cursor: pointer;
    transition: background .3s
}

.slideshow__nav-item button::before {
    content: '';
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    height: 1em;
    width: 1em;
    font-size: 14px;
    border-radius: inherit;
    border: 1px solid var(--color-contrast-high);
    opacity: 0;
    transform: scale(0);
    transition: 0.3s
}

.slideshow__nav-item button:focus {
    outline: none
}

.slideshow__nav-item button:focus::before {
    opacity: 1;
    transform: scale(1)
}

.slideshow__nav-item--selected button {
    opacity: 1
}

@media (min-width: 64rem) {
    .slideshow__navigation {
        height: 40px
    }
    .slideshow__nav-item button {
        font-size: 10px
    }
    .slideshow__nav-item button::before {
        font-size: 16px
    }
}

.hero-slideshow {
    --carousel-grid-gap: 0;
    --carousel-item-auto-size: 100%
}

.hero-slideshow .carousel__nav-item button {
    background-color: var(--color-bg)
}

@media (min-width: 64rem) {
    .main-header--transparent+section .hero-slideshow {
        margin-top: 30px
    }
}

.hero-slideshow__banner {
    height: 100%;
    min-height: 43vw;
    background-position: center;
    background-size: cover;
    color: var(--color-white)
}

.hero-slideshow__banner:not(.hero-slideshow__banner--no-overlay):before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3)
}

.hero-slideshow__banner h1,
.hero-slideshow__banner h2,
.hero-slideshow__banner h3,
.hero-slideshow__banner h4,
.hero-slideshow__banner a:not(.btn--primary) {
  color: hsl(0deg 0% 0%)
}

.hero-slideshow__wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.hero-slideshow .carousel__navigation--pagination .carousel__nav-item button {
    padding: var(--space-xxxs) var(--space-lg)
}

.hero-slideshow .carousel__controls .carousel__control--next {
    left: auto;
    right: 0
}

.hero-slideshow .carousel__controls .carousel__control--prev {
    left: 0
}

.hero-slideshow .carousel__controls .carousel__control {
    width: 25px;
    height: 50px;
    transform: translate(0, -50%)
}

.hero-slideshow .carousel__controls .carousel__control .icon {
    font-size: 14px
}

.hero-slideshow .carousel__controls .carousel__control:hover {
    transform: translate(0, -50%)
}

@media (min-width: 64rem) {
    .hero-slideshow .carousel__controls .carousel__control {
        width: 40px;
        height: 80px
    }
    .hero-slideshow .carousel__controls .carousel__control .icon {
        font-size: 20px
    }
}

.hero-slideshow__wrapper .hero-slideshow__tite {
    margin-bottom: var(--space-sm);
    margin-top: var(--space-xxxs)
}

.products__carousel {
    --carousel-item-auto-size: 150px
}

@media (min-width: 64rem) {
    .products__carousel {
        --carousel-item-auto-size: 260px
    }
}

.products__carousel--bundle {
    --carousel-item-auto-size: 150px
}

@media (min-width: 64rem) {
    .products__carousel--bundle {
        --carousel-item-auto-size: 200px
    }
}

:root {
    --thumbslide-thumbnail-auto-size: 80px;
    --thumbslide-thumbnail-grid-gap: var(--space-xs)
}

.js .thumbslide .slideshow {
    --slideshow-fade-transition-duration: 0.3s;
    --slideshow-slide-transition-duration: 0.3s
}

html:not(.js) .thumbslide__nav-wrapper {
    display: none
}

.thumbslide__nav {
    display: flex;
    overflow: hidden;
    padding: var(--thumbslide-thumbnail-grid-gap) 0;
    position: relative
}

.thumbslide__nav::before {
    left: 0
}

.thumbslide__nav::after {
    right: 0
}

.thumbslide__nav--scroll-end::after {
    opacity: 1
}

.thumbslide__nav--scroll-start::before {
    opacity: 1
}

.thumbslide__nav-list {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    will-change: transform;
    transition: transform 0.5s
}

.thumbslide__nav-list:hover .thumbslide__nav-item {
    opacity: 0.6
}

.thumbslide__nav-list--dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.thumbslide__nav-list--no-transition {
    transition: none
}

.thumbslide__nav-item {
    float: left;
    flex-shrink: 0;
    width: var(--thumbslide-thumbnail-auto-size);
    margin-right: var(--thumbslide-thumbnail-grid-gap);
    transition: opacity 0.3s, transform 0.3s;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.thumbslide__nav-item img {
    display: block;
    pointer-events: none
}

.thumbslide__nav-item:hover {
    opacity: 1 !important
}

.thumbslide__nav-item--active {
    position: relative;
    opacity: 1 !important;
    border: none!important;
}

.thumbslide__nav-item--active::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.thumbslide__caption {
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.85);
    padding: var(--component-padding);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.thumbslide--top {
    display: flex;
    flex-direction: column
}

.thumbslide--top .slideshow {
    order: 1
}

.thumbslide--vertical {
    display: flex
}

@media not all and (min-width: 48rem) {
    .thumbslide--vertical {
        --thumbslide-thumbnail-auto-size: 50px
    }
}

.thumbslide--vertical .slideshow {
    display: inline-block;
    flex-grow: 1
}

.thumbslide--vertical .thumbslide__nav-wrapper {
    float: right;
    width: var(--thumbslide-thumbnail-auto-size);
    flex-shrink: 0;
    margin-right: 40px;
}

.thumbslide--vertical .thumbslide__nav {
    width: 100%;
    height: 100%
}

.thumbslide--vertical .thumbslide__nav::after,
.thumbslide--vertical .thumbslide__nav::before {
    width: 80%;
    height: 0;
    left: 10%
}

.thumbslide--vertical .thumbslide__nav::before {
    top: 0
}

.thumbslide--vertical .thumbslide__nav::after {
    top: auto;
    bottom: 0
}

.thumbslide--vertical .thumbslide__nav-list {
    flex-direction: column;
    position: absolute;
    top: 0
}
.thumbslide--vertical .thumbslide__nav-item {
    margin-right: 0;
    margin-bottom: var(--thumbslide-thumbnail-grid-gap);
    border: 1px solid #ddd;
}

.thumbslide--vertical .thumbslide__nav-item img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.thumbslide--left .slideshow {
    order: 1
}

.separator {
    width: 1px;
    height: 1em;
    background-color: currentColor
}

.btn--wishlist {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm)
}
/* New styling goes here */

/* Global styling */
.sm-line,
.homepage-content-wrapper .sm-line {
  width: 60px;
  height: 2px;
  text-align: center;
  margin: 0px auto 40px auto;
}
.bold {
	font-weight: bold;
}
::placeholder {
  color: #999999!important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #999999!important;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: #999999!important;
}
/*owl carousel*/
.owl-dots {
	text-align: center;
}
 button.owl-dot {
	background-color: transparent!important;
  border: 2px solid #FA7595!important;
   width: 18px;
  height: 18px;
  border-radius: 50%;
  outline: none;
  margin-right: 10px;
}
.owl-dot.active {
   background-color: #FA7595!important;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  outline: none;
  margin-right: 10px;
}
.owl-prev i {
  font-size: 12px;
  padding: 5px;
  color: #999;
}
.owl-next i {
  font-size: 12px;
  padding: 5px;
  color: #999;
}
.brand-carousel-buttons .owl-nav .owl-prev {
  position: absolute;
  left: -48px;
  top: -105px;
}
.brand-carousel-buttons .owl-nav .owl-next {
  position: absolute;
  right: -48px;
  top: -105px;
}
.brand-img {
  height: 110px;
  object-fit: cover;
}
/* Buttons Styling */
.button {
  height: 42px;
  line-height: 21px;
  color: #FFFFFF;
  padding: 12px 21px;
  font-size: 15px;
  text-align: center;
  display: inline-block;
  border: none;
}
.btn-pink {
  background-color: #FA7595;
}
.btn-black {
  background-color: #000;
}
a.btn-close {
  width: 31px;
  height: 31px;
  line-height: 31px;
  background-color: #F74570;
  color: #fff;
  text-align: center;
}

a.btn-close i {
	color: #fff;
  -webkit-text-stroke: 2px #F74570;
}
/* Buttons Styling  end*/
.owl-nav {
  position: relative;
}
.owl-nav button {
  background: transparent!important;
  border: 1px solid #9999!important;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  outline: none!important;
}
.owl-nav .owl-prev {
  position: absolute;
  left: -48px;
  top: -265px;
}
.owl-nav .owl-next {
  position: absolute;
  right: -48px;
  top: -268px;
}
/* End */

/*=========HEADER===========*/
/* --------------header expandend language ------------------ */
.header-language {
	display: flex;
  align-items: center;
}
.header-language > div:first-child {
	margin-right: 15px;
}
.lang .current span {
	margin-left: 8px;
}
.lang .current,
.currency .current{
	display:flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}
.lang > .current:hover .language-dropdown {
	display: flex;
  position: absolute;
  top: 24px;
  left: -5px;
  padding-top: 20px;
  z-index: 10;
	width: 130px;
  padding:	5px;
  background-color: #fff;
  box-shadow: 0px 0px 124px rgb(0 0 0 / 20%);
}
.lang > .current:before {
  content: '';
  height: 25px;
  width: 54px;
  position: absolute;
  top: 14px;
  left: -10px;
}
.language-dropdown ul {
	padding:0;
  margin:0;
}
.language-dropdown ul li a {
	font-size: 14px;
  font-weight: 500;
  align-items: center;
  display: flex;
}
.currency .current > span {
	margin-left: 6px;
}
.language-dropdown,
.currency-dropdown{
	display:none;
}
.currency .current:hover .currency-dropdown{
	display:block;
  position:absolute;
  top: 24px;
  left: -5px;
  z-index: 10;
	width: 130px;
  padding:	5px;
  background-color: #fff;
}
.currency-dropdown ul {
	padding:0;
  margin:0;
}
.currency-dropdown ul li{
	display:block;
  padding:0;
  margin: 0;
}
.currency-dropdown ul li a {
	font-weight: 500;
}
.currency .current:before {
	content: '';
  height: 25px;
  width: 54px;
  position: absolute;
  top: 14px;
  left: -10px;
}
/*  Header fixed tot top  */
.header-fixed-to-top {
	position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}
.margin-top-156 {
	margin-top: 156px;
}
.margin-top-94 {
	margin-top: 94px;
}
/*  Header fixed tot top end  */
/* --------------header expandend language end ------------------ */
/* header with bg */
body {
	min-height: 800px;
}
.header-bg-home-page {
	position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  background-color: transparent;
}
.header-bg-home-page.header-scrole-active {
	background-color: #fff;
}
/* header with bg end */

.header-top-bar{
/* 	display:none; */
  height:0px;
  opacity:0;
  transition:height .35s ease-in-out;
}
.header-top-bar.expanded {
/*   display: block; */
	width: 100%;
  height: 40px;
  line-height: 45px;
  margin-top: 0px;
  margin-bottom: 0px;
  position:relative;
  z-index: 30;
  transition:height .35s ease-in-out;
  opacity:1;
}
.header-icons-social li:not(:last-child) {
    margin-right: 30px;
}
.header-top-bar p {
	text-align: center;
  font-size: 14px;
}
.header-top-bar a {
  position: absolute;
  right: 13px;
  padding: 12px;
  line-height: 1;
  
}
a {
  	cursor: pointer;
  }
  .close {
  	display: none;
  }
  .open {
  	display: block;
  }
  .relative {
  	position: relative;
  }
  header.header-min {
  	padding: 5px 0;
  }
  .logo-wrap img {
  	width: auto;
    height: 100px;
    object-fit:contain;
  }
  .header-min .container-custom {
  	display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
  }
  header ul li {
  	display: inline-block;
  }
  nav.desktop-nav > ul > li:not(:last-child) {
  margin-right: 30px;
}
nav.desktop-nav > ul > li > a {
  font-size: 15px;
  font-weight: 600;
  color: #999;
  position: relative;
  transition: 0.3s;
}
nav.desktop-nav > ul > li > a.active {
  color:#000;
}
nav.desktop-nav > ul > li > a.active::before {
  content: '';
  position: absolute;
  bottom: -13px;
  left: calc(50% - 20px);
  width: 40px;
  color: #F74570;
  border-bottom: 3px solid #F74570;
  transition: 0.3s;
}
nav.desktop-nav > ul > li > a:hover {
  color: #F74570;
  transition: 0.3s;
}
nav.desktop-nav > ul > li > a:hover:before {
  content: '';
  position: absolute;
  bottom: -13px;
  left: calc(50% - 20px);
  width: 40px;
  color: #F74570;
  border-bottom: 3px solid #F74570;
  transition: 0.3s;
}
  .header-icons > li:not(:last-child) {
  	margin-right: 30px;
  }
  .collection {
  	position: relative;
  }
  .header-category {
  	position: absolute;
    top: 57px;
    left: 0;
    width: 190px;
    padding: 10px 0;
    z-index: 20;
    background-color: #fff;
    -webkit-box-shadow:none;
		box-shadow: none;
    visibility: hidden;
    opacity: 0;
  }
  li.collection:before {
  	content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 41px;
  }
  li.collection:hover > a {
  	color: #F74570;
  	transition: 0.3s;
  }
  li.collection:hover > a:before {
  	content: '';
    position: absolute;
    bottom: -13px;
    left: calc(50% - 20px);
    width: 40px;
    color: #F74570;
    border-bottom: 3px solid #F74570;
    transition: 0.3s;
  }
  li.collection:hover .header-category {
    visibility: visible;
    opacity: 1;
    width: 260px;
}
  .header-category li a {
  	font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    height: 40px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    padding: 0 25px 0 10px;
  }
  .header-subcat {
    position: absolute;
    top: 0px;
    left: 190px;
    width: 190px;
    padding: 10px 0;
    z-index: 20;
    background-color: #fff;
    -webkit-box-shadow:  none;
		box-shadow: none;
    visibility: hidden;
    opacity: 0;
  }
  .header-subcat.header-subsubcat {
  	top: 10px;
  }
  .desktop-nav .has-subcat:hover {
  	background-color: #F2F2F2;
  }
  .header-category a:hover {
  	background-color: #F2F2F2;
  }
  .header-category li:hover > .header-subcat {
  	visibility: visible;
    opacity: 1;
  }
  .header-category li {
  	display: block;
  }
  .header-category li:not(:last-child) {
    margin-bottom: 10px;
  }
  .has-subcat {
  	position: relative;
  }
   .has-subcat i {
  	 position: absolute;
   	 top: calc(50% - 7.5px);
   	 right: 8px;
   	 color: #999;
  }
  .search {
  	position: absolute;
    top: 57px;
    right: -36px;
    width: 300px;
    z-index: 40;
  }
.header-style-2 .search {
	width: 172px;
}
  .search input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }
.header-style2.search input[type="search"]::-webkit-search-cancel-button {
  display: block;
  color:#2C8D86;
  }
  .search input {
  	font-size: 13px;
    color: #000;
    padding: 0 36px;
    border: 1px solid #EBEBEB;
    outline: none;
    height: 35px;
  }
  .search input:active,
  .search input:focus {
  	outline: none;
    border: none;
  }
	
  .search-link.icon-inside {
  	position: absolute;
    top: 42px;
    left: -153px;
    z-index: 45;
  }
  .search-link.icon-inside i {
    font-size: 13px;
    color: #2C8D86;
  }
.search-input-close {
	display:none;
}
.search-input-close.icon-inside {
  display: block;
  position: absolute;
  top: 67px;
  right: -28px;
  z-index: 45;
  font-size: 13px;
  color: #2C8D86;
}
.search-input-close.icon-inside i {
  font-size: 13px;
  color: #2C8D86;
}
.header-style-2 .header-top .header-contact-info {
	width:33.3333%;
  flex:0 0 auto;
}
.header-style-2 .header-top .logo-wrap {
	width:33.3333%;
  flex:0 0 auto;
}
.header-style-2 .header-top .header-social {
	width:33.3333%;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.header-style-2 .header-top .header-social .header-language {
	margin-right:25px;
}
/* header style 2 language */
.header-style-2-language .header-top .logo-wrap {
    flex-basis: unset;
}
.header-style-2-language .search-header-style2-language {
    position: relative;
    top: 0;
    right: 0;
    width: 450px;
}
.header-style-2-language .search-header-style2-language input {
	height: 42px;
  font-size: 11px;
  background: #F9F9F9;
  border-radius:42px;
}
.header-style-2-language .search-header-style2-language form i {
	top: 15px;
}
.header-language a {
	text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}
.header-language a i{
	margin-left: 6px;
}
/* header style 2 language end */
.cart-popup {
	padding: 30px 20px 0 20px;
}
.cart-popup-container h2 {
	font-size: 18px;
  font-weight: 500;
  text-align: left;
}
  .header-top {
  	padding-bottom: 5px;
    border-bottom: 1px solid #EBEBEB;
  }
  .header-top .logo-wrap {
  	flex-basis: 33%;
    flex-grow: 0;
    text-align:center;
  }
  .header-contact-info li:first-child {
  	margin-right: 30px;
  }
  .header-contact-info li i {
  	margin-right: 8px;
    font-size: 13px;
  }
  .header-contact-info li p,
  .header-contact-info li a {
  	font-size: 14px;
  }
/*   .header-icons-social li:not(:last-child) {
  	margin-right: 30px
  } */
  .header-icons-socal li a:hover {
  	opacity: 0.5;
  }
  .header-bottom {
    padding: 17.5px 0;
    height: 56px;
  }
  .header-bottom nav.desktop-nav > ul > li > a.active::before {
  	bottom: -20px;
  }
  .header-bottom nav.desktop-nav > ul > li > a:hover:before {
  	bottom: -20px;
  }
  .header-bottom li.collection:hover > a:before {
  	bottom: -20px;
  }
  .header-bottom .header-category {
  	top: 43px;
  }
	.search-active form i {
  	position: absolute;
    top: 6px;
    left: 15px;
    z-index: 30;
    font-size: 13px;
    color: #2C8D86;
  }
/* header expanded search */
.search-header-expanded form {
	height: 100%;
}
.search-header-expanded form input {
	width: 90%;
  margin: 0 auto;
  height: 100%;
  display: block;
  border-top: none;
  border-bottom: none;
  cursor: pointer;
  outline: none;
}
.search-header-expanded form input:focus {
	 outline: none;
}
.search-header-expanded {
	position: absolute;
  left: 0;
  top: 84px;
  width: 100%;
  height: 62px;
  z-index: 50;
  opacity: 1;
  transform: translateX(0px);
  visibility: visible;
  transition: transform .3s ease-in-out;
}
.search-header-expanded.hiden {
  opacity: 0;
  left: -9999px;
  transform: translateX(-20px);
  visibility: hidden;
  transition: transform .3s ease-in;
}
.search-link_header-xepanded.open {
	display: block;
}
.search-link_header-xepanded.hiden {
	display: none;
}
.search-link_header-xepanded-close.hiden {
  position: absolute;
  left: -9999px;
	opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition: opacity .3s ease-in-out;
}
.search-link_header-xepanded-close.open {
	display: block;
  position: absolute;
  right: 2%;
  bottom: 20px;
  z-index: 55;
  opacity: 1;
  transform: translateX(0px);
  visibility: visible;
  transition: opacity .3s ease-in-out;
  transition-delay:.5s;
}
/* header expanded search end */
  .shadow-active {
  	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0000007a;
    z-index: 50;
    transition: 0.3s;
  }

/* header mobile menu */
 .mobile-menu i{
    -webkit-text-stroke: 3px #fa7595;
    }
    .mobile-menu .btn-circle-close i {
    	-webkit-text-stroke: 1px #fa7595;
    }
.mobile-menu {
  position: fixed;
  bottom: 0;
  left: -9999px;
  width: 364px;
  height: 100vh;
  display: block;
  z-index: 100;
  padding: 44px 30px 0 30px;
  text-align: center;
  border-top-right-radius: 0px;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.mobile-menu.visible {
  visibility: visible;
  opacity: 1;
  transition: .3s;
  left: 0px;
  top: 0px;
} 
.hamburger {
  width: 24px;
  height: 24px;
  display: none;
}
.mobile-menu .btn-circle-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 105;
}
.mobile-menu .btn-circle-close i {
  color: #999;
}
.mobile-menu_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 50px;
  position: relative;
}
    .mobile-menu_top:before {
    	content: '';
      position: absolute;
      bottom:0;
      left:0;
      width: 100%;
      height: 2px;
      background: transparent linear-gradient(270deg, #FFFFFF00 0%, #FFFFFF4D 52%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
			opacity: 1;
    }  
.user_circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  line-height: 102px;
  margin-bottom: 15px;
}
.mobile-menu_top span i {
  color: #F74570;
  font-size: 40px;
}
.mobile-menu_top a {
		font-size: 30px;
} 
.mobile-category.open {
	  height: calc(100vh - 122px);
    overflow-y: auto;
}
    .mobile-menu_top.close,
    .mobile-menu li.close,
   .mobile-menu .has-subcat.close,
    .mobile-category-back i.close,
    .mobile-category-back a.close {
    	display:none;
    }
    .mobile-menu li  {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    margin-bottom: 30px;
    position: relative;  
    margin-right: 0!important;  
    }   
   .mobile-menu li a {
    	display: block;
     font-size: 32px;
     width: 100%;
     position: relative;
    }   
    .mobile-menu li a.mobile-collection {
    	width: calc(100% - 40px)
    }
    .mobile-menu li i {
    	font-size:32px;
    }
    .mobile-menu li a i {
      position: absolute;
      top:3px;
      right: 0;
    	font-size:32px;
    }
    .mobile-menu li a.active::before {
    	display:none;
    }  
     .mobile-menu li a::before,
    .mobile-menu li::before{
    	display:none;
    } 
    .mobile-category .mobile-menu-top a i {
    	position: initial;
    }
    .mobile-category .mobile-menu-top{
    	margin-bottom: 40px;
    }
   .mobile-category .mobile-menu-top a,
   .mobile-category .mobile-menu-top a i {
    	font-size: 20px;
    }
    .mobile-menu li.has-subcat {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    margin-bottom: 30px;
    position: relative;  
    margin-right: 0!important;
    }
    .mobile-menu li.has-subcat a {
    	width: calc(100% - 40px);
    }
    .mobile-menu li.has-subcat i {
    	position: initial;
    }
    .mobile-category-back {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      margin-bottom: 30px;
      position: relative;  
      margin-right: 0!important;
    }
    .header-subcat_mobile.open {
    	position: fixed;
      top: 0px;
      left:0px;
      background: #fa7595;
      z-index: 50;
      width: 364px;
      height: 100vh;
      display: flex;
      flex-direction: column;
      padding: 60px 30px 0 30px;
      border-top-right-radius: 10px;
    }
    .mobile-menu_top .user_circle h1 {
    	text-transform: uppercase;
      color: #000;
      font-size: 40px;
      font-weight: 500;
      line-height: 90px;
    }
    .mobile-menu_top > a {
    	color: #fff;
      font-size: 30px;
      font-weight: 500;
      text-transform: capitalize;
    }
    .mobile-menu_top span:last-child {
    	color: #fff;
      font-size: 14px;
      font-weight: 500;
    }
    .logout-btn {
    	position: absolute;
      bottom: 120px;
      left: calc(50% - 152px);
      z-index: 40;
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      width: 304px;
      height: 48px;
      border: 1px solid #fff;
      text-align: center;
      line-height: 48px;
    }
    .logout-btn i {
    	color: #fff;
      margin-right: 10px;
      -webkit-text-stroke: 1px #fa7595;
    }
    .mobile-menu-top > a > .mobile-collection-arrow,
    .mobile-menu-top_subcat i {
    	-webkit-text-stroke: 1px #fa7595;
      margin-right: 14px;
    }
/*   ---------------------------------   */
    
          .mobile-menu.visible {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  } 
    .mobile-contact-info {
    	position: absolute;
      bottom:40px;
    }
    .mobile-contact-info li {
    	margin-bottom: 15px;
    }
     .mobile-contact-info li a {
      font-size: 14px;
    }
    .mobile-contact-info li a i {
      font-size: 14px;
    	color: #fff;
      margin-right: 5px;
      -webkit-text-stroke: 1px #fa7595;
      position: unset;
    }
/* header mobile menu end */
/*Header popups */
  .popup.popup-is-visible {
  	position: fixed;
    top:0;
    right:0;
    width:374px;
    height: 100vh;
    background-color: #fff;
    -webkit-box-shadow:  0px 0px 4px 0px #d8d8d8;
		box-shadow: 0px 0px 4px 0px #d8d8d8;
    z-index:100;
    transform: translatex(0);
    transition: transform 0.3s ease-in-out;
  }
  
  .popup.popup-is-hidden {
  	visibility: hidden;
    position: absolute;
    left: -9999px;
  	opacity: 0;
  	z-index: -1;
    transform: translatex(100%);
    transition: transform 0.3s ease-in-out;
  }
  .popup.popup-is-hidden a.btn-close {
  	display: none;
  }
  .popup.popup-is-visible a.btn-close {
  	position: absolute;
    top:0;
    left: -31px;
    color: #fff;
  }
  .login-popup {
  	padding: 60px 40px 0 40px;
  }
  .login-popup ul {
  	display: flex;
    flex-direction: column;
    text-align: center;
  }
  .popup-logo img {
  	width: 120px;
    height: auto;
     margin-bottom: 40px;
  } 
  .popup-title h1 {
  	font-size: 30px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
  }
  .popup-title {
  	margin-bottom: 30px;
  }
  .popup-title span {
  	font-size: 14px;
  }
  .input {
  height: 44px;
  line-height: 22px;
  font-size: 14px;
  padding: 14px 15px 12px 15px;
  border: 1px solid #ddd;
  color: #000;
}
.input:active,
.input:focus {
	outline:none;
}
  .input-box {
  	margin-bottom: 30px;
  }
  .input-box input {
  	margin-bottom: 20px;
    width: 100%;
  }
  .input-box a.forgot {
  	font-size: 13px;
    color:#FA7595;
    text-align: right;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    text-decoration: underline!important;
  }
.input-box a.forgot:active,
.input-box a.forgot:focus,
.input-box button:focus,
.input-box button:active,
.btn-transparant:active,
.btn-transparant:focus {
	    outline: none;
}
  .input-box button {
  	border: none;
    display: block;
    width: 100%;
  }
  .btn-transparant {
    border: 1px solid #424E9C;
    width: 100%;
    color: #424E9C; 
    margin-top: 20px;
    margin-bottom: 40px;
  }
  .btn-transparant i {
  	margin-right: 13px;
    color: #424E9C; 
  }
  .btn-pink-border {
  	border: 1px solid #FA7595;
    width: 100%;
    color: #FA7595; 
  }
  .popup-bottom span {
  	font-size: 15px;
  }
  .input-group {
  	position: relative;
    width: 100%;
  }
  .input-group i {
  	position: absolute;
    top: 14px;
    left: 8px;
    color: #999999;
  }
  .input.input-icon {
  	padding-left: 30px;
  }
  .registration-popup-container.close,
  .login-popup-container.close {
  	display:none;
  }
  .popup-registration-form .input-box input:nth-child(1) {
    width: 47%;
    margin-right: 20px;
}
   .popup-registration-form .input-box input:nth-child(2) {
  	width: 47%;
  }
  .header-bag-quantity_number {
  	width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #fa7595;
    display: block;
    position: absolute;
    top: -14px;
    right: -12px;
    color: #fff;
    font-size: 13px;
    text-align: center;
  }
  .header-bottom .search {
  	top: -22px;
    right: -4px;
  }
  .header-bottom .search.search-active form i {
  	top: 10px;
    font-size: 15px;
  }
  .header-bottom  .mobile-nav {
  	position: absolute;
    left: -99999px;
  }
/* HEADER popup Cart */
  .cart-popup-container li {
  	width: 100%;
  }
  .cart-image_popup {
  	width: 80px;
    height: 90px;
    border: 1px solid #ddd;
  }
  .popup-cart-product {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
/*     display: grid;
    grid-template-columns: 80px 1fr auto;
    grid-gap: 16px; */
  	border-bottom: 1px solid #EBEBEB;
    padding-bottom: 20px;
    margin-top: 20px;
  }
  .popup-cart-product > div:last-child {
  	align-self: flex-end;
  }
  .popu-cart_product-info {
  	text-align: left;
    flex-grow: 1;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .popu-cart_product-info > a {
  	font-size: 15px;
    font-weight: 600;
    margin-bottom: 9px;
    display:block;
  } 
  .popu-cart_product-info > p {
  	font-size: 13px;
    font-weight: 400;
  } 
  .popu-cart_product-info > p > span {
  	font-size: 13px;
    font-weight: 400;
    color: #999;
  } 
  .popu-cart_product-quantity {
  	align-self: flex-start;
  }
  .popu-cart_product-quantity input {
    border: 1px solid #999;
  	font-size: 13px;
    color:#000;
    min-width: 75px;
    height: 25px;
  }
  .popu-cart_product-quantity button {
  	margin: 0 -10px;
   
  }
  .popu-cart_product-quantity button,
  .popu-cart_product-quantity button:focus,
  .popu-cart_product-quantity button:active {
  	outline: none!important;
    border: none!important;
    background: none!important;
  }
  .popu-cart_product-quantity button i{
  	font-size: 10px;
    color:#F74570;
  }
  .remove-product i {
  	color: #999;
    font-size: 13px;
  }
  .popup-cart-price_info  p{
  	margin-bottom: 10px;
  }
  .popup-cart-price_info {
  	margin-bottom: 25px;
  }
  .popup-cart-price_info p span {
  	font-size: 15px;
  }
  .cart-popup-container ol {
  	height: calc(100vh - 300px);
    overflow-y: auto;
  }
  .remove-product {
  	padding-right: 15px;
  }
/*  -------------------------------  */
.cart-popup-container ol::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.cart-popup-container ol::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
.cart-popup-container ol::-webkit-scrollbar-thumb {
  background: #878787;
  border: 82px none #ffffff;
  border-radius: 26px;
}
.cart-popup-container ol::-webkit-scrollbar-thumb:hover {
  background: #878787;
}
.cart-popup-container ol::-webkit-scrollbar-thumb:active {
  background: #9e9e9e;
}
.cart-popup-container ol::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0px none #ffffff;
  border-radius: 39px;
}
.cart-popup-container ol::-webkit-scrollbar-track:hover {
  background: #ffffff;
}
.cart-popup-container ol::-webkit-scrollbar-track:active {
  background: #ffffff;
}
.cart-popup-container ol::-webkit-scrollbar-corner {
  background: transparent;
}
/*=======END HEADER============*/

/*========INDEX===========*/
.hero-slideshow__banner {
  min-height: 31.5vw;
}
.hero-slideshow__wrapper .container-custom .text-component {
  padding-bottom: 223px!important;
}
.hero-slideshow__banner:not(.hero-slideshow__banner--no-overlay):before {
  background-color: rgb(0 0 0 / 0%);
}
.bold.hero-slideshow__label {
  	font-size: 22px;
  }
  .bold.hero-slideshow__tite {
  	font-size: 42px;
  }
.hero-button {
	font-size: 15px;
}
/* Hero slider*/
.owl-hero .owl-nav .owl-prev {
  position: absolute;
  left: 67px;
  top: -305px;
}
.owl-hero .owl-nav .owl-next {
  position: absolute;
  right: 67px;
  top: -305px;
}
.owl-hero .owl-prev i {
	color: #000;
}
.owl-hero .owl-next i {
	color: #000;
}
.owl-hero .owl-nav button {
  border: 1px solid #000!important;
}
.owl-hero .owl-dot.active {
  background-color: #000000!important;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  outline: none;
  margin-right: 10px;
  border: 2px solid #000000!important;
}
.owl-hero button.owl-dot {
  background-color: transparent!important;
  border: 2px solid #000!important;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  outline: none;
  margin-right: 10px;
}
.owl-carousel.owl-hero {
  position: relative;
}
.owl-hero .owl-dots {
  text-align: left;
  margin-top: -50px;
  z-index: 99;
  position: relative;
}
.owl-carousel .owl-item .hero-img {
  height: 600px;
  display: flex;
  align-items: center;
  background-repeat: no-repeat.container-custom h1;
  background-position: center;
  background-size: cover;
}
.owl-carousel .owl-item .hero-img.hero-image_full-height-header-expanded {
	height: calc(100vh - 156px)
}
.owl-carousel .owl-item .hero-img.hero-image_full-height-header-minimalistic {
	height: calc(100vh - 94px)
}
.owl-carousel .owl-item .hero-image_full-height-header-transparent {
	height: 100vh;
}
.owl-carousel .owl-item .hero-img .container-custom h1 {
	font-size: 22px;
  text-align:left;
}

.owl-carousel .owl-item .hero-img .container-custom h2 {
	font-size: 42px;
  padding-bottom: 30px;
}
.owl-carousel .owl-item .hero-img .container-custom span {
  display: block;
  font-size: 24px;
  padding-bottom: 40px;
}
.hero-img > .container-custom {
	z-index: 10;
}
.carousel__navigation .carousel__nav-item .reset {
  width: 14px;
  outline: none;
  height: 14px;
  border-radius: 50%;
}
.hero-slideshow .carousel__navigation--pagination .carousel__nav-item button {
  padding: 0px;
  background-color: transparent;
  border: 1px solid #000;
}
.carousel__nav-item.js-carousel__nav-item.carousel__nav-item--selected button {
  background-color: #000;
}
.carousel__navigation {
  justify-content: left;
}
.carousel__navigation--pagination {
  grid-template-columns: repeat(auto-fit, minmax(10px, auto));
}
.hero-slideshow .carousel__controls .carousel__control {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #000;
}
.hero-slideshow .carousel__controls .carousel__control--prev {
  left: 270px;
}
.hero-slideshow .carousel__controls .carousel__control--next {
  right: 270px;
}
.media-wrapper.product-media-wrapper-border-transparent {
	border: none;
}
.media-wrapper {
  border: 1px solid #DDDDDD;
  padding-bottom: calc((1 / 0.8) * 100%);
}

.prod-card .padding-sm {
  padding: 15px 0px 0px 0px;
  text-align: left;
  display: grid;
}
.prod-card .padding-sm h1 {
  padding-bottom: 5px;
}
.usp-top {
  padding-bottom: 32px;
}
.usp-bottom {
	margin-top: 60px;
}
.usp-wrapper {
  padding: 80px 0px 0px 0px;
}
.usp-wrapper ul {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-items: center;
  grid-column-gap: 15px;
}
.usp-wrapper ul li {
  display: flex;
  align-items: center;
  max-width: 282px;
}
.usp-wrapper ul li img {
  display: inline-block;
  max-width:30px;
}
.usp-wrapper ul li p {
  display: inline-block;
  padding-left: 15px;
  font-size: 15px;
  font-weight: bold;
}
.usp-wrapper ul li p span {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  font-weight: normal;
}
.usp-wrapper.usp-style-2 ul {
/*     display: grid; */
    grid-template-columns: auto auto auto;
    justify-items: center;
}
.usp-wrapper.usp-style-2 ul li {
	display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 255px;
  text-align: center;
}
.usp-wrapper.usp-style-2 ul li img {
	margin-bottom: 20px;
  height: 30px;
  max-width: unset;
}
.usp-wrapper.usp-style-2 ul li p {
	font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.usp-wrapper.usp-style-2 ul li span {
	font-size: 14px;
  font-weight: 400;
}
.usp-wrapper.usp-style-3 ul li {
	display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.usp-wrapper.usp-style-3 ul li {
	border: 1px solid;
  width: 260px;
  height: 220px;
}
.usp-wrapper.usp-style-3 ul li img {
	width: 80px;
  margin-bottom: 20px;
}
.usp-wrapper.usp-style-3 ul li p {
	font-size: 18px;
  padding: 0;
  text-align: center;
}
.usp-top .usp-style-3.homepage-bootom-usp {
	display:none;
}
.usp-bottom .hompage-top-usp {
	display:none;
}
.featured-section,
.newest-section,
.brands-section{
	padding: 32px 0;
}
.brands-section {
	margin-top:60px;
}
.home-about-section {
	padding: 45px 0;
}
.featured-products-title {
	text-align: center;
  padding-bottom: 22px;
  font-size: 42px;
}
.newest-products-title {
	text-align: center;
  padding-bottom: 22px;
  font-size: 42px;
}
.custom-item .item {
	padding: 20px 0px;
}
.about-us-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-content: space-between;
  grid-column-gap: 40px;
}
.about-us-content {
	padding: 0;
}
.about-us-content a {
	margin-top: 30px;
}
.about-us-content h1 {
	font-size: 30px;
}
.about-us-content p {
	font-size: 15px;
  padding-top: 20px;
  line-height: 26px;
}
.about-us-content h1>span {
	font-size: 42px;
}
.home-category-banners_title {
  text-align: center;
  padding-bottom: 22px;
  padding-top: 72px;
  font-size: 42px;
}
.banner-card__content.custom-card {
  justify-content: center;
  width: 55%;
}
.home-category-banner.one-column {
	display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 0px 30px;
}
.home-category-banner.one-column .banner-item:last-child {
    grid-area: unset;
}
.home-category-banner.grid-1-items {
	display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.home-category-banner.grid-2-items {
	display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px 30px;
}
.home-category-banner.grid-3-items {
	display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 30px 30px;
  grid-template-areas:
    ". ."
    "big3 big3";
}
.home-category-banner.grid-3-items .banner-item:nth-child(3) {
	grid-area: big3;
}
.home-category-banner.grid-4-items {
	display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 30px;
  grid-template-areas:
    ". ."
    ". .";
}
.home-category-banner.grid-5-items {
	 display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 30px;
  grid-template-areas:
    ". ."
    ". ."
    "big5 big5";
}
.home-category-banner.grid-5-items .banner-item:nth-child(5) {
	grid-area: big5;
}
.home-category-banner.grid-6-items {
	display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 30px;
  grid-template-areas:
    ". ."
    "big3 big3"
    ". ."
    "big6 big6";
}
.home-category-banner.grid-6-items .banner-item:nth-child(6) {
	grid-area: big6;
}
.home-category-banner.grid-6-items .banner-item:nth-child(3) {
	grid-area: big3;
}
.home-category-banner.grid-7-items {
	display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.home-category-banner_title.title-outside {
	position: unset;
  margin-top: 20px;
  width: 100%;
}
.home-category-banner_title.title-outside h1 {
	font-size: 24px;
}
.home-category-banner_title {
	position: absolute;
  top: calc(50% - 21px);
  left: 30px;
  width: 46%;
}
.banner-md-title {
  width: 70%;
}
.banner-md-title h1 {
	font-size: 36px;
}
.banner-item {
	width: 100%;
  height: 350px;
  background-size: cover;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 30px;
}
.banner-item > a {
	position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:1;
}
.banner-item.with-overlay:before,
.hero-img.with-overlay:before{
	content: '';
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width: 100%;
  background: #000;
  opacity: .3;
  z-index:0;
}
.brands-title {
	text-align: center;
  padding-bottom: 22px;
  font-size: 42px;
}
.about-banner img {
	width: 97.5%;
}
/*==========END INDEX==============*/
/* ======================= collection Page start============== */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 58px;
}

.pagination a {
  width: 35px;
  color: #999;
  border: 1px solid #EBEBEB;
  height: 35px;
  display: block;
  text-align: center;
  line-height: 35px;
}
.pagination-a .pagination.pagination-pink li a i {
  color: #999;
}
.pagination-a .pagination.pagination-pink li.active a { 
  color: red;
}
.pagination.pagination-pink li {
	margin-right: 10px;
}

.collection-page_top {
  	margin-bottom: 90px;
  }
  .bredcrumb-items_with-image {
  }
  .bredcrumb-items_with-image ol li, 
  .bredcrumb-items_with-image ol li a i,
  .bredcrumb-items_with-image ol li span{
  	color: #999;
  }
  .breadcrumbs-bg-image {
  	background-size: cover;
    height: 350px;
    display: flex;
    align-items: center;
  }
  .breadcrumbs-bg-image ul > li:first-child {
  	margin-bottom: 20px;
  }
  .breadcrumbs-bg-image ul > li > h1 {
    font-size: 48px;
    font-weight: 600 !important;
    font-family: 'Nunito' !important;
}
.collection-page_top .bredcrumb-light-style {
	margin-top: 20px;
  margin-bottom: -58px;
}
	.bredcrumb-light-style .breadcrumbs__item i,
.bredcrumb-light-style .breadcrumbs__item span,
.bredcrumb-light-style .breadcrumbs__item {
	font-size: 15px;
}
  .collection-page_content {
  	display: flex;
  }
  .sort-form {
  	display: flex;
    justify-content: space-between;
    height: 32px;
    align-items: center;
    margin-bottom: 30px;
  }
  .sort-form span {
  	font-size: 11px;
  	text-decoration: none!important:
  }
  .test {
    display: flex;
    justify-content: space-between;
  	border: 1px solid #ddd;
    height: 32px;
    line-height:28px;
    width: 174px;
    padding: 0 10px;
  }
  .margin-left-auto {
  	margin-left: auto;
  }
.collection-products-block.grid-4-style {
	display: grid;
  grid-template-columns: repeat(4,calc(100% / 4 - 12px));
  grid-gap: 15px;
}
.collection-products-block.grid-2-style {
	display: grid;
  grid-template-columns: repeat(2,calc(100% / 2 - 14px));
  grid-gap: 28px;
}
.collection-products-block.grid-2-style .product-on_hover .text-base {
	text-align:center;
}
.collection-products-block.grid-2-style .text-base {
	margin-bottom: 16px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.collection-products-block.grid-2-style .text-base .product-card__title {
	font-size: 23px!important;
  font-weight: 600;
}
.collection-products-block.grid-2-style .custom-price .prod-card__price {
	font-size: 21px
}
.collection-products-block.grid-2-style .products-cart a.product-cart-btn-mobile .fa-shopping-cart,
.collection-products-block.grid-2-style .products-cart a .fa-heart{
	font-size: 21px;
}
  .collection-products-block {
    display: grid;
    grid-template-columns: repeat(3,calc(100% / 3 - 20px));
    grid-gap: 28px;
  }
.product-cart-bottom {
	display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.product-catr-buttons-hover {
	display: none;
  position:absolute;
  width: 93%;
  bottom:112px;
  right: 3%;
}
.prod-card h1.text-base {
	height: 42px;
  overflow:hidden;
  margin-top: 10px;
}
.product-bottons-expanded form .product-buttons a.text-center i{
	margin:0;
}
.prod-card.product-on_hover:hover .product-catr-buttons-hover{
	display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-catr-buttons-hover.product-grid-2 {
	bottom: 131px;
}
.product-catr-buttons-hover.product-grid-2 .prod-btn-inside-prod {
	  padding: 10px 12px;
    font-size: 16px;
}
.product-catr-buttons-hover.product-grid-2 .prod-btn-inside-prod span {
	font-size: 16px;
}
.product-catr-buttons-hover.product-grid-2 .product-wishlist-button {
	width: 39px;
  height: 39px;
  line-height: 39px;
}
.product-catr-buttons-hover.product-grid-2 .product-wishlist-button i{
	font-size: 20px;
}
.prod-card.product-on_hover .prod-style-on-hover-button {
	display: inline-block;
}
.prod-btn-inside-prod {
	padding: 6px 10px;
  font-size: 13px;
}
.prod-btn-inside-prod i,
.prod-btn-inside-prod span{
	color: #fff;
}
.product-catr-buttons-hover .product-wishlist-button {
	  border: 1px solid #888;
    width: 29px;
    height: 29px;
    text-align: center;
    line-height: 23px;
}
.product-catr-buttons-hover .product-wishlist-button i{
	color: #888;
  font-size: 10px;
}
.prod-card.product-expanded .custom-price {
	position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: #fa7595;
  padding: 0px 6px;
  margin: 0;
  line-height: 100%;
  height:20px;
  line-height:20px;
}
.product-bottom-expanded .custom-price {
	display:flex;
  justify-content: space-between;
}
.product-bottom-expanded .custom-price.text-center {
	display:block;
}
.product-bottom-expanded .custom-price {
	margin-top: 10px;
}
.product-bottom-expanded .custom-price a i {
	font-size: 15px;
  color: #CAA1A1;
}
.product-bottom-expanded .custom-price ins {
  font-size: 14px;
  color: #fff;
}
.product-bottons-expanded form {
	display: flex;
  flex-direction: row;
  justify-content: center;
}
.product-bottons-expanded form a.product-wishlist-button {
	margin: 0 10px;
}
.product-bottons-expanded form .qty-custom label {
	font-size: 15px;
  margin-right: 10px;
}
.product-bottons-expanded form .qty-custom {
	display:flex;
  align-items: center;
  margin:0 10px 0 0;
}
.product-bottons-expanded form .qty-custom .number-input {
	width: 80px;
  height: 30px;
} 
.product-bottons-expanded form .qty-custom .number-input input{
	height: 28px;
  line-height: 28px;
  font-size: 15px;
}
.product-bottons-expanded form .qty-custom .number-input a  {
	height: 28px;
  line-height: 28px;
}
.product-bottons-expanded form .product-buttons a {
	font-size: 13px;
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  color: #fff;
}
.add-tocart-button_mobile {
	display:none;
}
.product-bottons-expanded form .product-buttons a.text-center {
	width: 75px;
}
.product-bottom-expanded.title-position-center form {
  align-items: center;
}
.product-bottom-expanded.title-position-center form .qty-custom {
	margin: 0;
}
.product-bottons-expanded form .qty-custom .number-input a svg {
	height: 10px;
  width: 10px;
}
  .text-ms {
  	font-size: 13px;
  }
  .text-underline-hover:hover {
    text-decoration: none!important;
}
  .filter-icon-mobile {
  	display:none;
  }
.filter-icon-mobile > a {
  width: 70px;
  background: var(--color-primary);
  height: 28px;
  line-height: 28px;
  display: block;
  color: #fff;
  text-align: center;
  font-size: 13px;
}
.filter-icon-mobile > a > i{
  color: #fff;
  font-size: 13px;
}
 .collection-sidebar {
  	min-width: 263px;
    margin-right: 30px;
   	margin-bottom:20px;
  }
  .filter-categories > p {
  	color: #BD8893;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
  }
  .filter-categories li a {
  	color: #000;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 15px;
    display: block;
  }
  .filter-categories li a.category-bold
  {
  	font-weight: 600;
  }
  .filter-categories li {
  	position: relative;
  }
  .filter-categories  li i {
  	position: absolute;
    -webkit-text-stroke: 1px #fff;
    top: 0;
    right: 0;
    color: #BD8893;
  }
  li > .filter-subcat {
    display:none;
    padding-left: 15px;
  }
  li.active > .filter-subcat {
  	display:block;
  }
  .collection-filter_brands {
  	margin-top: 40px;
  }
  .filter-list_item input {
  	margin: 0;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    z-index: 1;
    left: 0;
  }
  .filter-list_item span.checkmark {
  	position: absolute;
    top: 5px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #fff;
    border: 1px solid #999;
    transition: all .2s ease-in-out;
  }
  .filter-list_item span.checkmark::after {
  	content: "";
    position: absolute;
    opacity: 0;
    transition: opacity .2s ease-in-out;
  }
  .filter-list_item span.checkmark::after {
  	left: 50%;
    top: 50%;
    width: 6px;
    height: 12px;
    margin-left: -3px;
    margin-top: -7px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .filter-list_item input:checked ~ .checkmark {
    background: #FA7595;
    border-color: transparent;
}
  .filter-list_item input:checked ~ .checkmark::after {
  	opacity: 1;
    transition: opacity .2s ease-in-out;
  }
  
  .collection-filter_brands > form  p {
  	font-size: 16px;
    font-weight: 700;
    padding-bottom: 15px;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 20px;
  }
  .collection-filter_brands > form .filter-brands label {
  	font-size: 13px;
    margin-left: 30px;
  }
  .filter-resset-btn {
  	margin-top: 40px;
  }
  .filter-resset-btn a {
    font-size: 14px;
    color: #999;
    border: 1px solid #999;
    padding: 8px 13px;
    text-align: center;
    font-family: 'Nunito' !important;
    font-weight: 600 !important;
}
  .price-filter {
  	margin-bottom: 40px;
  }
  #collection-filter-price {
    height: 5px;
    border: 1px solid #ddd;
    background: #ddd;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: 3px 4px 8px 8px;
    position: relative;
  }
  #collection-filter-price > span.hidden {
  	display: none;
  }
  #collection-filter-price .ui-slider-range {
  	background-color: #FA7595;
    margin: -1px 0 0 -1px;
    position: absolute;
    height: 5px;
  }
  #collection-filter-price .ui-slider-handle {
  	display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    border: 0;
    top: -6px;
    border: 1px solid #2C8D86;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin-left: -10px;
    cursor: col-resize;
    background-color: #fff;
    outline: none;
    z-index: 1;
    cursor: pointer;
  }
  #collection-filter-price .ui-slider-range {
  	background-color: #FA7595;
    /* border: 1px solid #C5977D; */
    margin: -1px 0 0 -1px;
    position: absolute;
    height: 5px;
  }
  .price-filter-input li {
  	display:inline-block;
  }
  .price-filter-input li:first-child {
  	font-size: 13px;
  }
  .price-filter-input li input {
  	border: none;
    width: 55px;
    padding: 0px;
    margin-bottom: 8px;
    font-size: 13px;
    background: transparent;
  }
  .filter-list {
  	position: relative;
    margin-bottom: 6px;
  }
  .filter-list_item-name {
  	margin-left: 25px;
    font-size: 13px;
  }
  .filter-list_item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  }
  .select__item {
    font-size:13px;
    padding: 2px 10px;
  }
  .js-select__dropdown.select__dropdown {
    padding-top:0px;
    margin-top:0px;
  }
  .checkmark-radio {
  	position: absolute;
    top: 4px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #999;
    transition: all .2s ease-in-out;
  }
  .filter-list_item:hover input ~ .checkmark-radio {
  	background-color: #ccc;
    border: 1px solid #FA7595;
  }
  .filter-list_item input:checked ~ .checkmark-radio {
  	background-color: #FA7595;
    border: none;
  }
  .checkmark-radio:before {
  content: "";
  position: absolute;
  display: none;  
}
 .checkmark-radio:before {
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    margin-top: -4px;
    margin-left: -4px;
}
 .filter-list_item input:checked ~ .checkmark-radio:before {
  	display: block;
  }
  .filret-mobile-close {
  	display: none;
  }
/* ======================= collection Page end============== */

/*=========PRODUCT PAGE==============*/
.product-configure-options {
	  display: flex;
    flex-wrap: wrap;
}
.product-configure-options .product-configure-options-option:not(:last-child) {
	margin-right: 15px;
}
.js .slideshow--transition-slide .slideshow__item--selected > .main-product-border-transparent {
	border: none;
}
.container-custom.custom-product-wraper {
	padding-top: 70px;
}
.in-stock p {
  font-size: 15px;
}
.delivery-title {
	font-size: 15px;
}
.product__price {
	color: #F74570;
}
.text-component>*:last-child {
	font-size: 15px;
}
.qte-custom {
	display: flex;
  align-items: baseline;
  padding-bottom: 30px;
}
.form-label {
  font-size: 15px;
  font-weight: 600;
  margin-right: 17px;
}
.qty-button line {
	color: #F74570;
}

.add-tocart-button i {
	color: #FFFFFF;
  margin-right: 10px;
}
.product-buttons .product-wishlist-button {
  outline: none;
  background-color: transparent;
  border: 1px solid #999;
  height: 42px;
  color: #FFFFFF;
  padding: 12px 12.5px;
  font-size: 15px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
.product-buttons .product-wishlist-button i {
	color: #999;
}
.product-content {
	font-size: 15px;
}
.related-products-title {
  text-align: center;
  padding-bottom: 22px;
  padding-top: 72px;
  font-size: 42px;
}
.usp-wrapper.usp-on-product {
	padding: 0px;
}
.product-title {
	font-size: 24px;
	font-weight: 600;
  margin-bottom: 13px;
}
.rating {
	margin-bottom: 20px;
}
.product-description {
	margin-top: 15px;
  margin-bottom: 30px!important;
}
.tabs .tabs__control {
	font-size: 15px;
}
.review-content {
	font-size: 15px;
}
.owl-carousel.owl-usp .owl-item {
	display: flex;
  justify-content: center;
}
.owl-carousel.owl-usp .owl-item img {
	width: 35px;
}
.owl-carousel.owl-usp .owl-dots {
	display: none;
}
.owl-carousel.owl-usp .owl-nav {
	display: none;
}
.owl-carousel.owl-usp .owl-nav button {
	position: absolute;
  top: 0;
}
/* ------------ */
.owl-carousel.owl-usp-3-item .owl-item {
	display: flex;
  justify-content: center;
}
.owl-carousel.owl-usp-3-item .owl-item img {
	width: 35px;
}
.owl-carousel.owl-usp-3-item .owl-dots {
	display: none;
}
.owl-carousel.owl-usp-3-item .owl-nav {
	display: none;
}
.owl-carousel.owl-usp-3-item .owl-nav button {
	position: absolute;
  top: 0;
}
.spec-table__cell.spec-table__cell--th {
  border-right: 1px solid #ddd;
  padding-left: 0px;;
}
.spec-table__cell {
  padding-left: 20px;
}
/*=========END PRODUCT PAGE==============*/

/*========PRODUCTS===========*/
.products-cart {
	grid-column: 4;
  display: flex;
  justify-content: flex-end;
}
.custom-price {
  grid-column: 1;
}
.products-cart a .fa-shopping-cart {
	font-size: 15px;
  color: #999999;
  padding-right: 11px;
}
.products-cart a .fa-heart {
	font-size: 15px;
  color: #CAA1A1;
}
.product-wish-list {
	grid-column: 5;
}
/*=========END PRODUCTS=================*/

/*=========ABOUT US PAGE==============*/
.about-us-title {
  padding: 0px 110px;
}
.about-us-title h1 {
	font-size: 42px;
  padding-bottom: 30px;
  padding-top: 116px;
  font-weight: 500;
}
.about-us-title p {
	font-size: 15px;
  padding-bottom: 20px;
  line-height: 25px;
}
.about-us-hero.container-custom {
	padding-bottom: 120px;
  margin-top:40px;
}
.abou-us-text-component {
  display: flex;
  align-items: CENTER;
  justify-content: space-between;
}
.about-us-page-content,
.about-us-banner{
  width: 48%;
}
.about-us-page-content h1 {
	font-size: 36px;
  padding-bottom: 20px;
  font-weight: 500;
}
.about-us-page-content p {
	font-size: 15px;
  line-height: 22px;
  margin-bottom: 20px;
}
.about-us-content-section {
	padding: 60px 0;
}
.contact-us-section {
  border: 1px solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px;
  margin-top: 120px!important;
  margin-bottom: 124px!important;
}
.contact-us-section h1 {
	font-size: 42px;
  font-weight: 500;
}
.contact-us-section>.button {
  height: 50px;
  line-height: 28px;
  padding: 12px 40px;
  font-size: 20px;
}
.contact-us-section.contact-us-section-style-2 {
	display: flex;
  flex-direction: column;
}
.contact-us-section.contact-us-section-style-2 h1 {
	margin-bottom: 40px;
}
.bredcrumb-items.breadcrambs-center {
	display: flex;
  flex-direction: column;
  align-items: center;
  padding: 27px 0px;
}
.bredcrumb-items.breadcrambs-center > h1,
.bredcrumb-items.breadcrambs-right > h1,
.bredcrumb-items.breadcrambs-left > h1{
	margin-bottom: 20px;
}
.bredcrumb-items.breadcrambs-right {
	display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 27px 0px;
}
.bredcrumb-items.breadcrambs-left {
	display: flex;
  flex-direction: column;
  align-items: start;
  padding: 27px 0px;
}
.bredcrumb-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 27px 0px;
  justify-content: space-between;
}
.bredcrumb-items h1 {
/* 	color: #fff; */
  font-weight: 500;
  font-size: 38px;
}
.breadcrumbs__item {
/* 	color: #fff; */
  font-size: 18px;
}
.breadcrumbs__item i {
	color: #fff;
}
.breadcrumbs__item span {
	color: #fff;
}
.breadcrumbs-textpage-bg-image {
	height: 330px;
  background-size: cover;
  display: flex;
  align-items: center;
}
/*=========END ABOUT US PAGE==============*/

/*================PROFILE PAGE=========================*/
.gui-page-title {
	text-align: left;
  font-size: 30px;
  margin-bottom: 20px;
}
.gui.gui-account .gui-col2-left-col2 p strong {
  font-size: 16px;
  font-weight: 600;
  display: block;
}
.gui.gui-account .gui-col2-left-col2 p {
	font-size: 16px;
  font-weight: 500;
  color: #999999;
}
.gui-block .gui-block-title {
	background-color: #F2F2F2;
  border-bottom: 1px solid #ccc;
  padding: 15px 15px;
}
.gui-block-title #gui-account-information-block-title {
  font-size: 16px;
  font-weight: 600;
}
.gui-block-subtitle {
	font-weight: 600;
  font-size: 16px;
}
.gui-block-subcontent {
  color: #666;
  line-height: 30px;
}
.gui-block-subcontent:first-child {
  font-weight: 600;
}
.gui-block-subcontent .gui-small {
	color: #F74570;
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline!important;
}
.gui-block-subtitle>a {
  color: #999999!important;
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
}
.gui-block-subtitle>a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f304";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: #999999;
  padding-left: 5px;
  line-height: 16px;
  margin: 0;
  text-indent: 0;
  float: left;
}
.gui-block.gui-account-links .gui-block-title {
	display: none;
}
.gui-col2-left .gui-col2-left-col1 .gui-block {
	border: none;
}
.gui-block.gui-account-links .gui-block-content {
	padding: 0px 15px;
}
.gui-block-content .gui-block-linklist li {
	border: 1px solid #d3d3d4;
  margin-bottom: 15px;
}
.gui-block-content .gui-block-linklist li>a {
	color: #999999;
  background-color: #fff;
  font-size: 16px;
  text-align: left;
  padding: 13px 20px;
}

.gui-block-content .gui-block-linklist .gui-active a {
	color: #fff;
  background-color: #B1B1B9;
  font-weight: normal;
}
.gui-form input {
	font-size: 14px;
  color: #000;
  font-weight: 600;
  border: 1px solid #ddd;
  padding: 12px 0px 12px 15px;
  height: 44px;
}
.gui-select select {
	font-size: 14px;
  color: #000;
  font-weight: 600;
  border: 1px solid #ddd;
  padding: 12px 0px 12px 15px;
  height: 44px;
}
.gui-field {
	position: relative;
}
/* .gui-field label {
  font-size: 14px;
  color: #999999;
  position: absolute;
  top: -15px;
  left: 15px;
  padding: 2px;
  z-index: 1;
} */
/* .gui-field label:after {
  content: " ";
  background-color: #fff;
  width: 100%;
  height: 15px;
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: -1;
} */
#gui-block-password .gui-form .gui-checkbox > label {
	line-height: unset;
}
#gui-block-password .gui-form .gui-checkbox > label:after {
	background: transparent;
}
.gui-input, .gui-text, .gui-select, .gui-number {
	border-color: transparent!important;
}
.gui-input-phone-number-code-flag {
	display: none;
}
.gui-input-phone-number .gui-input-phone-number-code-placeholder {
  color: #999;
  top: 5px!important;
  left: 10px!important;
  font-size: 14px!important;
}
.gui-input-phone-number #gui-form-details-phone-number {
  padding-left: 64px!important;
}
.gui-buttons .gui-button-small {
	height: 42px!important;
  line-height: 21px!important;
  color: #FFFFFF!important;
  padding: 12px 35px!important;
  font-size: 15px!important;
  text-align: center!important;
  display: inline-block!important;
  background-color: #FA7595;
  border: none!important;
  width: unset;
}
.gui-buttons .gui-left .gui-button-link {
    display: block;
}
.gui-required {
	font-size: 16px;
  color: #999999;
}
.gui-checkbox {
  display: flex;
  align-items: center;
}
.gui-form .gui-checkbox label, .gui-form .gui-radio label {
	font-size: 16px;
	font-weight: 700;
	padding-bottom: 0px;
  color: #000;
  position: sticky;
}
.gui-checkbox [type="checkbox"]:checked {
	background-color: red!important;
}
.gui-input, .gui-text {
	border: none!important;
}
.gui-input.gui-focus input:focus {
  border: 1px solid #ddd;
}
.gui-text #gui-form-message {
	border: 1px solid #DDDDDD;
  font-size: 16px;
}
.gui-valign-top {
	width: 70px;
}
.gui-table thead {
	display: none;
}
.gui-table tbody tr td>.gui-button-small {
  color: #fff;
  font-size: 12px!important;
  background-color: #FA7595;
  border: none!important;
  padding: 0px 10px;
}
.gui-table tbody tr td>.gui-nowrap {
  font-size: 13px!important;
}
.gui-table tbody tr td>.gui-button-small:before {
	font-family: "Font Awesome 5 Free";
  content: "\f07a";
  padding-right: 12px;
  vertical-align: middle;
  font-weight: 900;
  color: #fff;
}
.gui-block-content .gui-table {
	border: none;
}
.gui-table tbody tr td a {
	font-size: 15px;
  font-weight: 600!important;
}
.gui-action.gui-action-delete {
	background-image: none!important;
}
.gui-action.gui-action-delete:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1f8";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: #999999;
  padding-left: 5px;
  line-height: 16px;
  margin: 0;
  text-indent: 0;
  float: left;
}
.gui-block .gui-block-content .gui-form .gui-col2-equal {
	margin-top: 20px;
}
.gui-form label em {
	display: none;
}
.gui-required {
	text-align: left;
}
.gui-buttons {
  margin: 20px -73px 0px -15px;
  padding: 0px 0px;
  float: left;
}
#gui-form-review {
   border: 1px solid #ddd;
}
.gui-radio {
	display: flex;
  align-items: center;
}
.gui-col3-equal aside .gui-col3-equal-col1 .gui-block-content form .gui-buttons .gui-right {
	margin-left:0px!important;
  margin-top: 20px;
}
.gui-col3-equal aside .gui-col3-equal-col2 .gui-block-content form .gui-buttons .gui-right {
	margin-left:0px!important;
  margin-top: 20px;
}
#gui-form-cart .gui-form .gui-table table tbody tr {
  border: 1px solid #ededed;
  padding: 15px 0px;
}
/*================PROFILE PAGE=========================*/

/*===================CONTACT US PAGE===========================*/
#gui-wrapper .gui-page-title {
	display: none;
}
.gui-block.gui-margin.gui-div-faq-links {
	display: none;
}
.gui.gui-faq .gui-col2-right {
	display: flex!important;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions {
  float: none;
  width: 50%;
}

.gui-col2-right .gui-col2-right-col2.gui-div-faq-right {
  float: none;
  width: 50%;
}
.gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form {
  border: none;
}
.gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-title {
	background-color: transparent;
  border: none;
  font-size: 30px;
  font-weight: 500;
  padding: 15px 0px!important;
}
.gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-title strong {
    color: #000;
    font-weight: 600;
    font-family: 'Nunito' !important;
    font-size: 30px;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-buttons.gui-border {
  border-top: none;
  width: 100%;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-buttons.gui-border .gui-right {
  float: none;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-form {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-form .gui-field {
  width:calc(50% - 10px);
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-form .gui-field:nth-child(6) {
	width:100%;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-form .gui-field label {
    position: initial;
    font-size: 13px;
    color: #000;
    font-family: 'Nunito' !important;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-form .gui-field .gui-input input {
  font-weight: 400;
  background-color: #F9F9F9;
  border: 1px solid #EBEBEB;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-form .gui-field .gui-text #gui-form-message {
  border: 1px solid #ebebeb;
  font-size: 14px;
  background-color: #f9f9f9;
  height: 140px;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content {
	padding: 0px;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions {
	padding: 15px 15px 15px 63px;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions h1 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    font-family: 'Nunito' !important;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions p {
	font-size: 15px;
  margin-bottom: 30px;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions .contact-info-wrapper {
	display: flex;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions .contact-info-wrapper h3 {
	font-size: 15px;
  font-weight: normal;
  padding-bottom: 5px;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions .contact-info-wrapper h3>span {
	display: block;
  font-size: 15px;
  font-weight: 100;
  color: #999999;
  padding-top: 7px;
}
.gui-col2-right .gui-col2-right-col1.gui-div-faq-questions .contact-info-wrapper div>i {
	
  font-size: 11px;
  border: 1px solid ;
  padding: 9px;
  margin-right: 15px;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-buttons.gui-border .gui-right .gui-button-small {
/* 	background-color: #FA7595!important; */
}

/*===================END CONTACT US PAGE===========================*/

/* ==================FOOTER=============== */
.container-custom.custom-footer-wrapper {
  display: flex;
  padding: 60px 0px 60px 0px;
  margin-top: 72px;
}
.footer-social {
  width: 50%;
  padding-right: 73px;
}
.footer-social img {
  width: auto;
  height: 70px;
  object-fit: contain;
}
.footer-social p {
  font-size: 15px;
  padding-top: 20px;
  font-weight: 500;
}
.footer-social ul {
  display: flex;
  flex-wrap: wrap;
}
.footer-social ul li {
  padding: 30px 35px 0px 0px;
}
.footer-social ul li a i {
  font-size: 20px;
}
.footer-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}
.footer-links ul {
  flex: 0 0 33.3333%;
}
.footer-links form {
	width: 100%;
}
.footer-links ul h1 {
    font-size: 20px;
    font-weight: 500 !important;
    margin-bottom: 17px;
}
.footer-links ul li  {
  margin-bottom: 17px;
}
.footer-links ul li a  {
  font-size: 16px;
}
.newsletter-title h4 {
  font-size: 16px;
  padding: 30px 0px 10px 0px;
  font-weight: 400;
}
.newsletter-input {
  position: relative;
  display: inline-block;
}
.newsletter-input input {
    font-size: 13px;
    width: 380px;
    height: 50px;
    padding-right: 125px;
    border: 1px solid #dddddd;
    padding-left: 40px;
    outline: none;
    color: #000;
    font-family: 'Boita' !important;
}
.newsletter-input button {
  height: 40px;
  line-height: 20px;
  padding: 12px 31px;
  font-size: 15px;
  text-align: center;
  outline: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 20px);
  right: 5px;
}
.newsletter-input i {
  position: absolute;
  top: calc(50% - 7px);
  left: 15px;
  font-size: 15px;
  color: #999999;
}
.copyright-block .container-custom {
  display: flex;
  justify-content: space-between;
  padding: 21px 0px;
  align-items: center;
}
.copyright-title p {
  color: #FFFFFF;
  font-size: 16px;
}
.payment-method-icons i {
  color: #FFFFFF;
  font-size: 32px;
  padding-right: 15px;
}
.payment-method-icons i:last-child {
  padding-right: 0px;
}
.newsletter-wrapper.newsletter-top {
	display: flex;
  justify-content: center;
  align-items: center;
}
.newsletter-wrapper.newsletter-top .newsletter-title {
	margin-right: 30px;
}
.newsletter-wrapper.newsletter-top .newsletter-title h4 {
	font-size: 24px;
  padding: 0;
}
.newsletter-wrapper.newsletter-top .newsletter-input input {
	width: 490px;
}
/*================== END FOOTER================= */
body .wsa-demobar {
	bottom:0;
  left:0;
  top: unset;
  line-height: 16px!important;
  padding: 10px 35px 10px 20px;
}
body .wsa-demobar > a.close {
	position: absolute;
  top: 0;
  right: 0;
  float: none;
}
body {
	margin-top: 0px!important;
}
.thumbslide__nav-dot_left {
	  position: absolute;
    bottom: calc(50% - 5px);
    left: 0px;
}
.thumbslide__nav-dot_right {
	  position: absolute;
    bottom: calc(50% - 5px);
    right: 0px;
}
/* message styling */
.messages {
	margin: 0 auto;
  text-align: center;
  position: relative;
}
.messages ul.info {
	background-color: #F1C16A;
}
.messages ul.success {
	background-color: #6AF16E;
}
.messages ul.error {
	background-color: #F16A6A;
}
.messages ul {
  max-width: 500px;
  margin: 0 auto;
  border: none;
  box-shadow: 0px 4px 14px rgb(0 0 0 / 12%);
  padding: 25px 20px;
  position: absolute;
  z-index: 9999;
  top: 0px;
  right: 0px;
}
.messages ul li {
  display: flex;
  align-items: center;
  padding-left: 15px;
}
.messages ul li a {
	position: absolute;
  left: 10px;
  top: 5px;
}
.messages ul li a i {
	font-size: 10px;
}
.messages ul.info > li > i {
	color:#ffa500;
  padding-left:10px;
}
.success>li>.fa-check {
	color: #2ecc71;
  font-size: 15px;
  padding-left: 10px;
}
.success>li>.fa-info {
	color: #f1c40f;
  font-size: 15px;
  padding-left: 10px;
}
.success>li>.fa-exclamation {
	color: #e84118;
  font-size: 15px;
  padding-left: 10px;
}
.massage-close {
	display: none;
}
/* .gui-form .gui-checkout-steps.gui-col3-equal > .gui-col3-equal-col1 {
  margin-right: 5%!important;
  width: 58%!important;
} */
#gui-block-billing-address .gui-block-subcontent .gui-col2-equal .gui-col2-equal-col1 .gui-field .gui-input.gui-input-phone-number.js-gui-input-phone-number .js-gui-input-phone-number-code-placeholder.gui-input-phone-number-code-placeholder {
	    width: 47px;
}
.gui-col2-big .gui-col2-big-col2.gui-login-registered #gui-form .gui-block .gui-buttons .gui-right {
	margin-left: 0px;
  margin-top: 15px;
}
.gui-col2-big .gui-col2-big-col2.gui-login-registered #gui-form .gui-block .gui-block-content .gui-form .gui-field .gui-input{
	margin: 20px 0px;
}
.gui.gui-login .gui-buttons .gui-right {
	height: 42px;
}
.gui.gui-review .gui-buttons .gui-right {
	margin-left: 15px!important;
} 
.gui a.gui-button-facebook {
  margin: 0;
  color: #fff;
  padding: 0px;
  background-image: url(facebook-logo.png);
  background-size: 73px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  border: 1px solid #29447E;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 42px !important;
  border-radius: 2px !important;
  position: relative !important;
  width: 153px;
}
.gui a.gui-button-facebook:active {
	background-position: center;
}
.gui a.gui-button-facebook span {
  display: none;
/*   color: #FFFFFF;
  background: #29447e;
  text-align: center;
  line-height: 33px;
  border-top: none;
  border-bottom: none;
  font-size:15px;
  font-weight:400; */
}
/* .gui-button-facebook:before {
  content: "\f39e Facebook";
  color:#424E9C;
  font-size: 15px;
  moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
} */
.custom-product-wraper .rating > a {
	margin-left:10px;
}
.custom-product-wraper .rating > i {
  color: var(--color-primary);
  margin-right:3px;
  font-size:14px;
}
.reviews-rating i {
	color: var(--color-primary);
  margin-right:0px;
  font-size:14px;
}
.tabs .tabs__control {
	border-bottom:2px solid transparent;
}
.s-tabs__link--current, .s-tabs__link[aria-selected="true"] {
	border-color:var(--color-primary);
}
.gui-buttons .gui-right {
  margin-left: 0px!important;
  margin-right: 15px;
}
.gui-col3-equal.gui-checkout-steps .gui-col3-equal-col1 .gui-block-subcontent .gui-col2-equal .gui-col2-equal-col2 .gui-field label {
  background-color: #fff;
  width: auto;
  display: inline-block;
  padding: 0px 5px;
}
.gui-col3-equal.gui-checkout-steps .gui-col3-equal-col1 .gui-block-subcontent .gui-col2-equal .gui-col2-equal-col1 .gui-field label,
.gui-checkout .gui-form .gui-field > label {
  background-color: #fff;
  width: auto;
  display: inline-block;
  padding: 0px 5px;
}
.gui-checkout .gui-form .gui-field {
	margin-bottom:3px;
}
.prod-card .padding-sm h1 {
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
    grid-column-start: 1;
    grid-column-end: 5;
}
.prod-card:not(.in-wishlist) .product-wishlist-button > i:last-child,
.product-buttons .product-wishlist-button i:last-child {
	display:none;  
}
.prod-card.in-wishlist .product-wishlist-button > i:last-child,
.product-buttons.in-wishlist .product-wishlist-button i:last-child {
	display:inline-block;
  color:#fa7595;
}
.prod-card.in-wishlist .product-wishlist-button > i:first-child,
.product-buttons.in-wishlist .product-wishlist-button i:first-child {
	display:none;
}
.header-wishlist-wrapper {
	position:relative;
}
.header-wishlist-wrapper > span {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: #fa7595;
  display: block;
  position: absolute;
  top: -14px;
  right: -12px;
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.gui-login .gui-buttons {
    display: flex;
    align-items: center;
    margin: 0;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.gui-login .gui-buttons * {
	float:none;
  margin-left:0px;
  margin-right:15px;
}
.gui-login .gui-login-registered .gui-buttons {
	margin-top: 0px;
  float: none;
}
.gui-login .gui-login-registered .gui-buttons .gui-left {
    display: block;
}
.gui-login .gui-col2-big-col1 .gui-buttons > .gui-right:first-of-type {
	order:2;
}
.gui-login .gui-col2-big-col1 .gui-buttons > .gui-right:last-of-type {
	order:1;
}
.filter-category li.hard-active > a {
	font-weight:bold;
}
.gui-block-productlist li .gui-block-productlist-text a {
  white-space: nowrap;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: inline-block;
  padding-right: 20px;
}
.gui-block-productlist-text > p {
	font-size:13px;
}
.gui-div-faq-form .gui-buttons,
.gui-account .gui-buttons,
.gui-password .gui-buttons {
	margin:0;
  float:none;
}
.gui-div-faq-form .gui-buttons .gui-right,
.gui-account .gui-buttons .gui-right,
.gui-password .gui-buttons .gui-right {
	margin:0;
  float:none;
}
.gui-account .gui-buttons .gui-right,
.gui-password .gui-buttons .gui-right {
	margin-top:15px;
}
.gui ul.gui-products li .gui-products-option, .gui-block-productlist li .gui-block-productlist-option {
	top:initial;
  margin-top:0px;
  bottom:20px;
}
.gui.gui-faq .gui-col2-right .gui-col2-right-col2.gui-div-faq-right .gui-block.gui-div-faq-form .gui-block-content .gui-buttons.gui-border .gui-right .gui-button-small {
/*   width:210px; */
  text-align:center;
}
.mt20 { margin-top:20px; }
.mt40 { margin-top:40px; }
.mb40 { margin-bottom: 40px; }
.filter-categories li i {
	cursor:pointer;
}
.collection-filter_brands > form p.col-filter-title {
  color:#999999;
  border: none;
  padding-bottom: 0;
  margin-bottom: 5px;
  margin-top: 12px;
  font-size: 15px;
  border-top: 1px solid #EBEBEB;
  padding-top: 12px;
  font-weight:400;
}
.collection-filter_brands > form p.col-filter-title.border-free {
	border:none;
}
.filter-list:first-child {
	margin-top:12px;
}
.filter-list:last-child {
	margin-bottom:12px;
}
.container-custom.messages {
	position:absolute;
}
.qty-custom {
  display: flex;
  align-items: center;
	margin-bottom:25px;
}
.qty-custom .number-input {
	position:relative;
  width:85px;
  height:35px;
  display:inline-block;
  border:1px solid #ebebeb;
}
.qty-custom.qty-costom-underline {
	margin-bottom: 25px;
  border-bottom: 1px solid #fff;
  padding-bottom: 25px;
}
.qty-custom .number-input input {
	text-align:center;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  outline:none;
  border:none;
  height:33px;
  margin: 0;
  text-indent: 15px;
  font-size: 15px;
}
.qty-custom .number-input a {
	position:absolute;
  top:0;
  height:33px;
  background:#fff;
  width:25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-custom .number-input a.qty-minus {
	left:0;
}
.qty-custom .number-input a.qty-plus {
	right:0;
}
.qty-custom .number-input a > svg.icon {
	width: 13px;
  height: 13px;
}
/* #gui-form-details-sameaddress-yes {
	margin-right: 25px;
  float: none;
  line-height: 60px;
} */
.gui-checkout .gui-form .gui-checkout-steps .gui-field .gui-radio label {
/* 	line-height: 52px; */
  display: block;
  margin-left: 20px;
}
/* .gui-checkout .gui-form .gui-checkout-steps .gui-field .gui-radio {
	line-height: 80px;
} */
.product-bottons-expanded form .product-buttons a {
	padding: 8px;
  font-size: 12px;
  margin:0;
}
.product-buttons a:not(:last-child) {
	margin-right: 20px;
  margin-bottom: 15px;
  min-width: 140px;
  padding: 12px;
}
.product-buttons {
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/* Coming Soon */
.coming-soon.coming-soon-bg .solidBG.text-center {
	max-width: 688px;
  margin: 0 auto;
}
.coming-soon {
	background-repeat: no-repeat;
  background-size: cover;
}
.coming-soon .container-custom {
	z-index: 10;
}
.coming-soon-with-gradient:before {
	content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
	background: linear-gradient(265deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 90%) 60%);
}
.comingsoon-section {
	width: 54%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coming-soon-logo {
	margin-bottom: 40px;
}
.coming-soon-logo > a > img {
	width:220px;
  height: auto;
}
.coming-soon-title {
	font-size: 48px;
  font-weight:500;
  margin-bottom: 40px;
	}
.coming-soon-title span {
	font-weight:700;
}
.data-count-down {
	margin-bottom: 60px;
}
.data-count-down li {
	display: inline-block;
  width: 100px;
}
.data-count-down li:not(:last-child) {
	margin-right: 30px;
}
.data-count-down li > p {
	 background-color: #00000014;
  font-size: 42px;
  font-weight:700;
  line-height: 100px;
  margin-bottom: 10px;
}
.data-count-down.solidBG li > p {
	 background-color: #ffffff26;
}
.data-count-down li > span {
	font-size: 16px;
  font-weight: 600;
  display:flex;
}
.coming-soon-newsletter-title {
	font-size:20px;
  font-weight: 500;
  margin-bottom: 35px;
}
/* Coming Soon End */

/* Finde Store */
.address-main-content {
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.address-main-content_items h3 {
	font-size: 24px;
  margin-bottom: 30px;
  font-weight: 500;
}
.address-main-content_items > * {
	margin-bottom: 30px;
}
.address-main-content_list > li {
	font-size: 16px;
  line-height: 20px;
}
.address-main-content_list > li:first-child {
	font-size: 16px;
  font-weight: 700;
} 
.address-main-content_list > li:last-child {
	margin-top: 15px;
  font-weight: 500;
}
.map-container {
	margin: 90px 0 120px 0;
  margin-bottom: 0px;
  height:400px;
}
.map-container .gmap_canvas {
	height: 400px;
}
.findastor-contact-information {
	margin-bottom: 40px;
}
.findastor-contact-information P {
	font-size: 24px;
  margin-bottom: 30px;
}
.findastor-bottom-section {
	display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.findastor-bottom-section > div {
	max-width: 370px;
  text-align:center;
}
.findastor-bottom-section > div > p {
  height: 58px;
	font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}
.findastor-bottom-section > div > ul {
	padding: 15px;
  width: 280px;
  margin: 0 auto;
}
.findastor-bottom-section > div > ul > li {
	font-size: 16px;
}
.findastor-bottom-section > div > ul > li:not(:last-child) {
	margin-bottom: 12px;
}
/* Finde Store END */
/* Workout Program start */
.workout-program-top .breadcrumbs-textpage-bg-image {
	height: 350px;
}
.workout-program-top {
	margin-bottom: 90px;
}
.workout-content h4 {
	font-size: 24px;
  margin-bottom: 40px;
  text-align: center;
}
.workout-content p {
	font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}
.workout-content p > strong {
	font-weight: 700;
}
.text-page-botton-section {
	text-align: center;
}
.text-page-botton-section a {
	width: 230px;
  padding: 12px 10px;
}
.text-page-botton-section a:first-child {
	margin-right: 20px;
}
/* Workout Program end */
/* Ambassabor Program */
.ambassador-content {
	padding-top: 90px;
  display: flex;
  justify-content: space-between;
}
.ambassador-content > div {
	width: 57%;
}
.ambassador-content > .text-page-form {
	width: 40%;
}
.ambassador-content h4 {
	font-size: 30px;
  margin-bottom: 25px;
}
.ambassador-content > div h5 {
	font-size: 18px;
  margin-bottom: 22px;
  font-weight: 700;
}
.ambassador-content > div p,
.ambassador-content > div li{
	margin-bottom: 20px;
  font-size: 15px;
}
.ambassador-content > div ul {
	list-style-type: circle;
}
.ambassador-content > div p:last-child {
	margin-bottom: 30px;
}
.text-page-form ul li {
	position: relative;
  margin-bottom: 40px;
  
}
.ambassador-content .text-page-form ul {
	list-style: none;
}
.text-page-form form {
	margin-top: 52px;
}
.text-page-form form input:focus{
    outline: none;
}
.text-page-form form input {
	border: none;
  padding: 0 15px;
}
.text-page-form ul li label {
	position: absolute;
  font-size: 13px;
  top: -20px;
}
.text-page-form ul:first-child  {
	display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.text-page-form ul:first-child li input {
	width: 210px;
  height: 44px;
}
.text-page-form ul:nth-child(2) li input {
	width: 100%;
  height: 44px;
}
.text-page-form ul li input {
	font-size: 14px;
}
/* Ambassabor Program end */
/* Checkout */
/* .gui.gui-checkout .gui-checkout-steps > .gui-col3-equal-col1 {
	width: 50%!important;
  margin-right: 30px!important;
}
.gui.gui-checkout .gui-checkout-login{
	display: none;
} */
#gui-form-cart-billing-address-title,
#gui-form-cart-shipping-method-title{
	font-size: 30px;
  font-weight:500;
  margin-bottom: 30px;
  display: block;
  color: #000;
}
/* .gui.gui-checkout .gui-field label {
	position: unset;
  font-size: 13px;
  color: #000;
}
.gui.gui-checkout .gui-block-subcontent div:nth-child(3) > div,
.gui.gui-checkout .gui-block-subcontent div:nth-child(5) > div {
	width: 100%;
}
.gui.gui-checkout .gui-block-subcontent #gui-billing-address div.gui-address-row-2 > div,
.gui.gui-checkout .gui-block-subcontent #gui-billing-address div.gui-address-row-3 > div{
	width:100%;
}
.gui.gui-checkout .gui-block-subcontent .gui-radio > label {
	position: absolute;
  line-height: 68px;
}
.gui-form .gui-checkout-steps.gui-col3-equal > .gui-col3-equal-col3 {
	width: 40%!important;
}
.gui-form .gui-checkout-steps.gui-col3-equal > .gui-col3-equal-col2 {
    margin-right: 0%!important;
    width: 40%!important;
}
.gui.gui-checkout #gui-form-comment {
	border: 1px solid #ddd;
} */
#gui-block-review .gui-confirm .gui-checkbox label {
	position: absolute;
  top: 0px;
}
#gui-block-review .gui-confirm-buttons > a {
	  background-color: #fa7595;
    height: 42px;
    line-height: 20px;
    color: #FFFFFF;
    padding: 12px 21px;
    font-size: 15px;
    text-align: center;
    display: inline-block;
    border: none;
}
.out-of-stock-label {
	position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background-color: #ebebeb;
  padding: 0px 6px;
  margin: 0;
  line-height: 100%;
  font-size: 11px;
  color: #ed0b0b;
  height:20px;
  line-height:20px;
}
.homepage-active footer .container-custom.custom-footer-wrapper,
.productpage-active footer .container-custom.custom-footer-wrapper {
	margin-top:0px;
}
.select__button[aria-expanded="true"]+.select__dropdown {
	z-index:9999;
}
a[class^="btn"],
a[class^="button"],
button[class^="btn"],
button[class^="button"],
.filter-resset-btn a {
	transition:all .2s ease-in-out;
  cursor:pointer;
}
.homepage-hero-section {
	min-height:600px;
}
.homepage-hero-section.hero-full-height {
	min-height:calc(100vh - 156px);
}
.usp-top {
	padding:40px 0;
}
.usp-wrapper {
	padding:0px;
}
body .wsa-demobar {
	display:none !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden;
}
html.iphone-loaded .owl-carousel {
	max-width:100vw !important;
}
.gui-checkout .gui-field label:after {
	background-color: transparent;
}
.gui-col3-equal.gui-checkout-steps .gui-col3-equal-col1 .gui-block-subcontent .gui-col2-equal .gui-col2-equal-col1 .gui-field label, .gui-checkout .gui-form .gui-field > label, .gui-col3-equal.gui-checkout-steps .gui-col3-equal-col1 .gui-block-subcontent .gui-col2-equal .gui-col2-equal-col2 .gui-field label {
	background:transparent;
}
footer.margin-remove > div.container-custom.custom-footer-wrapper,
footer.margin-remove > .footer-newsletter-top {
	margin-top:0px;
}
.workout-content .text-page-botton-section a {
	width:auto;
}
.workout-program-top .breadcrambs-left.bredcrumb-items h1,
.workout-program-top .breadcrambs-left.bredcrumb-items nav ol li,
.workout-program-top .breadcrambs-left.bredcrumb-items nav ol li.breadcrumbs__item * {
	color:#000;
}
.workout-program-top {
	position:relative;
}
.workout-program-top:before {
	content:"";
  background: rgb(0 0 0 / 25%);
	position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:0;
}
.product-description {
	position:relative;
}
.product-description > a {
	text-decoration:underline !important;
}
.owl-brands .brand-img {
	object-fit:cover;
  width:auto !important;
}
.header-bg-home-page.header-style-1-hero_bg {
	z-index:9999;
}
/* Checkout */
.header-bg-home-page.header-scrole-active,
.header-bg-home-page {
	transition:all .2s ease-in-out;
}
.breadcrumbs-textpage-bg-image {
	height:330px;
  background-position:right;
}
.header-bg-home-page:not(.header-fixed-to-top) {
	position:absolute;
  background:transparent !important;
}
.header-bg-home-page.header-fixed-to-top {
	position:fixed;
}
.popup-expanded body.header-transparent {
	margin-top:40px;
}
.popup-expanded body.header-transparent.header-top-bar.expanded {
	position:fixed;
  top:0;
}
.popup-expanded body.header-transparent header.header-bg-home-page {
	top:40px;
}
.popup-expanded body.header-transparent header.header-bg-home-page.header-scrole-active {
	top:0px;
}
.header-transparent .popup.popup-is-visible,
.header-transparent .shadow-active {
	z-index:99999;
}
.burger-menu-active.shadow.shadow-active {
	width: calc(100% - 364px);
  right: 0;
  left: initial;
}
body.header-transparent .messages ul,
body.header-transparent .gui-messages ul {
	top:70px;
}
.product-configure-options-option {
	margin-bottom:15px;
}
.out-of-stock p {

}
.out-of-stock-contact {
	color: #ffffff;
  font-size: 17px;
  background: #000;
  padding: 10px 25px;
  margin-top: 10px;
  display: inline-block;
}
.out-of-stock-contact i {
	margin-left:10px;
  color: #fff;
}
.footer-social > a {
	font-size: 15px;
  padding-top: 7px;
  font-weight: 500;
  text-decoration: underline !important;
  margin-bottom: 5px;
  display: block;
}
.footer-social > a i {
	margin-right:10px;
}
.homepage-video video {
	object-fit: fill;
  width: 100%;
}
.about-us-title > p,
.about-us-page-content > p {
  font-size: 19px;
}
.product-bottons-expanded .cartpage-btn.add-tocart-button {
	display:flex;
  align-items:center;
  justify-content:center;
}
.product-image-owl.owl-carousel {
  width: calc(100% - 90px);
  margin-left:90px;
}
.product-image-owl.owl-carousel .owl-dots {
  position: absolute;
  top: 0;
  left: -90px;
  width: 78px;
  height: 100%;
  margin-top: 0;
  display: flex !important;
  flex-direction: column;  
}
.product-image-owl.owl-carousel .owl-dot:first-of-type {
  border-top: 4px solid #ccc;
}
.product-image-owl.owl-carousel .owl-dot {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70px;
  height: 90px;
  border: 1px solid #000 !important;
  border-radius: 0px;
  opacity: .40;
  margin-bottom: 18px;
  box-shadow: none;
}
.product-image-owl.owl-carousel .owl-dot.active {
	background-color:transparent !important;
  opacity:1;
}
.product-image-owl.owl-carousel .owl-nav {
	display:none;
}
.standard-textpage-section {
	margin-top:30px;
}
.instashow-active {
	margin-bottom:-72px;
}
.textpage-video-gallery {

}
.textpage-video-gallery h1 {
	margin:30px 0
}
.textpage-video-gallery .video-gallery-grid > p {
  display: grid;
	grid-template-columns: repeat(3,calc(100% / 3 - 13px));
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.textpage-video-gallery .video-gallery-grid > p * {
	width:100%;
  height:100%;
}
@media(min-width:1024px) {
	.prod-card .products-cart.products-cart-default .cartpage-btn {
    position:relative;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 0 10px;
    margin-right: 5px;
    border-radius: 3px;
    transition:all .3s ease-in-out;
  }
  .prod-card .products-cart.products-cart-default .cartpage-btn span {
    display:inline-block;
    opacity:0;
    margin-right: 4px;
    font-size: 14px;
    padding: 3px 0;
    white-space:nowrap;
    transition:all .3s ease-in-out;
  }
  .prod-card:hover .products-cart.products-cart-default .cartpage-btn span {
    opacity:1;
  }
  .products-cart a .fa-shopping-cart {
    padding-right:0px;
    transition:all .3s ease-in-out;
  }
}
div.in-stock p span {
  font-style: normal;
  margin-left: 15px;
  display: inline-block;
}
div.in-stock p span em {
	font-style:normal;
  font-weight:bold;
  margin-left:5px;
}
.documentation-wrapper > p,
.documentation-wrapper > h1 {
  text-align: center;
}
.documentation-items {
 	position: relative;
  display:flex;
  justify-content:space-between;
}
.header{
 	width: 308px;
  height: 100%;
}
.off  {
  margin-top:1000px
}
.documentation-explanation{  
  width: 60%;
  display: inline-block;
  margin-left: 0;
}
.documentation-side-bar a {
  font-size: 15px;
  font-weight: bold;    
}
.documentation-items a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px 0px 0px;
}
.documentation-explanation section{
  margin: 0px 0px 100px 0px;
}
.documentation-explanation h2{
  text-align: left;
  margin: 0px 0px 50px 0px;
}
.documentation-explanation ul{
  text-align: left;
  margin: 0px 0px 50px 0px;
}
.documentation-sticky > ul > li > a {
	font-weight:bold;
}
.documentation-sticky > ul > li > ul {
  display:none;
}
.documentation-sticky > ul > li.active > ul {
  display:block;
}
.documentation-sticky > ul > li.active i {
 transform:rotate(180deg);
} 
.documentation-sticky {
  position: sticky;
  background: #e2e2e2;
  border-radius: 10px;
  top: 50px;
  width: 35%;
  display: inline-block;
  height: 100%;
  padding: 15px 25px;
  box-shadow: 0px 6px 45px rgb(0 0 0 / 16%);
}
.documentation-sticky > ul > li > ul {
	padding-left:15px;
}
.documentation-sticky a {
	transition:color .4s ease-in-out;
}
.documentation-sticky a.highlight {
	color: #2d6907;
  transition:color .4s ease-in-out;
}
.documentation-sticky > ul > li > a {
	font-size: 16px;
}
.documentation-sticky > ul > li > ul > li > a {
	font-size:14px;
  padding-top:6px;
}
.home-products-rows {
	display: grid;
  grid-template-columns: repeat(4,calc(100% / 4 - 12px));
  grid-gap: 15px;
}
.breadcrumbs-overlay-active {
	position:relative;
}
.breadcrumbs-overlay-active:before {
	content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: transparent linear-gradient(90deg, #00000080 0%, #00000040 51%, #0000001A 100%) 0% 0% no-repeat padding-box;
  z-index:0;
}
.breadcrumbs-overlay-active .bredcrumb-items,
.breadcrumbs-overlay-active .container-custom {
	z-index:1;
}
.owl-carousel .owl-item .hero-img .container-custom.text-center h1 {
	text-align:center;
}
div .about-us-free {
	margin-top:220px;
}
.about-us-free > div {
	display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  flex-wrap:wrap;
}
.about-us-free > div > img {
	width:48%;
  flex:0 0 auto;
  height:auto;
  margin-bottom:90px;
}
.about-us-free > div > div  {
	width:48%;
  flex:0 0 auto;
  margin-bottom:90px;
}
.about-us-free > div > div > h2 {
	color:#84756C;
  font-size:52px;
  font-weight:bold;
  margin-bottom:5px;
}
.about-us-free > div > div > em {
	font-style:normal;
  font-size:30px;
  font-weight:bold;
  color:#999999;
  margin-bottom:30px;
  display:block;
}
.about-us-free > div > div > p {
	font-size:18px;
  color:#000;
  line-height:25px;
}
div.address-main-content {
	display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  justify-content:space-between;
  width:100%;
}
div.address-main-content > div.address-main-content_items {
	width:48%;
  flex:0 0 auto;
  margin-bottom:30px;
}
div.address-main-content > div.address-main-content_items > p {
	font-size:17px;
  color:#000;
  margin-bottom:10px;
}
div.address-main-content > div.address-main-content_items > p strong {
	font-weight:bold;
}
div.address-main-content > div.address-main-content_items > a {
	font-size:17px;
  color:#000;
  font-weight:bold;
  opacity: .8;
}
.navigation-overflow {
  white-space: nowrap;
  max-width: 100%;
  width: 100%;
/*   overflow-y: hidden;
  overflow-x: auto; */
  margin-right: 50px;
  padding-bottom: 10px;
  padding-top: 10px;
}
.navigation-overflow::-webkit-scrollbar {
  height: 6px;
}
.navigation-overflow::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.navigation-overflow::-webkit-scrollbar-thumb {
  background: #888;
}
.navigation-overflow::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.navigation-overflow + ul {
  white-space: nowrap;
  width: auto;
}
.about-us-content h1 {
	font-weight:normal;
}
.about-us-content p {
	font-size:16px;
}
body .gui.gui-checkout span,
body .gui.gui-checkout label,
body .gui.gui-checkout h1,
body .gui.gui-checkout h2,
body .gui.gui-checkout h3,
body .gui.gui-checkout .gui-block-subtitle,
body .gui.gui-checkout .gui-messages li,
body .gui.gui-checkout .order-summary * {
	color:#000 !important;
}
body .gui.gui-checkout input,
body .gui.gui-checkout select,
body .gui.gui-checkout textarea {
	color:#000 !important;
  border:1px solid #454545 !important;
  background: #fff !important;
}
body .gui.gui-checkout .gui-confirm {
	margin-top:15px;
}
body .gui.gui-checkout #gui-block-review .gui-confirm .gui-checkbox label {
	position:initial;
}
body .gui.gui-checkout .gui-confirm-buttons,
body .gui.gui-checkout .gui-confirm-buttons a {
	width:100%;
  text-align:center;
  display:block;
}
body .gui.gui-checkout.gui-checkout-default .gui-buttons a#gui-block-method-continue,
body .gui.gui-checkout.gui-checkout-default .gui-buttons a.gui-button-action {
	color:#000 !important;
  border:1px solid #000 !important;
  margin-left:10px !important;
}
body .gui.gui-checkout.gui-checkout-default .gui-buttons a.gui-button-facebook,
body .gui.gui-checkout.gui-checkout-default .gui-buttons a.gui-button-action {
  margin-left: 15px !important;
}
body .gui.gui-checkout .gui-field label:after {
	display:none !important;
}
body .gui.gui-checkout.gui-checkout-default .gui-section[data-name="review"] .gui-buttons a.gui-button-action {
	color: #fff !important;
  border: 1px solid #48c348 !important;
  margin-left: 15px !important;
  background: #48c348;
  width: 250px;
}
.gui-checkout-steps > div > * {
	opacity:1 !important;
}
.header-min.header-style-1 .header-language,
.header-min.header-style-1-hero_bg .header-language {
	margin-right:20px;
}
.header-min.header-style-1 .header-language .currency,
.header-min.header-style-1-hero_bg .header-language .currency {
	margin-left:6px;
}
.header-min.header-style-1 .header-icons,
.header-min.header-style-1-hero_bg .header-icons {
	display:flex;
  justify-content:flex-end;
}
.header-min.header-style-1 .navigation-overflow,
.header-min.header-style-1-hero_bg .navigation-overflow {
	margin-left:50px;
}
.collection-modes {
	margin-left:auto;
  margin-right:15px;
}
.collection-modes > a:first-of-type {
	margin-right:15px;
}
.collection-products-block.collection-products-list {
  display: flex;
  flex-direction:column;
}
.collection-products-block.collection-products-list .prod-card-list-mode {
	display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow: 0px 6px 50px rgb(0 0 0 / 11%);
}
.collection-products-block.collection-products-list .prod-card__img-wrapper {
	width:28%;
}
.collection-products-block.collection-products-list .product-style-list {
	width:70%;
  padding-right:15px;
}
.collection-products-block.collection-products-list .product-style-list h1 a.product-card__title {
	font-size:20px !important;
  font-weight:bold;
}
.collection-products-block.collection-products-list .product-style-list .prod-card__price {
	font-size:17px;
}
.collection-products-block.collection-products-list .product-style-list .prod-card__old-price {
	font-size:15px;
}
.product-image-wrap {
	position:relative;
}
.product-share {
	position:absolute;
  left:0;
  bottom:0;
  z-index: 10;
  cursor: pointer;
}
.product-share > ul {
	opacity:0;
  visibility:hidden;
  transition:opacity .3s ease;
  width: 200px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -9px;
  background: #fff;
  padding: 10px;
  color: #fff;
  box-shadow: -15px 25px 50px rgb(40 56 74 / 5%);
}
.product-share:hover > ul {
	opacity:1;
  visibility:visible;
  transition:opacity .3s ease;
}
.product-share > ul > li > a {
	width:38px;
  height:38px;
  line-height:38px;
  text-align:center;
  display:inline-block;
  border-radius:50%;
  color:#fff;
}
.product-share > ul > li > a i {
	color:#fff;
}
.product-share > ul > li.mail > a {
  background-color: #05f281;
}
.product-share > ul > li.fb > a {
  background-color: #3C599F;
}
.product-share > ul > li.tw > a {
  background-color: #4FC1E9;
}
.product-share > ul > li.whatsapp > a {
  background-color: #25D366;
}
.product-brand-noimage {
	display: block;
  margin-bottom: 12px;
  font-size: 15px;
  color: #3a3a3a;
}
.homepage-tags-wrapper {

}
.homepage-tags-wrapper div > a {
	display: inline-block;
  padding: 5px 15px;
  background: #f9e6b2;
  margin-right: 10px;
  font-size: 15px;
  margin-bottom: 10px;
}
.gui a.gui-button-large, .gui a.gui-button-small {
	background-color: #cccccc !important;
  color: #000 !important;
}
.container-custom h1 {
    font-weight: 500 !important;
    font-size: 42px;
    font-family: 'Nunito' !important;
    letter-spacing: 0px !important;
    text-transform: capitalize;
}
._pimg_sliderthumbnail 
 .slick-list {
    margin-top: 70px;
}
._img-mag_thum img {
    object-fit: cover;
    object-position: center;
}
del.prod-card__old-price {
    font-weight: 600;
}
body del.prod-card__old-price {
    font-weight: 400;
    color: #999;
    font-size: 16px;
    display: block;
}
body .prod-card__price {
    font-family: 'Nunito' !important;
    font-weight: bold;
    font-size: 14px !important;
    color: #000;
}