@-ms-viewport {
  width: device-width;
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 200;
  src: url("../css/dm-sans-200.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 200;
  src: url("../css/dm-sans-200-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../css/dm-sans-300.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 300;
  src: url("../css/dm-sans-300-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../css/dm-sans.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../css/dm-sans-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  src: url("../css/dm-sans-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 500;
  src: url("../css/dm-sans-500-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../css/dm-sans-600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 600;
  src: url("../css/dm-sans-600-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../css/dm-sans-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../css/dm-sans-700-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 900;
  src: url("../css/dm-sans-900.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 900;
  src: url("../css/dm-sans-900-italic.woff2") format("woff2");
}

@font-face {
  font-display: block;
  font-family: "Icons";
  font-style: normal;
  font-weight: normal;
  src: url("../css/icons.woff") format("woff");
}

:root {
  ---rem: 100px;

  ---animation-duration: 0.2s;
  ---animation-timing-function: linear;

  ---color-main: 230, 238, 239;
  ---color-main-rgb: rgb( 230, 238, 239 );

  ---color-main-: 109, 4, 254;
  ---color-main-rgb-: rgb( 109, 4, 254 );

  ---color-sub: 218, 176, 26;
  ---color-sub-rgb: rgb( 218, 176, 26 );

  ---color-success: 92, 217, 120;
  ---color-success-rgb: rgb( 92, 217, 120 );

  ---color-error: 255, 0, 0;
  ---color-error-rgb: rgb( 255, 0, 0 );

  ---color-warning: 218, 176, 26;
  ---color-warning-rgb: rgb( 218, 176, 26 );

  ---color-font: 127, 117, 142;
  ---color-font-rgb: rgb( 127, 117, 142 );

  ---color-font-: 6, 16, 17;
  ---color-font-rgb-: rgb( 6, 16, 17 );

  ---color-border: 200, 209, 210;
  ---color-border-rgb: rgb( 200, 209, 210 );

  ---color-first: 255, 255, 255;
  ---color-first-rgb: rgb( 255, 255, 255 );

  ---color-first-: 6, 16, 17;
  ---color-first-rgb-: rgb( 6, 16, 17 );

  ---container: calc( 15.28 * var(---rem) );

  ---padding: calc( ( 100vw - var(---container) ) / 2 );
  ---padding-: calc( var(---padding) * -1 );

  ---grid: calc( 1 * var(---rem) );
  ---grid-: calc( -1 * var(---grid) );

  ---font: "DM Sans", Verdana, Arial, Helvetica, sans-serif;
}

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, main {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 625%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  line-height: 1;
  font-family: sans-serif;
  font-size: 0.16rem;
  text-align: left;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

details summary::-webkit-details-marker {
  display: none;
}

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

caption {
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
}

pre {
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}

address {
  font-style: normal;
  line-height: inherit;
}

b,
strong {
  font-weight: 700;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

em {
  font-style: italic;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

button,
[type="reset"],
[type="submit"],
[type="button"] {
  -webkit-appearance: button;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="file"]::file-selector-button {
  display: none;
}

::-webkit-input-placeholder {
  color: inherit;
}

:-moz-placeholder {
  color: inherit;
  opacity: 1;
}

::-moz-placeholder {
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  color: inherit;
}

::-ms-input-placeholder {
  color: inherit;
}

::placeholder {
  color: inherit;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

fieldset {
  min-width: 0;
}

legend {
  max-width: 100%;
  white-space: normal;
  color: inherit;
  display: block;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  resize: vertical;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2 
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

output {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

html {
  background: url("../css/indexx.png") center 20px no-repeat;
  height: 100%;
}

body {
  color: rgb( var(---color-font-) );
  font-family: var(---font);
  letter-spacing: 0.012em;
  opacity: 1;
  word-spacing: 0.016em;
}

.invisible:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

[class^="icon"]:before,
[class^="icon"]:after, 
[class*=" icon"]:before,
[class*=" icon"]:after {
  font-family: "Icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-add:before,
.icon-add:after {
  content: "\e919";
}

.icon-down:before,
.icon-down:after {
  content: "\e910";
}

.icon-close:before,
.icon-close:after {
  content: "\e90f";
}

.icon-account:before,
.icon-account:after {
  content: "\e903";
}

.icon-arrow-left:before,
.icon-arrow-left:after {
  content: "\e911";
}

.icon-arrow-right:before,
.icon-arrow-right:after {
  content: "\e905";
}

.icon-edit:before,
.icon-edit:after {
  content: "\e917";
}

.icon-half-arrow-left:before,
.icon-half-arrow-left:after {
  content: "\e913";
}

.icon-half-arrow-right:before,
.icon-half-arrow-right:after {
  content: "\e908";
}

.icon-check:before,
.icon-check:after {
  content: "\e912";
}

.icon-delete:before,
.icon-delete:after {
  content: "\e918";
}

.icon-dots-up:before,
.icon-dots-up:after {
  content: "\e907";
}

.icon-dots-down:before,
.icon-dots-down:after {
  content: "\e900";
}

.icon-dots-left:before,
.icon-dots-left:after {
  content: "\e915";
}

.icon-dots-right:before,
.icon-dots-right:after {
  content: "\e916";
}

.icon-basket:before,
.icon-basket:after {
  content: "\e901";
}

.icon-facebook:before,
.icon-facebook:after {
  content: "\e90a";
}

.icon-instagram:before,
.icon-instagram:after {
  content: "\e90b";
}

.icon-linkedin:before,
.icon-linkedin:after {
  content: "\e90c";
}

.icon-pinterest:before,
.icon-pinterest:after {
  content: "\e921";
}

.icon-more-up:before,
.icon-more-up:after {
  content: "\e909";
}

.icon-more-down:before,
.icon-more-down:after {
  content: "\e914";
}

.icon-radio:before,
.icon-radio:after {
  content: "\e926";
}

.icon-telegram:before,
.icon-telegram:after {
  content: "\e90d";
}

.icon-search:before,
.icon-search:after {
  content: "\e902";
}

.icon-star:before,
.icon-star:after {
  content: "\e906";
}

.icon-wish:before,
.icon-wish:after {
  content: "\e904";
}

.icon-twitter:before,
.icon-twitter:after,
.icon-x:before,
.icon-x:after {
  content: "\e90e";
}

.icon-coupon:before,
.icon-coupon:after {
  content: "\e91a";
}

.icon-user:before,
.icon-user:after {
  content: "\e91b";
}

.icon-phone:before,
.icon-phone:after {
  content: "\e923";
}

.icon-notice:before,
.icon-notice:after {
  content: "\e920";
}

.icon-bill:before,
.icon-bill:after {
  content: "\e91c";
}

.icon-history:before,
.icon-history:after {
  content: "\e91d";
}

.icon-marker:before,
.icon-marker:after {
  content: "\e91e";
}

.icon-info:before,
.icon-info:after {
  content: "\e91f";
}

.icon-loading:before,
.icon-loading:after {
  content: "\e925";
}

.content {
  color: rgb( var(---color-font-) );
  font-size: calc( 0.20 * var(---rem) );
  font-weight: 300;
  line-height: 1.5em;
}

.content a:not([class^="button"]):not([class*=" button"]) {
  color: inherit;
  text-decoration: none;
  transition: color var(---animation-duration) var(---animation-timing-function);
}

.content a:not([class^="button"]):not([class*=" button"]):hover,
.content a:not([class^="button"]):not([class*=" button"]):focus {
  color: rgb( var(---color-main-) );
}

.content a[class*="icon"] {
  align-items: center;
  display: inline-flex;
  gap: 1em;
}

.content a.icon-dots-left:after {
  display: none;
}

.content a.icon-dots-right:before {
  display: none;
}

.content div, .content address, .content article,
.content aside, .content blockquote, .content details,
.content dialog, .content fieldset, .content figcaption,
.content figure, .content footer, .content form, .content h1, .content h2,
.content h3, .content h4, .content h5, .content h6,
.content header, .content hgroup, .content hr,
.content main, .content nav, .content p, .content pre,
.content section, .content table, .content ul, .content ol,
.content img {
  margin-bottom: 2em;
}

.content div:last-child, .content address:last-child, .content article:last-child,
.content aside:last-child, .content blockquote:last-child, .content details:last-child, .content dialog:last-child,
.content fieldset:last-child, .content figcaption:last-child, .content figure:last-child,
.content footer:last-child, .content form:last-child, .content h1:last-child, .content h2:last-child,
.content h3:last-child, .content h4:last-child, .content h5:last-child, .content h6:last-child,
.content header:last-child, .content hgroup:last-child, .content hr:last-child,
.content main:last-child, .content nav:last-child, .content p:last-child, .content pre:last-child,
.content section:last-child, .content table:last-child, .content ul:last-child, .content ol:last-child,
.content img:last-child {
  margin-bottom: 0;
}

.content h1 {
  font-size: 4em;
  margin-bottom: 0.67em;
  margin-top: 0.67em;
}

.content h2 {
  font-size: 3em;
  margin-bottom: 0.83em;
  margin-top: 0.83em;
}

.content h3 {
  font-size: 2.34em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.content h4 {
  font-size: 2em;
  margin-top: 1.33em;
  margin-bottom: 1.33em
}

.content h5 {
  font-size: 1.67em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
}

.content h6 {
  font-size: 1.34em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
}

.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  font-weight: bold;
  line-height: 1.5;
}

.content h1:first-child, .content h2:first-child, .content h3:first-child,
.content h4:first-child, .content h5:first-child, .content h6:first-child {
  margin-top: 0;
}

.content ul, .content ol {
  margin-top: 2em;
  margin-bottom: 2em;
  padding-left: 2em;
}

.content ul li:before {
  background: rgb( var(---color-font-) );
  border-radius: 100%;
  content: "";
  display: inline-flex;
  height: 0.25em;
  margin: 0 0.75em 0 -1em;
  transform: translate(0, -50%);
  vertical-align: middle;
  width: 0.25em;
}

.content ol {
  list-style-type: decimal;
}

.content ol li:not(:last-child) {
  margin-bottom: 1em;
}

.content dl {
  display: grid;
  gap: 0.4em;
  grid-template-columns: 3fr 5fr;
}

.content dt {
  grid-column: 1;
}

.content dd {
  color: rgb( var(---color-font) );
  font-size: 0.8em;
  grid-column: 2;
}

.content blockquote {
  background: rgb( var(---color-main) );
  border-radius: 1.25em;
  padding: 4em 3em;
  position: relative;
}

.content blockquote:before,
.content blockquote:after {
  color: rgb( var(---color-first) );
  font-size: 14em;
  line-height: 0;
  position: absolute;
  pointer-events: none;
}

.content blockquote:before {
  content: "\201c";
  left: 0.2em;
  top: 0.34em;
}

.content blockquote:after {
  bottom: -0.14em;
  content: "\201d";
  right: 0.2em;
}

.table {
  overflow: auto;
}

.content table,
table.content {
  border-collapse: collapse;
  overflow: hidden;
  width: 100%;
}

.content caption {
  font-size: 0.8em;
  margin: 1em 0 0 0;
  padding: 0 2em;
  text-align: left;
}

.content tr {
  border-top: 1px solid rgb( var(---color-border) );
  font-size: 0.8em;
  position: relative;
}

.content :not(tfoot) tr:first-child {
  border: none;
  font-size: 1em;
  font-weight: bold;
}

.content tr:first-child:after {
  background: rgb( var(---color-main) );
  border-radius: 1.5em;
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.content tfoot tr,
.content thead + tbody tr,
.content thead + tbody tr:first-child {
  font-size: 0.8em;
  font-weight: unset;
}

.content tfoot tr:after,
.content thead + tbody tr:after,
.content thead + tbody tr:first-child:after {
  display: none;
}

.content th,
.content td {
  padding: 0.8em 1.6em ;
  position: relative;
}

.content th:not(:first-child):before,
.content td:not(:first-child):before {
  border-left: 1px solid rgb( var(---color-border) );
  bottom: 0.75em;
  content: "";
  left: 0;
  position: absolute;
  top: 0.75em;
}

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

.heading {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

.subheading {
  display: block;
  font-size: 1.6em;
  font-weight: 200;
  line-height: 1.35;
}

.btn {
  background: rgb( var(---color-main) );
  border: none;
  color: rgb( var(---color-main-) );
  cursor: pointer;
  padding: 0.375em 1em;
  text-transform: none;
}

[class^="button"],
[class*=" button"] {
  background: rgb( var(---color-first-) );
  border: max(0.0625em, 1px) solid rgba( var(--color-font-), 0 );
  border-radius: 1.25em;
  box-sizing: border-box;
  color: rgb( var(---color-first) );
  cursor: pointer;
  display: inline-flex;
  font-weight: 500;
  font-size: min( calc( 0.16 * var(---rem) ), 1vw );
  justify-content: center;
  line-height: 1.5;
  padding: 1.125em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(---animation-duration) var(---animation-timing-function),
              border var(---animation-duration) var(---animation-timing-function),
              color var(---animation-duration) var(---animation-timing-function);
}

[class^="button"]:hover,
[class^="button"]:focus,
[class*=" button"]:hover,
[class*=" button"]:focus {
  background: rgb( var(---color-main-) );
}

.button-sub {
  background: rgb( var(---color-sub) );
}

.button-light,
.button.active {
  background: rgba( var(---color-first-), 0 );
  border: max(0.0625em, 1px) solid rgb( var(--color-font-) );
  color: rgb( var(---color-first-) );
}

.button-light:hover,
.button-light:focus {
  background: rgb( var(---color-main-) );
  border: max(0.0625em, 1px) solid rgb( var(--color-main-) );
  color: rgb( var(---color-first) );
}

.button-small {
  background: rgb( var(---color-main) );
  border: none;
  color: rgb( var(---color-main-) );
  padding: 0.375em 1em;
  text-transform: none;
}

.button-small[class^="icon"],
.button-small[class*=" icon"] {
  align-items: center;
  display: inline-grid;
  gap: 1.25em;
  grid-template-columns: auto 1fr;
}

.button-small[class^="icon"]:before,
.button-small[class*=" icon"]:before,
.button-small[class^="icon"]:after,
.button-small[class*=" icon"]:after {
  align-items: center;
  border-radius: 100%;
  color: rgb( var(---color-main-) );
  display: flex;
  grid-column: 1;
  grid-row: 1;
  height: 1.75em;
  justify-content: center;
  margin: -0.375em 0 -0.375em -0.5em;
  width: 1.75em;
  z-index: 2;
}

.button-small[class^="icon"]:after,
.button-small[class*=" icon"]:after {
  background: rgb( var(---color-first) );
  content: "";
  z-index: 1;
}

.button-small:hover,
.button-small:focus {
  border: none;
  color: rgb( var(---color-first) );
}

[data-button-action="add-to-cart"] {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  gap: 0.5em
}

[data-button-action="add-to-cart"]:before,
[data-button-action="add-to-cart"]:after {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity var(---animation-duration) var(---animation-timing-function);
  pointer-events: none;
}

[data-button-action="add-to-cart"]:after {
  animation: loading 2s infinite linear;
  animation-play-state: paused;
}

[data-button-action="add-to-cart"].loading:after {
  animation-play-state: running;
  opacity: 1;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.more {
  align-items: center;
  color: rgb( var(---color-font-) );
  display: flex;
  flex-flow: row nowrap;
  font-size: calc( 0.20 * var(---rem) );
  font-weight: 200;
  gap: 0.4em;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}

.more:before {
  display: none;
}

.more:after {
  background: rgba( var(---color-main-), 0 );
  border-radius: 100%;
  align-items: center;
  aspect-ratio: 1 / 1;
  display: flex;
  font-size: 0.8em;
  margin: 0 -0.25em;
  transition: color var(---animation-duration) var(---animation-timing-function),
              background var(---animation-duration) var(---animation-timing-function);
  padding: 0 0.25em;
}

.more:hover:after,
.more:focus:after {
  background: rgba( var(---color-main-), 1 );
  color: rgb( var(---color-first) );
}

.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
}

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

.col-xs-1 {
  flex-basis: 8.333%;
  max-width: 8.333%;
}

.col-xs-2 {
  flex-basis: 16.667%;
  max-width: 16.667%;
}

.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  flex-basis: 33.333%;
  max-width: 33.333%;
}

.col-xs-5 {
  flex-basis: 41.667%;
  max-width: 41.667%;
}

.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  flex-basis: 58.333%;
  max-width: 58.333%;
}

.col-xs-8 {
  flex-basis: 66.667%;
  max-width: 66.667%;
}

.col-xs-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  flex-basis: 83.333%;
  max-width: 83.333%;
}

.col-xs-11 {
  flex-basis: 91.667%;
  max-width: 91.667%;
}

.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

@media only screen and (min-width: 48em) {
  .col-sm {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-sm-1 {
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-sm-2 {
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-sm-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-sm-5 {
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-sm-8 {
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-sm-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-sm-11 {
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-sm-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 62em) {
  .col-md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-md-1 {
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-md-2 {
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-md-5 {
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-md-8 {
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-md-11 {
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 75em) {
  .col-lg {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-lg-1 {
    flex-basis: 8.333%;
    max-width: 8.333%;
  }

  .col-lg-2 {
    flex-basis: 16.667%;
    max-width: 16.667%;
  }

  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex-basis: 33.333%;
    max-width: 33.333%;
  }

  .col-lg-5 {
    flex-basis: 41.667%;
    max-width: 41.667%;
  }

  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex-basis: 58.333%;
    max-width: 58.333%;
  }

  .col-lg-8 {
    flex-basis: 66.667%;
    max-width: 66.667%;
  }

  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex-basis: 83.333%;
    max-width: 83.333%;
  }

  .col-lg-11 {
    flex-basis: 91.667%;
    max-width: 91.667%;
  }

  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.animation {
  --animation-delay: var(---animation-duration, 0.2s);
  --nth: 0;
}

.animation,
.animation .delay {
  animation-delay: calc( var(--nth) *  var(--animation-delay) ) !important;
  transition-delay: calc( var(--nth) *  var(--animation-delay) ) !important;
}

.animation:nth-of-type(1) {
  --nth: 0;
}

.animation:nth-of-type(2) {
  --nth: 1;
}

.animation:nth-of-type(3) {
  --nth: 2;
}

.animation:nth-of-type(4) {
  --nth: 3;
}

.animation:nth-of-type(5) {
  --nth: 4;
}

.animation:nth-of-type(6) {
  --nth: 5;
}

.animation:nth-of-type(7) {
  --nth: 6;
}

.animation:nth-of-type(8) {
  --nth: 7;
}

.animation:nth-of-type(9) {
  --nth: 8;
}

.animation:nth-of-type(10) {
  --nth: 9;
}

.animation:nth-of-type(11) {
  --nth: 10;
}

.animation:nth-of-type(12) {
  --nth: 11;
}

.animation:nth-of-type(13) {
  --nth: 12;
}

.animation:nth-of-type(14) {
  --nth: 13;
}

.animation:nth-of-type(15) {
  --nth: 14;
}

.animation:nth-of-type(16) {
  --nth: 15;
}

.animation:nth-of-type(17) {
  --nth: 16;
}

.animation:nth-of-type(18) {
  --nth: 17;
}

.animation:nth-of-type(19) {
  --nth: 18;
}

.animation:nth-of-type(20) {
  --nth: 19;
}

.shadow {
  text-shadow: 0 0 0.16em rgb( var(---color-font-) );
}

.bootstrap-touchspin {
  border: 0.05em solid rgb( var(---color-font-) );
  border-radius: 1.25em;
  display: grid;
  grid-template-columns: 1fr auto;
}

.bootstrap-touchspin .bootstrap-touchspin-input {
  background: none;
  border: none;
  display: block;
  height: 100%;
  max-width: 100%;
  padding: 0;
  text-align: center;
  width: 100%;
}

.bootstrap-touchspin .bootstrap-touchspin-up,
.bootstrap-touchspin .bootstrap-touchspin-down {
  background: none;
  border: none;
  color: rgb( var(---color-font-) );
  cursor: pointer;
  display: block;
  padding: 0.125em 1.25em 0.125em 0.125em;
}

.bootstrap-touchspin .bootstrap-touchspin-up:before,
.bootstrap-touchspin .bootstrap-touchspin-down:before {
  font-family: "Icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  height: 100%;
  line-height: 1;
  text-transform: none;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bootstrap-touchspin .bootstrap-touchspin-up:before {
  content: "\e907";
}

.bootstrap-touchspin .bootstrap-touchspin-down:before {
  content: "\e900";
}

.bootstrap-touchspin .bootstrap-touchspin-up:hover,
.bootstrap-touchspin .bootstrap-touchspin-up:focus,
.bootstrap-touchspin .bootstrap-touchspin-down:hover,
.bootstrap-touchspin .bootstrap-touchspin-down:focus {
  color: rgb( var(---color-main-) );
}

.bootstrap-touchspin .bootstrap-touchspin-up:after,
.bootstrap-touchspin .bootstrap-touchspin-down:after {
  display: none;
}

.bootstrap-touchspin .bootstrap-touchspin-up {
  padding-top: 0.625em;
}

.bootstrap-touchspin .bootstrap-touchspin-down {
  padding-bottom: 0.625em;  
}

.component-range {
  display: flex;
  flex-flow: column;
  font-size: calc( 0.16 * var(---rem) );
  gap: 1em;
}

.component-range .range-label {
  font-weight: 500;
}

.component-line {
  align-items: start;
  color: rgb( var(--color-first) );
  display: inline-grid;
  position: relative;
  z-index: 0;
}

.component-line .line {
  align-items: start;
  clip-path: inset(110% -10% -10% -10%);
  display: flex;
  position: relative;
  transition: clip-path var(---animation-duration) ease-out;
}

.component-line.active .line,
.component-line .line.active {
  clip-path: inset(-10%);
}

.component-line .line:nth-child(1) {
  z-index: -1;
}

.component-line .line:nth-child(2) {
  z-index: -2;
}

.component-line .line:nth-child(3) {
  z-index: -3;
}

.component-line .line:nth-child(4) {
  z-index: -4;
}

.component-line .line:nth-child(5) {
  z-index: -5;
}

.component-line .line:nth-child(6) {
  z-index: -6;
}

.component-line .line:nth-child(7) {
  z-index: -7;
}

.component-line .line:nth-child(8) {
  z-index: -8;
}

.component-line .line:nth-child(9) {
  z-index: -9;
}

.component-line .line:nth-child(10) {
  z-index: -10;
}

.component-mark {
  position: relative;
}

.component-mark[data-text]:before {
  background: rgb( var(---color-font-) );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #00000000;
  content: attr(data-text);
  text-shadow: none;
}

.component-mark[data-text] .mark {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  position: absolute;
  inset: 0;
}

.component-flag {
  align-items: center;
  box-sizing: border-box;
  font-size: calc( 0.12 * var(---rem) );
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0.75em;
}

.component-flag .flag-item {
  background:  rgb( var(---color-sub) );
  border-radius: 0 0.84em 0 0.84em;
  color: rgb( var(---color-first) );
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  padding: 0.75em;
  min-width: 6.2em;
}

.component-variant {
  align-items: center;
  box-sizing: border-box;
  font-size: calc( 0.14 * var(---rem) );
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0.425em;
}

.component-variant .variant-item {
  background:  rgb( var(---color-first) );
  border: 0.075em solid rgb( var(---color-font-) );
  border-radius: 0.72em;
  color: rgb( var(---color-font-) );
  font-weight: 500;
  padding: 0.35em 0.285em;
  position: relative;
  text-align: center;
  text-decoration: none;
}

.component-variant .variant-item:before {
  content: "";
  inset: -0.425em;
  position: absolute;
}

.component-price {
  align-items: center;
  color: rgb( var(---color-font-) );
  display: flex;
  flex-flow: row wrap;
  font-size: calc( 0.32 * var(---rem) );
  font-weight: 200;
  gap: 0.125em 0.25em;
  line-height: 1;
}

.component-price:after {
  content: "";
  height: 1px;
  min-width: 100%;
  order: 1;
}

.component-price .price-regular,
.component-price .price-quantity {
  align-self: start;
  color: rgb( var(---color-font) );
  font-size: 0.5625em;
  font-weight: 400;
  position: relative;
}

.component-price .price-regular:after {
  background:  rgb( var(---color-font) );
  content: "";
  height: 0.112em;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  position: absolute;
}

.component-price .price-quantity:before {
  content: "x";
}

.component-price .price-footer,
.component-price .price-label {
  font-size: max( calc( 0.10 * var(---rem) ), 0.345em );
  font-weight: 300;
  order: 2;
}

.component-price .price-label:before {
  color: rgb( var(---color-main-) );
  content: "#";
}

.component-choice {
  font-weight: 500;
  position: relative;
}

.component-choice .choice-input {
  background: none;
  border: none;
  cursor: pointer;
  height: 1.1em;
  left: 0;
  min-height: 1.1em;
  min-width: 1.1em;
  opacity: 0;
  padding: 0;
  position: absolute;
  z-index: 1;
  width: 1.1em;
}

.component-choice .choice-label {
  align-items: center;
  color: rgb( var(---color-font-) );
  cursor: pointer;
  display: inline-grid;
  gap: 0.5em;
  grid-template-columns: 1.1em auto;
  text-decoration: none;
}

.component-choice .choice-label:before,
.component-choice .choice-label:after {
  align-items: center;
  align-self: center;
  border: 0.05em solid rgb( var(---color-font-) );
  border-radius: 0.25em;
  box-sizing: content-box;
  content: "";
  display: flex;
  height: 1em;
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  justify-self: center;
  transition: opacity var(---animation-duration) var(---animation-timing-function);
  width: 1em;
}

.component-choice .choice-label:hover:before,
.component-choice .choice-label:focus:before {
  border-color: rgb( var(---color-main-) );
}

.component-choice [type="radio"] ~ .choice-label:before {
  border-radius: 100%;
}

.component-choice .choice-label:after {
  border-color: rgba( var(---color-border), 0 );
  opacity: 0;
}

.component-choice [type="checkbox"] ~ .choice-label:after {
  align-items: center;
  content: "\e912";
  display: flex;
  font-size: 0.7em;
  height: 1.428em;
  justify-content: center;
  width: 1.428em;
}

.component-choice [type="radio"] ~ .choice-label:after {
  background: rgb( var(---color-font-) );
  border: none;
  border-radius: 100%;
  content: "";
  height: 0.6em;
  width: 0.6em;
}

.component-choice .choice-input:checked + .choice-label:after {
  opacity: 1;
}

.component-choice [required] ~ .choice-label .choice-text:before {
  color: rgb( var(---color-error) );
  content: "* ";
  font-size: 1.25em;
} 

.component-input {
  display: grid;
  position: relative;
}

.component-input .input-type,
.component-input .input-required {
  background: rgb( var(---color-first ) );
  border: max(0.075em, 1px) solid rgb( var(---color-font-) );
  border-radius: 1.25em;
  display: block;
  font-weight: 500;
  grid-column: 1;
  grid-row: 1;
  line-height: 1.25;
  padding: 1.125em 1.5em;
  max-width: 100%;
  min-width: 100%;
}

.component-input select.input-type {
  cursor: pointer;
  padding-right: 4em;
}

.component-input .input-type[type="file"] {
  cursor: pointer;
}

.component-input .input-button ~ .input-type {
  padding-right: 6em;
}

.component-input select ~ .input-label:before {
  padding-right: 3em;
}

.component-input .input-label {
  background: rgb( var(---color-first ) );
  font-size: 0.75em;
  font-weight: 500;
  left: 0;
  overflow: hidden;
  padding: 0.5em;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
  text-overflow: "...";
  transform: translate(0, 1.25em);
  transition: transform var(---animation-duration) var(---animation-timing-function);
  white-space: nowrap;
  z-index: -1;
}

.component-input .input-type:placeholder-shown ~ .input-label {
  transform: translate(0, 1.25em);
}

.component-input .input-type:focus ~ .input-label,
.component-input .input-type:not(:placeholder-shown):not([type="date"]) ~ .input-label {
  transform: translate(0, -100%);
}

.component-input .input-type:not(:placeholder-shown) ~ .input-required {
  display: none;
}

.component-input [required] ~ .input-label:after {
  color: rgb( var(---color-error) );
  content: "*"
}

.component-input .input-button {
  background: none;
  border: none;
  color: rgb( var(---color-font) );
  cursor: pointer;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  line-height: 1.25;
  padding: 0.5em;
  position: relative;
  transition: color var(---animation-duration) var(---animation-timing-function);
  width: 6em;
  z-index: 1;
}

.component-input select ~ .input-button {
  pointer-events: none;
  width: 4em;
}

.component-input select:hover ~ .input-button,
.component-input select:focus ~ .input-button {
  color: rgb( var(---color-main-) );
}

.component-input .input-button:before {
  background: rgb( var(---color-first ) );
  border-radius: 1.25em;
  content: "";
  inset: max(0.075em, 1px);
  position: absolute;
  z-index: -1;
}

.component-input .input-button:hover,
.component-input .input-button:focus {
  color: rgb( var(---color-main-) );
}

.component-input .input-required {
  background: none;
  color: rgba( var(---color-font-), 0 );
  pointer-events: none;
}

.component-input .input-required:after {
  color: rgb( var(---color-error) );
  content: "*"
}

.component-availability {
  color: rgb( var(---color-font-) );
  display: flex;
  flex-flow: column;
  gap: 0.25em;
}

.component-availability .availability-in,
.component-availability .availability-low,
.component-availability .availability-out {
  align-items: center;
  display: flex;
  gap: 1em;
}

.component-availability .availability-in:after,
.component-availability .availability-low:after,
.component-availability .availability-out:after {
  border-radius: 100%;
  content: "";
  height: 0.625em;
  width: 0.625em;
}

.component-availability .availability-in:after {
  background: rgb( var(---color-success) );
}

.component-availability .availability-low:after {
  background: rgb( var(---color-warning) );
}

.component-availability .availability-out:after {
  background: rgb( var(---color-error) );
}

.component-quantity {
  border: 0.05em solid rgb( var(---color-font-) );
  border-radius: 1.25em;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 1fr;
}

.component-quantity .quantity-input {
  background: none;
  border: none;
  display: block;
  grid-row: 1 / -1;
  height: 100%;
  max-width: 100%;
  padding: 0;
  text-align: center;
  width: 100%;
}

.component-quantity .quantity-up,
.component-quantity .quantity-down {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.125em 1.25em 0.125em 0.125em;
}

.component-quantity .quantity-up:hover,
.component-quantity .quantity-up:focus,
.component-quantity .quantity-down:hover,
.component-quantity .quantity-down:focus {
  color: rgb( var(---color-main-) );
}

.component-quantity .quantity-up:after,
.component-quantity .quantity-down:after {
  display: none;
}

.component-quantity .quantity-up {
  padding-top: 0.625em;
}

.component-quantity .quantity-down {
  padding-bottom: 0.625em;  
}

.component-bolder {
  font-weight: 500;
}

.component-bolder a {
  color: rgb( var(---color-main-) );
}

.component-error {
  display: flex;
  flex-flow: column;
}

.component-error .error-text {
  color: rgb( var(---color-error) );  
}

.component-label {
  color: rgb( var(---color-first-) );
}

.component-label.bright {
  color: rgb( var(---color-first) );
}

.component-table .table-head {
  display: none;
}

@media (width <= 1000px) {
  .component-table {
    overflow: unset;
  }

  .component-table .table-head,
  .component-table .table-heading {
    background: rgb( var(---color-main) );
    border-radius: 1em;
    display: block;
    margin: -1em -1em 0.5em;
    padding: 1em;
  }

  .component-table thead,
  .component-table .table-hidden {
    display: none;
  }
}

.module {
  margin-bottom: var(---grid);
}

.module ~ .module {
  margin-top: var(---grid);
}

.module:last-of-type {
  margin-bottom: 0;
}

.module-header {
  container: header / inline-size;
  position: relative;
  z-index: 4;
}

.module-header .header-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  --color-font-: var(---color-font-, 6, 16, 17);
}

.module-header .header-container:before,
.module-header .header-container:after {
  background: linear-gradient( rgba( var(--color-first-), 1 ) , rgba( var(--color-first-), 0 ));
  content: "";
  height: calc( 3.20 * var(--rem) );
  mix-blend-mode: hard-light;
  opacity: 0.34;
  position: fixed;
  pointer-events: none;
  top: 0;
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  width: 100%;
  z-index: -1;
}

.module-header .header-container:after {
  height: calc( 4.20 * var(--rem) );
  mix-blend-mode: soft-light;
}

.module-header .header-grid {
  background: rgba( var(--color-first), 0 );
  display: grid;
  grid-template-columns: 1fr minmax( min( calc( 19.20 * var(--rem) ), 100%), max-content ) 1fr;
  position: fixed;
  top: 0;
  transition: background var(--animation-duration) var(--animation-timing-function);
  width: 100%;
  z-index: 4;
}

.module-header .header-grid:after {
  border-bottom: 1px solid rgba( var(--color-border), 0 );
  bottom: 0;
  content: "";
  left: calc( 0.40 * var(--rem) );
  position: absolute;
  right: calc( 0.40 * var(--rem) );
  transition: border var(--animation-duration) var(--animation-timing-function);
  z-index: -3;
}

.module-header .header-main {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  gap: calc( 0.21 * var(--rem) ) calc( 0.36 * var(--rem) );
  grid-column: 2;
  grid-template-columns: auto auto 1fr auto auto auto;
  max-height: calc( 1 * var(--rem) );
  padding: calc( 0.21 * var(--rem) ) calc( 0.40 * var(--rem) );
  transition: max-height var(--animation-duration) var(--animation-timing-function),
              padding var(--animation-duration) var(--animation-timing-function);
  width: 100%;
}

.module-header .header-main > :last-child {
  grid-column: 6;
}

.module-header-sub {
  position: sticky;
  top: 0;
  z-index: 4;
}

.module-header-sub .header-container:before,
.module-header-sub .header-container:after {
  opacity: 0;
}

.module-header-sub .header-grid {
  background: rgba( var(--color-first), 1);
}

.module-header-sub .header-grid:after {
  border-bottom: 1px solid rgba( var(--color-border), 1 );
}

.module-header-sub .header-main {
  max-height: calc( 0.80 * var(--rem) );
  padding-bottom: calc( 0.10 * var(--rem) );
  padding-top: calc( 0.10 * var(--rem) );
}

.module-header-relative .header-grid {
  position: relative;
}

.module-header-sub .module-search .search-expand,
.module-header-sub .module-search .search-input {
  color: rgb( var(--color-font-) );
}

.module-header .module-menu .menu-content .menu-icon,
.module-header .module-menu .menu-content .menu-button:before,
.module-header .module-menu .menu-content .menu-button:after {
  background: rgb( var(--color-main-) );
}

.module-header-sub .module-menu .menu-link,
.module-header-sub .module-menu .menu-expand {
  color: rgb( var(--color-font-) );
}

.module-header-sub .module-menu .menu-icon,
.module-header-sub .module-menu .menu-button:before,
.module-header-sub .module-menu .menu-button:after {
  background: rgb( var(--color-main-) );
}

.module-header-sub .module-phone .phone-link {
  color: rgb( var(--color-font-) );  
}

.module-header-sub .module-login .login-link {
  color: rgb( var(--color-font-) );
}

.module-header-sub .module-basket .basket-link:before {
  background: rgb( var(--color-font-) );
  color: rgb( var(--color-first) );
}

.module-header-sub .module-lang .lang-container,
.module-header-sub .module-lang .lang-link, 
.module-header-sub .module-lang .lang-button {
  color: rgb( var(--color-font-) );
}

.module-header-sub .module-logo .logo-container:after {
  opacity: 0;
}

.module-header-sub .module-logo .logo-img {
  opacity: 1;
}

@media (width <= 1000px) {
  .module-header {
    position: relative;
    z-index: 2;
  }  
}

@container header (max-width: 1000px) {
  .module-header .header-container:before,
  .module-header .header-container:after {
    opacity: 0.34;
  }

  .module-header .header-grid {
    background: none;
    justify-items: center;
    position: absolute;
    z-index: 2;
  }

  .module-header .header-grid:after {
    display: none;
  }

  .module-header .header-main {
    background: none;
    grid-template-columns: 1fr;
    justify-items: center;
    padding-bottom: calc( var(--grid) / 2 );
    padding-top: calc( var(--grid) / 2 );
    transition: unset;
    max-height: unset;
  }

  .module-header-relative .header-container:before,
  .module-header-relative .header-container:after {
    display: none;
  }

  .module-header-relative .header-grid {
    background: rgba( var(--color-first), 1);
    position: static;
  }

  .module-header-relative .header-grid:after {
    display: none;
  }

  .module-header .module-logo .logo-img {
    opacity: 0;
  }

  .module-header .module-logo .logo-container:after {
    opacity: 1;
  }

  .module-header-relative .module-logo .logo-img {
    opacity: 1;
  }

  .module-header-relative .module-logo .logo-container:after {
    opacity: 0;
  }

  .module-header .header-main > * {
    display: none;
  }

  .module-header .header-container:before {
    height: 50vh;
    position: absolute;
    transition: unset;
  }

  .module-header .header-container:after {
    height: 64vh;
    position: absolute;
    transition: unset;
  }

  .module-header .header-container .module-logo {
    display: block;
  }
}

.module-logo {
  container: logo;
}

.module-logo .logo-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-first-: var(---color-first-, 0, 0, 0);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);

  display: block;
  position: relative;
  text-decoration: none;
}

.module-logo .logo-container:after {
  background: url("logo-white.svg") no-repeat;
  content: "";
  opacity: 1;
  position: absolute;
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  inset: 0;
}

.module-logo .logo-img {
  opacity: 0;
  transition: opacity var(--animation-duration) var(--animation-timing-function);
}

.module-logo .logo-text {
  color: rgb( var(--color-font-) );
  display: inline-block;
  font-size: calc( 0.46 * var(--rem) );
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  text-decoration: none;
  margin: 0;
}

.module-logo .logo-text:first-letter {
  color: rgb( var(--color-main-) );  
}

.module-phone {
  container: phone;
}

.module-phone .phone-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-first: var(---color-first, 255, 255, 255);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);
}

.module-phone .phone-link {
  align-items: center;
  color: rgb( var(--color-first) );
  display: flex;
  flex-flow: column;
  font-size: calc( 0.20 * var(--rem) );
  gap: 0.6em;
  justify-content: center;
  letter-spacing: -0.02em;
  margin: -0.8em;
  padding: 0.8em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-phone .phone-link.icon-phone:before {
  display: none;
}

.module-phone .phone-link.icon-phone:after {
  font-weight: 400;
}

@media (width <= 1366px) {
  .module-phone .phone-text {
    display: none;
  }
}

.module-login {
  container: login;
}

.module-login .login-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-first: var(---color-first, 255, 255, 255);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);
}

.module-login .login-link {
  align-items: center;
  color: rgb( var(--color-first) );
  display: flex;
  flex-flow: column;
  font-size: calc( 0.20 * var(--rem) );
  gap: 0.6em;
  justify-content: center;
  letter-spacing: -0.02em;
  margin: -0.8em;
  padding: 0.8em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-login .login-link.icon-account:before {
  display: none;
}

@media (width <= 1366px) {
  .module-login .login-text {
    display: none;
  }
}

.module-basket {
  container: menu;
}

.module-basket .basket-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);

  position: relative;
}

.module-basket .basket-modal {
  background: rgb( var(--color-first) );
  box-shadow: 0 calc( 0.20 * var(--rem) ) calc( 0.16 * var(--rem) ) 0 rgba( var(--color-first-), 0.15 );
  border-radius: calc( 0.16 * var(--rem) );
  bottom: calc( -0.21 * var(--rem) );
  display: flex;
  opacity: 1;
  padding: calc( 0.26 * var(--rem) ) calc( 0.24 * var(--rem) ) calc( 0.26 * var(--rem) ) calc( 0.46 * var(--rem) );
  position: absolute;
  right: 0;
  transform: translate(0, 100%);
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  max-height: calc( 100vh - var(--rem) );
  min-width: calc( 5.00 * var(--rem) );
  z-index: 1;
}

.module-basket .basket-modal:empty,
.module-basket .basket-modal.basket-hidden {
  opacity: 0;
  pointer-events: none;
}

.module-basket .basket-content {
  align-content: start;
  display: grid;
  gap: calc( 0.32 * var(--rem) ) 0;
  grid-template-columns: 1fr;
  padding: 0 calc( 0.24 * var(--rem) ) 0 0;
  overflow: auto;
}

.module-basket .basket-heading {
  align-items: center;
  display: flex;
  gap: 1em;
  font-size: calc( 0.24 * var(--rem) );
  font-weight: 700;
  flex-flow: row nowrap;
  grid-column: 1;
  grid-row: 1;
  line-height: 1.25;
  padding: 0 2.5em 0 0;
}

.module-basket .basket-heading:before {
  color: rgb( var(--color-main-) );
}

.module-basket .basket-heading:after {
  display: none;
}

.module-basket .basket-close {
  align-self: center;
  background: rgb( var(--color-first) );
  border: none;
  border-radius: 100%;
  color: rgb( var(--color-main-) );
  content: "\e90f";
  cursor: pointer;
  font-size: calc( 0.24 * var(--rem) );
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  padding: 0.5em;
  z-index: 1;
}

.module-basket .basket-close:after {
  display: none;
}

.module-basket .summary-product {
  border-bottom: 1px solid rgb( var(--color-border) );
  margin-bottom: calc( 0.32 * var(--rem) );
  padding-bottom: calc( 0.32 * var(--rem) );
}

.module-basket .module-summary .summary-subtotals {
  margin: 0 0 calc( 0.32 * var(--rem) );
}

.module-basket .summary-totals {
  margin: 0;
}

.module-basket .basket-modal .list-item {
  grid-template-columns: calc( 0.96 * var(--rem) ) 1fr;
}

.module-basket .basket-nav {
  align-items: center;
  background: rgb( var(--color-first) );
  bottom: 0;
  display: flex;
  flex-flow: row nowrap;
  gap: calc( 0.32 * var(--rem) );
  margin: 0.5em 0 0;
  position: sticky;
}

.module-basket .basket-button {
  white-space: nowrap;
}

.module-basket .basket-back {
  align-items: center;
  background: none;
  border: none;
  color: rgb( var(--color-font-) );
  cursor: pointer;
  display: flex;
  font-size: calc( 0.13 * var(--rem) );
  flex-flow: row nowrap;
  gap: 1em;
  line-height: 1.5;
  padding: 1em;
  margin: -1em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.module-basket .basket-back:after {
  display: none;
}

.module-basket .basket-link {
  align-items: center;
  color: rgb( var(--color-font-) );
  font-size: calc( 0.20 * var(--rem) );
  display: flex;
  text-decoration: none;
}

.module-basket .basket-link:before {
  background: rgb( var(--color-first) );
  border-radius: 1em;
  display: block;
  padding: 1em;
  transition: background var(--animation-duration) var(--animation-timing-function), 
              color var(--animation-duration) var(--animation-timing-function);
}

.module-basket .basket-link:hover:before,
.module-basket .basket-link:focus:before {
  background: rgb( var(--color-main-) );
  color: rgb( var(--color-first) );
}

.module-basket .basket-link.icon-basket:after {
  display: none;
}

.module-basket .basket-count {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: rgb( var(--color-main-) );
  border-radius: 100%;
  color: rgb( var(--color-first) );
  display: flex;
  font-size: 0.7em;
  justify-content: start;
  margin: 0 -1.72em 0 -0.7em;
  overflow: hidden;
  text-overflow: "+";
  padding: 0.72em;
  transition: background var(--animation-duration) var(--animation-duration) var(--animation-timing-function);
  white-space: nowrap;
}

.module-basket .basket-link:hover .basket-count,
.module-basket .basket-link:focus .basket-count {
  background: rgb( var(--color-font-) );
}

@media (width <= 1000px) {
  .module-basket .basket-modal {
    box-shadow: unset;
    border-radius: unset;
    display: flex;
    inset: 0;
    max-height: unset;
    min-width: unset;
    max-width: unset;
    padding: 0;
    position: fixed;
    transform: unset;
    width: unset;
    z-index: -1;
  }

  .module-basket .basket-content {
    max-height: calc( 100% - 1.5 * var(--grid) );
    padding: var(---padding) var(---padding) 0;
    width: 100%;
  }

  .module-basket .basket-heading {
    font-size: calc( 0.20 * var(--rem) );
    gap: 1.5em;
  }

  .module-basket .basket-nav {
    flex-flow: row wrap;
    gap: calc( 0.21 * var(--rem) );
    justify-content: center;
    margin: 0;
  }

  .module-basket .basket-button {
    padding: 1.25em 1.5em;
    order: -1;
  }

  .module-basket .basket-back:before {
    order: 1;
    transform: scale(-1);
  }

  .module-basket .module-summary .summary-subtotals {
    margin: 0 0 calc( 0.24 * var(--rem) );
  }

  .module-basket .module-summary .summary-line {
    font-size: calc( 0.16 * var(--rem) );
  }

  .module-basket .module-summary .summary-product {
    margin-bottom: calc( 0.16 * var(--rem) );
    padding-bottom: calc( 0.16 * var(--rem) );
  }

  .module-basket .module-summary .summary-totals {
    font-size: calc( 0.20 * var(--rem) );
    margin-top: calc( 0.24 * var(--rem) );
  }

  .module-basket .module-summary .summary-total {
    font-size: calc( 0.20 * var(--rem) );
  }
}

.module-menu {
  container: menu;
}

.module-menu .menu-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);
  --container: var(---container, calc( 15.28 * var(--rem) ) );

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-border: var(---color-border, 200, 209, 210);
  --color-main-: var(---color-main-, 109, 4, 254);

  --baseline: calc( 0.62 * var(--rem) );

  font-size: calc( 0.20 * var(--rem) );
  max-height: var(--baseline);
  text-align: center;
}

.module-menu .menu-content {
  border-radius: 0.8em;
  box-shadow: 0 1em 0.8em rgba( var(--color-first-), 0 );
  display: inline-grid;
  gap: 0 2em;
  grid-template-columns: auto auto;
  max-height: var(--baseline);
  overflow: hidden;
  text-align: center;
  padding: 1em 2em;
  transition: box-shadow var(--animation-duration) var(--animation-timing-function),
              max-height var(--animation-duration) var(--animation-timing-function);
}

.module-menu .menu-content:hover,
.module-menu .menu-content:focus,
.module-menu .menu-content:focus-within {
  box-shadow: 0 1em 0.8em rgba( var(--color-first-), 0.15 );
  max-height: calc( 3 * var(--baseline) );
}

.module-menu .menu-content:after {
  background: rgb( var(--color-first) );
  border-radius: 0.8em;
  content: "";
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  margin: -1em -2em;
  opacity: 0;
  position: relative;
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  z-index: -2;
}

.module-menu .menu-content:hover:after,
.module-menu .menu-content:focus:after,
.module-menu .menu-content:focus-within:after {
  opacity: 1;
}

.module-menu .menu-button {
  align-self: start;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-flow: column;
  gap: 0.2em;
  grid-column: 2;
  grid-row: 1;
  margin: -0.1em 0 0 0;
  order: 1;
  padding: 0;
  transform-origin: center;
  transition: transform var(--animation-duration) var(--animation-timing-function);
}

.module-menu .menu-content:hover .menu-button,
.module-menu .menu-content:focus .menu-button,
.module-menu .menu-content:focus-within .menu-button {
  transform: rotate(-90deg);
}

.module-menu .menu-button:before,
.module-menu .menu-button:after,
.module-menu .menu-icon,
.module-menu .menu-icon:before,
.module-menu .menu-icon:after {
  background: rgb( var(--color-first) );
  border-radius: 100%;
  content: "";
  height: 0.3em;
  pointer-events: none;
  transition: background var(--animation-duration) var(--animation-timing-function),
              transtorm var(--animation-duration) var(--animation-timing-function);
  width: 0.3em;
}

.module-menu .menu-icon:before,
.module-menu .menu-icon:after {
  display: none;
}

.module-menu .menu-content:hover .menu-icon,
.module-menu .menu-content:focus .menu-icon,
.module-menu .menu-content:focus-within .menu-icon,
.module-menu .menu-content:hover .menu-button:before,
.module-menu .menu-content:focus .menu-button:before,
.module-menu .menu-content:focus-within .menu-button:before,
.module-menu .menu-content:hover .menu-button:after,
.module-menu .menu-content:focus .menu-button:after,
.module-menu .menu-content:focus-within .menu-button:after {
  background: rgb( var(--color-main-) );
}

.module-menu .menu-list {
  align-self: center;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 1.5em 2em;
  grid-column: 1;
  grid-row: 1;
}

.module-menu .menu-item {
  align-items: center;
  display: flex;
}

.module-menu .menu-radio {
  display: none;
}

.module-menu .menu-expand {
  background: none;
  border: none;
  color: rgb( var(--color-first) );
  cursor: pointer;
  font-size: 0.75em;
  display: inline-flex;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-content: end;
  line-height: 0.75em;
  order: 1;
  margin: -0.5em -0.5em -0.5em 0.5em;
  padding: 0.5em;
  position: relative;
  transform-origin: center;
  z-index: 1;
}

.module-menu .menu-expand:before {
  display: none;
}

.module-menu .menu-expand:after {
  transition: color var(--animation-duration) var(--animation-timing-function);  
}

.module-menu .menu-expand:hover:after,
.module-menu .menu-expand:focus:after,
.module-menu .menu-expand:focus-within:after {
  color: rgb( var(--color-main-) );
}

.module-menu .menu-content:hover .menu-expand,
.module-menu .menu-content:focus .menu-expand,
.module-menu .menu-content:focus-within .menu-expand {
  color: rgb( var(--color-first-) );
}

.module-menu .menu-checkbox {
  display: none;
}

.module-menu .menu-link {
  align-items: center;
  color: rgb( var(--color-first) );
  display: flex;
  flex-flow: column;
  font-size: 1em;
  justify-content: center;
  letter-spacing: -0.02em;
  text-align: center;
  transition: color var(--animation-duration) var(--animation-timing-function);
  margin: -0.8em;
  padding: 0.8em;
  position: relative;
  text-decoration: none;
  z-index: 1; 
}

.module-menu .menu-link:after {
  background: rgb( var(--color-main-) );
  content: "";
  bottom: 0.25em;
  height: 0.2em;
  left: 0;
  right: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: bottom left;
  transition: transform var(--animation-duration) var(--animation-timing-function);
}

.module-menu .menu-content:hover .menu-link,
.module-menu .menu-content:focus .menu-link,
.module-menu .menu-content:focus-within .menu-link {
  color: rgb( var(--color-first-) );
}

.module-menu .menu-link:hover:after,
.module-menu .menu-link:focus:after {
  transform: scale(1);
}

.module-menu .menu-sub {
  display: grid;
  font-size: 0.8em;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  left: 50%;
  max-height: calc( 100vh - 2.5em );
  opacity: 0;
  padding: calc( var(--baseline) * 2 ) 0 0;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 0);
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  transition-delay: var(--animation-duration);
  top: 0;
  width: min( calc( 98vw - 5em ), var(--container) );
}

.module-menu .menu-content .menu-item .menu-sub:hover,
.module-menu .menu-content .menu-item .menu-sub:focus-within,
.module-menu .menu-content .menu-expand:focus ~ .menu-sub {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.module-menu .menu-sub:before {
  background: rgb( var(--color-first) );
  border-radius: 0.8em;
  box-shadow: 0 1em 0.8em rgba( var(--color-first-), 0.15 );
  content: "";
  inset: 0 -2.5em;
  position: absolute;
  z-index: -1;
}

.module-menu .menu-sub:after {
  background: linear-gradient(
    to bottom,
    rgba(var(--color-first), 1) 0%,
    rgba(var(--color-first), 0) 2.5em,
    rgba(var(--color-first), 0) calc(100% - 2.5em),
    rgba(var(--color-first), 1) 100%
  );
  content: "";
  grid-column: 1;
  grid-row: 1;
  pointer-events: none;
  z-index: 1;
}

.module-menu .menu-overflow {
  align-items: start;
  display: flex;
  flex-flow: row nowrap;
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  overflow: auto;
  padding: 2.5em 1.25em 2.5em 0;
  width: 100%;
}

.module-menu .menu-submenu {
  align-content: start;
  align-self: start;
  display: grid;
  flex: 1;
  gap: 3em 2em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: start;
  position: sticky;
  top: 0;
}

.module-menu .menu-submenu .menu-item {
  text-align: left;
  display: block;
}

.module-menu .menu-submenu .menu-link {
  color: rgb( var(--color-first-) );
  display: inline-block;
  font-size: min(2em, 2vw);
  font-weight: 700;
  line-height: 1.25em;
  text-align: left;
}

.module-menu .menu-submenu .menu-link:hover,
.module-menu .menu-submenu .menu-link:focus {
  color: rgb( var(--color-main-) );
}

.module-menu .menu-submenu .menu-link:after {
  display: none;
}

.module-menu .menu-submenu .menu-submenu {
  display: flex;
  flex-flow: column;
  gap: 1em;
  margin: 3em 0 0;
}

.module-menu .menu-submenu .menu-submenu .menu-item {
  display: block;
}

.module-menu .menu-submenu .menu-submenu .menu-link {
  font-size: 1em;
  font-weight: 300;
}

.module-menu .menu-category {
  border-left: max(0.05em, 1px) solid rgb( var(--color-border) );
  flex: 1;
  margin-left: 2em;
  max-width: 35%;
  padding-left: 2em;
  position: sticky;
  top: 0;
}

@media (width <= 1440px) {
  .module-menu .menu-category {
    max-width: 25%;
  }

  .module-menu .menu-category .featured-container {
    grid-template-columns: 1fr;
  }
}

@media (width <= 1000px) {
  .module-menu .menu-button.compsoul-popup-active {
    background: rgb( var(--color-first-) );
  }

  .module-menu .menu-sub {
    background: rgba( var(--color-first) );
    display: block;
    gap: calc( var(--grid) / 3 ) 0;
    inset: 0;
    max-height: unset;
    opacity: 0;
    padding: 0;
    position: fixed;
    pointer-events: none;
    transform: unset;
    transition: opacity var(--animation-duration) var(--animation-timing-function);
    width: unset;
    z-index: -1;
  }

  .module-menu .menu-sub:before,
  .module-menu .menu-sub:after {
    display: none;
  }

  .module-menu .menu-sub.compsoul-popup-active {
    opacity: 1;
    pointer-events: auto;
  }

  .module-menu .menu-overflow {
    display: block;
    padding: 0;
  }

  .module-menu .menu-overflow:after {
    display: none;
  }

  .module-menu .menu-list {
    gap: calc( var(--grid) / 3 ) 0;
    padding: var(---padding) var(---padding) calc( 2 * var(--grid) );
  }

  .module-menu .menu-item,
  .module-menu .menu-submenu .menu-item {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .module-menu .menu-label,
  .module-menu .menu-link {
    cursor: pointer;
    grid-column: 1;
    grid-row: 1;
    margin: -0.5em;
    padding: 0.5em;
  }

  .module-menu .menu-label {
    align-self: center;
    justify-self: end;
    position: relative;
    transition: color var(--animation-duration) var(--animation-timing-function);
    z-index: 1;
  }

  .module-menu .menu-label:hover,
  .module-menu .menu-label:focus {
    color: rgb( var(--color-main-) );
  }

  .module-menu .menu-label:before {
    display: none;
  }

  .module-menu .menu-label:after {
    display: block;
    transition: transform var(--animation-duration) var(--animation-timing-function);
  }

  .module-menu .menu-checkbox:checked ~ .menu-label:after {
    transform: rotate(-180deg);
  }

  .module-menu .menu-link {
    color: rgb( var(--color-font-) );
    font-size: calc( 0.20 * var(--rem) );
    font-weight: 700;
    justify-self: center;
    text-transform: uppercase;
  }

  .module-menu .menu-link:after {
    display: none;
  }

  .module-menu .menu-submenu {
    display: none;
    flex-flow: column;
    gap: calc( var(--grid) / 3 ) 0;
  }

  .module-menu .menu-checkbox:checked ~ .menu-submenu {
    display: flex !important;
  }

  .module-menu .menu-submenu > :first-child {
    margin: calc( var(--grid) / 3 ) 0 0 0;
  }

  .module-menu .menu-submenu > :last-child {
    margin: 0 0 calc( var(--grid) / 3 ) 0;
  }

  .module-menu .menu-submenu .menu-link {
    font-size: calc( 0.20 * var(--rem) );
    font-weight: 400;
    text-transform: unset;
  }

  .module-menu .menu-submenu .menu-submenu {
    display: none;
    gap: calc( var(--grid) / 4 ) 0;
    margin: 0;
  }

  .module-menu .menu-submenu .menu-submenu .menu-item {
    display: grid;
  }
}
  
.module-lang {
  container: lang;
}

.module-lang .lang-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-first: var(---color-first, 255, 255, 255);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);

  align-items: center;
  color: rgb( var(--color-first) );
  display: flex;
  flex-flow: column;
  font-size: calc( 0.14 * var(--rem) );
  gap: 0.4em;
  height: 2em;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-lang .lang-container:before {
  display: none;
}

.module-lang .lang-container:after {
  font-size: 1.2em;
}

.module-lang .lang-list {
  align-items: center;
  display: none;
  flex-flow: column;
}

.module-lang:focus-within .lang-list,
.module-lang .lang-button:hover + .lang-list, 
.module-lang .lang-button:focus + .lang-list,
.module-lang .lang-list:hover {
  display: flex;
}

.module-lang .lang-link,
.module-lang .lang-button {
  background: none;
  border: none;
  color: rgb( var(--color-first) );
  cursor: pointer;
  display: block;
  padding: 0.4em;
  margin: -0.4em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-lang .lang-link {
  padding: 0.4em;
  margin: 0;
}

@media (width <= 1000px) {
  .module-lang {
    padding: var(---padding);
  }

  .module-lang .lang-container {
    border: 1px solid rgb( var(--color-font-) );
    border-radius: 1.2em;
    display: grid;
    font-size: 1em;
    grid-template-columns: 1fr;
    height: unset;
    gap: 0;
    justify-content: space-between;
    padding: 1em 2em;
  }

  .module-lang .lang-container:after {
    color: rgb( var(--color-font-) );
    font-size: 1em;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .module-lang .lang-button {
    grid-column: 1;
    grid-row: 1;
    margin: -1em -2em;
    padding: 1em 3em 1em 2em;
    position: relative;
    text-align: left;
    z-index: 1;
  }

  .module-lang .lang-button:focus {
    color: rgb( var(--color-main-) );
    outline: none;
  }

  .module-lang .lang-link {
    margin: 0 -1em;
    padding: 0.5em 1em;
  }

  .module-lang .lang-link,
  .module-lang .lang-button {
    color: rgb( var(--color-font-) );
    text-transform: unset;
  }

  .module-lang .lang-link:before,
  .module-lang .lang-button:before {
    content: attr(data-text);
  }

  .module-lang .lang-text {
    display: none;
  }

  .module-lang .lang-list {
    align-items: start;
    margin: 0.5em 0 0;
    order: 2;
    position: relative;
    z-index: 1;
  }
}

.module-action {
  align-items: center;
  bottom: 1em;
  container: action;
  display: none;
  justify-content: center;
  left: 50%;
  position: fixed;
  right: 50%;
  z-index: 5;
}

.module-action .action-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  --color-font-: var(---color-font-, 6, 16, 17);

  align-items: center;
  background: rgb( var(--color-first) );
  border-radius: calc( 0.20 * var(--rem) );
  box-shadow: 0 calc( 0.04 * var(--rem) ) calc( 0.16 * var(--rem) ) 0 rgba( var(--color-font-), 0.5 );
  display: flex;
  flex-flow: nowrap;
}

.module-action .module-search .search-expand {
  border-radius: calc( 0.20 * var(--rem) ) 0.5em 0.5em calc( 0.20 * var(--rem) );
  color: rgb( var(--color-font-) );
  font-size: calc( 0.18 * var(--rem) );
  margin: 0;
  padding: 1em 1.667em;
  position: relative;
  transition: background var(--animation-duration) var(--animation-timing-function),
              color var(--animation-duration) var(--animation-timing-function);
}

.module-action .module-search .search-expand.compsoul-popup-active {
  background: rgb( var(--color-first-) );
  color: rgb( var(--color-first) );
}

.module-action .module-search .search-expand:before,
.module-action .module-search .search-expand:after {
  transition: opacity var(--animation-duration) var(--animation-timing-function);
}

.module-action .module-search .search-expand.compsoul-popup-active:before {
  opacity: 0;
}

.module-action .module-search .search-expand:after {
  content: "\e90f";
  display: block;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.module-action .module-search .search-expand.compsoul-popup-active:after {
  opacity: 1;
}

.module-action .module-menu {
  container: unset;
}

.module-action .module-menu .menu-container {
  position: static;
}

.module-action .module-menu .menu-button {
  font-size: calc( 0.18 * var(--rem) );
  padding: 1em 1.667em;
  margin: 0;
}

.module-action .module-menu .menu-button {
  border-radius: 0.5em;
  transform: unset !important;
  transition: background var(--animation-duration) var(--animation-timing-function);
}

.module-action .module-menu .menu-button.compsoul-popup-active {
  background: rgb( var(--color-first-) );
}

.module-action .module-menu .menu-button:before,
.module-action .module-menu .menu-button:after,
.module-action .module-menu .menu-button .menu-icon,
.module-action .module-menu .menu-button .menu-icon:before,
.module-action .module-menu .menu-button .menu-icon:after {
  background: rgb( var(--color-main-) );
  display: block;
  position: relative;
  transition: background var(--animation-duration) var(--animation-timing-function),
              opacity var(--animation-duration) var(--animation-timing-function),
              transform var(--animation-duration) var(--animation-timing-function);
}

.module-action .module-menu .menu-button.compsoul-popup-active:before {
  transform: translate(150%, 25%);
}

.module-action .module-menu .menu-button.compsoul-popup-active:after {
  transform: translate(150%, -25%);
}

.module-action .module-menu .menu-button .menu-icon:before,
.module-action .module-menu .menu-button .menu-icon:after {
  opacity: 0;
  position: absolute;
  inset: 0;
}

.module-action .module-menu .menu-button .menu-icon:before {
  transform: translate(0 , calc( -100% - 0.2em ));
}

.module-action .module-menu .menu-button.compsoul-popup-active .menu-icon:before {
  opacity: 1;
  transform: translate(-150% , calc( -75% - 0.2em ));
}

.module-action .module-menu .menu-button .menu-icon:after {
  transform: translate(0 , calc( 100% + 0.2em ));
}

.module-action .module-menu .menu-button.compsoul-popup-active .menu-icon:after {
  opacity: 1;
  transform: translate(-150% , calc( 75% + 0.2em ));
}

.module-action .module-menu .menu-button.compsoul-popup-active:before,
.module-action .module-menu .menu-button.compsoul-popup-active:after,
.module-action .module-menu .menu-button.compsoul-popup-active .menu-icon,
.module-action .module-menu .menu-button.compsoul-popup-active .menu-icon:before,
.module-action .module-menu .menu-button.compsoul-popup-active .menu-icon:after {
  background: rgb( var(--color-first) );
}

.module-action .module-menu .menu-content {
  box-shadow: unset;
  border-radius: unset;
  display: block;
  max-height: unset;
  overflow: unset;
  padding: 0;
}

.module-action .module-menu .menu-content:after {
  display: none;
}

.module-action .module-phone .phone-link {
  color: rgb( var(--color-font-) );
  font-size: calc( 0.18 * var(--rem) );
  padding: 1em 1.667em;
  margin: 0;
}

.module-action .module-phone .phone-link:after {
  font-size: 1.2em;
}

.module-action .module-phone .phone-text {
  display: none;
}

.module-action .module-login .login-link {
  color: rgb( var(--color-font-) );
  font-size: calc( 0.18 * var(--rem) );
  padding: 1em 1.667em;
  margin: 0;
}

.module-action .module-login .login-link:after {
  font-size: 1.2em;
}

.module-action .module-login .login-text {
  display: none;
}

.module-action .module-basket .basket-link {
  align-items: start;
  color: rgb( var(--color-font-) );
  font-size: calc( 0.18 * var(--rem) );
}

.module-action .module-basket .basket-link:hover,
.module-action .module-basket .basket-link:focus,
.module-action .module-basket .basket-link:hover:before,
.module-action .module-basket .basket-link:focus:before  {
  color: rgb( var(--color-font-) );
}

.module-action .module-basket .basket-link:before {
  background: none;
  font-size: calc( 0.216 * var(--rem) );
  padding: 0.833em 1.25em;
  transition: unset;
}

.module-action .module-basket .basket-link:hover .basket-count,
.module-action .module-basket .basket-link:focus .basket-count {
  background: rgb( var(--color-main-) );
}

.module-action .module-basket .basket-count {
  transform: translate(-30%, -10%);
  margin: 0 -1em 0 -0.6em;
}

.module-action .module-phone {
  display: none;
}

@media (width <= 1000px) {
  .module-action {
    display: flex;
  }
}

.module-products {
  container: products / inline-size;
}

.module-products .products-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --color-main: var(---color-main, 230, 238, 239);
  --color-first: var(---color-first, 255, 255, 255);

  align-items: last baseline;
  background: rgb( var(--color-main) );
  display: grid;
  gap: calc( 0.32 * var(--rem) );
  grid-template-areas:
  "heading more"
  "listing listing ";
  grid-template-columns: 1fr auto;
  padding-bottom: calc( 0.5 * var(--grid) );
  padding-top: calc( 0.5 * var(--grid) );
}

.module-products + .module-products {
  margin-top: calc( -1 * var(---grid) );
}

.module-products + .module-products .products-container {
  background: rgb( var(--color-first) );
}

.module-products .products-heading {
  grid-area: heading;
}

.module-products .products-listing {
  grid-area: listing;
}

.module-products .products-more {
  justify-self: end;
  grid-area: more;
}

@container products (width > 1000px) {
  .module-products .module-listing .listing-container {
    transform: unset !important;
  }
}

@container products (max-width: 1000px) {
  .module-products .products-container {
    align-items: center;
    gap: calc( var(--grid) / 2 );
    grid-template-columns: 1fr minmax(min-content, 35%);
    justify-content: space-between;
    overflow: hidden;
  }

  .module-products .products-listing {
    max-width: 290px;
  }

  .module-products .module-listing .listing-container {
    gap: 0;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: unset;
    margin: 0 calc( -0.05 * var(--em) );
    transition: transform var(--animation-duration);
  }

  .module-products .module-listing .listing-item {
    padding: 0 calc( 0.05 * var(--em) );
  }

  .module-products .module-listing .listing-heading {
    max-width: 80%;
  }
}

.module-listing {
  container: listing / inline-size;
}

.module-listing .listing-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);
  --em: var(--rem);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);

  display: grid;
  gap: calc( 0.20 * var(--em) ) calc( 0.12 * var(--em) );
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.module-listing .listing-item {
  display: grid;
  gap: calc( 0.12 * var(--em) );
  grid-row: auto / span 3;
  grid-template-rows: subgrid;
}

.module-listing .listing-heading {
  font-size: calc( 0.20 * var(--em) );
  line-height: 1.25;
}

.module-listing .listing-heading a {
  color: inherit;
  text-decoration: none;
}

.module-listing .listing-main {
  aspect-ratio: 0.75;
  display: grid;
  grid-template-columns: calc( 0.20 * var(--em) ) auto calc( 0.20 * var(--em) ) auto calc( 0.20 * var(--em) );
  grid-template-rows: calc( 0.20 * var(--em) ) 1fr calc( 0.20 * var(--em) ) auto calc( 0.24 * var(--em) );
  order: -1;
  z-index: 0;
}

.module-listing .listing-main-column {
  align-self: start;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  flex-flow: column;
  justify-self: start;
}

.module-listing .listing-main-column:nth-child(2) {
  grid-column: 4;
  justify-self: end;
}

.module-listing .listing-figure {
  border-radius: calc( 0.20 * var(--em) );
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  overflow: hidden;
  position: relative;
  z-index: -1;
}

.module-listing .listing-figure:before,
.module-listing .listing-figure:after {
  background: rgb( var(--color-first) );
  content: "";
  inset: 0;
  position: absolute;
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  z-index: -1;
}

.module-listing .listing-item-dark .listing-figure:before,
.module-listing .listing-item-dark .listing-figure:after {
  background: rgb( var(--color-first-) );
}

.module-listing .listing-figure:after {
  background: linear-gradient( to right, rgba( var(--color-first-), 0 ) , rgba( var(--color-first-), 0.1 ));
  opacity: 0;
}

.module-listing .listing-item-dark .listing-figure:after {
  background: linear-gradient( to right, rgba( var(--color-first), 0 ) , rgba( var(--color-first), 0.1 ));
}

.module-listing .listing-item:hover .listing-figure:after,
.module-listing .listing-item:focus-within .listing-figure:after {
  opacity: 1;
}

.module-listing .listing-img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.module-listing .listing-main-footer {
  grid-column: 2 / 5;
  grid-row: 4;
}

.module-listing .component-flag {
  align-items: start;
  flex-flow: column;
  max-width: calc( 0.80 * var(--em) );
}

.module-listing .component-variant {
  align-items: stretch;
  flex-flow: column;
}

.module-listing .listing-item .component-variant .variant-item {
  opacity: 0;
  transform: translate(25%, 0);
  transition: opacity var(--animation-duration) var(--animation-timing-function),
              transform var(--animation-duration) var(--animation-timing-function);
}

.module-listing .listing-item:hover .component-variant .variant-item,
.module-listing .listing-item:focus-within .component-variant .variant-item {
  opacity: 1;
  transform: translate(0);
}

.module-listing .listing-item .component-price {
  font-size: calc( 0.32 * var(--em) );
}

.module-listing .listing-atc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-listing .listing-atc .button {
  min-width: 72%;
  opacity: 0;
  transform: translate(0, 25%);
  transition: background var(--animation-duration) var(--animation-timing-function),
              color var(--animation-duration) var(--animation-timing-function),
              opacity var(--animation-duration) var(--animation-timing-function),
              transform var(--animation-duration) var(--animation-timing-function);
}

.module-listing .listing-item:hover .listing-atc .button,
.module-listing .listing-item .listing-atc .button.loading,
.module-listing .listing-item:focus-within .listing-atc .button {
  opacity: 1;
  transform: translate(0);
}

.module-listing .listing-atc .listing-atc-text {
  pointer-events: none;
}

@media (width <= 1000px) {
  .module-listing .listing-item .listing-main-footer {
    justify-self: end;
  }

  .module-listing .listing-item .listing-atc .button {
    aspect-ratio: 1;
    border-radius: 100%;
    display: grid;
    font-size: calc( 0.20 * var(--em) );
    margin: 0 0 0 auto;
    min-width: unset;
    opacity: 1;
    padding: 0.75em;
    transform: translate(0);
  }

  .module-listing .listing-item .listing-atc .button:before,
  .module-listing .listing-item .listing-atc .button:after {
    grid-column: 1;
    grid-row: 1;
  }

  .module-listing .listing-item .listing-atc .button:before {
    opacity: 1;
    content: "\e901";
  }

  .module-listing .listing-item .listing-atc .button.loading:before {
    opacity: 0;
  }

  .module-listing .listing-item .listing-atc-text {
    display: none;
  }
}

[class*="module-grid"] {
  container: grid / inline-size;
}

[class*="module-grid"] .grid-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);
  
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  --color-main-: var(---color-main-, 109, 4, 254);
}

[class*="module-grid"] .grid-heading {
  font-size: min( calc( 1.28 * var(--rem) ), 6.8vw );
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
  margin: 0 0 0.75em;
}

[class*="module-grid"] .grid-heading:last-child {
  margin-bottom: 0;
}

[class*="module-grid"] .grid-heading span {
  color: rgb( var(--color-main-) );  
  display: block;
  font-size: 0.28125em;
  font-weight: 700;
  letter-spacing: 0.4em;
  margin: 0.4em 0 0 0;
  text-transform: uppercase;
}

[class*="module-grid"] .grid-subheading {
  display: block;
  font-size: min( calc( 0.32 * var(--rem) ), 2vw );
  font-weight: 200;
  line-height: 1.35;
}

[class*="module-grid"] .grid-subheading:last-child {
  margin-bottom: 0;
}

[class*="module-grid"] .grid-logotype {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[class*="module-grid"] .grid-columns {
  display: flex;
  grid-column: 1 / -1;
}

[class*="module-grid"] .grid-column {
  flex: 1;
}

[class*="module-grid"] img {
  max-width: 100%;
}

[class*="module-grid"] ~ .module-entry {
  margin-top: var(---grid);
  padding-left: var(---padding);
  padding-right: var(---padding);
  text-align: center;
}

.module-grid-first .grid-container {
  display: grid;
  gap: 0 min( calc( 0.5 * var(--grid) ), min( 4.6vh, 2.6vw ) );
  grid-column: unset;
  grid-template-columns: 7fr 9fr;
}

.module-grid-first .grid-heading {
  align-self: end;
  color: rgb( var(--color-font-) );  
  font-size: min( calc( 2.56 * var(--rem) ), min( 24vh, 13.4vw ) );
  font-weight: 700;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  letter-spacing: -0.06em;
  line-height: 1;
  margin: 0;
  text-orientation: mixed;
  transform: translate(-60%, 0) scale(-1);
  writing-mode: vertical-rl;
}

.module-grid-first .grid-letter {
  display: inline-block;
  opacity: 0;
  transform: translate(100%, 0);
  transition: opacity 0.6s,
              transform 0.6s;
}

.module-grid-first .grid-heading.active .grid-letter {
  opacity: 1;
  transform: translate(0, 0);
}

.module-grid-first .grid-img {
  align-self: end;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  max-height: min( calc( 10 * var(--rem) ), 52vw );
  z-index: 1;
}

.module-grid-first .grid-content {
  align-self: center;
  font-size: calc( 0.36 * var(---rem) );
  font-weight: 200;
  line-height: 1.5em;
}

.module-grid-first .grid-content h2:first-child,
.module-grid-first .grid-content h3:first-child,
.module-grid-first .grid-content h4:first-child {
  font-size: min( calc( 1.28 * var(--rem) ), 6.8vw );
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.92;
  margin-bottom: 0.6em;
  text-transform: uppercase;
}

.module-grid-second .grid-container {
  display: grid;
  grid-template-columns: 1fr fit-content(50%);
  grid-template-rows: auto auto auto auto;
}

.module-grid-second .grid-heading {
  grid-column: 1;
}

.module-grid-second .grid-heading:only-child {
  margin: 0;
}

.module-grid-second .grid-subheading {
  grid-column: 1;
  margin: 0 0 1.25em;
}

.module-grid-second .grid-content {
  grid-column: 1;
}

.module-grid-second .grid-figure {
  display: flex;
  flex-flow: column;
  grid-column: 2;
  grid-row: 1 / -1;
  margin: 0 0 0 24%;
}

.module-grid-second .grid-figure .grid-img {
  flex: 1;
  object-fit: cover;
  width: 100%;
}

.module-grid-second .grid-figure .grid-figcaption {
  color: rgb( var(--color-first) );  
  background: rgb( var(--color-first-) );  
  font-size: calc( 0.32 * var(--rem) );
  font-weight: 200;
  padding: 1em 0;
  text-align: center;
}

.module-grid-second .grid-figure .grid-caption {
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: center;
}

.module-grid-third .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
}

.module-grid-third .grid-heading {
  margin: 0 auto 0.4em;
  max-width: calc( 12 * var(--rem) );
}

.module-grid-third .grid-subheading {
  margin: 0 auto 2em;
  max-width: calc( 12 * var(--rem) );
}

.module-grid-third .grid-logotype {
  font-size: min( calc( 3 * var(--rem) ), min( 28vh, 15.625vw ) );
  font-weight: 900;
  letter-spacing: -0.06em;
  margin: 0 auto 0.25em;
  max-width: calc( 12 * var(--rem) );
}

.module-grid-third .grid-columns {
  gap: 10%;
  text-align: left;
}

.module-grid-page .grid-container {
  padding-top: calc( 0.5 * var(--grid) );
}

@container grid (max-width: 1000px) {

  [class*="module-grid"] .grid-heading {
    font-size: min( 4em, 18vw);
    margin: 0 0 0.82em;
  }

  [class*="module-grid"] .grid-heading span {
    font-size: 0.28125em;
  }

  [class*="module-grid"] .grid-subheading {
    font-size: 1.25em;
    line-height: 1.7;
    margin: 0 0 3em;
  }

  [class*="module-grid"] .grid-columns {
    flex-flow: column;
    gap: 2em 0;
  }

  .module-grid-first .grid-container {
    gap: var(--grid) 0;
    grid-template-columns: 1fr;
  }

  .module-grid-first .grid-heading {
    font-size: min( calc( 0.98 * var(--rem) ), min( 14vh, 28vw ) );
    margin: 0;
    padding: 0;
  }

  .module-grid-first .grid-img {
    max-height: min( calc( 4 * var(--rem) ), min( 54vh, 115vw ) );
  }

  .module-grid-first .grid-content {
    font-size: 1.5em;
    grid-column: 1 / -1;
    text-align: center;
  }

  .module-grid-first .grid-content h2:first-child,
  .module-grid-first .grid-content h3:first-child,
  .module-grid-first .grid-content h4:first-child {
    font-size: calc( 0.46 * var(--rem) );
    line-height: 1em;
  }

  .module-grid-second .grid-container {
    grid-template-columns: unset;
    grid-template-rows: unset;
    text-align: center;
  }

  .module-grid-second .grid-heading {
    text-align: center;
    order: -2;
  }

  .module-grid-second .grid-figure {
    grid-column: unset;
    grid-row: unset;
    order: -1;
    margin: 0 0 3em;
    max-width: calc( 5.20 * var(--rem) );
    justify-self: center;
  }

  .module-grid-third .grid-heading {
    max-width: unset;
  }

  .module-grid-third .grid-logotype {
    font-size: min( 25vw, calc( 1.84 * var(--rem) ) );
    margin: 0 auto calc( 0.40 * var(--rem) );
    max-width: unset;
  }
}

[class*="module-layout"] {
  container: layout;
}

[class*="module-layout"] .layout-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);
}

[class*="module-layout"] .layout-columns {
  display: flex;
  flex-flow: row wrap;
  gap: var(--grid);
}

[class*="module-layout"] .layout-column {
  flex: 1;
}

.module-brands {
  container: brands;
}

.module-brands .brands-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --size: min( 10vw, calc( 3.2 * var(--rem) ) );
  --gap: calc( var(--size) / 2 );

  display: grid;
  gap: var(--gap);
  grid-template-columns: 100% max-content 100% max-content;
  overflow: hidden;
  padding-bottom: calc( 0.5 * var(--grid) );
  padding-top: calc( 0.5 * var(--grid) );
  max-width: 100%;
}

.module-brands .brands-list {
  align-items: center;
  animation: module-brands-list 20s infinite linear;
  display: flex;
  gap: var(--gap);
  grid-column: 1 / 3;
  justify-content: space-around;
}

.module-brands .brands-list + .brands-list {
  grid-column: 3 / 5;
}

.module-brands .brands-container:hover .brands-list,
.module-brands .brands-container:focus-within .brands-list {
  animation-play-state: paused;
}

@keyframes module-brands-list {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate( calc( -100% - var(--gap) ), 0 );
  }
}

.module-brands .brands-img {
  display: block;
  max-height: calc( var(--size) / 3 );
  max-width: var(--size);
}

@media (width <= 1000px) {
  .module-brands .brands-container {
    --size: min(40vw, calc( 2 * var(--rem) ));
  }
}

.module-newsletter {
  container: newsletter;
}

.module-newsletter .newsletter-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);

  color: rgb( var(--color-font-) );
}

.module-footer .module-newsletter .newsletter-container {
  margin: 0 auto;
  max-width: calc( 8.44 * var(--rem) );
}

.module-newsletter .newsletter-heading {
  color: rgb( var(--color-font-) );
  font-size: min( calc( 0.96 * var(--rem) ), 5vw );
  line-height: 1;
  margin: 0 0 0.64em;
  text-align: center;
}

.module-newsletter .newsletter-fieldset {
  margin: 0 0 calc( 0.56 * var(--rem) ) 0;
  position: relative;
}

.module-newsletter .newsletter-fieldset:last-child {
  margin: 0;
}

.module-newsletter .newsletter-input-text {
  background: none;
  border: none;
  border-bottom: 0.1em solid rgb( var(--color-border) );
  color: rgb( var(--color-font-) );
  font-size: calc( 0.36 * var(--rem) );
  font-weight: 200;
  line-height: 1.5;
  margin: 0;
  padding: 0.5em 2.5em 0.5em 0.5em;
  width: 100%;
}

.module-newsletter .newsletter-submit {
  background: none;
  border: none;
  color: rgb( var(--color-font-) );
  cursor: pointer;
  font-size: calc( 0.30 * var(--rem) );
  padding: 0;
  position: absolute;
  right: 0.64em;
  margin: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.module-newsletter .newsletter-submit:before {
  display: none;
}

.module-newsletter .newsletter-checkbox {
  margin: 0 calc( 0.12 * var(--rem) );
}

.module-newsletter .component-choice {
  display: flex;
  font-size: calc( 0.20 * var(--rem) );
}

.module-newsletter .component-choice .choice-label {
  gap: calc( 0.30 * var(--rem) );
}

.module-newsletter .newsletter-link {
  align-items: center;
  color: rgb( var(--color-font-) );
  display: inline-flex;
  font-weight: 700;
  gap: 0.5em;
}

.module-newsletter .newsletter-link:before {
  display: none;
  text-decoration: none;
}

.module-newsletter .newsletter-link span {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-newsletter .newsletter-link:hover span,
.module-newsletter .newsletter-link:focus span {
  color: rgb( var(--color-main-) );
}

@media (width <= 1000px) {
  .module-newsletter .newsletter-heading {
    font-size: min(3em, 14vw);
    line-height: 1.25;
    margin: 0 0 var(--grid);
  }

  .module-newsletter .newsletter-fieldset {
    margin: 0 0 2em;
  }

  .module-newsletter .newsletter-input-text {
    font-size: 1.5em;
  }

  .module-newsletter .newsletter-submit {
    font-size: 1.5em;
  }

  .module-newsletter .newsletter-checkbox {
    margin: 0;
  }
}

.module-entry {
  container: entry / inline-size;
}

.module-entry .entry-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --color-border: var(---color-border, 200, 209, 210);
  --color-font-: var(---color-font-, 6, 16, 17);

  color: rgb( var(--color-font-) );
  display: inline-flex;
  max-width: 100%;
  position: relative;
}

.module-entry:first-child .entry-container {
  margin-top: 0;
}

.module-entry .entry-input {
  background: none;
  border: none;
  border: 0.1em solid rgb( var(--color-border) );
  color: rgb( var(--color-font-) );
  font-size: min( calc( 0.36 * var(--rem) ), 2vw );
  font-weight: 200;
  line-height: 1.5;
  margin: 0;
  min-width: 18em;
  padding: 0.5em 2.5em 0.5em 0.5em;
}

.module-entry .entry-submit {
  background: none;
  border: none;
  color: rgb( var(--color-font-) );
  cursor: pointer;
  font-size: min( calc( 0.36 * var(--rem) ), 2vw );
  padding: 0;
  position: absolute;
  right: 0.64em;
  margin: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.module-entry .entry-submit:before {
  display: none;
}

@media (width <= 1000px) {
  .module-entry .entry-input {
    font-size: min(1.5em, 6vw);
    min-width: unset;
  }

  .module-entry .entry-submit {
    font-size: min(1.5em, 6vw);
  }
}

.module-submenu {
  container: submenu;
}

.module-submenu .submenu-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: flex;
  gap: var(--grid);
}

.module-submenu .submenu-column {
  min-width: calc( 1.36 * var(--rem) );
}

.module-submenu .submenu-heading,
.module-submenu .submenu-label {
  font-weight: 700;
  margin-bottom: 3.5em;
  text-transform: uppercase;
}

.module-submenu .submenu-label,
.module-submenu .submenu-input {
  display: none;
}

.module-submenu .submenu-list {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
}

.module-submenu .submenu-link {
  color: rgb( var(--color-font-) );
  display: inline-block;
  margin: -0.625em;
  padding: 0.625em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-submenu .submenu-link:hover,
.module-submenu .submenu-link:focus {
  color: rgb( var(--color-main-) );
}

@media (width <= 1000px) {
  .module-submenu .submenu-container {
    align-items: center;
    display: flex;
    flex-flow: column;
    gap: 1.25em;
  }

  .module-submenu .submenu-column {
    align-items: center;
    display: flex;
    gap: 2em;
    flex-flow: column;
    min-width: unset;
    text-align: center;
  }

  .module-submenu .submenu-heading {
    display: none;
    margin: 0;
  }

  .module-submenu .submenu-label {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 0.625em;;
    line-height: 1.25;
    margin: -0.625em;
    padding: 0.625em;
  }

  .module-submenu .submenu-label:before {
    display: none;
  }

  .module-submenu .submenu-label:after {
    margin: -0.625em;
    padding: 0.625em;
  }

  .module-submenu :checked ~ .submenu-label:after {
    transform: rotate(-180deg);
  }

  .module-submenu .submenu-list {
    display: none;
  }

  .module-submenu :checked ~ .submenu-list {
    display: flex;
  }

  .module-submenu .submenu-list {
    align-items: center;
    gap: 1.5em;
    flex-flow: column;
    margin: 0 0 1.5em;
  }
}

.module-links {
  container: links;
}

.module-links .links-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: flex;
  flex-flow: column;
  gap: 1.25em;
}

.module-links .links-link {
  color: rgb( var(--color-font-) );
  display: inline-block;
  font-weight: 700;
  line-height: 1.25;
  margin: -0.625em;
  padding: 0.625em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-links .links-link:hover,
.module-links .links-link:focus {
  color: rgb( var(--color-main-) );
}

@media (width <= 1000px) {
  .module-links .links-container {
    align-items: center;
  }
}

.module-transaction {
  container: transaction;
}

.module-transaction .transaction-container {
  --rem: var(---rem, 100px);

  --color-font: var(---color-font, 127, 117, 142);

  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  gap: calc( 0.32 * var(--rem) );
}

.module-transaction .transaction-heading {
  color: rgb( var(--color-font) );
  font-size: calc( 0.10 * var(--rem) );
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-orientation: mixed;
  transform: scale(-1);
  writing-mode: vertical-rl;
}

.module-transaction .transaction-list {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: calc( 0.08 * var(--rem) ) calc( 0.32 * var(--rem) );
  justify-content: space-between;
}

.module-transaction .transaction-item {
  color: rgb( var(--color-font) );
  font-size: calc( 0.18 * var(--rem) );
  font-weight: 700;
  text-transform: uppercase;
}

.module-transaction .transaction-link {
  color: rgb( var(--color-font) );
  text-decoration: none;
}

.module-transaction .transaction-img {
  max-height: 100%;
}

@media (width <= 1000px) {
  .module-transaction .transaction-container {
    flex-flow: column;
  }

  .module-transaction .transaction-heading {
    order: unset !important;
    text-transform: uppercase;
    text-orientation: mixed;
    transform: unset;
    writing-mode: unset;
  }

  .module-transaction .transaction-list {
    display: grid;
    gap: calc( 0.16 * var(--rem) );
    grid-template-columns: 1fr 1fr 1fr;
  }

  .module-transaction .transaction-logo {
    max-width: 100%;
  }
}

.module-info {
  container: info;
}

.module-info .info-container {
  --rem: var(---rem, 100px);
}

.module-info .module-logo {
  margin: calc( -0.16 * var(--rem) ) 0 calc( 0.42 * var(--rem) ) 0;
}

.module-info .module-logo .logo-container:after {
  display: none;
}

.module-info strong + br {
  display: none;
}

@media (width <= 1000px) {
  .module-info .info-container {
    text-align: center;
  }

  .module-info .module-logo {
    margin: 0 0 calc( 0.42 * var(--rem) ) 0;
  }
}

.module-inline {
  container: inline;
}

.module-list + .module-inline {
  align-self: end;
  font-size: calc( 0.13 * var(--rem) );
  justify-self: end;
}

.module-inline .inline-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: flex;
}

.module-inline .inline-item {
  align-items: center;
  display: flex;
  line-height: 1.25em;
}

.module-inline .inline-item:after {
  background: rgb( var(--color-font-) );
  content: "";
  display: inline-block;
  height: 0.8em;
  margin: 0 1em;
  min-width: 0.0625em;
  width: 0.0625em;
}

.module-inline .inline-item:last-child:after {
  display: none;
}

.module-inline .inline-link {
  color: rgb( var(--color-font-) );
  display: inline-block;
  margin: -0.625em;
  padding: 0.625em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-inline a:not(.inline-link) {
  color: rgb( var(--color-font-) );
  font-weight: 700;
  transition: color var(--animation-duration) var(--animation-timing-function);
  text-decoration: none;
}

.module-inline a:hover,
.module-inline a:focus {
  color: rgb( var(--color-main-) );
}

@media (width <= 1000px) {
  .module-inline .inline-container {
    align-items: center;
    flex-flow: column;
    gap: calc( 0.10 * var(--rem) );
  }

  .module-list + .module-inline {
    align-self: start;
    font-size: calc( 0.16 * var(--rem) );
  }

  .module-inline .inline-item {
    font-size: 0.8em;
  }

  .module-inline .inline-item:after {
    display: none;
  }
}

.module-footer {
  container: footer / inline-size;
}

.module-footer .footer-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-main: var(---color-main, 230, 238, 239);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);

  background: rgb( var(--color-main) );
  padding-bottom: calc( 0.72 * var(--rem) );
}

.module-footer .content a {
  color: rgb( var(--color-font-) );
  font-weight: 700;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-footer .content a:hover,
.module-footer .content a:focus {
  color: rgb( var(--color-main-) );
}

.module-footer .footer-top {
  padding: calc( 0.64 * var(--rem) ) 0;
  border-bottom: 0.1em solid rgb( var(--color-border) );
}

.module-footer .footer-main {
  border-bottom: 0.1em solid rgb( var(--color-border) );
  display: flex;
  justify-content: space-between;
  padding: calc( 0.82 * var(--rem) ) 0 calc( 0.64 * var(--rem) ) 0;
}

.module-footer .footer-main .footer-column {
  margin: 0 auto;   
}

.module-footer .footer-main .footer-column:first-child {
  margin: 0 auto 0 0;   
}

.module-footer .footer-main .footer-column:last-child {
  margin: 0 0 0 auto;   
}

.module-footer .footer-main .content {
  font-size: calc( 0.16 * var(--rem) );
}

.module-footer .footer-main .module-social,
.module-footer .footer-main .social-container {
  height: 100%;
}

.module-footer .footer-end {
  align-items: center;
  border-bottom: 0.1em solid rgb( var(--color-border) );
  display: flex;
  padding: calc( 0.24 * var(--rem) ) 0;
  justify-content: space-between;
}

.module-footer .footer-end .footer-column {
  max-width: 50%;
}

.module-footer .module-transaction:last-child .transaction-heading {
  order: 1;
  transform: unset;
}

.module-footer .footer-after {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: var(--grid);
}

@container footer (max-width: 1000px) {
  .module-footer .footer-container {
    padding-bottom: calc( 1.5 * var(---grid) );
  }

  .module-footer .footer-top {
    padding: var(--grid) 0 calc( var(--grid) / 2 );
  }

  .module-footer .footer-main {
    flex-flow: column;
    gap: 4em 0;
    padding: calc( var(--grid) / 2 ) 0 calc( 0.625 * var(--grid) ) 0;
  }

  .module-footer .footer-end {
    border: 0;
    border-bottom: 0.1em solid rgb( var(--color-border) );
    flex-flow: column;
    gap: calc( var(--grid) / 2 );
  }

  .module-footer .footer-after {
    flex-flow: column;
    gap: calc( 0.375 * var(--grid) );
    justify-content: center;
    margin-top: calc( 0.375 * var(--grid) );
  }

  .module-footer .footer-after .module-inline:last-child .inline-container {
    flex-flow: column-reverse;
  }
}

.module-breadcrumb { 
  container: breadcrumb / inline-size;
}

.module-breadcrumb .breadcrumb-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: flex;
  flex-flow: row wrap;
  gap: 0.25em 1em;
  padding-bottom: 1em;
  padding-top: 1em;
}

.module-breadcrumb .breadcrumb-item {
  color: rgb( var(--color-font-) );
  font-weight: 300;
}

.module-breadcrumb .breadcrumb-link {
  color: rgb( var(--color-font) );
  display: inline-block;
  font-weight: 300;
  margin: -0.625em;
  padding: 0.625em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-breadcrumb .breadcrumb-link:hover,
.module-breadcrumb .breadcrumb-link:focus {
  color: rgb( var(--color-main-) );
}

@media (width <= 1000px) {
  .module-breadcrumb {
    margin: 0 0 calc( var(---grid) / 2 );
  }
}

@container breadcrumb (max-width: 1000px) {
  .module-breadcrumb .breadcrumb-container {
    gap: 1em;
  }

  .module-breadcrumb .breadcrumb-item {
    font-size: 0.75em;
  }
}

.module-filter {
  container: filter;
}

.module-filter .filter-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main: var(---color-main, 230, 238, 239);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);

  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 3.25em 1em;
}

.module-filter .filter-option {
  flex: 1 100%;
}

.module-filter .filter-heading {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0 0 2.5em 0;
}

.module-filter .filter-list {
  display: flex;
  flex-flow: column;
  gap: 1.375em;
}

.module-filter .filter-label {
  font-size: 1.25em;
}

.module-filter .filter-label .choice-text {
  font-weight: 300;
}

.module-filter :checked ~ .choice-label .choice-text {
  font-weight: 700;
}

.module-filter .filter-label .choice-label {
  gap: 1em;
}

.module-filter .filter-button {
  min-width: 15em;
}

.module-filter .filter-active-list {
  display: flex;
  flex-flow: row wrap;
  gap: 0.625em;
}

.module-filter .filter-active-link {
  align-items: center;
  border: 1px solid rgb( var(--color-font-) );
  border-radius: 1.25em;
  color: rgb( var(--color-font-) );
  display: flex;
  gap: 1em;
  min-width: 10.25em;
  padding: 1em;
  text-decoration: none;
  transition: background var(--animation-duration) var(--animation-timing-function);
  white-space: nowrap;
}

.module-filter .filter-active-link:after {
  display: none;
}

.module-filter .filter-active-link:hover,
.module-filter .filter-active-link:focus {
  background: rgb( var(---color-main) );
}

@media (width <= 1000px) {
  .module-filter .filter-container {
    align-items: unset;
    flex-flow: column;
    gap: 2em 1em;
  }

  .module-filter .filter-active-list {
    font-size: calc( 0.10 * var(--rem) );
  }
}

.module-sort {
  container: sort;
}

.module-sort .sort-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main: var(---color-main, 230, 238, 239);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  --color-font-: var(---color-font-, 6, 16, 17);

  align-items: center;
  display: flex;
  gap: 0.25em;
  padding: 1.25em 2em;
  position: relative;
  z-index: 0;
}

.module-sort .sort-heading {
  pointer-events: none;
  white-space: nowrap;
}

.module-sort .sort-button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 1em;
  justify-content: space-between;
  margin: -0.625em;
  min-width: 13.125em;
  padding: 0.625em;
  white-space: nowrap;
}

.module-sort .sort-button:before {
  border: 1px solid rgb( var(--color-font-) );
  border-radius: 1.25em;
  content: "";
  inset: 0;
  position: absolute;
  transition: background var(--animation-duration) var(--animation-timing-function);
  z-index: -1;
}

.module-sort .sort-button:hover:before,
.module-sort .sort-button:focus:before {
  background: rgb( var(---color-main) );
}

.module-sort .sort-list {
  background: rgb( var(---color-first) );
  border: 1px solid rgb( var(--color-font-) );
  border-radius: 1.25em;
  padding: 1em 0;
}

.module-sort .sort-link {
  color: rgb( var(---color-font-) );
  display: block;
  line-height: 1.5;
  padding: 0.25em 2em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
  white-space: nowrap;
}

.module-sort .sort-link:hover,
.module-sort .sort-link:focus {
  color: rgb( var(---color-main-) );
}

.module-sort .sort-link-current {
  font-weight: 700;
}

.module-sort .sort-close {
  display: none;
}

@media (width <= 1000px) {
  .module-sort .sort-button {
    justify-content: end;
    line-height: 1.25;
    margin-left: auto;
    min-width: unset;
    text-align: right;
    white-space: unset;
  }

  .module-sort .sort-link {
    white-space: unset;
  }

  .module-sort .sort-close {
    aspect-ratio: 1 / 1;
    background: rgb( var(--color-first-) );
    border: none;
    border-radius: 100%;
    color: rgb( var(--color-first) );
    cursor: pointer;
    display: block;
    font-size: 0.75em;
    margin: -1em -0.25em 0 0;
    padding: 1em;
  }

  .module-sort .sort-close:before {
    display: none;
  }
}

.module-catalog {
  container: catalog / inline-size;
}

.module-catalog .catalog-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-main: var(---color-main, 230, 238, 239);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  
  background: rgb( var(--color-main) );
  display: grid;
  gap: 0;
  grid-template-columns: var(---padding) minmax(0, 4fr) minmax(0, 10fr) var(---padding);
}

.module-catalog .catalog-header {
  background: rgb( var(--color-first) );
  display: flex;
  flex-flow: column;
  grid-column: 1 / -1;
  order: -3;
  padding-top: calc( 0.24 * var(--rem) );
}

.module-catalog .catalog-title {
  font-size: min( calc( 0.96 * var(--rem) ), 5vw );
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1.25em;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}

.module-catalog .catalog-details {
  border-bottom: 0.1em solid rgb( var(--color-border) );
  padding-bottom: calc( 0.24 * var(--rem) );
}

.module-catalog .catalog-summary-input {
  display: none;
}

.module-catalog .catalog-summary-input:not(:checked) ~ :nth-child(n + 4):not(.catalog-summary-button) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

.module-catalog .catalog-summary-button {
  cursor: pointer;
  display: inline-block;
  font-size: calc( 0.12 * var(--rem) );
  margin: -0.625em;
  padding: 0.625em;
  transform: scale(-1);
}

.module-catalog .catalog-summary-input:not(:checked) ~ .catalog-summary-button {
  transform: scale(1);
}

.module-catalog .catalog-summary-button:before {
  display: none;
}

.module-catalog .catalog-top {
  align-items: center;
  background: rgb( var(--color-first) );
  display: flex;
  gap: calc( 0.32 * var(--rem) );
  grid-column: 1 / -1;
  justify-content: space-between;
  order: -3;
  padding-bottom: calc( 0.48 * var(--rem) );
  padding-top: calc( 0.32 * var(--rem) );
}

.module-catalog .catalog-top .module-sort {
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.module-catalog .catalog-filter,
.module-catalog .catalog-filters {
  display: none;
}

.module-catalog .catalog-main {
  grid-column: 3;
  order: -1;
  padding-bottom: calc( 0.86 * var(--rem) );
  padding-top: calc( 0.32 * var(--rem) );
}

.module-catalog .catalog-main .catalog-heading {
  margin: 0 0 1.25em;
}

.module-catalog .listing-container {
  grid-template-columns: 1fr 1fr 1fr;
}

.module-catalog .catalog-sub {
  grid-column: 2;
  order: -2;
}

.module-catalog .catalog-sub-container {
  display: flex;
  flex-flow: column;
  gap: calc( 0.48 * var(--rem) );
  padding-bottom: calc( 0.86 * var(--rem) );
  padding-right: calc( 0.64 * var(--rem) );
  padding-top: calc( 0.32 * var(--rem) );
}

.module-catalog .catalog-sub .brands-container {
  --size: calc( 1.5 * var(--rem) );
}

.module-catalog .catalog-heading {
  margin: 0 0 1.5em;
  text-transform: none;
}

.module-catalog .catalog-heading-link {
  color: rgb( var(--color-font-) );
  text-decoration: unset;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-catalog .catalog-heading-link:hover,
.module-catalog .catalog-heading-link:focus {
  color: rgb( var(--color-main-) );
}

.module-catalog .catalog-item {
  margin: 0 0 1.5em;
}

.module-catalog .catalog-link {
  color: rgb( var(--color-font-) );
  display: inline-block;
  font-size: 1.25em;
  font-weight: 300;
  margin: -0.625em;
  padding: 0.625em;
  text-decoration: unset;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-catalog .catalog-link:hover,
.module-catalog .catalog-link:focus {
  color: rgb( var(--color-main-) );
}

.module-catalog .catalog-list .catalog-list {
  padding: 1.5em 0 0 1.5em;
}

.module-catalog .catalog-footer {
  background: rgb( var(--color-first) );
  grid-column: 1 / -1;
  padding-bottom: calc( 0.64 * var(--rem) );
  padding-top: calc( 0.64 * var(--rem) );
}

.module-catalog .catalog-toggler,
.module-catalog .catalog-close,
.module-catalog .catalog-apply {
  display: none;
}

.module-catalog .module-entry {
  margin-top: calc( var(--grid) / 2 );
}

@container catalog (max-width: 1000px) {
  .module-catalog .catalog-container {
    display: flex;
    flex-flow: column;
  }

  .module-catalog .catalog-header {
    padding-top: 0;
  }

  .module-catalog .catalog-title {
    font-size: calc( 0.46 * var(--rem) );
    line-height: 1.05;
  }

  .module-catalog .catalog-summary-input:not(:checked) ~ :nth-child(n + 3):not(.catalog-summary-button) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }

  .module-catalog .catalog-summary-button {
    font-size: calc( 0.10 * var(--rem) );
  }

  .module-catalog .catalog-top {
    align-items: unset;
    flex-flow: column;
    justify-content: unset;
    padding-bottom: calc( var(--grid) / 2 );
    padding-top: calc( var(--grid) / 2 );
  }

  .module-catalog .catalog-top .module-sort {
    margin: 0;
  }

  .module-catalog .catalog-main,
  .module-catalog .catalog-sub + .catalog-main {
    padding: calc( 2 * var(---padding) ) var(---padding);
  }

  .module-catalog .listing-container {
    grid-template-columns: repeat( auto-fit, minmax( calc( 2.90 * var(--rem) ), 1fr ) );
    justify-content: center;
  }

  .module-catalog .catalog-filters {
    align-items: center;
    background: none;
    border: 1px solid rgb( var(--color-font-) );
    border-radius: 1.25em;
    cursor: pointer;
    display: flex;
    gap: 0.25em;
    justify-content: space-between;
    padding: 1.25em 2em;
    transition: background var(--animation-duration) var(--animation-timing-function);
  }

  .module-catalog .catalog-filters:hover,
  .module-catalog .catalog-filters:focus {
    background: rgb( var(---color-main) );
  }

  .module-catalog .catalog-filters:before {
    display: none;
  }

  .module-catalog .catalog-sub {
    bottom: 0;
    order: 2;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: width var(--animation-duration) var(--animation-timing-function);
    width: 0;
    will-change: width;
    z-index: 4;
  }

  .module-catalog .catalog-sub.compsoul-popup-active {
    width: 100vw;
  }

  .module-catalog .catalog-sub-container {
    background: rgb( var(--color-first) );
    height: 100%;
    overflow: auto;
    padding: calc( 0.32 * var(--rem) ) calc( 0.32 * var(--rem) ) calc( 2 * var(--grid) );
    width: 100vw;
  }

  .module-catalog .catalog-toggler {
    background: rgb( var(--color-first-) );
    border: none;
    border-radius: 1em 0 0 1em;
    color: rgb( var(--color-first) );
    cursor: pointer;
    display: block;
    font-size: calc( 0.18 * var(--rem) );
    left: 0;
    margin: 0;
    padding: 1em;
    position: absolute;
    top: 5em;
    transform: translate(-100%, 0);
    z-index: -1;
  }

  .module-catalog .catalog-close,
  .module-catalog .catalog-apply {
    background: rgb( var(--color-first-) );
    border: none;
    border-radius: 1em;
    color: rgb( var(--color-first) );
    cursor: pointer;
    display: block;
    font-size: calc( 0.18 * var(--rem) );
    line-height: 1em;
    left: calc( 100vw - 0.5em );
    margin: 0;
    padding: 1em;
    position: absolute;
    top: 0.5em;
    transform: translate(-100%, 0);
    z-index: 4;
  }

  .module-catalog .catalog-toggler:before,
  .module-catalog .catalog-close:before,
  .module-catalog .catalog-apply:before {
    display: none;
  }

  .module-catalog .catalog-apply {
    top: 4em;
  }

  .module-catalog .catalog-footer {
    padding-bottom: var(--grid);
    padding-top: var(--grid);
  }

  .module-catalog .catalog-sub .module-filter[data-facets]:before {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: rgb( var(--color-main-) );
    border-radius: 100%;
    color: rgb( var(--color-first) );
    content: attr(data-facets);
    display: flex;
    font-size: 0.75em;
    justify-content: start;
    left: -5em;
    line-height: 1em;
    overflow: hidden;
    text-overflow: "+";
    top: 10.75em;
    padding: 0.75em;
    position: absolute;
    white-space: nowrap;
  }

  .module-catalog .catalog-sub .module-filter[data-facets="0"]:before {
    display: none;
  }

  .module-catalog .catalog-sub .module-filter[data-facets="0"] ~ .catalog-apply {
    display: none;
  }

  .module-catalog .catalog-sub .module-brands {
    margin-left: calc( -0.32 * var(--rem) );
    margin-right: calc( -0.32 * var(--rem) );
  }
}

.module-dropdown {
  container: dropdown;
}

.module-dropdown .dropdown-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  position: relative;
}

.module-dropdown .dropdown-content {
  bottom: -2em;
  box-sizing: content-box;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  right: 0;
  transform: translate(0, 100%);
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  z-index: 0;
}

.module-dropdown .dropdown-content:hover,
.module-dropdown .dropdown-content:focus-within,
.module-dropdown .dropdown-button:hover ~ .dropdown-content,
.module-dropdown .dropdown-button:focus ~ .dropdown-content {
  pointer-events: auto;
  opacity: 1;
}

.module-dropdown .dropdown-content:before {
  content: "";
  position: absolute;
  inset: -2em 0 0 0;
  z-index: -1;
}

.module-dropdown .dropdown-close {
  bottom: -2em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: translate(0, 100%);
  transition: opacity var(--animation-duration) var(--animation-timing-function);
}

.module-dropdown .dropdown-content:hover ~ .dropdown-close,
.module-dropdown .dropdown-content:focus-within ~ .dropdown-close,
.module-dropdown .dropdown-button:hover ~ .dropdown-close,
.module-dropdown .dropdown-button:focus ~ .dropdown-close  {
  pointer-events: auto;
  opacity: 1;
}

@media (width <= 1000px) {
  .module-dropdown .dropdown-content {
    min-width: unset;
    max-width: 100%;
    right: 0;
    transform: translate(0, 100%);
  }
}

.module-navigation {
  container: navigation / inline-size;
}

.module-navigation .navigation-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);

  align-items: center;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  justify-items: center;
}

.module-navigation .navigation-button {
  background: none;
  border: none;
  color: rgb( var(--color-font) );
  cursor: default;
  display: inline-flex;
  flex-flow: column;
  font-size: min( 5em, 4.2vw );
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1.2;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-navigation .navigation-button[href] {
  color: rgb( var(--color-font-) );
  cursor: pointer;
}

.module-navigation .navigation-button[href]:hover,
.module-navigation .navigation-button[href]:focus {
  color: rgb( var(--color-main-) );
}

.module-navigation .navigation-button:before {
  font-size: 0.4em;
}

.module-navigation .navigation-button:after {
  display: none;
}

.module-navigation .navigation-prev {
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0 auto 0 0;
  text-align: left;
}

.module-navigation .navigation-next {
  grid-column: 3;
  grid-row: 1 / -1;
  margin: 0 0 0 auto;
  text-align: right;
}

.module-navigation .navigation-summary {
  align-items: center;
  display: flex;
  font-size: 1em;
  font-weight: 300;
}

.module-navigation .navigation-input {
  -moz-appearance: textfield;
  font-size: 1.25em;
  border: 0.005em solid rgb( var(--color-font) );
  border-radius: 1em;
  line-height: 3em;
  max-width: 4.8em;
  text-align: center;
}

.module-navigation .navigation-input::-webkit-outer-spin-button,
.module-navigation .navigation-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.module-navigation .navigation-list {
  display: flex;
  flex-flow: row wrap;
  gap: 0.3125em;
}

.module-navigation .navigation-item {
  border-bottom: 0.15em solid rgb( var(--color-font-) );
  color: rgb( var(--color-font-) );
  font-size: 1.25em;
  font-weight: 700;
  height: 1.6em;
  min-width: 2em;
  text-align: center;
}

.module-navigation .navigation-link {
  border-bottom: 0.15em solid rgb( var(--color-font) );
  box-sizing: content-box;
  color: rgb( var(--color-font) );
  display: block;
  height: 100%;
  margin: 0 0 -0.15em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function),
              border var(--animation-duration) var(--animation-timing-function);
  width: 100%;
}

.module-navigation .navigation-link:hover,
.module-navigation .navigation-link:focus-within {
  border-color: rgb( var(--color-main-) );
  color: rgb( var(--color-main-) );
}

@container catalog (max-width: 1000px) {
  .module-navigation .navigation-container {
    font-size: 0.75em;
  }

  .module-navigation .navigation-summary {
    display: none;
  }

  .module-navigation .navigation-button {
    font-size: 1.25em;
  }

  .module-navigation .navigation-button:before {
    font-size: 1em;
  }
}

.module-team {
  container: team;
}

.module-team .team-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-first: var(---color-first, 255, 255, 255);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: flex;
  gap: 10%;
}

.module-team .team-content {
  flex: 1;
}

.module-team .team-heading {
  font-size: calc( 1.28 * var(--rem) );
  font-weight: 700;
  letter-spacing: -0.09em;
  line-height: 0.8;
}

.module-team .team-subheading {
  display: block;
  font-size: calc( 0.32 * var(--rem) );
  font-weight: 200;
  line-height: 1.35;
}

.module-team .team-slider {
  align-self: start;
  display: grid;
  flex: 1 100%;
  max-width: 38%;
  grid-template-rows: 1fr auto;
}

.module-team .team-slider .content {
  color: rgb( var(--color-first) );
}

.module-team .team-slide {
  display: grid;
  grid-column: 1;
  grid-row: 1;
}

.module-team .team-slide-content {
  background: rgb( var(--color-font-) );
  color: rgb( var(--color-first) );
  padding: calc( 0.40 * var(--rem) );
}

.module-team .team-slide-heading {
  font-size: calc( 0.32 * var(--rem) );
  font-weight: 200;
  line-height: 1.2;
}

.module-team .team-slide-img {
  border-right: calc( 0.32 * var(--rem) ) solid rgb( var(--color-font-) );
  height: 100%;
  object-fit: cover;
  object-position: center;
  order: -1;
  width: 100%;
}

.module-team .team-nav {
  align-self: end;
  background: rgb( var(--color-font-) );
  grid-column: 1;
  grid-row: 1;
}

.module-team .team-nav-list {
  display: flex;
  font-size: 0;
  padding: calc( 0.12 * var(--rem) ) calc( 0.40 * var(--rem) );
  justify-content: end;
}

.module-team .team-nav-button {
  background: none;
  border: none;
  box-sizing: content-box;
  cursor: pointer;
  height: calc( 0.02 * var(--rem) );
  margin: 0;
  padding: calc( 0.04 * var(--rem) );
  position: relative;
  transition: width var(--animation-duration) var(--animation-timing-function);
  width: calc( 0.20 * var(--rem) );
}

.module-team .team-nav-active {
  width: calc( 0.46 * var(--rem) );
}

.module-team .team-nav-button:before {
  background: rgb( var(--color-font) );
  border-radius: calc( 0.15 * var(--rem) );
  content: "";
  inset:  calc( 0.04 * var(--rem) );
  position: absolute;
  transition: background var(--animation-duration) var(--animation-timing-function);
}

.module-team .team-nav-button:hover:before,
.module-team .team-nav-button:focus:before {
  background: rgb( var(--color-first) );  
}

.module-product {
  container: product / inline-size;
}

.module-product .product-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-first: var(---color-first, 255, 255, 255);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main: var(---color-main, 230, 238, 239);
  --color-main-: var(---color-main-, 109, 4, 254);

  display: flex;
  flex-flow: row wrap;
  gap: calc( var(--grid) / 2 ) 5%;
  padding-bottom: var(--grid);
}

.module-product .product-container:before {
  content: "";
  flex: 1 100%;
  height: 1px;
  order: 0;
}

.module-product .module-inline {
  margin-top: auto;
}

.module-product .product-main {
  display: flex;
  flex: 10;
  flex-flow: column;
  gap: calc( 0.64 * var(--rem) );
  order: -1;
}

.module-product .product-header {
  align-items: center;
  display: grid;
  gap: calc( 0.56 * var(--rem) ) calc( 0.32 * var(--rem) );
  grid-template-columns: 1fr minmax(auto, 20%);
  padding: calc( 0.16 * var(--rem) ) 0 0;
}

.module-product .product-heading {
  align-self: last baseline;
  font-size: calc( 0.48 * var(--rem) );
  line-height: 1.25;
}

.module-product .product-headline {
  font-size: calc( 0.20 * var(--rem) );
  font-weight: 700;
  margin-bottom: 1em;
  text-transform: uppercase;
}

.module-product .product-availability {
  align-items: end;
  align-self: last baseline;
}

.module-product .product-summary {
  border-bottom: 1px solid rgb( var(--color-border) );
  grid-column: 1 / -1;
  padding-bottom: calc( 0.64 * var(--rem) );
}

.module-product .product-price {
  font-size: calc( 0.48 * var(--rem) );
}

.module-product .product-form {
  display: flex;
  flex-flow: column;
  gap: calc( 0.64 * var(--rem) );
}

.module-product .product-variants {
  display: flex;
  flex-flow: column;
  gap: calc( 0.48 * var(--rem) );
}

.module-product .product-variant-list {
  display: flex;
  flex-flow: row wrap;
  gap: calc( 0.10 * var(--rem) );
}

.module-product .product-variant-content {
  cursor: pointer;
  display: block;
  padding: 0.375em;
  margin: -0.375em;
}

.module-product .product-variant-input {
  display: none;
}

.module-product .product-variant-label {
  border: 1px solid rgb( var(--color-font-) );
  border-radius: 0.725em;
  display: block;
  font-size: calc( 0.14 * var(--rem) );
  font-weight: 500;
  padding: 0.35em;
  text-align: center;
  transition: background var(--animation-duration) var(--animation-timing-function),
              color var(--animation-duration) var(--animation-timing-function);
  min-width: 2.5em;
}

.module-product .product-variant-input:checked + .product-variant-label,
.module-product .product-variant-content:hover .product-variant-label,
.module-product .product-variant-content:focus .product-variant-label,
.module-product .product-variant-content:focus-within .product-variant-label {
  background: rgb( var(--color-font-) );
  color: rgb( var(--color-first) );
}

.module-product .product-variant-color .product-variant-label {
  box-sizing: content-box;
  border: 1px solid rgba( var(--color-border), 0.75 );
  border-radius: 0.5em;
  display: block;
  font-size: calc( 0.20 * var(--rem) );
  height: 1em;
  min-width: unset;
  padding: 0;
  position: relative;
  width: 1em;
}

.module-product .product-variant-color .product-variant-label:before {
  background: rgb( var(--color-first) );
  border-radius: 100%;
  content: "";
  height: 0.5em;
  left: 0.25em;
  position: absolute;
  top: 0.25em;
  width: 0.5em;
}

.module-product .product-variant-color .product-variant-input ~ .product-variant-label:before {
  opacity: 0;
}

.module-product .product-variant-color .product-variant-input:checked ~ .product-variant-label:before {
  opacity: 1;
}

.module-product .product-action {
  align-items: center;
  display: flex;
  gap: calc( 0.25 * var(--rem) );
}

.module-product .product-add-to-cart {
  min-width: 15em;
}

.module-product .product-quantity {
  max-width: calc( 0.94 * var(--rem) );
}

.module-product .product-add-to-wishlist {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5em;
  padding: 0.5em;
}

.module-product .product-add-to-wishlist:hover,
.module-product .product-add-to-wishlist:focus {
  color: rgb( var(--color-main-) );
}

.module-product .product-add-to-wishlist:after {
  display: none;
}

.module-product .social-container {
  flex-flow: row wrap;
  justify-content: unset;
}

.module-product .product-sub {
  flex: 12;
  order: -2;
}

.module-product .product-slider {
  display: grid;
  gap: calc( 0.20 * var(--rem) ) 0;
  grid-template-rows: 1fr auto;
}

.module-product .product-images {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: 100%;
  height: auto;
}

.module-product .product-flag {
  align-items: start;
  align-self: start;
  flex-flow: column;
  font-size: calc( 0.16 * var(--rem) );
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  padding: 1.5em;
  z-index: 2;
}

.module-product .product-slide {
  cursor: pointer;
  grid-column: 1;
  grid-row: 1;
  position: relative;
}

.module-product .product-slide-img {
  background: rgb( var(--color-main) );
  border-radius: calc( 0.20 * var(--rem) );
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  width: 100%;
}

.module-product .product-slider-nav {
  align-items: center;
  display: flex;
  grid-row: 2;
  padding-right: calc( 0.20 * var(--rem) );
}

.module-product .product-carousel-container {
  flex: 12;
  overflow: hidden;
}

.module-product .product-carousel-nav {
  display: flex;
  transition: transform var(--animation-duration) var(--animation-timing-function);
}

.module-product .product-carousel-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  padding-right: calc( 0.20 * var(--rem) );
  margin: 0;
  min-width: 33.333%;
  width: 33.333%;
}

.module-product .product-carousel-img {
  background: rgb( var(--color-main) );
  border-radius: calc( 0.20 * var(--rem) );
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.module-product .product-carousel-prev,
.module-product .product-carousel-next {
  background: none;
  border: none;
  box-sizing: content-box;
  cursor: pointer;
  flex: 1;
  font-size: calc( 0.20 * var(--rem) );
  padding: 0.8em;
  position: relative;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-product .product-carousel-prev:hover,
.module-product .product-carousel-prev:hover,
.module-product .product-carousel-next:hover,
.module-product .product-carousel-next:focus {
  color: rgb( var(--color-main-) );
}

.module-product .product-carousel-prev:disabled,
.module-product .product-carousel-next:disabled {
  color: rgb( var(--color-border) );
  cursor: default;
}

.module-product .product-carousel-prev:before,
.module-product .product-carousel-next:before {
  background: rgb( var(--color-border) );
  bottom: 0.8em;
  content: "";
  position: absolute;
  right: -0.05em;
  top: 0.8em;
  width: 0.05em;
}

.module-product .product-carousel-next:before {
  right: auto;
  left: -0.05em;
}

.module-product .product-carousel-prev {
  text-align: right;
}

.module-product .product-carousel-next {
  text-align: left;
}

.module-product .product-column {
  flex: 10;
  order: 2;
}

.module-product .product-column .product-headline {
  border-bottom: 0.03125em solid rgb( var(--color-border) );
  font-size: calc( 0.32 * var(--rem) );
  margin-bottom: 1em; 
  padding-bottom: 1em;
}

@container product (max-width: 1000px) {
  .module-product .product-container {
    flex-flow: column;
    padding-bottom: 0;
  }

  .module-product .product-container:before,
  .module-product .product-container:after {
    display: none;
  }

  .module-product .product-main {
    flex: unset;
    gap: calc( var(--grid) / 2 );
  }

  .module-product .product-header {
    align-items: unset;
    display: flex;
    gap: calc( var(--grid) / 4 );
    flex-flow: column;
    padding: 0;
  }

  .module-product .product-form {
    gap: calc( var(--grid) / 2 ); 
  }

  .module-product .product-heading {
    align-self: unset;
    font-size: calc( 0.36 * var(--rem) );
  }

  .module-product .product-summary {
    padding-bottom: calc( var(--grid) / 2 );
  }

  .module-product .product-availability {
    align-items: unset;
    align-self: unset;
    order: -1;
  }

  .module-product .product-availability .product-availability-item:after {
    order: -1;
  }

  .module-product .product-action {
    display: grid;
    gap: calc( var(--grid) / 2 ) calc( var(--grid) / 3 );
    grid-template-columns: auto 1fr;
    justify-content: start;
  }

  .module-product .product-variants {
    gap: calc( var(--grid) / 2 );
  }

  .module-product .product-add-to-cart {
    min-width: 16em;
  }

  .module-product .product-action-column.add {
    grid-column: 1 / -1;
    order: 1;
  }

  .module-product .product-add-to-cart .add-to-cart {
    padding: 1.125em 1.5em;
  }

  .module-product .product-sub {
    flex: unset;
  }

  .module-product .product-flag {
    font-size: calc( 0.12 * var(--rem) );
  }

  .module-product .product-slider {
    grid-template-rows: 1fr;
  }

  .module-product .product-slide-img {
    border-radius: calc( 0.10 * var(--rem) );
  }

  .module-product .product-slider-nav {
    display: none;
  }

  .module-product .product-column {
    flex: unset;
  }

  .module-product .product-column .product-headline {
    border: none;
    padding: 0;
  }

  .module-product .content dl {
    display: flex;
    flex-flow: column;
  }
}

.module-share {
  container: share;
}

.module-share .share-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);
}

.module-share .share-heading {
  font-size: calc( 0.20 * var(--rem) );
  font-weight: 700;
  margin-bottom: 1em;
  text-transform: uppercase;
}

.module-share .share-list {
  align-items: center;
  display: flex;
  gap: 1.25em;
}

.module-share .share-link {
  color: rgb( var(--color-font-) );
  display: inline-block;
  font-weight: 700;
  margin: -0.625em;
  padding: 0.625em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-share .share-link:before {
  display: none;
}

.module-share .share-link:after {
  font-size: 1.3125em;
}

.module-share .share-link:hover,
.module-share .share-link:focus {
  color: rgb( var(--color-main-) );
}

.module-share .share-img {
  display: block;
  max-width: 100%;
}

.module-main {
  container: main / inline-size;
}

.module-main .main-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --color-border: var(---color-border, 200, 209, 210);
  --color-first: var(---color-first, 255, 255, 255);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);

  padding-left: max( calc( 0.20 * var(--rem) ), calc( ( 100vw - calc( 3.44 * var(--rem) ) ) / 2 ) );
  padding-right: max( calc( 0.20 * var(--rem) ), calc( ( 100vw - calc( 3.44 * var(--rem) ) ) / 2 ) );
  position: relative;
}

.module-main [data-heading]:before {
  color: rgba( var(--color-first) );
  content: attr(data-heading);
  font-size: min( 15.625vw, calc( 3 * var(--rem) ) );
  font-weight: 700;
  position: absolute;
  left: 50%;
  text-align: center;
  text-shadow: 
    -2px -2px 0 rgba( var(--color-border), 0.15 ),  
    2px -2px 0 rgba( var(--color-border), 0.15 ),
    -2px 2px 0 rgba( var(--color-border), 0.15 ),
    2px 2px 0 rgba( var(--color-border), 0.15 );
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.module-main .main-heading {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: calc( var(--grid) / 2 );
  text-align: center;
}

.module-main .main-content {
  margin-bottom: calc( var(--grid) / 2 );
  text-align: center;
}

@container main (max-width: 1000px) {
  .module-main [data-heading]:before {
    display: none;
  }
}

.module-form {
  container: form;
}

.module-form .form-container {
  --rem: var(---rem, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: flex;
  flex-flow: column;
  gap: 1.5em;
}

.module-form .form-fieldset {
  display: grid;
  gap: 0.5em;
  grid-template-rows: auto 1fr;
}

.module-form .form-fieldset:empty {
  display: none;
}

.module-form .form-field:only-child {
  grid-row: 1 / -1;
}

.module-form .form-module {
  flex: 1 100%;
  max-width: 100%;
  margin-bottom: calc( 0.18 * var(--rem) );
}

.module-form .form-row {
  display: flex;
  flex: 1 100%;
  gap: 2em;
  max-width: 100%;
}

.module-form .form-heading {
  color: rgb( var(--color-font-) );
  font-size: 1.25em;
  font-weight: 500;
  flex: 1 100%;
  grid-column: 1 / -1;
  line-height: 1.25;
}

.module-form .form-heading:not(:only-child) {
  margin: 0 0 0.5em;
}

.module-form .form-legend {
  border-top: max(0.0625em, 1px) solid rgb( var(--color-border) );
  flex: 1 100%;
  font-size: 1.2em;
  font-weight: 500;
  padding-top: 1em;
}

.module-form .form-errors,
.form-errors {
  order: 1;
  font-size: 0.75em;
  gap: 0.5em;
  line-height: 1.25;
  margin-bottom: calc( 0.18 * var(--rem) );
  text-align: left;
}

.module-form .form-info {
  font-size: 0.75em;
  font-weight: 500;
  text-align: right;
}

.module-form .component-choice {
  flex-flow: row;
  font-size: 1.3125em;
}

.module-form .choice-input {
  align-self: center;
}

.module-form .choice-label {
  gap: 1em;
}

.module-form .choice-text {
  display: block;
  color: rgb( var(--color-font) );
  font-size: calc( 0.13 * var(--rem) );
  font-weight: 500;
  line-height: 1.2;
}

.module-form .choice-text br {
  display: none;
}

.module-form .choice-text em {
  font-style: normal;
}

.module-form [type="radio"] ~ .choice-label {
  gap: 0.57em;
}

.module-form [type="radio"] ~ * .choice-text {
  color: rgb( var(--color-font-) );
  font-size: calc( 0.16 * var(--rem) );
  gap: 0.572em;
}

.module-form .form-info ~ .component-input .input-label {
  bottom: 0;
  top: auto;
  transform: translate(0, -1.25em);
}

.module-form .form-info ~ .component-input .input-type:placeholder-shown ~ .input-label {
  transform: translate(0, -1.25em);
}

.module-form .form-info ~ .component-input .input-type:focus ~ .input-label,
.module-form .form-info ~ .component-input .input-type:not(:placeholder-shown) ~ .input-label {
  transform: translate(0, 100%);
}

.module-form .form-nav {
  grid-column: 1 / -1;
}

.module-form .form-nav-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
}

.module-form .form-nav-link {
  color: rgb( var(--color-font) );
  font-size: 0.8125em;
  font-weight: 500;
  margin: -1em;
  padding: 1em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-form .form-reverse {
  grid-column: 2;
}

.module-form .form-nav-link:hover,
.module-form .form-nav-link:focus {
  color: rgb( var(--color-main-) );
}

.module-form .form-action {
  align-items: center;
  display: grid;
  gap: calc( 0.32 * var(--rem) );
  grid-template-columns: 8fr 10fr;
}

.module-form .form-action :only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 50%;
  max-width: 75%;
}

.module-form .form-action .form-link {
  align-items: center;
  color: rgb( var(--color-font-) );
  cursor: pointer;
  display: grid;
  font-size: calc( 0.13 * var(--rem) );
  gap: 1em;
  grid-template-columns: 1fr auto;
  line-height: 1.5;
  padding: 1em;
  margin: -1em;
  text-align: center;
  text-decoration: none;
}

.module-form .form-action .form-link:before {
  display: none;
}

.module-form .form-action .form-link:after {
  font-size: calc( 0.16 * var(--rem) );
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-form .form-action .form-link:hover:after,
.module-form .form-action .form-link:focus:after {
  color: rgb( var(--color-main-) );
}

.module-form .form-action .form-link-back {
  grid-template-columns: auto 1fr;
}

.module-form .form-action .form-link-back:after {
  order: -1;
}

@media (width <= 1000px) {
  .module-form .form-fieldset {
    display: flex;
    flex-flow: column;
  }

  .module-form .form-row {
    flex-flow: row;
  }

  .module-form .form-action {
    flex-flow: row wrap;
  }
}

.module-sub {
  container: sub / inline-size;
}

.module-sub .sub-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  display: grid;
  gap: calc( var(--grid) / 2 );
  grid-template-columns: 1fr calc( 7 * var(--rem) ) 1fr;
}

.module-sub:not(:last-child) .sub-container {
  padding-bottom: var(--grid);
}

.module-sub .sub-heading {
  align-self: start;
  color: rgb( var(--color-font-) );  
  font-size: calc( 1.28 * var(--rem) );
  font-weight: 700;
  letter-spacing: -0.09em;
  line-height: 1;
  margin: 0.5em 0 0 0;
  text-orientation: mixed;
  transform: scale(-1);
  writing-mode: vertical-rl;
}

@media (width <= 1000px) {
  .module-sub .sub-container {
    display: flex;
    flex-flow: column;
  }

  .module-sub .sub-heading {
    align-self: unset;
    color: rgb( var(--color-font-) );  
    font-size: calc( 0.48 * var(--rem) );
    letter-spacing: -0.09em;
    line-height: 1;
    margin: 0.5em 0 0 0;
    text-align: center;
    text-orientation: unset;
    transform: unset;
    writing-mode: unset;
  }
}

.module-page {
  container: page / inline-size;
}

.module-page .page-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --color-font-: var(---color-font-, 6, 16, 17);
  --color-border: var(---color-border, 200, 209, 210);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-first: var(---color-first, 255, 255, 255);

  display: grid;
  gap: var(--grid);
  grid-template-columns: 1fr;
}

.module-page-columns .page-container {
  grid-template-columns: 1fr calc( 3.42 * var(--rem) ) auto;
}

.module-page .page-main .list-container {
  border: max(0.0625em, 1px) solid rgb( var(--color-font-) );
  border-radius: 1.25em;
  padding: calc( 0.32 * var(--rem) );
}

.module-page .page-main {
  display: flex;
  gap: calc( var(--grid) / 2 );
  flex-flow: column;
}

.module-page .page-sub,
.module-page .page-summary {
  display: flex;
  gap: calc( var(--grid) / 2 );
  flex-flow: column;
}

.module-page .page-sub .module-inline {
  margin: auto 0 0;
}

.module-page .page-sub .list-item {
  grid-template-columns: calc( 0.96 * var(--rem) ) 1fr;
}

.module-page .page-module {
  margin: 0 auto;
  max-width: calc( 3.44 * var(--rem) );
}

.module-page .page-action {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
}

@container page (max-width: 1440px) {
  .module-page-columns .page-container {
    gap: calc( 0.5 * var(--grid) );
    grid-template-columns: 1fr calc( 3.42 * var(--rem) );
  }
}

@container page (max-width: 1000px) {
  .module-page .page-container {
    gap: 0;
    grid-template-columns: min( calc( 5.28 * var(--rem) ), 100% );
    justify-content: center;
  }

  .module-page .page-main .list-container {
    padding: 1em 1em 1.5em;
  }

  .module-page .page-main + .page-sub {
    border-top: max(0.0625em, 1px) solid rgb( var(--color-font-) );
    margin-top: calc( var(--grid) / 2 );
    padding-top: calc( var(--grid) / 2 );
  }

  .module-page .page-heading {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: unset;
    margin-bottom: calc( var(--grid) / 2 );
    text-align: center;
    text-transform: unset;
  }

  .module-page .page-action {
    align-items: center;
    display: grid;
    gap: calc( 0.32 * var(--rem) );
    grid-template-columns: 3fr 5fr;
    margin-top: calc( var(--grid) / 2 );
  }

  .module-page .page-action .page-link:not(.button) {
    align-items: center;
    color: rgb( var(--color-font-) );
    cursor: pointer;
    display: grid;
    font-size: calc( 0.13 * var(--rem) );
    gap: 1em;
    grid-template-columns: 1fr auto;
    line-height: 1.5;
    padding: 1em;
    margin: -1em;
    text-align: center;
    text-decoration: none;
  }

  .module-page .page-action .page-link.button {
    text-align: center;
  }
}

.module-list {
  container: list;
}

.module-list .list-container {
  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --color-border: var(---color-border, 200, 209, 210);
  --color-first: var(---color-first, 255, 255, 255);
  --color-first-: var(---color-first-, 0, 0, 0);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);
}

.module-list .list-item {
  align-items: center;
  display: grid;
  gap: 0 calc( 0.32 * var(--rem) );
  grid-template-columns: calc( 0.96 * var(--rem) ) 2fr auto 1fr auto;
}

.module-list .list-item + .list-item {
  border-top: max(0.0625em, 1px) solid rgb( var(--color-border) );
  margin-top: calc( 0.32 * var(--rem) );
  padding-top: calc( 0.32 * var(--rem) );
}

.module-list .list-content {
  display: flex;
  flex-flow: column;
  gap: calc( 0.12 * var(--rem) );
  justify-content: center;
  justify-self: start;
}

.module-list .list-heading {
  color: rgb( var(--color-font-) );
  font-size: calc( 0.20 * var(--rem) );
  font-weight: 500;
  line-height: 1.25;
}

.module-list .list-name {
  color: rgb( var(--color-font-) );
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-list .list-name:hover,
.module-list .list-name:focus {
  color: rgb( var(--color-main-) );  
}

.module-list .list-variant {
  display: flex;
  flex-flow: row wrap;
  font-size: calc( 0.12 * var(--rem) );
  font-weight: 300;
  gap: calc( 0.06 * var(--rem) ) calc( 0.12 * var(--rem) );
}

.module-list .list-variant-value {
  font-weight: 700;
}

.module-list .list-image {
  background: linear-gradient( to right, rgba( var(--color-first-), 0.02 ) , rgba( var(--color-first-), 0.1 ));
  border-radius: calc( 0.20 * var(--rem) );
  justify-self: start;
  order: -1;
}

.module-list .list-image img,
.module-list .list-image .list-img {
  aspect-ratio: 0.8;
  display: block;
  height: calc( 1.20 * var(--rem) );
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.module-list .list-img {
  border-radius: calc( 0.20 * var(--rem) );
}

.module-list .list-quantity {
  color: rgb( var(--color-font-) );
  max-width: calc( 0.96 * var(--rem) );
}

.module-list .list-price {
  color: rgb( var(--color-font-) );
  font-size: min( calc( 0.32 * var(--rem) ), 2vw );  
  text-align: center;
}

.module-list .list-nav {
  justify-self: end;
}

.module-list .list-delete {
  background: none;
  border: none;
  color: rgb( var(--color-font-) );
  cursor: pointer;
  display: block;
  font-size: calc( 0.22 * var(--rem) );
  padding: 1em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-list .list-delete:before {
  display: none;
}

.module-list .list-delete:hover,
.module-list .list-delete:focus {
  color: rgb( var(--color-main-) );
}

@media (min-width: 1000px) and (max-width: 1628px) {
  .module-list .list-item {
    grid-template-columns: calc( 0.96 * var(--rem) ) 2fr auto 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .module-list .list-content,
  .module-list .list-image,
  .module-list .list-quantity {
    grid-row: 1 / 3;
  }

  .module-list .list-price {
    align-self: end;
  }

  .module-list .list-content .list-price {
    align-self: start;
  }

  .module-list .list-nav {
    align-self: start;
    grid-column: 4;
    grid-row: 2;
    justify-self: center;
  }

  .module-list .list-delete {
    padding: 0.5em;
  }
}

@media (width <= 1000px) {
  .module-list .list-item {
    gap: calc( 0.16 * var(--rem) ) calc( 0.24 * var(--rem) );
    grid-template-columns: calc( 0.80 * var(--rem) ) 1fr auto;
  }

  .module-list .list-item + .list-item {
    margin-top: calc( 0.20 * var(--rem) );
    padding-top: calc( 0.20 * var(--rem) );
  }

  .module-list .list-image img, .module-list .list-image .list-img {
    height: calc( 1.04 * var(--rem) );
  }

  .module-list .list-img {
    border-radius: calc( 0.16 * var(--rem) );
  }

  .module-list .list-content {
    gap: calc( 0.06 * var(--rem) );
    grid-column: 2 / 4;
  }

  .module-list .list-heading {
    font-size: calc( 0.16 * var(--rem) );
  }

  .module-list .list-price {
    font-size: calc( 0.24 * var(--rem) );
    word-break: break-all;
  }

  .module-list .list-delete {
    font-size: calc( 0.20 * var(--rem) );
    margin: -0.5em;
    padding: 0.5em;
  }
}

.module-summary {
  container: summary;
}

.module-summary .summary-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);
}

.module-summary .summary-top {
  margin-bottom: calc( 0.32 * var(--rem) );
}

.module-summary .summary-top:empty {
  display: none;
}

.module-summary .summary-line {
  display: flex;
  font-size: calc( 0.20 * var(--rem) );
  font-weight: 300;
  gap: 0.25em;
  line-height: 1.5;
}

.module-summary .summary-value {
  font-weight: 500;
}

.module-summary .summary-totals {
  margin-top: calc( 0.32 * var(--rem) );
}

.module-summary .summary-products ~ .summary-totals {
  margin-top: calc( 0.16 * var(--rem) );
}

.module-summary .summary-total {
  font-size: calc( 0.24 * var(--rem) );
  font-weight: 700;
}

.module-summary .summary-products {
  margin-top: calc( 0.32 * var(--rem) );  
}

.module-summary .summary-subtotals {
  margin-top: calc( 0.42 * var(--rem) );  
}

.module-summary .summary-actions {
  margin-top: calc( var(--grid) / 2 );
}

.module-summary .summary-button {
  padding-left: calc( 0.42 * var(--rem) );
  padding-right: calc( 0.42 * var(--rem) );
  text-align: center;
  min-width: 100%;
}

.module-summary .summary-checkbox {
  display: none;
}

.module-summary .summary-checkbox:not(:checked) ~ .summary-products .list-item:not(:first-child)  {
  display: none;
}

.module-summary .summary-label {
  display: inline-block;
  cursor: pointer;
  font-weight: 700;
  margin-top: calc( 0.32 * var(--rem) );
}

.module-summary .summary-products + .summary-line,
.module-summary .summary-label + .summary-line {
  margin-top: calc( 0.42 * var(--rem) );
}

@media (width <= 1000px) {
  .module-summary .summary-line {
    font-size: calc( 0.16 * var(--rem) );
  }

  .module-summary .summary-totals {
    margin-top: calc( var(--grid) / 2 );
  }

  .module-summary .summary-total {
    font-size: calc( 0.20 * var(--rem) );
  }

  .module-summary .summary-button {
    padding: 1.5em;
    text-align: center;
  }
}

.module-checkout {
  container: checkout;
}

.module-checkout .checkout-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-main: var(---color-main, 230, 238, 239);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: grid;
  gap: 1em;
}

.module-checkout .checkout-step {
  border: max(0.0625em, 1px) solid rgb( var(--color-font-) );
  border-radius: 1.25em;
  padding: calc( 0.25 * var(--rem) ) calc( 0.40 * var(--rem) );
}

.module-checkout .-complete {
  background: rgb( var(--color-main) );
}

.module-checkout .-current {
  background: none;
}

.module-checkout .checkout-heading {
  align-items: center;
  display: flex;
  font-size: 2em;
  font-weight: 700;
  gap: 0.625em;
  line-height: 1;
}

.module-checkout .checkout-heading:before,
.module-checkout .checkout-heading:after {
  color: rgb( var(--color-main-) );
  font-size: 0.625em;
  display: none;
}

.module-checkout .-complete .checkout-heading:before {
  display: block;
}

.module-checkout .checkout-edit {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  font-size: 0.92em;
  margin: 0 0 0 auto;
  padding: 0;
}

.module-checkout .checkout-edit:before {
  display: none;
}

.module-checkout .-complete .checkout-edit {
  display: block;
}

.module-checkout .checkout-content {
  display: none;
  margin-top: calc( 0.32 * var(--rem) );
}

.module-checkout .-current .checkout-content {
  display: block;
}

.module-checkout .checkout-tab {
  margin-bottom: calc( 0.32 * var(--rem) );
}

.module-checkout .checkout-tab-list {
  display: flex;
  gap: 1em;
}

.module-checkout .checkout-tab-button {
  justify-content: center;
  min-width: calc( 2.16 * var(--rem) );
}

.module-checkout .checkout-form {
  display: none;
}

.module-checkout .checkout-form.active {
  display: block;
}

.module-checkout .checkout-footer {
  margin-top: calc( 0.32 * var(--rem) );
}

.module-checkout .checkout-footer .button {
  min-width: 12em;
}

.module-checkout .form-container {
  flex-flow: row wrap;
}

.module-checkout .form-fieldset,
.module-checkout .form-action {
  align-self: end;
  flex: 1 100%;
  max-width: min( calc( 3.2 * var(--rem) ), calc( 50% - 1.5em ) );
}

.module-checkout .form-row,
.module-checkout .form-action {
  max-width: 100%;
}

.module-checkout .form-action,
.module-checkout .checkout-action {
  display: flex;
  flex-flow: row;
  margin-top: calc( var(--grid) / 2 );
}

.module-checkout .form-errors {
  margin-bottom: calc( var(--grid) / 2 );
}

.module-checkout .form-legend {
  margin-top: 0.625em;
}

.module-checkout .form-nav {
  flex: 1 100%;
}

.module-checkout .form-nav-item {
  grid-column: 1 / -1;
}

.module-checkout .form-nav-list {
  text-align: left;
}

.module-checkout .module-payment,
.module-checkout .checkout-conditions {
  margin-bottom: calc( 0.32 * var(--rem) );
}

.module-checkout .module-payment:last-child,
.module-checkout .checkout-conditions:last-child {
  margin-bottom: 0;
}

.module-checkout .checkout-action .checkout-submit,
.module-checkout .checkout-action .checkout-cancel,
.module-checkout .form-action .form-submit,
.module-checkout .form-action .form-cancel {
  justify-content: center;
  justify-self: start;
  min-width: calc( 2.16 * var(--rem) );
}

@media (width <= 1000px) {
  .module-checkout .checkout-container {
    gap: calc( 0.12 * var(--rem) );
  }

  .module-checkout .checkout-step {
    border: none;
    padding: 0;
  }

  .module-checkout .-unreachable {
    display: none;
  }

  .module-checkout .-complete .checkout-heading {
    border: max(0.03125em, 1px) solid rgb( var(--color-font-) );
    border-radius: 0.625em;
    padding: 0.75em 0.5em;
  }

  .module-checkout .checkout-step + .-current {
    margin-top: calc( ( var(--grid) / 2 ) - ( 0.12 * var(--rem) ) );
  }

  .module-checkout .checkout-content {
    margin-top: calc( var(--grid) / 2 );  
  }

  .module-checkout .checkout-tab {
    margin-bottom: calc( var(--grid) / 2 );
  }

  .module-checkout .checkout-tab-list {
    flex-flow: column;
  }

  .module-checkout .form-fieldset {
    max-width: 100%;
  }

  .module-checkout .form-action {
    justify-content: center;
    flex-flow: row wrap;
    gap: calc( var(--grid) / 4 );
    margin-top: 0;
    max-width: 100%;
  }
}

.module-voucher {
  container: voucher;
}

.module-voucher .voucher-container {
  --rem: var(---rem, 100px);
  --color-border: var(---color-border, 200, 209, 210);

  display: grid;
  gap: calc( 0.20 * var(--rem) );
}

.module-voucher .voucher-alert {
  font-size: calc( 0.13 * var(--rem) );
  line-height: 1.5;
  margin: 0 0 calc( 0.20 * var(--rem) );
}

.module-voucher .voucher-alert:empty {
  display: none;
}

.module-voucher .voucher-heading {
  font-weight: 700;
}

.module-voucher .voucher-list {
  border-top: max(0.0625em, 1px) solid rgb( var(--color-border) );
  padding-top: calc( 0.20 * var(--rem) );
}

.module-voucher .voucher-item {
  align-items: center;
  display: flex;
  font-size: calc( 0.13 * var(--rem) );
  gap: calc( 0.20 * var(--rem) );
  margin: -1em;
  padding: 1em;
  position: relative;
}

.module-voucher .voucher-item:before {
  display: none;
}

.module-voucher .voucher-item:after {
  font-size: 1.2em;
  margin-left: auto;
}

.module-voucher .voucher-item .code {
  cursor: pointer;
}

.module-voucher .voucher-item .code-text {
  position: relative;
  z-index: 1;
}

.module-voucher .voucher-item .code:before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.module-voucher .voucher-value {
  font-weight: 700;
}

.module-voucher .voucher-delete {
  color: inherit;
  font-size: 1.2em;
  margin-left: auto;
  text-decoration: none;
}

.module-voucher .voucher-delete:before {
  display: none;
}

.module-addresses {
  container: addresses / inline-size;
}

.module-addresses .addresses-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --color-font-: var(---color-font-, 6, 16, 17);
}

.module-addresses .addresses-heading {
  color: rgb( var(--color-font-) );
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: calc( var(--grid) / 3 );
}

.module-addresses .addresses-module,
.module-addresses .addresses-form {
  margin-bottom: calc( var(--grid) / 2 );
}

.module-addresses .addresses-form:last-child {
  margin-bottom: 0;
}

.module-address {
  container: address;
}

.module-address .address-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);
  
  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);

  --color-border: var(---color-border, 200, 209, 210);
  --color-main: var(---color-main, 230, 238, 239);
  --color-main-: var(---color-main-, 109, 4, 254);
  --color-font: var(---color-font, 127, 117, 142);
  --color-font-: var(---color-font-, 6, 16, 17);

  display: flex;
  flex-flow: row wrap;
  gap: calc( 0.20 * var(--rem) ) calc( 0.32 * var(--rem) );
}

.module-address .address-item {
  display: grid;
  flex: 1 100%;
  gap: calc( 0.32 * var(--rem) );
  max-width: calc( 3.40 * var(--rem) );
  padding: calc( 0.26 * var(--rem) ) calc( 0.40 * var(--rem) );
  position: relative;
  z-index: 0;
}

.module-address .address-complete {
  background: rgb( var(--color-main) );
  border: none;
  border-radius: 1.25em;
}

.module-address .address-label {
  display: grid;
  gap: calc( 0.24 * var(--rem) );
  position: static;
}

.module-address label.address-label {
  cursor: pointer;
}

.module-address .address-content {
  font-weight: 500;
}

.module-address .address-content:after {
  border: max(0.0625em, 1px) solid rgb( var(--color-font-) );
  border-radius: 1.25em;
  content: "";
  cursor: pointer;
  inset: 0;
  position: absolute;
  z-index: -1;
}

.module-address .address-input:checked ~ .address-content:after {
  border: none;
  background: rgb( var(--color-main) );
}

.module-address .address-complete .address-content:after {
  display: none;
}

.module-address .address-footer {
  display: flex;
  gap: 2em;
}

.module-address .address-link {
  align-self: center;
  color: rgb( var(--color-font-) );
  cursor: pointer;
  display: inline-flex;
  font-size: calc( 0.14 * var(--rem) );
  gap: 0.625em;
  margin: -1em;
  padding: 1em;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-address .address-link:after {
  display: none;
}

.module-address .address-link:hover,
.module-address .address-link:focus {
  color: rgb( var(--color-main-) );
}

.module-address .address-nav {
  display: flex;
  flex: 1 100%;
  flex-flow: row wrap;
  gap: 0.75em;
}

@media (width <= 1000px) {
  .module-address .address-item {
    gap: calc( var(--grid) / 2 );
    max-width: unset;
    padding: calc( var(--grid) / 3 ) calc( var(--grid) / 2 );
  }
}

.module-shipping {
  container: shipping;
}

.module-shipping .shipping-container {
  --rem: var(---rem, 100px);
  
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main: var(---color-main, 230, 238, 239);

  display: flex;
  flex-flow: column;
  gap: calc( 0.32 * var(--rem) );
  max-width: calc( 7.12 * var(--rem) );
}

.module-shipping .shipping-options,
.module-shipping .shipping-fieldset {
  display: flex;
  flex-flow: column;
  gap: calc( 0.20 * var(--rem) );
}

.module-shipping img {
  display: block;
  max-width: 100%;
}

.module-shipping .shipping-input {
  display: none;
}

.module-shipping .shipping-label {
  align-items: center;
  border: max(0.0625em, 1px) solid rgb( var(--color-font-) );
  border-radius: 1.25em;
  cursor: pointer;
  display: grid;
  font-weight: 500;
  grid-template-areas: "logo name delay price";
  grid-template-columns: 12% 32% 20% 20%;
  justify-content: space-between;
  line-height: 1.25;
  min-height: calc( 0.80 * var(--rem) );
  padding: calc( 0.16 * var(--rem) ) calc( 0.32 * var(--rem) );
}

.module-shipping .shipping-input:checked ~ .shipping-label {
  background: rgb( var(--color-main) );
}

.module-shipping .shipping-logo {
  grid-area: logo;
}

.module-shipping .shipping-name {
  grid-area: name;  
}

.module-shipping .shipping-delay {
  grid-area: delay;  
}

.module-shipping .shipping-price {
  grid-area: price;  
}

.module-shipping .shipping-content {
  display: none;
  padding: calc( 0.16 * var(--rem) ) calc( 0.32 * var(--rem) );
}

.module-shipping .shipping-content:empty {
  display: none !important;
}

.module-shipping .shipping-submit {
  min-width: 12em;
}

.module-shipping .shipping-fieldset textarea {
  min-height: 12em;
}

@media (width <= 1000px) {
  .module-shipping .shipping-label {
    gap: calc( 0.16 * var(--rem) ) calc( 0.32 * var(--rem) );
    grid-template-areas: "logo name" 
                         "delay price";
    grid-template-columns: 5fr 9fr;
  }

  .module-shipping .shipping-logo,
  .module-shipping .shipping-delay {
    justify-self: center;
    text-align: center;
  }
}

.module-payment {
  container: payment;
}

.module-payment .payment-container {
  --rem: var(---rem, 100px);
  
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main: var(---color-main, 230, 238, 239);

  display: flex;
  flex-flow: column;
}

.module-payment .choice-text:before {
  display: none;
}

.module-payment .payment-item:not(:first-child) {
  margin-top: calc( 0.32 * var(--rem) );
}

.module-payment .payment-label {
  display: grid;
  font-size: calc( 0.21 * var(--rem) );
  grid-template-columns: 1.1em auto 1fr;
}

.module-payment .payment-label img {
  align-items: center;
  display: block;
  max-width: 100%;
}

.module-payment .payment-img {
  width: calc( 0.80 * var(--rem) );
}

.module-payment .payment-name {
  font-size: calc( 0.16 * var(--rem) );
  font-weight: 500;
}

.module-payment .payment-information {
  display: none;
  margin-top: calc( 0.32 * var(--rem) );
}

.module-payment .payment-input:checked ~ .payment-information {
  display: block;
}

.module-payment .payment-content {
  font-size: calc( 0.20 * var(--rem) );
  margin: 0 1.5em;
  padding: 0 2em;
}

.module-payment .payment-content dl {
  background: rgb( var(--color-main) );
  border-radius: 1em;
  margin-left: -2em;
  margin-right: -2em;
  padding: 2em;
}

.module-payment .payment-content dt:first-child {
  font-weight: 700;
  grid-column: 1 / -1;
  margin-bottom: 1em;
}

.module-payment .payment-content dl:last-child {
  margin-bottom: 0;
}

@media (width <= 1000px) {
  .module-payment .payment-content {
    margin: 0;
    padding: 0;
  }

  .module-payment .payment-content dl {
    display: flex;
    flex-flow: column;
    margin-left: 0;
    margin-right: 0;
    padding: 1em;
  }
}

.module-account {
  container: account / inline-size;
}

.module-account .account-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --animation-duration: var(---animation-duration, 0.2s);
  --animation-timing-function: var(---animation-timing-function, linear);
  
  --color-first: var(---color-first, 255, 255, 255);
  --color-font-: var(---color-font-, 6, 16, 17);
  --color-main-: var(---color-main-, 109, 4, 254);

  display: flex;
  flex-flow: row wrap;
  gap: calc( var(--grid) / 2 );
  padding-top: calc( var(--grid) / 2 );
}   

.module-page .account-column {
  display: flex;
  flex: 1;
  flex-flow: column;
}

.module-page .account-column .module-inline {
  margin-top: auto;
}

.module-page .account-heading {
  flex: 1 100%;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.module-page .module-account {
  grid-column: 1 / -1;
}

.module-account .account-content {
  display: grid;
  gap: calc( var(--grid) / 2 );
  grid-template-columns: 1fr 1fr 1fr 1fr;
  flex: 1;
}

.module-account .account-item {
  display: grid;
  grid-row: auto / span 2;
  grid-template-rows: subgrid; 
}

.module-account .account-link {
  align-items: center;
  color: rgb( var(--color-font-) );
  display: grid;
  font-size: calc( 0.20 * var(--rem) );
  font-weight: 500;
  grid-row: auto / span 2;
  grid-template-rows: subgrid; 
  gap: calc( var(--grid) / 2 );
  justify-items: center;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: color var(--animation-duration) var(--animation-timing-function);
}

.module-account .account-link:hover,
.module-account .account-link:focus {
  color: rgb( var(--color-main-) );
}

.module-account .account-link:before,
.module-account .account-link:after {
  align-items: center;
  aspect-ratio: 1;
  background: rgb( var(--color-main-) );
  border-radius: 32%;
  color: rgb( var(--color-first) );
  font-size: calc( var(--grid) / 2 );
  font-weight: 400;
  display: flex;
  grid-column: 1;
  grid-row: 1;
  height: auto;
  justify-content: center;
  transition: opacity var(--animation-duration) var(--animation-timing-function);
  width: 50%;
}

.module-account .account-link:after {
  box-shadow: 0 calc( var(--grid) / 5 ) calc( var(--grid) * 0.7 ) 0 rgba(109, 4, 254, 0.4);
  content: "";
  opacity: 0;
  z-index: -1;
}

.module-account .account-link:hover:after,
.module-account .account-link:focus:after {
  opacity: 1;
}

.module-account .account-button {
  align-self: center;
  display: block;
  justify-self: center;
  text-align: center;
  max-width: calc( 2.20 * var(--rem) );
  width: 100%;
}

@container account (max-width: 1000px) {
  .module-account .account-container {
    flex-flow: column;
    padding-top: 0;
  }

  .module-account .account-content {
    gap: calc( var(--grid) / 2 ) calc( var(--grid) / 3 );
    grid-template-columns: 1fr 1fr;
  }

  .module-account .account-item {
    display: inline-grid;
  }

  .module-account .account-item:nth-child(odd):last-child {
    grid-column: 1 / -1;
    grid-template-rows: 1fr 
  }

  .module-account .account-link {
    font-size: calc( 0.16 * var(--rem) );
    gap: calc( var(--grid) / 3 );
  }

  .module-account .account-link:before,
  .module-account .account-link:after {
    width: 80%;
  }

  .module-account .account-column .module-inline {
    margin-top: calc( var(--grid) / 3 );
  }
}

.module-msg {
  container: msg;
}

.module-account .module-msg {
  flex: 1;
  max-width: 50%;
}

.module-msg .msg-container {
  --rem: var(---rem, 100px);
  --grid: var(---grid, 100px);

  --color-border: var(---color-border, 200, 209, 210);
  --color-main: var(---color-main, 230, 238, 239);
}

.module-msg .form-fieldset {
  max-width: calc( 3.40 * var(--rem) );
}

.module-msg .module-form .form-action .form-link {
  align-items: center;
  font-size: calc( 0.16 * var(--rem) );
  gap: calc( 0.20 * var(--rem) );
  justify-self: start;
}

.module-msg .form-link:after {
  order: -1;
}

.module-msg .form-submit {
  justify-self: end;
  margin: 0 calc( var(--grid) / 2 ) 0 0;
  min-width: calc( var(--grid) * 2 );
}

.module-msg .msg-textarea {
  max-width: unset;
  min-height: calc( 1.80 * var(--rem) );
}

.module-msg .msg-heading {
  font-size: calc( 0.20 * var(--rem) );
  font-weight: 700;
  margin: 0 0 2em;
}

.module-msg .msg-item {
  margin: 0 0 calc( var(--grid) / 2 ) auto;
  width: 90%;
}

.module-msg .msg-employee {
  margin-left: 0;
}

.module-msg .msg-message {
  font-size: 1em;
  background: rgb( var(--color-main) );
  border-radius: 1em;
  padding: 1em;
}

.module-msg .msg-name {
  font-size: 1em;
  margin: 0;
}

.module-msg .msg-date {
  display: block;
  font-size: 0.8em;
  margin: 0.5em 0 0;
  text-align: right;
}

@media (width <= 1000px) {
  .module-msg .msg-textarea {
    min-height: unset;
  }

  .module-account .module-msg {
    max-width: unset;
  }
}

@media (width <= 1628px) {
  :root {
    ---padding: calc( 0.5 * var(---grid) );
  }
}

@media (width <= 1366px) {
  [class^="button"], [class*=" button"] {
    font-size: calc( 0.14 * var(---rem) );
  }
}

@media (width <= 1280px) {
  [class^="button"], [class*=" button"] {
    font-size: calc( 0.13 * var(---rem) );
  }
}

@media (width <= 1200px) {
  :root {  
    ---rem: 90px;

    ---grid: calc( 0.64 * var(---rem) );

    ---padding: calc( 0.20 * var(---rem) );
  }
}

@media (width <= 1000px) {
  :root {  
    ---rem: 100px;

    ---grid: calc( 0.64 * var(---rem) );

    ---padding: calc( 0.20 * var(---rem) );
  }

  .content {
    font-size: calc( 0.16 * var(---rem) );
    line-height: 1.65em;
  }

  .content blockquote {
    padding: 5em 2em;
  }

  .content tr {
    border: none;
    display: flex;
    flex-flow: column;
    font-size: 1em !important;
  }

  .content tr + tr {
    border-top: max(0.0625em, 1px) solid rgb( var(---color-font-) );
    margin-top: calc( ( var(---grid) / 2 ) - 0.75em );
    padding-top: calc( var(---grid) / 2 );
  }
  
  .content tr:first-child:after {
    display: none;
  }
  
  .content th,
  .content td {
    padding: 0.75em;
  }
  
  .content th:not(:first-child):before,
  .content td:not(:first-child):before {
    display: none;
  }  

  .heading {
    font-size: 1.5em;
    line-height: 1.125;
  }

  [class^="button"], [class*=" button"] {
    font-size: calc( 0.14 * var(---rem) );
  }

  .more {
    font-size: calc( 0.14 * var(---rem) );
    white-space: unset;
  }
}