<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Typography
*/
/*
    Media queries
*/
/*
    Screen visual height minus UI
*/
/*
    Screen - Top and bottom values
*/
/*
    Page mixins
*/
/*
    Hide scrollbars
*/
/*
    Borders
*/
/*
    Functions
*/
/*
    Animations
*/
@keyframes blink {
  50% {
    visibility: hidden;
  }
}
@keyframes shimmer {
  from {
    background-color: #f2f2f2;
  }
  to {
    background-color: #f7f7f7;
  }
}
/* stylelint-disable */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/
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 {
  padding: 0;
  border: 0;
  margin: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
  outline: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

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

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

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
}

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

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  max-width: 100%;
  *zoom: 1;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
  display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
  margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
  margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  padding: 0.35em 0.625em 0.75em;
  border: 1px solid #c0c0c0;
  margin: 0 2px;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
  padding: 0;
  border: 0; /* 1 */
  *margin-left: -7px; /* 3 */
  white-space: normal; /* 2 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  margin: 0; /* 2 */
  font-size: 100%; /* 1 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  *overflow: visible; /* 4 */
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type=checkbox],
input[type=radio] {
  *width: 13px; /* 3 */
  *height: 13px; /* 3 */
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
button,
input,
select,
textarea {
  color: #000;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

img {
  vertical-align: middle;
}

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

textarea {
  resize: vertical;
}

.chromeframe {
  padding: 0.2em 0;
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
}

/* stylelint-enable */
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Font face includes
*/
html {
  font-size: 10px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision;
}

body {
  font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.025em;
  line-height: 20px;
}

input::-moz-placeholder {
  text-transform: uppercase;
}

body,
button,
input::placeholder {
  text-transform: uppercase;
}

p + p:not(.no-margin) {
  margin-top: 20px;
}

sup,
.sup {
  display: inline-block;
  margin-left: 5px;
  font-family: "Helvetica Now Micro", "Helvetica Now Text", Helvetica, Arial, sans-serif;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  vertical-align: 3px;
}
* ~ sup,
* ~ .sup {
  margin-left: 0;
}
sup, *:hover sup,
.sup,
*:hover .sup {
  text-decoration: none;
}

@media (min-width: 768px) {
  .sup---medium-up {
    display: inline-block;
    margin-left: 5px;
    font-family: "Helvetica Now Micro", "Helvetica Now Text", Helvetica, Arial, sans-serif;
    font-size: 8px;
    font-weight: 500;
    line-height: 1;
    vertical-align: 3px;
  }
  * ~ .sup---medium-up {
    margin-left: 0;
  }
  .sup---medium-up, *:hover .sup---medium-up {
    text-decoration: none;
  }
}
.sup--no-margin {
  margin-left: 0;
}

strong,
.strong {
  font-weight: 500;
}

strike,
.strike {
  text-decoration: line-through;
}

a {
  -webkit-tap-highlight-color: rgba(232, 240, 254, 0.2);
  text-decoration: none;
}
a:focus {
  outline: 0;
}

[role=button] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.space--after::after,
.icon--angle-right::after,
.icon--angle-right,
.space--before::before,
.icon--angle-left::before,
.icon--angle-left {
  content: "&nbsp;";
  font-family: "Helvetica Monospaced Pro", monospace;
  line-height: 16px;
}

.as-space--after {
  margin-right: 8px;
}

/*
    Links
*/
.link,
a {
  color: #0018a8;
  text-decoration: none;
}
@media (min-width: 992px) {
  .link:hover,
  a:hover {
    color: #051574;
  }
}
.link:active,
a:active {
  color: #0018a8;
}
.is--tabbing .link:focus,
.is--tabbing a:focus {
  text-decoration: underline;
}
.highlight-visited-links .link:not([class*=color-]):visited,
.highlight-visited-links .link:not([class*=color-]).visited,
.highlight-visited-links a:not([class*=color-]):visited,
.highlight-visited-links a:not([class*=color-]).visited {
  color: #751a7c;
}
.highlight-visited-links .link:not([class*=color-]):visited:hover,
.highlight-visited-links .link:not([class*=color-]).visited:hover,
.highlight-visited-links a:not([class*=color-]):visited:hover,
.highlight-visited-links a:not([class*=color-]).visited:hover {
  color: #500550;
}
@media (min-width: 768px) {
  .link.link--highlight---medium-up:visited,
  .link.link--highlight---medium-up.visited,
  a.link--highlight---medium-up:visited,
  a.link--highlight---medium-up.visited {
    color: #751a7c;
  }
  .link.link--highlight---medium-up:visited:hover,
  .link.link--highlight---medium-up.visited:hover,
  a.link--highlight---medium-up:visited:hover,
  a.link--highlight---medium-up.visited:hover {
    color: #500550;
  }
}
.link.active:focus,
.link.active:active,
a.active:focus,
a.active:active {
  color: #0018a8;
}
@media (min-width: 768px) {
  .link.active::before,
  .link.active.icon--angle-left,
  a.active::before,
  a.active.icon--angle-left {
    margin-right: 8px;
    content: "&gt;";
    display: inline-block;
    animation: none;
  }
}

.link--main-nav {
  color: #0018a8;
  text-decoration: none;
}
@media (min-width: 992px) {
  .link--main-nav:hover {
    color: #051574;
  }
}
.link--main-nav:active {
  color: #0018a8;
}
.is--tabbing .link--main-nav:focus {
  text-decoration: underline;
}
.highlight-visited-links .link--main-nav:not([class*=color-]):visited,
.highlight-visited-links .link--main-nav:not([class*=color-]).visited {
  color: #751a7c;
}
.highlight-visited-links .link--main-nav:not([class*=color-]):visited:hover,
.highlight-visited-links .link--main-nav:not([class*=color-]).visited:hover {
  color: #500550;
}
@media (min-width: 768px) {
  .link--main-nav.link--highlight---medium-up:visited,
  .link--main-nav.link--highlight---medium-up.visited {
    color: #751a7c;
  }
  .link--main-nav.link--highlight---medium-up:visited:hover,
  .link--main-nav.link--highlight---medium-up.visited:hover {
    color: #500550;
  }
}
.link--main-nav.active:focus,
.link--main-nav.active:active {
  color: #0018a8;
}
@media (min-width: 768px) {
  .link--main-nav.active::before,
  .link--main-nav.active.icon--angle-left {
    margin-right: 8px;
    content: "&gt;";
    display: inline-block;
    animation: none;
  }
}
.link--main-nav {
  overflow: hidden;
  width: 100%;
  color: #000;
  text-align: left;
  text-overflow: hidden;
  white-space: nowrap;
}
.link--main-nav:hover,
.link--main-nav:visited,
.link--main-nav:active,
.link--main-nav.active:active,
.link--main-nav.button:hover,
.link--main-nav.button:visited,
.link--main-nav.button:active,
.link--main-nav.button.active:active,
.link--main-nav.active .link--main-nav.visited,
.link--main-nav.active .link--main-nav.button.visited,
.link--main-nav.button.active .link--main-nav.visited,
.link--main-nav.button.active .link--main-nav.button.visited {
  color: #000;
}
.link--main-nav[aria-current=page] {
  color: #5c5c5c;
  text-decoration: underline;
}
@media (min-width: 992px) {
  .link--main-nav {
    width: auto;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
  .link--main-nav:hover,
  .link--main-nav.button:hover {
    color: #6b6b6b;
  }
}

@media (min-width: 768px) {
  .link---medium-up {
    color: #0018a8;
    text-decoration: none;
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .link---medium-up:hover {
    color: #051574;
  }
}
@media (min-width: 768px) {
  .link---medium-up:active {
    color: #0018a8;
  }
  .is--tabbing .link---medium-up:focus {
    text-decoration: underline;
  }
  .highlight-visited-links .link---medium-up:not([class*=color-]):visited, .highlight-visited-links .link---medium-up:not([class*=color-]).visited {
    color: #751a7c;
  }
  .highlight-visited-links .link---medium-up:not([class*=color-]):visited:hover, .highlight-visited-links .link---medium-up:not([class*=color-]).visited:hover {
    color: #500550;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .link---medium-up.link--highlight---medium-up:visited, .link---medium-up.link--highlight---medium-up.visited {
    color: #751a7c;
  }
  .link---medium-up.link--highlight---medium-up:visited:hover, .link---medium-up.link--highlight---medium-up.visited:hover {
    color: #500550;
  }
}
@media (min-width: 768px) {
  .link---medium-up.active:focus, .link---medium-up.active:active {
    color: #0018a8;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .link---medium-up.active::before,
  .link---medium-up.active.icon--angle-left {
    margin-right: 8px;
    content: "&gt;";
    display: inline-block;
    animation: none;
  }
}
@media (max-width: 767px) {
  .link--main-nav---small-down {
    color: #0018a8;
    text-decoration: none;
  }
}
@media (max-width: 767px) and (min-width: 992px) {
  .link--main-nav---small-down:hover {
    color: #051574;
  }
}
@media (max-width: 767px) {
  .link--main-nav---small-down:active {
    color: #0018a8;
  }
  .is--tabbing .link--main-nav---small-down:focus {
    text-decoration: underline;
  }
  .highlight-visited-links .link--main-nav---small-down:not([class*=color-]):visited, .highlight-visited-links .link--main-nav---small-down:not([class*=color-]).visited {
    color: #751a7c;
  }
  .highlight-visited-links .link--main-nav---small-down:not([class*=color-]):visited:hover, .highlight-visited-links .link--main-nav---small-down:not([class*=color-]).visited:hover {
    color: #500550;
  }
}
@media (max-width: 767px) and (min-width: 768px) {
  .link--main-nav---small-down.link--highlight---medium-up:visited, .link--main-nav---small-down.link--highlight---medium-up.visited {
    color: #751a7c;
  }
  .link--main-nav---small-down.link--highlight---medium-up:visited:hover, .link--main-nav---small-down.link--highlight---medium-up.visited:hover {
    color: #500550;
  }
}
@media (max-width: 767px) {
  .link--main-nav---small-down.active:focus, .link--main-nav---small-down.active:active {
    color: #0018a8;
  }
}
@media (max-width: 767px) and (min-width: 768px) {
  .link--main-nav---small-down.active::before,
  .link--main-nav---small-down.active.icon--angle-left {
    margin-right: 8px;
    content: "&gt;";
    display: inline-block;
    animation: none;
  }
}
@media (max-width: 767px) {
  .link--main-nav---small-down {
    overflow: hidden;
    width: 100%;
    color: #000;
    text-align: left;
    text-overflow: hidden;
    white-space: nowrap;
  }
  .link--main-nav---small-down:hover, .link--main-nav---small-down:visited, .link--main-nav---small-down:active, .link--main-nav---small-down.active:active, .link--main-nav---small-down.active .link--main-nav---small-down.visited, .link--main-nav---small-down.button:hover, .link--main-nav---small-down.button:visited, .link--main-nav---small-down.button:active, .link--main-nav---small-down.button.active:active, .link--main-nav---small-down.active .link--main-nav---small-down.button.visited, .link--main-nav---small-down.button.active .link--main-nav---small-down.visited, .link--main-nav---small-down.button.active .link--main-nav---small-down.button.visited {
    color: #000;
  }
  .link--main-nav---small-down[aria-current=page] {
    color: #5c5c5c;
    text-decoration: underline;
  }
}
@media (max-width: 767px) and (min-width: 992px) {
  .link--main-nav---small-down {
    width: auto;
    min-width: -moz-fit-content;
    min-width: fit-content;
  }
  .link--main-nav---small-down:hover, .link--main-nav---small-down.button:hover {
    color: #6b6b6b;
  }
}
/*
    Modifiers
*/
.font--xsmall {
  font-size: 8px;
}

.font--small {
  font-size: 10px;
}

.font--medium {
  font-size: 12px;
}

.font--large {
  font-size: 18px;
}

@media (max-width: 767px) {
  .font--small---small-down {
    font-size: 10px;
  }
}
.text--large {
  font-size: 18px;
  line-height: 24px;
}

.font--monospace {
  font-family: "Helvetica Monospaced Pro", monospace;
}

.font--monospace-inline,
span.font--monospace {
  line-height: 16px;
}

.font--super-font-family {
  font-family: "Helvetica Now Micro", "Helvetica Now Text", Helvetica, Arial, sans-serif;
}

.text--uppercase {
  text-transform: uppercase;
}

.text--lowercase {
  text-transform: lowercase;
}

.text--no-case {
  text-transform: none;
}

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

.text--pull-right {
  float: right;
}

.text--align-left {
  text-align: left;
}

@media (min-width: 768px) {
  .text--align-left---medium-up {
    text-align: left;
  }
}
.text--align-center {
  text-align: center;
}

.text--align-right {
  text-align: right;
}

.ascii-art-wrapper {
  display: flex;
  overflow: hidden;
  padding: 10px;
}

.ascii-art-wrapper--before-init {
  color: transparent;
}

.ascii-art {
  flex: 0 0 auto;
  font-family: "Helvetica Monospaced Pro", monospace;
  font-size: 12px;
  line-height: 1;
  transform-origin: top left;
  white-space: pre;
}

@media (max-width: 767px) {
  .text--align-right---small-down, .text--align-right---small-down.button {
    text-align: right;
  }
  .text--align-center---small-down {
    text-align: center;
  }
}
@media (max-width: 991px) {
  .text--align-right---medium-down {
    text-align: right;
  }
}
@media (min-width: 768px) {
  .text--align-right---medium-up {
    text-align: right;
  }
}
@media (min-width: 1440px) {
  .text--align-right---xlarge-up {
    text-align: right;
  }
}
/*
    Text mask
*/
.text-mask {
  display: block;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
  white-space: nowrap;
}
.text-mask.cell {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
          mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
}
@media (max-width: 767px) {
  .text-mask---small-down {
    display: block;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
    white-space: nowrap;
  }
  .text-mask---small-down.cell {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
  }
}
@media (min-width: 768px) {
  .text-mask---medium-up {
    display: block;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
    white-space: nowrap;
  }
  .text-mask---medium-up.cell {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
  }
}
@media (min-width: 992px) {
  .text-mask---large-up {
    display: block;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
    white-space: nowrap;
  }
  .text-mask---large-up.cell {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent calc(100% - 10px));
  }
}

/*
    Colors
*/
.color--blue {
  color: #0018a8;
}

.color--green {
  color: #3b8048;
}

.color--red {
  color: #dc0000;
}

.color--validation-green {
  color: #007701;
}

.color--black {
  color: #000;
}

.color--white {
  color: #fff;
}

.color--silver {
  color: #c2c2c2;
}

.color--orange {
  color: #b85b05;
}

.color--gray {
  color: #6b6b6b;
}
a.color--gray {
  color: #6b6b6b;
}

@media (max-width: 767px) {
  .color--black---small-down {
    color: #000;
  }
}
@media (min-width: 768px) {
  .color--gray---medium-up {
    color: #6b6b6b;
  }
}
/*
    Lists
*/
.decorate-lists ul li,
.decorate-lists ol li,
ul.list--decorate li,
ol.list--decorate li {
  position: relative;
  padding-left: 20px;
}
.decorate-lists ul li::before,
.decorate-lists ul li.icon--angle-left,
.decorate-lists ol li::before,
.decorate-lists ol li.icon--angle-left,
ul.list--decorate li::before,
ul.list--decorate li.icon--angle-left,
ol.list--decorate li::before,
ol.list--decorate li.icon--angle-left {
  position: absolute;
  left: 0;
}

.decorate-lists ul li::before,
.decorate-lists ul li.icon--angle-left,
ul.list--decorate li::before,
ul.list--decorate li.icon--angle-left {
  content: "—&nbsp;";
}

.decorate-lists ol,
ol.list--decorate {
  counter-reset: listcount;
}
.decorate-lists ol li::before,
.decorate-lists ol li.icon--angle-left,
ol.list--decorate li::before,
ol.list--decorate li.icon--angle-left {
  content: counter(listcount, decimal-leading-zero) "&nbsp;";
  counter-increment: listcount;
}

@media (max-width: 767px) {
  ul.list--decorate---small-down li,
  ol.list--decorate---small-down li {
    position: relative;
    padding-left: 20px;
  }
  ul.list--decorate---small-down li::before,
  ul.list--decorate---small-down li.icon--angle-left,
  ol.list--decorate---small-down li::before,
  ol.list--decorate---small-down li.icon--angle-left {
    position: absolute;
    left: 0;
  }
  ul.list--decorate---small-down li::before,
  ul.list--decorate---small-down li.icon--angle-left {
    content: "—&nbsp;";
  }
  ol.list--decorate---small-down {
    counter-reset: listcount;
  }
  ol.list--decorate---small-down li::before,
  ol.list--decorate---small-down li.icon--angle-left {
    content: counter(listcount, decimal-leading-zero) "&nbsp;";
    counter-increment: listcount;
  }
}
ol.list--count {
  padding-left: 45px;
  counter-reset: count;
}
ol.list--count &gt; li {
  counter-increment: count;
}
ol.list--count &gt; li::before,
ol.list--count &gt; li.icon--angle-left {
  content: counters(count, "");
}
ol.list--count &gt; li ol {
  counter-reset: subCount;
}
ol.list--count ol &gt; li {
  counter-increment: subCount;
}
ol.list--count ol &gt; li::before,
ol.list--count ol &gt; li.icon--angle-left {
  content: counters(count, ".") "." counters(subCount, ".");
}
ol.list--count li &gt; ol:not(:first-child),
ol.list--count li + li {
  margin-top: 20px;
}
ol.list--count li {
  position: relative;
  display: block;
}
ol.list--count li::before,
ol.list--count li.icon--angle-left {
  position: absolute;
  right: 100%;
  display: inline-block;
  padding-right: 10px;
}
@media (min-width: 768px) {
  ol.list--count li::before,
  ol.list--count li.icon--angle-left {
    padding-right: 20px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.icon--none::before,
.icon--none.icon--angle-left, .icon--none.active::before {
  display: none;
}

.icon--x::before,
.icon--x.icon--angle-left,
.icon--x.active::before {
  margin-right: 8px;
  content: "X";
  display: inline-block;
}

.icon--sale::after,
.icon--sale.icon--angle-right {
  content: "%";
  display: inline-block;
  font-family: "Helvetica Monospaced Pro", monospace;
  line-height: 1;
}

.icon-animation--blink::after,
.icon-animation--blink.icon--angle-right {
  animation: blink 1s step-start 0s infinite;
}

.icon--plus::before,
.icon--plus.icon--angle-left {
  margin-right: 8px;
  content: "+";
  display: inline-block;
}

.icon--plus-x::before,
.icon--plus-x.icon--angle-left {
  content: "+&nbsp;&nbsp;";
  display: inline-block;
  margin-right: 5px;
}
.icon--plus-x[aria-expanded=true]::before,
.icon--plus-x[aria-expanded=true].icon--angle-left {
  content: "x&nbsp;&nbsp;";
}

.icon--large-plus::before,
.icon--large-plus.icon--angle-left {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px, 2px 100%;
  transform: scale(0.5) translateY(-3px);
  transform-origin: bottom;
}

.icon--plus-minus::before,
.icon--plus-minus.icon--angle-left {
  margin-right: 8px;
  content: "+";
  display: inline-block;
  margin-right: 5px;
}
.icon--plus-minus[aria-expanded=true]::before,
.icon--plus-minus[aria-expanded=true].icon--angle-left {
  margin-right: 8px;
  content: "–";
}

.icon--plus-long-minus::before,
.icon--plus-long-minus.icon--angle-left {
  margin-right: 8px;
  content: "+";
  display: inline-block;
  margin-right: 5px;
}
.icon--plus-long-minus[aria-expanded=true]::before,
.icon--plus-long-minus[aria-expanded=true].icon--angle-left, [aria-expanded=true] &gt; .icon--plus-long-minus::before,
[aria-expanded=true] &gt; .icon--plus-long-minus.icon--angle-left {
  margin-right: 8px;
  content: "—";
}

.icon--minus::before,
.icon--minus.icon--angle-left {
  margin-right: 8px;
  content: "-";
  display: inline-block;
  margin-right: 5px;
}

.icon--long-minus::before,
.icon--long-minus.icon--angle-left {
  content: "—";
  display: inline-block;
  margin-right: 6px;
  transform: translateY(-1px);
}

.icon--large-minus::before,
.icon--large-minus.icon--angle-left {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px 1px;
}

.icon--angle-left::before,
.icon--angle-left {
  content: "&lt;";
  margin-right: 1rem;
}

.icon--angle-right::before,
.icon--angle-right.icon--angle-left {
  content: "&gt;";
}

.icon--angle-right-on-expanded[aria-expanded=true]::before,
.icon--angle-right-on-expanded[aria-expanded=true].icon--angle-left, [aria-expanded=true] &gt; .icon--angle-right-on-expanded::before,
[aria-expanded=true] &gt; .icon--angle-right-on-expanded.icon--angle-left {
  content: "&gt;";
  display: inline-block;
}
[aria-expanded=true] &gt; .icon--angle-right-on-expanded::before,
[aria-expanded=true] &gt; .icon--angle-right-on-expanded.icon--angle-left {
  margin-right: 8px;
}
.icon--angle-right-on-expanded[aria-expanded=true]:focus::before,
.icon--angle-right-on-expanded[aria-expanded=true].icon--angle-left:focus, [aria-expanded=true]:focus &gt; .icon--angle-right-on-expanded::before,
[aria-expanded=true]:focus &gt; .icon--angle-right-on-expanded.icon--angle-left {
  text-decoration: none;
}
button[aria-expanded=true].icon--angle-right-on-expanded::before,
button[aria-expanded=true].icon--angle-right-on-expanded.icon--angle-left {
  margin-right: 8px;
}

.icon--checked-green::after,
.icon--checked-green.icon--angle-right {
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  background-image: url("../icons/checked-green.svg");
}

.icon--gift-card {
  position: relative;
  margin-left: 25px;
}
.icon--gift-card::before,
.icon--gift-card.icon--angle-left {
  content: "";
  position: absolute;
  left: -25px;
  display: block;
  width: 15px;
  height: 20px;
  background-image: url("../icons/giftCard.svg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 15px;
}

.icon--chevron-toggle::after,
.icon--chevron-toggle.icon--angle-right {
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  position: absolute;
  right: 10px;
  background-image: url("../icons/down-arrow-black.svg");
}
.icon--chevron-toggle[aria-expanded=true]::after,
.icon--chevron-toggle[aria-expanded=true].icon--angle-right, [aria-expanded=true] &gt; .icon--chevron-toggle::after,
[aria-expanded=true] &gt; .icon--chevron-toggle.icon--angle-right {
  transform: rotate(180deg);
}

.icon--chevron-toggle--left::after,
.icon--chevron-toggle--left.icon--angle-right {
  right: auto;
  left: 10px;
}

.icon--chevron-toggle--right::after,
.icon--chevron-toggle--right.icon--angle-right {
  transform: rotate(-90deg);
}

.icon--arrow-right::after,
.icon--arrow-right.icon--angle-right {
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  background-image: url("../icons/down-arrow-black.svg");
  float: right;
  transform: rotate(-90deg);
}

@media (max-width: 767px) {
  .icon--chevron-right---small-down::after,
  .icon--chevron-right---small-down.icon--angle-right {
    content: "";
    display: inline-block;
    width: 10px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    background-image: url("../icons/down-arrow-black.svg");
    transform: rotate(-90deg);
  }
}
input[type=date]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIxLjUiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHN0cm9rZT0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iMiIgd2lkdGg9IjgiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
}

input[type=time]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI1LjUiIHN0cm9rZT0iYmxhY2siLz4KICAgIDxwYXRoIGQ9Ik02IDJWNkgxMCIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K");
}

.icon-spacing {
  margin-left: 5px;
}

.icon--delete::before,
.icon--delete.icon--angle-left {
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  content: url("../icons/delete.svg");
  margin-right: 6px;
}
.icon--delete:hover {
  color: #dc0000;
}
.icon--delete:hover::before,
.icon--delete.icon--angle-left:hover {
  content: url("../icons/delete-red.svg");
}

.icon-gift::before,
.icon-gift.icon--angle-left {
  content: url("../icons/iconGift.svg");
  position: absolute;
  left: 10px;
  width: 20px;
  text-align: center;
}

.icon--bullet::before,
.icon--bullet.icon--angle-left {
  content: "•";
  margin: 0 3px;
}

/*
    Placements
*/
.icon-placement--left::after,
.icon-placement--left.icon--angle-right {
  position: absolute;
  right: auto;
  left: 8px;
}

.icon-placement--right::after,
.icon-placement--right.icon--angle-right {
  position: absolute;
  right: 10px;
}

.icon-wrapper {
  display: flex !important;
  align-items: center;
}

/*
    SVG icon modifications
*/
path.color--black, .color--black path {
  stroke: #000;
}

.green-check-circle {
  position: relative;
}
.green-check-circle, .green-check-circle[class*=padding] {
  padding-left: 40px;
}
.green-check-circle::before,
.green-check-circle.icon--angle-left {
  content: url("../icons/check-green-circle.svg");
  position: absolute;
  left: 10px;
  width: 20px;
  text-align: center;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: #fff;
  scroll-padding-top: 29px;
  scroll-snap-type: y proximity;
}

html,
body {
  width: 100%;
  height: auto;
}

main {
  position: relative;
}
main, main &gt; [data-main-content] {
  min-height: calc(100vh - 45px);
}
.layout--has-row-top main, .layout--has-row-top main &gt; [data-main-content] {
  min-height: calc(100vh - 90px);
}
@media (min-width: 768px) {
  main, main &gt; [data-main-content] {
    min-height: calc(100vh - 45px);
  }
  .layout--has-row-top main, .layout--has-row-top main &gt; [data-main-content] {
    min-height: calc(100vh - 75px);
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) main, .page:not(.page--no-logo) main &gt; [data-main-content] {
    min-height: calc(100vh - 60px);
  }
  .layout--has-row-top .page:not(.page--no-logo) main, .layout--has-row-top .page:not(.page--no-logo) main &gt; [data-main-content] {
    min-height: calc(100vh - 90px);
  }
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  font-family: "Helvetica Monospaced Pro", monospace;
  font-size: 9px;
  line-height: 1.15;
}

[hidden=true] {
  display: none !important;
}

hr:not([data-hr-content]) {
  border-color: transparent;
  margin: 0%;
}

hr[data-hr-content] {
  position: relative;
  height: 30px;
  border: none;
  margin: 0;
  margin: 10px 0;
  background-image: linear-gradient(#f2f2f2, #f2f2f2);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
hr[data-hr-content]::after {
  content: attr(data-hr-content);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 10px;
  background: #fff;
  transform: translate(-50%, -50%);
}

code {
  display: block;
  overflow: scroll;
  max-width: 100%;
  padding: 10px;
  margin: 10px 0;
  background-color: #f7f7f7;
  text-transform: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Screen Size Indicator
*/
.screen-size-indicator {
  position: absolute;
  top: -999em;
  left: -999em;
}

@media (max-width: 576px) {
  .screen-size-indicator::before {
    content: "xsmall";
  }
}
@media (min-width: 577px) {
  .screen-size-indicator::before {
    content: "small";
  }
}
@media (min-width: 768px) {
  .screen-size-indicator::before {
    content: "medium";
  }
}
@media (min-width: 992px) {
  .screen-size-indicator::before {
    content: "large";
  }
}
@media (min-width: 1440px) {
  .screen-size-indicator::before {
    content: "xlarge";
  }
}
/*
    Visibility Helpers
*/
.hide-visually {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hide {
  display: none !important;
}

@media (max-width: 375px) {
  .hide-for-xxsmall {
    display: none !important;
  }
}
@media (max-width: 576px) {
  .show-for-xlarge,
  .show-for-large-up,
  .show-for-large,
  .show-for-medium-up,
  .show-for-medium,
  .show-for-small,
  .hide-for-xsmall,
  .hide-for-small-down,
  .hide-for-medium-down {
    display: none !important;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .show-for-xlarge,
  .show-for-large-up,
  .show-for-large,
  .show-for-medium-up,
  .show-for-medium,
  .show-for-xsmall,
  .hide-for-small,
  .hide-for-small-down,
  .hide-for-medium-down {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .show-for-xlarge,
  .show-for-large,
  .show-for-small,
  .show-for-large-up,
  .show-for-xsmall,
  .show-for-small-down,
  .hide-for-medium-up,
  .hide-for-medium,
  .hide-for-medium-down {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1439px) {
  .show-for-xlarge,
  .hide-for-large-up,
  .show-for-medium,
  .hide-for-medium-up,
  .show-for-small,
  .show-for-xsmall,
  .show-for-small-down,
  .hide-for-large {
    display: none !important;
  }
}
@media (min-width: 1440px) {
  .show-for-large,
  .show-for-medium,
  .show-for-small,
  .show-for-xsmall,
  .show-for-small-down,
  .hide-for-medium-up,
  .hide-for-large-up,
  .hide-for-xlarge {
    display: none !important;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Grid
*/
.grid, .help-page .content-asset {
  display: grid;
  align-items: flex-start;
  padding: 0;
  grid-auto-rows: minmax(45px, auto);
  grid-gap: 0;
  grid-template-columns: repeat(8, 1fr);
}
.grid--column-gap.grid, .help-page .grid--column-gap.content-asset {
  -moz-column-gap: 10px;
       column-gap: 10px;
}

.grid--dense {
  grid-auto-flow: dense;
}

.grid--subgrid {
  display: grid;
  grid-template-columns: subgrid;
}

.grid--auto-rows, .grid--auto-rows.grid, .help-page .grid--auto-rows.content-asset {
  grid-auto-rows: auto;
}
@media (min-width: 768px) {
  .grid--auto-rows, .grid--auto-rows.grid, .help-page .grid--auto-rows.content-asset {
    grid-auto-rows: auto;
  }
}

.grid--list {
  grid-template-columns: repeat(1, 100%) !important;
}
.grid--list &gt; .cell {
  grid-column-start: 1;
}

.grid--no-height {
  height: 0;
}

.grid--single-row &gt; * {
  grid-row: 1/span 1;
}

.grid--flow-column {
  grid-auto-flow: column;
}

@media (max-width: 767px) {
  .grid---small-down {
    display: grid;
    align-items: flex-start;
    padding: 0;
    grid-auto-rows: minmax(45px, auto);
    grid-gap: 0;
    grid-template-columns: repeat(8, 1fr);
  }
  .grid---small-down.grid--column-gap {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}
@media (min-width: 768px) {
  .grid---medium-up {
    display: grid;
    align-items: flex-start;
    padding: 0;
    grid-auto-rows: minmax(45px, auto);
    grid-gap: 0;
    grid-template-columns: repeat(8, 1fr);
  }
  .grid---medium-up.grid--column-gap {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
  .grid, .help-page .content-asset,
  .grid--half---medium-up,
  .grid---medium-up {
    grid-auto-rows: minmax(30px, auto);
    grid-template-columns: repeat(16, 1fr);
  }
  .grid--half---medium-up {
    grid-template-columns: repeat(8, 1fr);
  }
}
/*
    Grid striped
*/
.grid--striped .cell,
.grid--striped .as-cell {
  position: relative;
  overflow-x: hidden;
  white-space: nowrap;
}
.grid--striped .cell::after,
.grid--striped .as-cell::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 9px;
  height: auto;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
  pointer-events: none;
}
.grid--striped .cell.cell--is-even::after,
.grid--striped .as-cell.cell--is-even::after {
  background: linear-gradient(to right, rgba(247, 247, 247, 0) 0%, #f7f7f7 100%);
}
@media (max-width: 767px) {
  .grid--striped {
    background: repeating-linear-gradient(#f7f7f7 0, #f7f7f7 45px, #fff 45px, #fff 90px);
  }
  .grid--striped .cell,
  .grid--striped .as-cell {
    max-height: 45px;
  }
}
@media (min-width: 768px) {
  .grid--striped {
    background: repeating-linear-gradient(#f7f7f7 0, #f7f7f7 30px, #fff 30px, #fff 60px);
    background-attachment: local;
  }
  .grid--striped &gt; .cell,
  .grid--striped &gt; .as-cell {
    max-height: 30px;
  }
}

[data-main-content] &gt; .grid, .help-page [data-main-content] &gt; .content-asset {
  padding-top: 90px;
}

.page--no-logo [data-main-content] &gt; .grid, .page--no-logo .help-page [data-main-content] &gt; .content-asset, .help-page .page--no-logo [data-main-content] &gt; .content-asset {
  padding-top: 0;
}

/*
    Cell
*/
.as-cell,
.as-cell--small,
.grid &gt; .cell,
.help-page .content-asset &gt; .cell {
  display: block;
  min-height: 45px;
  padding: 4px 9px;
  border: 1px solid transparent;
  word-break: break-word;
  /*
      Cell padding adjustments
  */
  /*
      Cell height adjustments
  */
}
.grid.as-cell, .help-page .as-cell.content-asset,
.grid.as-cell--small,
.help-page .as-cell--small.content-asset,
.grid &gt; .grid.cell,
.help-page .content-asset &gt; .grid.cell,
.help-page .grid &gt; .cell.content-asset,
.help-page .content-asset &gt; .cell.content-asset {
  display: grid;
}
.flexgrid.as-cell,
.flexgrid.as-cell--small,
.grid &gt; .flexgrid.cell,
.help-page .content-asset &gt; .flexgrid.cell {
  display: flex;
}
.flexgrid--inline.as-cell,
.flexgrid--inline.as-cell--small,
.grid &gt; .flexgrid--inline.cell,
.help-page .content-asset &gt; .flexgrid--inline.cell {
  display: inline-flex;
}
@media (max-width: 767px) {
  .grid---small-down.as-cell,
  .grid---small-down.as-cell--small,
  .grid &gt; .grid---small-down.cell,
  .help-page .content-asset &gt; .grid---small-down.cell {
    display: grid;
  }
  .cell--no-padding-small-down.as-cell,
  .cell--no-padding-small-down.as-cell--small,
  .grid &gt; .cell--no-padding-small-down.cell,
  .help-page .content-asset &gt; .cell--no-padding-small-down.cell {
    padding: 0;
    border-width: 0;
  }
}
@media (min-width: 768px) {
  .grid---medium-up.as-cell,
  .grid---medium-up.as-cell--small,
  .grid &gt; .grid---medium-up.cell,
  .help-page .content-asset &gt; .grid---medium-up.cell {
    display: grid;
  }
  .cell--no-padding---medium-up.as-cell,
  .cell--no-padding---medium-up.as-cell--small,
  .grid &gt; .cell--no-padding---medium-up.cell,
  .help-page .content-asset &gt; .cell--no-padding---medium-up.cell {
    padding: 0;
    border-width: 0;
  }
}
.cell--no-padding.as-cell,
.cell--no-padding.as-cell--small,
.grid &gt; .cell--no-padding.cell,
.help-page .content-asset &gt; .cell--no-padding.cell {
  padding: 0;
  border-width: 0;
}
.cell--collapse.as-cell,
.cell--collapse.as-cell--small,
.grid &gt; .cell--collapse.cell,
.help-page .content-asset &gt; .cell--collapse.cell {
  min-height: 0;
}
.cell--heading.as-cell,
.cell--heading.as-cell--small,
.grid &gt; .cell--heading.cell,
.help-page .content-asset &gt; .cell--heading.cell {
  min-height: 30px;
}

.cell {
  grid-column-end: span 2;
  grid-row-end: span 1;
}

/*
    Cell adjustments
*/
.cell.cell--text-start-bottom.cell--large,
.as-cell.cell--text-start-bottom.cell--large {
  padding-top: 19px;
}
.cell.cell--text-start-bottom.cell--large.cell--no-padding,
.as-cell.cell--text-start-bottom.cell--large.cell--no-padding {
  padding-top: 20px;
}
@media (max-width: 767px) {
  .cell.cell--text-start-bottom,
  .as-cell.cell--text-start-bottom {
    padding-top: 19px;
  }
}

.cell--text-start-bottom:not(.cell):not(.as-cell).cell--large {
  padding-top: 20px;
}
@media (max-width: 767px) {
  .cell--text-start-bottom:not(.cell):not(.as-cell) {
    padding-top: 20px;
  }
}

.cell--large,
.as-cell--large,
.cell.cell--large,
.as-cell.cell--large {
  min-height: 45px;
}

.as-cell--small {
  min-height: 30px;
}

/*
    Flexgrid
*/
.flexgrid {
  display: flex;
  flex-direction: row;
}
.flexgrid--wrap {
  flex-wrap: wrap;
}
.flexgrid--align-right {
  justify-content: flex-end;
}
.flexgrid--inline {
  display: inline-flex;
}

@media (max-width: 767px) {
  .as-cell---small-down,
  .grid---small-down &gt; .cell {
    display: block;
    min-height: 45px;
    padding: 4px 9px;
    border: 1px solid transparent;
    word-break: break-word;
    /*
        Cell padding adjustments
    */
    /*
        Cell height adjustments
    */
  }
  .as-cell---small-down.grid, .help-page .as-cell---small-down.content-asset,
  .grid---small-down &gt; .cell.grid,
  .help-page .grid---small-down &gt; .cell.content-asset {
    display: grid;
  }
  .as-cell---small-down.flexgrid,
  .grid---small-down &gt; .cell.flexgrid {
    display: flex;
  }
  .as-cell---small-down.flexgrid--inline,
  .grid---small-down &gt; .cell.flexgrid--inline {
    display: inline-flex;
  }
}
@media (max-width: 767px) and (max-width: 767px) {
  .as-cell---small-down.grid---small-down,
  .grid---small-down &gt; .cell.grid---small-down {
    display: grid;
  }
  .as-cell---small-down.cell--no-padding-small-down,
  .grid---small-down &gt; .cell.cell--no-padding-small-down {
    padding: 0;
    border-width: 0;
  }
}
@media (max-width: 767px) and (min-width: 768px) {
  .as-cell---small-down.grid---medium-up,
  .grid---small-down &gt; .cell.grid---medium-up {
    display: grid;
  }
  .as-cell---small-down.cell--no-padding---medium-up,
  .grid---small-down &gt; .cell.cell--no-padding---medium-up {
    padding: 0;
    border-width: 0;
  }
}
@media (max-width: 767px) {
  .as-cell---small-down.cell--no-padding,
  .grid---small-down &gt; .cell.cell--no-padding {
    padding: 0;
    border-width: 0;
  }
  .as-cell---small-down.cell--collapse,
  .grid---small-down &gt; .cell.cell--collapse {
    min-height: 0;
  }
  .as-cell---small-down.cell--heading,
  .grid---small-down &gt; .cell.cell--heading {
    min-height: 30px;
  }
}
@media (min-width: 768px) {
  .as-cell---medium-up,
  .grid---medium-up &gt; .cell {
    display: block;
    min-height: 45px;
    padding: 4px 9px;
    border: 1px solid transparent;
    word-break: break-word;
    /*
        Cell padding adjustments
    */
    /*
        Cell height adjustments
    */
  }
  .as-cell---medium-up.grid, .help-page .as-cell---medium-up.content-asset,
  .grid---medium-up &gt; .cell.grid,
  .help-page .grid---medium-up &gt; .cell.content-asset {
    display: grid;
  }
  .as-cell---medium-up.flexgrid,
  .grid---medium-up &gt; .cell.flexgrid {
    display: flex;
  }
  .as-cell---medium-up.flexgrid--inline,
  .grid---medium-up &gt; .cell.flexgrid--inline {
    display: inline-flex;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  .as-cell---medium-up.grid---small-down,
  .grid---medium-up &gt; .cell.grid---small-down {
    display: grid;
  }
  .as-cell---medium-up.cell--no-padding-small-down,
  .grid---medium-up &gt; .cell.cell--no-padding-small-down {
    padding: 0;
    border-width: 0;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .as-cell---medium-up.grid---medium-up,
  .grid---medium-up &gt; .cell.grid---medium-up {
    display: grid;
  }
  .as-cell---medium-up.cell--no-padding---medium-up,
  .grid---medium-up &gt; .cell.cell--no-padding---medium-up {
    padding: 0;
    border-width: 0;
  }
}
@media (min-width: 768px) {
  .as-cell---medium-up.cell--no-padding,
  .grid---medium-up &gt; .cell.cell--no-padding {
    padding: 0;
    border-width: 0;
  }
  .as-cell---medium-up.cell--collapse,
  .grid---medium-up &gt; .cell.cell--collapse {
    min-height: 0;
  }
  .as-cell---medium-up.cell--heading,
  .grid---medium-up &gt; .cell.cell--heading {
    min-height: 30px;
  }
  .as-cell,
  .as-cell--small,
  .grid &gt; .cell,
  .help-page .content-asset &gt; .cell,
  .as-cell---medium-up,
  .grid---medium-up &gt; .cell {
    min-height: 30px;
  }
}
.cell--span-all,
.grid--clear-row {
  grid-column: 1/span 8;
}
@media (min-width: 768px) {
  .cell--span-all,
  .grid--clear-row {
    grid-column: 1/span 16;
  }
}

/* stylelint-disable */
@media (max-width: 767px) {
  .cell--col-pos-1---small-down {
    grid-column-start: 1;
  }
  .cell--col-pos-2---small-down {
    grid-column-start: 2;
  }
  .cell--col-pos-3---small-down {
    grid-column-start: 3;
  }
  .cell--col-pos-4---small-down {
    grid-column-start: 4;
  }
  .cell--col-pos-5---small-down {
    grid-column-start: 5;
  }
  .cell--col-pos-6---small-down {
    grid-column-start: 6;
  }
  .cell--col-pos-7---small-down {
    grid-column-start: 7;
  }
  .cell--col-pos-8---small-down {
    grid-column-start: 8;
  }
}
@media (min-width: 577px) {
  .cell--col-pos-1,
  .cell--col-pos-2 {
    grid-column-start: 1;
  }
  .cell--col-pos-3,
  .cell--col-pos-4 {
    grid-column-start: 2;
  }
  .cell--col-pos-5,
  .cell--col-pos-6 {
    grid-column-start: 3;
  }
  .cell--col-pos-7,
  .cell--col-pos-8 {
    grid-column-start: 4;
  }
  .cell--col-pos-9,
  .cell--col-pos-10 {
    grid-column-start: 5;
  }
  .cell--col-pos-11,
  .cell--col-pos-12 {
    grid-column-start: 6;
  }
  .cell--col-pos-13,
  .cell--col-pos-14 {
    grid-column-start: 7;
  }
  .cell--col-pos-15,
  .cell--col-pos-16 {
    grid-column-start: 8;
  }
}
@media (min-width: 768px) {
  .cell--col-pos-1 {
    grid-column-start: 1;
  }
  .cell--col-pos-2 {
    grid-column-start: 2;
  }
  .cell--col-pos-3 {
    grid-column-start: 3;
  }
  .cell--col-pos-4 {
    grid-column-start: 4;
  }
  .cell--col-pos-5 {
    grid-column-start: 5;
  }
  .cell--col-pos-6 {
    grid-column-start: 6;
  }
  .cell--col-pos-7 {
    grid-column-start: 7;
  }
  .cell--col-pos-8 {
    grid-column-start: 8;
  }
  .cell--col-pos-9 {
    grid-column-start: 9;
  }
  .cell--col-pos-10 {
    grid-column-start: 10;
  }
  .cell--col-pos-11 {
    grid-column-start: 11;
  }
  .cell--col-pos-12 {
    grid-column-start: 12;
  }
  .cell--col-pos-13 {
    grid-column-start: 13;
  }
  .cell--col-pos-14 {
    grid-column-start: 14;
  }
  .cell--col-pos-15 {
    grid-column-start: 15;
  }
  .cell--col-pos-16 {
    grid-column-start: 16;
  }
  .cell--col-pos-1---medium-up {
    grid-column-start: 1;
  }
  .cell--col-pos-2---medium-up {
    grid-column-start: 2;
  }
  .cell--col-pos-3---medium-up {
    grid-column-start: 3;
  }
  .cell--col-pos-4---medium-up {
    grid-column-start: 4;
  }
  .cell--col-pos-5---medium-up {
    grid-column-start: 5;
  }
  .cell--col-pos-6---medium-up {
    grid-column-start: 6;
  }
  .cell--col-pos-7---medium-up {
    grid-column-start: 7;
  }
  .cell--col-pos-8---medium-up {
    grid-column-start: 8;
  }
  .cell--col-pos-9---medium-up {
    grid-column-start: 9;
  }
  .cell--col-pos-10---medium-up {
    grid-column-start: 10;
  }
  .cell--col-pos-11---medium-up {
    grid-column-start: 11;
  }
  .cell--col-pos-12---medium-up {
    grid-column-start: 12;
  }
  .cell--col-pos-13---medium-up {
    grid-column-start: 13;
  }
  .cell--col-pos-14---medium-up {
    grid-column-start: 14;
  }
  .cell--col-pos-15---medium-up {
    grid-column-start: 15;
  }
  .cell--col-pos-16---medium-up {
    grid-column-start: 16;
  }
}
/* span */
@media (max-width: 767px) {
  .cell--span-1,
  .cell--span-2 {
    grid-column-end: span 1;
  }
  .cell--span-3,
  .cell--span-4 {
    grid-column-end: span 2;
  }
  .cell--span-5,
  .cell--span-6 {
    grid-column-end: span 3;
  }
  .cell--span-7,
  .cell--span-8 {
    grid-column-end: span 4;
  }
  .cell--span-9,
  .cell--span-10 {
    grid-column-end: span 5;
  }
  .cell--span-11,
  .cell--span-12 {
    grid-column-end: span 6;
  }
  .cell--span-13,
  .cell--span-14 {
    grid-column-end: span 7;
  }
  .cell--span-15,
  .cell--span-16,
  .help-page .content-asset {
    grid-column-end: span 8;
  }
  .cell--span-1---small-down {
    grid-column-end: span 1;
  }
  .cell--span-2---small-down {
    grid-column-end: span 2;
  }
  .cell--span-3---small-down {
    grid-column-end: span 3;
  }
  .cell--span-4---small-down {
    grid-column-end: span 4;
  }
  .cell--span-5---small-down {
    grid-column-end: span 5;
  }
  .cell--span-6---small-down {
    grid-column-end: span 6;
  }
  .cell--span-7---small-down {
    grid-column-end: span 7;
  }
  .cell--span-8---small-down,
  .cell--span-all---small-down {
    grid-column-end: span 8;
  }
  .cell--span-all---small-down {
    grid-column-start: 1;
  }
  .cell--col-pos-1---small-down {
    grid-column-start: 1;
  }
  .cell--col-pos-2---small-down {
    grid-column-start: 2;
  }
  .cell--col-pos-3---small-down {
    grid-column-start: 3;
  }
  .cell--col-pos-4---small-down {
    grid-column-start: 4;
  }
  .cell--col-pos-5---small-down {
    grid-column-start: 5;
  }
  .cell--col-pos-6---small-down {
    grid-column-start: 6;
  }
  .cell--col-pos-7---small-down {
    grid-column-start: 7;
  }
  .cell--col-pos-8---small-down {
    grid-column-start: 8;
  }
  .cell--pad-bottom---small-down, .cell--pad-bottom---small-down.cell {
    padding-bottom: 20px;
  }
}
@media (min-width: 768px) {
  .cell--span-1 {
    grid-column-end: span 1;
  }
  .cell--span-2 {
    grid-column-end: span 2;
  }
  .cell--span-3 {
    grid-column-end: span 3;
  }
  .cell--span-4 {
    grid-column-end: span 4;
  }
  .cell--span-5 {
    grid-column-end: span 5;
  }
  .cell--span-6 {
    grid-column-end: span 6;
  }
  .cell--span-7 {
    grid-column-end: span 7;
  }
  .cell--span-8 {
    grid-column-end: span 8;
  }
  .cell--span-9 {
    grid-column-end: span 9;
  }
  .cell--span-10 {
    grid-column-end: span 10;
  }
  .cell--span-11 {
    grid-column-end: span 11;
  }
  .cell--span-12 {
    grid-column-end: span 12;
  }
  .cell--span-13 {
    grid-column-end: span 13;
  }
  .cell--span-14 {
    grid-column-end: span 14;
  }
  .cell--span-15 {
    grid-column-end: span 15;
  }
  .cell--span-16, .help-page .content-asset {
    grid-column-end: span 16;
  }
  .cell--span-1---medium-up {
    grid-column-end: span 1;
  }
  .cell--span-2---medium-up {
    grid-column-end: span 2;
  }
  .cell--span-3---medium-up {
    grid-column-end: span 3;
  }
  .cell--span-4---medium-up {
    grid-column-end: span 4;
  }
  .cell--span-5---medium-up {
    grid-column-end: span 5;
  }
  .cell--span-6---medium-up {
    grid-column-end: span 6;
  }
  .cell--span-7---medium-up {
    grid-column-end: span 7;
  }
  .cell--span-8---medium-up {
    grid-column-end: span 8;
  }
  .cell--span-9---medium-up {
    grid-column-end: span 9;
  }
  .cell--span-10---medium-up {
    grid-column-end: span 10;
  }
  .cell--span-11---medium-up {
    grid-column-end: span 11;
  }
  .cell--span-12---medium-up {
    grid-column-end: span 12;
  }
  .cell--span-13---medium-up {
    grid-column-end: span 13;
  }
  .cell--span-14---medium-up {
    grid-column-end: span 14;
  }
  .cell--span-15---medium-up {
    grid-column-end: span 15;
  }
  .cell--span-16---medium-up {
    grid-column-end: span 16;
  }
  .cell--row-span-2---medium-up {
    grid-row-end: span 2;
  }
}
@media (min-width: 992px) {
  .cell--col-pos-1---large {
    grid-column-start: 1;
  }
  .cell--col-pos-2---large {
    grid-column-start: 2;
  }
  .cell--col-pos-3---large {
    grid-column-start: 3;
  }
  .cell--col-pos-4---large {
    grid-column-start: 4;
  }
  .cell--col-pos-5---large {
    grid-column-start: 5;
  }
  .cell--col-pos-6---large {
    grid-column-start: 6;
  }
  .cell--col-pos-7---large {
    grid-column-start: 7;
  }
  .cell--col-pos-8---large {
    grid-column-start: 8;
  }
  .cell--col-pos-9---large {
    grid-column-start: 9;
  }
  .cell--col-pos-10---large {
    grid-column-start: 10;
  }
  .cell--col-pos-11---large {
    grid-column-start: 11;
  }
  .cell--col-pos-12---large {
    grid-column-start: 12;
  }
  .cell--col-pos-13---large {
    grid-column-start: 13;
  }
  .cell--col-pos-14---large {
    grid-column-start: 14;
  }
  .cell--col-pos-15---large {
    grid-column-start: 15;
  }
  .cell--col-pos-16---large {
    grid-column-start: 16;
  }
  .cell--span-1---large {
    grid-column-end: span 1;
  }
  .cell--span-2---large {
    grid-column-end: span 2;
  }
  .cell--span-3---large {
    grid-column-end: span 3;
  }
  .cell--span-4---large {
    grid-column-end: span 4;
  }
  .cell--span-5---large {
    grid-column-end: span 5;
  }
  .cell--span-6---large {
    grid-column-end: span 6;
  }
  .cell--span-7---large {
    grid-column-end: span 7;
  }
  .cell--span-8---large {
    grid-column-end: span 8;
  }
  .cell--span-9---large {
    grid-column-end: span 9;
  }
  .cell--span-10---large {
    grid-column-end: span 10;
  }
  .cell--span-11---large {
    grid-column-end: span 11;
  }
  .cell--span-12---large {
    grid-column-end: span 12;
  }
  .cell--span-13---large {
    grid-column-end: span 13;
  }
  .cell--span-14---large {
    grid-column-end: span 14;
  }
  .cell--span-15---large {
    grid-column-end: span 15;
  }
  .cell--span-16---large {
    grid-column-end: span 16;
  }
}
@media (min-width: 1440px) {
  .cell--col-pos-1---xlarge {
    grid-column-start: 1;
  }
  .cell--col-pos-2---xlarge {
    grid-column-start: 2;
  }
  .cell--col-pos-3---xlarge {
    grid-column-start: 3;
  }
  .cell--col-pos-4---xlarge {
    grid-column-start: 4;
  }
  .cell--col-pos-5---xlarge {
    grid-column-start: 5;
  }
  .cell--col-pos-6---xlarge {
    grid-column-start: 6;
  }
  .cell--col-pos-7---xlarge {
    grid-column-start: 7;
  }
  .cell--col-pos-8---xlarge {
    grid-column-start: 8;
  }
  .cell--col-pos-9---xlarge {
    grid-column-start: 9;
  }
  .cell--col-pos-10---xlarge {
    grid-column-start: 10;
  }
  .cell--col-pos-11---xlarge {
    grid-column-start: 11;
  }
  .cell--col-pos-12---xlarge {
    grid-column-start: 12;
  }
  .cell--col-pos-13---xlarge {
    grid-column-start: 13;
  }
  .cell--col-pos-14---xlarge {
    grid-column-start: 14;
  }
  .cell--col-pos-15---xlarge {
    grid-column-start: 15;
  }
  .cell--col-pos-16---xlarge {
    grid-column-start: 16;
  }
  .cell--span-1---xlarge {
    grid-column-end: span 1;
  }
  .cell--span-2---xlarge {
    grid-column-end: span 2;
  }
  .cell--span-3---xlarge {
    grid-column-end: span 3;
  }
  .cell--span-4---xlarge {
    grid-column-end: span 4;
  }
  .cell--span-5---xlarge {
    grid-column-end: span 5;
  }
  .cell--span-6---xlarge {
    grid-column-end: span 6;
  }
  .cell--span-7---xlarge {
    grid-column-end: span 7;
  }
  .cell--span-8---xlarge {
    grid-column-end: span 8;
  }
  .cell--span-9---xlarge {
    grid-column-end: span 9;
  }
  .cell--span-10---xlarge {
    grid-column-end: span 10;
  }
  .cell--span-11---xlarge {
    grid-column-end: span 11;
  }
  .cell--span-12---xlarge {
    grid-column-end: span 12;
  }
  .cell--span-13---xlarge {
    grid-column-end: span 13;
  }
  .cell--span-14---xlarge {
    grid-column-end: span 14;
  }
  .cell--span-15---xlarge {
    grid-column-end: span 15;
  }
  .cell--span-16---xlarge {
    grid-column-end: span 16;
  }
}
/* stylelint-enable */
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/*
    Modifiers
*/
.flex--grow-1 {
  flex-grow: 1;
}

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

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

.flex--wrap {
  flex-wrap: wrap;
}

.flex--nowrap {
  flex-wrap: nowrap;
}

@media (min-width: 768px) {
  .flex--nowrap---medium-up {
    flex-wrap: nowrap;
  }
}
.flex--flow-nowrap {
  flex-flow: nowrap;
}

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

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

.justify-content--left {
  justify-content: left;
}

.justify-content--center {
  justify-content: center;
}

@media (max-width: 767px) {
  .justify-content--center---small-down {
    justify-content: center;
  }
}
.justify-content--right {
  justify-content: right;
}

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

.align-items--center {
  align-items: center;
}

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

.justify-self--flex-end {
  justify-self: flex-end;
}

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

.flex--basis-50 {
  flex-basis: 50%;
}

.flex--gap {
  gap: 10px;
}

/*
    Sizes
*/
[class*=flex-col--] {
  width: 100%;
}

.flex-col--half {
  width: 50%;
}

.flex-col--auto {
  width: auto;
}

@media (max-width: 767px) {
  .flex-col--100---small-down {
    width: 100%;
  }
}
/* stylelint-disable */
@media (max-width: 576px) {
  .flex--gutter---small-up &gt; .flex-col--50:not(:first-child) {
    margin-top: 10px;
  }
}
.flex--gutter &gt; [class*=flex-col--]:nth-child(odd):not(:only-child) {
  padding-right: 5px;
}
.flex--gutter &gt; [class*=flex-col--]:nth-child(even) {
  padding-left: 5px;
}
.flex--gutter &gt; .flex-col--50:nth-child(n+3) {
  margin-top: 10px;
}

@media (min-width: 577px) {
  .flex--gutter---small-up &gt; [class*=flex-col--]:nth-child(odd):not(:only-child) {
    padding-right: 5px;
  }
  .flex--gutter---small-up &gt; [class*=flex-col--]:nth-child(even) {
    padding-left: 5px;
  }
  .flex--gutter---small-up &gt; .flex-col--50:nth-child(n+3) {
    margin-top: 10px;
  }
  .flex-col--50 {
    width: 50%;
  }
  .flex-col--40 {
    width: 40%;
  }
  .flex-col--60 {
    width: 60%;
  }
}
@media (min-width: 768px) {
  .flex-col--50 {
    width: 50%;
  }
  .flex-col--30 {
    width: 30%;
  }
}
/* stylelint-enable */
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Columns

    Good to know:
    Overflowing children within the column might need:
    - transform: translate(0, 0);
    - will-change: transform;
    Without this there is a bug where overflows for children is not shown
*/
.column-span-all {
  -moz-column-span: all;
       column-span: all;
}

.column-fill {
  -moz-column-fill: auto;
       column-fill: auto;
}

.columns--2 {
  -moz-column-gap: 0;
       column-gap: 0;
  -moz-columns: 2;
       columns: 2;
}

@media (max-width: 767px) {
  .columns--2---small-down {
    -moz-column-gap: 0;
         column-gap: 0;
    -moz-columns: 2;
         columns: 2;
  }
}
@media (min-width: 768px) {
  .columns--2---medium-up {
    -moz-column-gap: 0;
         column-gap: 0;
    -moz-columns: 2;
         columns: 2;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
[aria-expanded=true] &gt; .on--expanded-false,
[aria-expanded=false] &gt; .on--expanded-true {
  display: none;
}

.on--loading {
  display: none;
}

.is--loading &gt; .off--loading {
  display: none;
}
.is--loading &gt; .on--loading {
  display: block;
}

:not(.active) &gt; .on--active {
  display: none;
}

/*
    Gradients
*/
.gradinet {
  position: relative;
  z-index: 1;
}

.gradinet--left::before {
  content: "";
  position: absolute;
  display: block;
}

.gradinet--small.gradinet--left::before {
  left: -20px;
  width: 20px;
  height: 20px;
}

.gradinet--color-solitude {
  background-color: #e8f0fe;
}
.gradinet--color-solitude.gradinet--left::before {
  background-image: linear-gradient(to right, rgba(232, 240, 254, 0) 0%, #e8f0fe 70%);
}

/*
    Scroll
*/
.scroll-area {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}
.scroll-area::-webkit-scrollbar {
  /* WebKit */
  display: none;
  width: 0;
  height: 0;
}
.scroll-area {
  overflow: auto;
  max-height: 100vh;
  -webkit-overflow-scrolling: touch;
}
.scroll-area {
  overflow: auto;
  max-height: 100vh;
  -webkit-overflow-scrolling: touch;
}

.scroll-area-including-scrollbars {
  overflow: auto;
  max-height: 100vh;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .scroll-area---medium-up.scroll-gradients--x::before, .scroll-area---medium-up.scroll-gradients--x::after, .scroll-area---medium-up.scroll-gradients--y::before, .scroll-area---medium-up.scroll-gradients--y::after {
    display: none;
  }
}
@media (min-width: 768px) {
  .scroll-area---medium-up {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
  }
  .scroll-area---medium-up::-webkit-scrollbar {
    /* WebKit */
    display: none;
    width: 0;
    height: 0;
  }
  .scroll-area---medium-up {
    overflow: auto;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
}
.scroll-area--x {
  overflow: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.scroll-area--x:not(.scroll-area-including-scrollbars) {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  overflow-x: scroll;
  scrollbar-width: none; /* Firefox */
}
.scroll-area--x:not(.scroll-area-including-scrollbars)::-webkit-scrollbar {
  /* WebKit */
  display: none;
  width: 0;
  height: 0;
}

.scroll-gradients--x::before, .scroll-gradients--x::after,
.scroll-gradients--y::before,
.scroll-gradients--y::after {
  content: "";
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
  transition: opacity 100ms linear;
  will-change: opacity;
}
.scroll-gradients--x.scroll--start::before, .scroll-gradients--x.scroll--end::after,
.scroll-gradients--y.scroll--start::before,
.scroll-gradients--y.scroll--end::after {
  opacity: 0;
}
.scroll-gradients--x:not(.is--overflowing)::before, .scroll-gradients--x:not(.is--overflowing)::after,
.scroll-gradients--y:not(.is--overflowing)::before,
.scroll-gradients--y:not(.is--overflowing)::after {
  opacity: 0;
}

.scroll-gradients--x::before, .scroll-gradients--x::after {
  top: 0;
  width: 30px;
  height: 100%;
}
.scroll-gradients--x::before {
  left: -10px;
  background: linear-gradient(to left, rgba(242, 242, 242, 0) 0%, #f2f2f2 70%);
}
.scroll-gradients--x::after {
  right: -10px;
  background: linear-gradient(to right, rgba(242, 242, 242, 0) 0%, #f2f2f2 70%);
}

.scroll-gradients--y::before, .scroll-gradients--y::after {
  left: 0;
  width: 100%;
  height: 45px;
}
.scroll-gradients--y::before {
  top: 0;
  background: linear-gradient(to top, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%);
}
.scroll-gradients--y::after {
  bottom: 0;
  background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%);
}

.scroll-gradients--sticky.scroll-gradients--y::before, .scroll-gradients--sticky.scroll-gradients--y::after {
  position: sticky;
  min-height: 45px;
}
.scroll-gradients--sticky.scroll-gradients--y::before {
  margin-bottom: -45px;
}
.scroll-gradients--sticky.scroll-gradients--y::after {
  margin-top: -45px;
}
.scroll-gradients--sticky.scroll-gradients--x::before, .scroll-gradients--sticky.scroll-gradients--x::after {
  position: sticky;
  min-width: 30px;
}
.scroll-gradients--sticky.scroll-gradients--x::before {
  margin-right: -30px;
}
.scroll-gradients--sticky.scroll-gradients--x::after {
  margin-left: -30px;
}

.scroll-gradients--white.scroll-gradients--x::before {
  background: linear-gradient(to left, rgba(242, 242, 242, 0) 0%, white 70%);
}
.scroll-gradients--white.scroll-gradients--x::after {
  background: linear-gradient(to right, rgba(242, 242, 242, 0) 0%, white 70%);
}
.scroll-gradients--white.scroll-gradients--y::before {
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 100%);
}
.scroll-gradients--white.scroll-gradients--y::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}

/*
    Overflows
*/
.overflow--hidden {
  overflow: hidden;
}

/*
    Positions
*/
.sticky {
  position: sticky;
}

.sticky--top {
  top: 44px;
}
@media (min-width: 768px) {
  .sticky--top {
    top: 44px;
  }
}
@media (min-width: 1280px) {
  .sticky--top {
    top: 59px;
  }
}
.sticky--top {
  z-index: 10;
}
.breadcrumbs ~ * .sticky--top {
  top: 44px;
}
@media (min-width: 768px) {
  .breadcrumbs ~ * .sticky--top {
    top: 74px;
  }
}
@media (min-width: 1280px) {
  .breadcrumbs ~ * .sticky--top {
    top: 89px;
  }
}

.sticky--bottom {
  bottom: 0;
}

.position--relative {
  position: relative;
}

.position--absolute {
  position: absolute;
}

.display--contents {
  display: contents;
}

/*
    Widths
*/
.width--auto {
  width: auto;
}

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

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

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

.width--33 {
  width: 33.33%;
}

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

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

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

.width--66 {
  width: 66.66%;
}

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

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

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

@media (max-width: 991px) {
  .width--content---medium-down {
    max-width: calc(100vw - 20px);
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .width--auto---medium-up {
    width: auto;
  }
  .width--20---medium-up {
    width: 20%;
  }
  .width--25---medium-up {
    width: 25%;
  }
  .width--30---medium-up {
    width: 30%;
  }
  .width--33---medium-up {
    width: 33.33%;
  }
  .width--40---medium-up {
    width: 40%;
  }
  .width--50---medium-up {
    width: 50%;
  }
  .width--60---medium-up {
    width: 60%;
  }
  .width--66---medium-up {
    width: 66.66%;
  }
  .width--70---medium-up {
    width: 70%;
  }
  .width--75---medium-up {
    width: 75%;
  }
  .width--100---medium-up {
    width: 100%;
  }
}
/*
    Heights
*/
.height--100 {
  height: 100%;
}

.height--auto {
  height: auto;
}

/*
    Masks
*/
.mask--x {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
}

@media (min-width: 768px) {
  .mask--x---medium-up {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
  }
}
/*
    Paddings
*/
.padding--none {
  padding: 0;
}

.padding--contents {
  padding: 0 10px 10px 10px;
}

.padding--small {
  padding: 10px;
}

.padding--medium {
  padding: 15px;
}

.padding--large {
  padding: 30px;
}

.padding--xlarge {
  padding: 20px;
}

.padding--nano {
  padding: 5px;
}

.padding-top--nano {
  padding-top: 5px;
}

.padding-top--micro {
  padding-top: 10px;
}

.padding-bottom--micro {
  padding-bottom: 10px;
}

.padding-top--xsmall {
  padding-top: 20px;
}

.padding-bottom--xsmall {
  padding-bottom: 20px;
}

.padding-top--mini {
  padding-top: 15px;
}
.padding-top--mini[class*=border-top-] {
  padding-top: 14px;
}

.padding-bottom--mini {
  padding-bottom: 15px;
}
.padding-bottom--mini[class*=border-bottom-] {
  padding-bottom: 14px;
}

.padding-top--small {
  padding-top: 30px;
}

.padding-top--medium {
  padding-top: 45px;
}
@media (min-width: 768px) {
  .padding-top--medium {
    padding-top: 60px;
  }
}

.padding-right--micro {
  padding-right: 10px;
}

.padding-right--nano {
  padding-right: 5px;
}

.padding-left--nano {
  padding-left: 5px;
}

.padding-bottom--nano {
  padding-bottom: 5px;
}

.padding-top--large {
  padding-top: 60px;
}

.padding-bottom--large {
  padding-bottom: 60px;
}

.padding-bottom--xlarge {
  padding-bottom: 90px;
}

.padding-top--nano {
  padding-top: 5px;
}

.padding-bottom--small {
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .padding--small---medium-up {
    padding: 10px;
  }
  .padding--large---medium-up {
    padding: 30px;
  }
  .padding--large---medium-up {
    padding: 30px;
  }
  .padding-top--small---medium-up {
    padding-top: 30px;
  }
  .padding-bottom--small---medium-up {
    padding-bottom: 30px;
  }
  .padding-left--micro---medium-up {
    padding-left: 10px;
  }
  .padding-bottom--micro---medium-up {
    padding-bottom: 10px;
  }
  .padding-top--large---medium-up {
    padding-top: 60px;
  }
  .padding-bottom--large---medium-up {
    padding-bottom: 60px;
  }
  .padding-bottom--xlarge---medium-up {
    padding-bottom: 90px;
  }
}
.padding-left--micro {
  padding-left: 10px;
}

.padding-left--small {
  padding-left: 40px;
}

.padding-right--small {
  padding-right: 40px;
}

/*
    Margins
*/
.margin-auto {
  margin: 0 auto;
}

.margin--micro {
  margin: 10px;
}

@media (max-width: 767px) {
  .margin-hoz---small-down {
    margin-right: 10px;
    margin-left: 10px;
  }
}
@media (min-width: 768px) {
  .margin-right--auto---medium-up {
    margin-right: auto;
  }
}
.margin-right--micro {
  margin-right: 10px;
}

.margin-left--micro {
  margin-left: 10px;
}

.margin-left--small {
  margin-left: 30px;
}

.margin-right--small {
  margin-right: 30px;
}

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

.margin-right--mini {
  margin-right: 15px;
}

.negative-margin-top--border {
  margin-top: -1px;
}

.negative-margin-top--nano {
  margin-top: -5px;
}

.negative-margin-top--micro {
  margin-top: -10px;
}

.margin-top--nano {
  margin-top: 5px;
}

.margin-top--micro {
  margin-top: 10px;
}
.margin-top--micro.margin-top--compensate-line-height {
  margin-top: 6px;
}

.margin-top--mini {
  margin-top: 15px;
}

.margin-top--xsmall {
  margin-top: 20px;
}
.margin-top--xsmall.cell.cell--no-padding, .margin-top--xsmall.as-cell.cell--no-padding, *:not(.cell):not(.as-cell) + .margin-top--xsmall {
  margin-top: 25px;
}
.cell.cell--no-padding + .margin-top--xsmall.cell.cell--no-padding, .as-cell.cell--no-padding + .margin-top--xsmall.as-cell.cell--no-padding {
  margin-top: 30px;
}

@media (min-width: 768px) {
  .margin-top--micro---medium-up {
    margin-top: 10px;
  }
  .margin-top--xsmall---medium-up {
    margin-top: 20px;
  }
  .margin-top--xsmall---medium-up.cell.cell--no-padding, .margin-top--xsmall---medium-up.as-cell.cell--no-padding, *:not(.cell):not(.as-cell) + .margin-top--xsmall---medium-up {
    margin-top: 25px;
  }
  .cell.cell--no-padding + .margin-top--xsmall---medium-up.cell.cell--no-padding, .as-cell.cell--no-padding + .margin-top--xsmall---medium-up.as-cell.cell--no-padding {
    margin-top: 30px;
  }
}
.margin-top--small {
  margin-top: 30px;
}

@media (min-width: 768px) {
  .margin-top--small---medium-up {
    margin-top: 30px;
  }
}

@media (min-width: 768px) {
  .margin-top--medium---medium-up {
    margin-top: 60px;
  }
}

.margin-top--medium {
  margin-top: 45px;
}
@media (min-width: 768px) {
  .margin-top--medium {
    margin-top: 60px;
  }
}

.margin-top--large {
  margin-top: 60px;
}
@media (min-width: 768px) {
  .margin-top--large {
    margin-top: 90px;
  }
}

@media (min-width: 768px) {
  .margin-top--large---medium-up {
    margin-top: 90px;
  }
}

@media (max-width: 767px) {
  .margin-top--large---small-down {
    margin-top: 60px;
  }
}

.margin-bottom--nano {
  margin-bottom: 5px;
}

.margin-bottom--micro {
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .margin-bottom--nano---small-down {
    margin-bottom: 5px;
  }
  .margin-bottom--small---small-down {
    margin-bottom: 20px;
  }
}
.margin-bottom--small {
  margin-bottom: 20px;
}

.margin-bottom--medium-up {
  margin-bottom: 45px;
}
@media (min-width: 768px) {
  .margin-bottom--medium-up {
    margin-bottom: 60px;
  }
}

.margin-bottom--medium {
  margin-bottom: 30px;
}

.margin-bottom--line-height {
  margin-bottom: 20px;
}

.margin-bottom--large {
  margin-bottom: 60px;
}
@media (min-width: 768px) {
  .margin-bottom--large {
    margin-bottom: 90px;
  }
}

.margin-between--micro ~ .margin-between--micro {
  margin-top: 10px;
}

.margin-between--large + [class*=margin-between], .margin-between--large + *:not([class*=margin-between]) + [class*=margin-between] {
  margin-top: 60px;
}
@media (min-width: 768px) {
  .margin-between--large + [class*=margin-between], .margin-between--large + *:not([class*=margin-between]) + [class*=margin-between] {
    margin-top: 90px;
  }
}

.margin-between--medium + [class*=margin-between], .margin-between--medium + *:not([class*=margin-between]) + [class*=margin-between] {
  margin-top: 45px;
}
@media (min-width: 768px) {
  .margin-between--medium + [class*=margin-between], .margin-between--medium + *:not([class*=margin-between]) + [class*=margin-between] {
    margin-top: 60px;
  }
}

.margin-between--small + [class*=margin-between], .margin-between--small + *:not([class*=margin-between]) + [class*=margin-between] {
  margin-top: 30px;
}

.margin-between--xsmall + [class*=margin-between], .margin-between--xsmall + *:not([class*=margin-between]) + [class*=margin-between] {
  margin-top: 15px;
}

@media (max-width: 991px) {
  .margin-top--small---medium-down {
    margin-top: 30px;
  }
  .margin-top--medium---medium-down {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .margin-top--medium---small-down,
  .margin-top--medium---medium-down {
    margin-top: 45px;
  }
}
/*
    Indents
*/
.text-indent--small {
  text-indent: 17px;
}

.text-indent--medium {
  text-indent: 30px;
}
.text-indent--medium.link {
  text-indent: 21px;
}

.text-indent--large {
  text-indent: 45px;
}

@media (min-width: 768px) {
  .text-indent--spacing---medium-up {
    text-indent: 10px;
  }
}
@media (max-width: 991px) {
  .text-indent--small---large-down {
    text-indent: 10px;
  }
}
/*
    Borders
*/
.border--none {
  border: 0;
}

.border--black, .border--black.native-select {
  border: 1px solid #000;
}

.border--concrete {
  border: 1px solid #f2f2f2;
}

.border-bottom--black {
  border-bottom: 1px solid #000;
}

.border-bottom--concrete {
  border-bottom: 1px solid #f2f2f2;
}

.border-right--concrete {
  border-right: 1px solid #f2f2f2;
}

.border-left--concrete {
  border-left: 1px solid #f2f2f2;
}

.border-top--white {
  background: linear-gradient(#fff 1px, rgba(0, 0, 0, 0) 1px) no-repeat;
  background-origin: border-box;
}

.border-top--mercury {
  background: linear-gradient(#e5e5e5 1px, rgba(0, 0, 0, 0) 1px) no-repeat;
  background-origin: border-box;
}

.border-top--concrete {
  background: linear-gradient(#f2f2f2 1px, rgba(0, 0, 0, 0) 1px) no-repeat;
  background-origin: border-box;
}

.border-top--black {
  border-top: 1px solid;
  border-top-color: #000;
}

@media (max-width: 767px) {
  .border-top---small-down {
    background: linear-gradient(#f2f2f2 1px, rgba(0, 0, 0, 0) 1px) no-repeat;
    background-origin: border-box;
  }
  .border-top--concrete---small-down {
    background: linear-gradient(#f2f2f2 1px, rgba(0, 0, 0, 0) 1px) no-repeat;
    background-origin: border-box;
  }
  .border-bottom--concrete---small-down {
    border-bottom: 1px solid #f2f2f2;
  }
  .border-left--concrete---small-down {
    border-left: 1px solid #f2f2f2;
  }
  .border-right--concrete---small-down {
    border-right: 1px solid #f2f2f2;
  }
}
@media (min-width: 768px) {
  .border-top---medium-up {
    background: linear-gradient(#000 1px, rgba(0, 0, 0, 0) 1px) no-repeat;
    background-origin: border-box;
  }
  .border-top--concrete---medium-up {
    background: linear-gradient(#f2f2f2 1px, rgba(0, 0, 0, 0) 1px) no-repeat;
    background-origin: border-box;
  }
  .border-top--black---medium-up {
    border-top: 1px solid;
    border-top-color: #000;
  }
}
@media (max-width: 991px) {
  .border-left--concrete---medium-down {
    border-left: 1px solid #f2f2f2;
  }
  .border-right--concrete---medium-down {
    border-right: 1px solid #f2f2f2;
  }
}
/*
    Decorations
*/
.text-decoration--none {
  text-decoration: none;
}

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

/*
    Background Colors
*/
.bg--alabaster {
  background-color: #f7f7f7;
}

.bg--concrete {
  background-color: #f2f2f2;
}

.bg--solitude {
  background-color: #e8f0fe;
}

.bg--white {
  background-color: #fff;
}

.bg--apricot-white {
  background-color: #ffffeb;
}

.bg--black {
  background-color: #000;
}

.bg--klein-blue {
  background-color: #0018a8;
}

.bg--pale-green {
  background-color: #f1ffe8;
}

.bg--scorpion {
  background-color: #5c5c5c;
}

.bg--silver {
  background-color: #c2c2c2;
}

.bg--striped {
  background-attachment: local;
  background-image: repeating-linear-gradient(#f2f2f2 0, #f2f2f2 45px, #fff 45px, #fff 90px);
}
@media (min-width: 768px) {
  .bg--striped {
    background-image: repeating-linear-gradient(#f2f2f2 0, #f2f2f2 30px, #fff 30px, #fff 60px);
  }
}

.bg--striped-children &gt; * {
  background-color: #fff;
}
.bg--striped-children &gt; *:nth-child(even) {
  background-color: #f7f7f7;
}

@media (min-width: 768px) {
  .bg--white---medium-up {
    background-color: #fff;
  }
  .bg--concrete---medium-up {
    background-color: #f2f2f2;
  }
}
/*
    Status indicator
*/
[data-status-indicator], [data-status-indicator].as-cell {
  padding-left: 20px;
}
[data-status-indicator]::before {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  margin-top: 8px;
  margin-right: 8px;
  margin-left: -12px;
  background-color: #c2c2c2;
  pointer-events: none;
}
[data-status-indicator][data-status-indicator=active]::before {
  background-color: #007701;
}
[data-status-indicator][data-status-indicator=inactive]::before {
  background-color: #dc0000;
}
[data-status-indicator][data-status-indicator=disabled]::before {
  background-color: #c2c2c2;
}

/*
    Touch VS Click
*/
@media (hover: hover) {
  .is--touch {
    display: none !important;
  }
}
@media (hover: none) {
  .is--click {
    display: none !important;
  }
}
/*
    Init helpers
*/
.lazy-init--eager {
  padding-top: 100vh;
  margin-top: -100vh;
  pointer-events: none;
}
.lazy-init--eager &gt; * {
  pointer-events: all;
}

@media (min-width: 768px) {
  .lazy-init--eager {
    padding-top: 150vh;
    margin-top: -150vh;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.skip-links {
  background-color: #fff;
  position: relative;
}

.skip-link {
  display: block;
  position: absolute;
  left: -1px;
  top: -1px;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background-color: #fff;
}
[data-active=true] &gt; .skip-link, .skip-link:active, .skip-link:focus {
  position: static;
  left: auto;
  height: auto;
  overflow: visible;
  min-height: 45px;
  padding: 4px 9px 18px;
}

.skip-link-target {
  scroll-margin-top: 45px;
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) .skip-link-target {
    scroll-margin-top: 60px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.lazyload-image-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.lazyload-image-wrapper &gt; img,
.inline-icon-wrapper &gt; img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

.inline-icon-wrapper {
  position: relative;
  display: inline-block;
  width: 13px;
  padding-bottom: 12px;
  vertical-align: -2px;
}

/*
    Common ratios
 */
.media-wrapper--ratio-2-3 {
  padding-bottom: 150%;
}

.media-wrapper--ratio-4-5 {
  padding-bottom: 125%;
}

.media-wrapper--ratio-1-1 {
  padding-bottom: 100%;
}

.media-wrapper--ratio-5-4 {
  padding-bottom: 80%;
}

.media-wrapper--ratio-4-3 {
  padding-bottom: 75%;
}

.media-wrapper--ratio-16-10 {
  padding-bottom: 62.5%;
}

.media-wrapper--ratio-8-5 {
  padding-bottom: 62.5%;
}

.media-wrapper--ratio-5-3 {
  padding-bottom: 60%;
}

.media-wrapper--ratio-16-9 {
  padding-bottom: 56.25%;
}

.media-wrapper--ratio-2-1 {
  padding-bottom: 50%;
}

@media (max-width: 767px) {
  .media-wrapper--ratio-2-3---small-down {
    padding-bottom: 150%;
  }
  .media-wrapper--ratio-4-5---small-down {
    padding-bottom: 125%;
  }
  .media-wrapper--ratio-1-1---small-down {
    padding-bottom: 100%;
  }
  .media-wrapper--ratio-5-4---small-down {
    padding-bottom: 80%;
  }
  .media-wrapper--ratio-4-3---small-down {
    padding-bottom: 75%;
  }
  .media-wrapper--ratio-16-10---small-down {
    padding-bottom: 62.5%;
  }
  .media-wrapper--ratio-8-5---small-down {
    padding-bottom: 62.5%;
  }
  .media-wrapper--ratio-5-3---small-down {
    padding-bottom: 60%;
  }
  .media-wrapper--ratio-16-9---small-down {
    padding-bottom: 56.25%;
  }
  .media-wrapper--ratio-2-1---small-down {
    padding-bottom: 50%;
  }
}
@media (min-width: 768px) {
  .media-wrapper--ratio-2-3---medium-up {
    padding-bottom: 150%;
  }
  .media-wrapper--ratio-4-5---medium-up {
    padding-bottom: 125%;
  }
  .media-wrapper--ratio-1-1---medium-up {
    padding-bottom: 100%;
  }
  .media-wrapper--ratio-5-4---medium-up {
    padding-bottom: 80%;
  }
  .media-wrapper--ratio-4-3---medium-up {
    padding-bottom: 75%;
  }
  .media-wrapper--ratio-16-10---medium-up {
    padding-bottom: 62.5%;
  }
  .media-wrapper--ratio-8-5---medium-up {
    padding-bottom: 62.5%;
  }
  .media-wrapper--ratio-5-3---medium-up {
    padding-bottom: 60%;
  }
  .media-wrapper--ratio-16-9---medium-up {
    padding-bottom: 56.25%;
  }
  .media-wrapper--ratio-2-1---medium-up {
    padding-bottom: 50%;
  }
}
@media (min-width: 992px) {
  .media-wrapper--ratio-2-3---large-up {
    padding-bottom: 150%;
  }
  .media-wrapper--ratio-4-5---large-up {
    padding-bottom: 125%;
  }
  .media-wrapper--ratio-1-1---large-up {
    padding-bottom: 100%;
  }
  .media-wrapper--ratio-5-4---large-up {
    padding-bottom: 80%;
  }
  .media-wrapper--ratio-4-3---large-up {
    padding-bottom: 75%;
  }
  .media-wrapper--ratio-16-10---large-up {
    padding-bottom: 62.5%;
  }
  .media-wrapper--ratio-8-5---large-up {
    padding-bottom: 62.5%;
  }
  .media-wrapper--ratio-5-3---large-up {
    padding-bottom: 60%;
  }
  .media-wrapper--ratio-16-9---large-up {
    padding-bottom: 56.25%;
  }
  .media-wrapper--ratio-2-1---large-up {
    padding-bottom: 50%;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
@keyframes moveBackground {
  0% {
    background-position: 50% center;
  }
  100% {
    background-position: -50% center;
  }
}
@keyframes backgroundBlink {
  0% {
    background-color: rgba(0, 0, 0, 0.05);
  }
  50% {
    background-color: #fff;
  }
}
@keyframes textBlink {
  0% {
    color: #c2c2c2;
  }
  50% {
    color: #6b6b6b;
  }
}
@keyframes backgroundTileBlink {
  from {
    background-color: #f2f2f2;
  }
  to {
    background-color: #f7f7f7;
  }
}
@keyframes inOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/*
    Animations
*/
[data-component-state=init] [data-component-animation=shimmer],
[data-component-state=loading] [data-component-animation=shimmer] {
  animation: moveBackground 1100ms linear forwards infinite;
  background: linear-gradient(to right, #f7f7f7 0%, #f2f2f2 15%, #f2f2f2 22%, #f7f7f7 30%);
  background-size: 300% 100%;
  color: transparent;
  will-change: background-position, color;
}

[data-component-state=init] [data-component-animation=tileBlink],
[data-component-state=loading] [data-component-animation=tileBlink] {
  will-change: background-color;
}
[data-component-state=init] [data-component-animation=tileBlink] &gt; *,
[data-component-state=loading] [data-component-animation=tileBlink] &gt; * {
  animation: backgroundTileBlink 2000ms steps(2, end) infinite;
}
[data-component-state=init] [data-component-animation=tileBlink] &gt; *:nth-child(odd),
[data-component-state=loading] [data-component-animation=tileBlink] &gt; *:nth-child(odd) {
  animation-direction: reverse;
}

[data-component-state=loading] [data-component-animation=shimmerText] {
  animation: moveBackground 1100ms linear forwards infinite;
  background: linear-gradient(to right, #f7f7f7 0%, #f2f2f2 15%, #f2f2f2 22%, #f7f7f7 30%);
  background-size: 300% 18px;
  color: transparent;
  will-change: background-position, color;
  background-repeat: repeat space;
}
[data-component-state=loading] [data-component-animation=shimmerText].animation-span--75 {
  max-width: 75%;
}
[data-component-state=loading] [data-component-animation=shimmerText].animation-span--50 {
  max-width: 50%;
}
[data-component-state=loading] [data-component-animation=shimmerText].animation-span--45 {
  max-width: 45%;
}
[data-component-state=loading] [data-component-animation=shimmerText].animation-span--35 {
  max-width: 35%;
}
[data-component-state=loading] [data-component-animation=shimmerText].animation-span--25 {
  max-width: 25%;
}

[data-component-state=loading] [data-component-animation=blink] {
  animation: backgroundBlink 2000ms steps(1) infinite;
  background-color: #fff;
  will-change: background-color;
}

[data-component-state=loading] [data-component-animation=textBlink],
[data-component-state=loading][data-component-animation=textBlink] {
  animation: textBlink 500ms steps(1) forwards;
  will-change: color;
}

[data-component-state=loading] [data-component-animation=inOut] {
  animation: inOut 1500ms steps(1) infinite;
  will-change: opacity;
}

[data-component-animation=fade] {
  transition: opacity 0.5s ease-in-out;
}

[data-component-state=loading][data-component-animation=infiniteProgress],
[data-component-state=loading] [data-component-animation=infiniteProgress] {
  animation: moveBackground 1100ms linear forwards infinite;
  background: linear-gradient(to right, #fff 0%, #e8f0fe 0%, #e8f0fe 22%, #fff 22%);
  background-size: 300% 100%;
  will-change: background-position;
}
[data-component-state=loading][data-component-animation=infiniteProgress]:active, .is--tabbing [data-component-state=loading][data-component-animation=infiniteProgress]:focus,
[data-component-state=loading] [data-component-animation=infiniteProgress]:active,
.is--tabbing [data-component-state=loading] [data-component-animation=infiniteProgress]:focus {
  outline: none;
}

/*
    Preloader elements, should be useful for bogus preloaders
*/
.component__preloader {
  width: 100%;
  height: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
}
.component__preloader:last-child {
  width: 50%;
}

/*
    State dependant show or hide
    TODO: Remove awaiting, should not be needed afaik
*/
[data-component-state*=loading] [data-component-off-state*=loading]:not([data-component-animation=fade]),
[data-component-state*=awaiting] [data-component-off-state*=awaiting],
[data-component-state]:not([data-component-state=loading]) [data-component-on-state*=loading]:not([data-component-animation=fade]),
[data-component-state]:not([data-component-state*=awaiting]) [data-component-on-state*=awaiting],
[data-component-state]:not([data-component-state=error]) [data-component-on-state*=error],
[data-component-state=loading] [data-component-hide-on-state*=loading],
[data-component-state*=loaded] [data-component-hide-on-state*=loaded],
[data-component-state*=error] [data-component-hide-on-state*=error] {
  display: none;
}

[data-component-state]:not([data-component-state=loading]) [data-component-on-state*=loading][data-component-animation=fade],
[data-component-state*=loading] [data-component-off-state*=loading][data-component-animation=fade] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

/*
    Radio group states
    TODO: Move this!
*/
[data-component*=radio-group][data-component-state=loading] .radio-group__item {
  position: relative;
}
[data-component*=radio-group][data-component-state=loading] .radio-group__item label &gt; *,
[data-component*=radio-group][data-component-state=loading] .radio-group__item input:checked ~ .radio-group__content &gt; * {
  opacity: 0;
}
[data-component*=radio-group][data-component-state=loading] .radio-group__item input:checked + label,
[data-component*=radio-group][data-component-state=loading] .radio-group__item input:checked ~ .radio-group__content {
  background-color: transparent;
}
[data-component*=radio-group][data-component-state=loading] .radio-group__item::before, [data-component*=radio-group][data-component-state=loading] .radio-group__item::after {
  animation: moveBackground 1100ms linear forwards infinite;
  background: linear-gradient(to right, #f2f2f2 0%, #e8f0fe 15%, #e8f0fe 22%, #f2f2f2 30%);
  background-size: 300% 100%;
  color: transparent;
  will-change: background-position, color;
  content: "";
  position: absolute;
  z-index: 2;
  top: 12px;
  display: block;
  height: 10px;
}
[data-component*=radio-group][data-component-state=loading] .radio-group__item::before {
  left: 40px;
  width: 45%;
}
[data-component*=radio-group][data-component-state=loading] .radio-group__item::after {
  right: 10px;
  width: 15%;
}

/*
    Payments states
    TODO: Move this!
    TODO: See if we can now if the user has a savedCard and add loader type
*/
[data-component*=payment-methods] .radio-group__item[data-loader-type] {
  pointer-events: none;
}

[data-customer-type=guest] [data-component*=payment-methods][data-component-state=loading] .radio-group__item[data-loader-type=card] {
  min-height: 246px;
  box-shadow: inset 0 0 0 1px #f7f7f7;
}
[data-customer-type=guest] [data-component*=payment-methods][data-component-state=loading] .radio-group__item[data-loader-type=card] label {
  border-bottom: 0;
}
@media (max-width: 576px) {
  [data-customer-type=guest] [data-component*=payment-methods][data-component-state=loading] .radio-group__item[data-loader-type=card] {
    min-height: 316px;
  }
}
[data-component*=payment-methods][data-component-state=loading] .radio-group__item[data-loader-type=preselected] {
  min-height: 101px;
  box-shadow: inset 0 0 0 1px #f7f7f7;
}
[data-component*=payment-methods][data-component-state=loading] .radio-group__item[data-loader-type=preselected] label {
  border-bottom: 0;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.header {
  position: sticky;
  position: -webkit-sticky;
  z-index: 101;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 45px;
  justify-content: flex-end;
  box-shadow: inset 0 1px #f2f2f2, inset 0 -1px #f2f2f2;
}
.header:not([class*=bg--]) {
  background-color: #fff;
}
@media (min-width: 992px) {
  .header &gt; .link--main-nav + .link--main-nav:not(:nth-child(2)):not(.header__search-button) {
    margin-left: 5px;
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) .header {
    min-height: 60px;
  }
}

.header button.link--main-nav,
.header a.link--main-nav,
.link--main-nav.account-btn,
.navigation-state-container .link--main-nav,
.category-state-container .link--main-nav {
  min-height: 45px;
  padding: 4px 9px 18px;
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) .header button.link--main-nav,
  .page:not(.page--no-logo) .header a.link--main-nav,
  .page:not(.page--no-logo) .link--main-nav.account-btn,
  .page:not(.page--no-logo) .navigation-state-container .link--main-nav,
  .page:not(.page--no-logo) .category-state-container .link--main-nav {
    min-height: 60px;
    padding: 4px 9px 33px;
  }
}

.header__icon-button {
  display: flex;
  width: 45px;
  min-width: -moz-fit-content;
  min-width: fit-content;
  max-height: 45px;
  flex-direction: row;
  align-items: center;
  color: #000;
}
@media (min-width: 992px) and (max-width: 1439px) {
  .header__icon-button {
    width: 40px;
  }
}
.header__icon-button:not([class*=justify-content--]) {
  justify-content: center;
}
.header__icon-button:hover, .is--tabbing .header__icon-button:focus {
  color: #6b6b6b;
}
.header__icon-button.link--main-nav::before {
  display: none;
}
.header__icon-button svg ~ * {
  margin-left: 10px;
}

@media (max-width: 991px) {
  .navigation-state-container {
    padding-bottom: 0;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .navigation-state-container {
      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
      padding-bottom: calc(0 + var(--safe-area-inset-bottom));
      transition: padding-bottom 0.15s ease;
      will-change: padding-bottom;
    }
  }
  .navigation-state-container {
    position: fixed;
    z-index: 109;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    background-color: #fff;
  }
  .navigation-state-container[aria-hidden=true] {
    display: none;
  }
}
.navigation-state-container button.as-cell {
  padding: 4px 9px 18px;
}

.header__icon-button [data-accountnav-component=accountNameWrapper] {
  max-width: 80px;
}

[data-component-id=account]:not(.account--from-menu) .state-close-trigger--navigation {
  display: none;
}

@media (max-width: 991px) {
  [data-component-id=mobileCustomerServiceMenu].state-container,
  [data-component-id=customerServiceDrawer].drawer,
  [data-component-id=account].drawer {
    top: 0;
    width: 100%;
    max-width: 100vw;
  }
  .layout--has-row-top:not(.layout--header-stuck) [data-component-id=mobileCustomerServiceMenu].state-container,
  .layout--has-row-top:not(.layout--header-stuck) [data-component-id=customerServiceDrawer].drawer,
  .layout--has-row-top:not(.layout--header-stuck) [data-component-id=account].drawer {
    top: 0;
  }
  [data-component-id=mobileCustomerServiceMenu].state-container .as-cell,
  [data-component-id=customerServiceDrawer].drawer .as-cell,
  [data-component-id=account].drawer .as-cell {
    min-height: 45px;
    padding: 4px 9px 18px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/* stylelint-disable selector-class-pattern */
.sub-menu {
  text-transform: none;
}

.sub-menu__grid {
  width: 100%;
}

[class*=sub-menu__item] {
  list-style: none;
}

[class*=sub-menu__item-level--] h3 {
  text-transform: uppercase;
}

.sub-menu__section {
  background: repeating-linear-gradient(#fff, #fff 45px, #f7f7f7 0, #f7f7f7 90px);
}

@media (max-width: 991px) {
  .sub-menu__item-level--1,
  .sub-menu__item-level--2 {
    box-shadow: inset 0 -1px 0 #f2f2f2;
  }
  .sub-menu__item-level--1 a,
  .sub-menu__item-level--1 button,
  .sub-menu__item-level--2 a,
  .sub-menu__item-level--2 button {
    padding: 4px 9px 19px;
  }
  .sub-menu__item-level--1 &gt; a, .sub-menu__item-level--1 &gt; button {
    width: 100%;
    color: #000;
    text-align: left;
    text-transform: uppercase;
  }
  .sub-menu__item-level--1 &gt; a:focus, .sub-menu__item-level--1 &gt; a:visited, .sub-menu__item-level--1 &gt; a:active, .sub-menu__item-level--1 &gt; a:hover, .sub-menu__item-level--1 &gt; button:focus, .sub-menu__item-level--1 &gt; button:visited, .sub-menu__item-level--1 &gt; button:active, .sub-menu__item-level--1 &gt; button:hover {
    color: inherit;
  }
  .is--tabbing .sub-menu__item-level--1 &gt; a:focus, .is--tabbing .sub-menu__item-level--1 &gt; button:focus {
    color: inherit;
  }
}
@media (min-width: 992px) {
  .sub-menu__grid {
    display: grid;
    background: repeating-linear-gradient(#f7f7f7, #f7f7f7 30px, #fff 0, #fff 60px);
    grid-auto-flow: dense;
    grid-auto-rows: auto;
    grid-template-columns: repeat(4, 1fr);
  }
  .sub-menu__grid-item--1,
  .sub-menu__grid-item--2,
  .sub-menu__grid-item--3,
  .sub-menu__grid-item--4 {
    overflow: hidden;
    max-width: 100%;
  }
  .sub-menu__grid-item--1 {
    grid-column: 1;
  }
  .sub-menu__grid-item--2 {
    grid-column: 2;
  }
  .sub-menu__grid-item--3 {
    grid-column: 3;
  }
  .sub-menu__grid-item--4 {
    grid-column: 4;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Marquee
*/
@keyframes marqueeText {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.header-marquee {
  position: relative;
  display: flex;
  background-color: #f2f2f2;
  color: #000;
}
@media (min-width: 992px) {
  .header-marquee {
    z-index: 150;
    background-color: #c2c2c2;
  }
}

.header-marquee__close {
  flex: 0 0 auto;
}
.header-marquee__close, .header-marquee__close:visited {
  color: #0018a8;
}

.header-marquee__content {
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.header-marquee__content &gt; * {
  flex: 1 0 50%;
  padding: 0 30px;
  margin: 0;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: marqueeText;
  animation-timing-function: linear;
  text-align: center;
  white-space: nowrap;
}
.header-marquee__content::before, .header-marquee__content::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 30px;
  height: auto;
  pointer-events: none;
}
@media (min-width: 768px) {
  .header-marquee__content .header-marquee__content &gt; * {
    padding: 0 60px;
  }
  .header-marquee__content .header-marquee__content::before, .header-marquee__content .header-marquee__content::after {
    width: 60px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    States
    ======
    Try to keep this file to a minimum, only the generic elements and state containers + layout
    changes from switchingsates belong here
*/
/*
    Scroll lock
*/
[data-scroll-lock=true],
[data-scroll-lock=true] body {
  overflow: hidden;
  height: calc(var(--window-inner-height) - 1px);
}
[data-scroll-lock=true] body {
  overscroll-behavior: none;
  touch-action: pinch-zoom;
}

/*
    State close trigger
*/
.state-close-trigger {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  cursor: pointer;
  grid-column-end: end;
}
.state-close-trigger, .state-close-trigger:active, .state-close-trigger:visited {
  color: #0018a8;
}

/*
    Page overlay
*/
.page-overlay {
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-overlay:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

body[class*=state--] .page-overlay {
  display: block;
}

body[class*=loading-state--] .page-overlay {
  cursor: progress;
}

body.state--navigation .page-overlay,
body[class*=state--category-] .page-overlay,
body.state--sizeguide .page-overlay {
  z-index: 90;
}

/*
    State container defaults
*/
.state-container[aria-hidden=true] {
  display: none;
}

.state-container {
  overscroll-behavior: none;
}

.state-container--overflow-auto {
  overflow: auto;
  max-height: 100vh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  touch-action: pan-y;
}
@media (min-width: 992px) {
  .state-container--overflow-auto {
    max-height: calc(100vh - 45px);
  }
  .layout--has-row-top:not(.layout--header-stuck) .state-container--overflow-auto {
    max-height: calc(100vh - 75px-var(--scrollLock));
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) ~ * .state-container--overflow-auto {
    max-height: calc(100vh - 60px);
  }
  .layout--has-row-top:not(.layout--header-stuck) .page:not(.page--no-logo) ~ * .state-container--overflow-auto {
    max-height: calc(100vh - 90px-var(--scrollLock));
  }
}

@media (max-width: 767px) {
  .state-container--overflow-auto---small-down {
    overflow: auto;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
  }
}
@media (min-width: 768px) {
  .state-container--overflow-visible---medium-up {
    overflow: visible;
  }
}
.state-container__header {
  position: sticky;
  position: -webkit-sticky;
  z-index: 2;
  left: 0;
  width: 100%;
  min-height: 45px;
  grid-column-end: span 8;
}
.state-container__header:not([class*=bg--]) {
  background-color: #fff;
}
@media (min-width: 768px) {
  .state-container__header {
    min-height: 30px;
    grid-column-end: span 16;
  }
}

.state-container__header {
  top: 0;
  min-height: 45px;
}
.state-container__header:not([class*=bg--]) {
  border-bottom: 1px solid #000;
  background-color: #fff;
}
.state-container__header button.as-cell {
  padding: 4px 9px 18px;
}
@media (min-width: 768px) {
  .state-container__header {
    pointer-events: none;
  }
  .state-container__header a,
  .state-container__header button {
    pointer-events: all;
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) ~ * .state-container__header {
    min-height: 60px;
  }
  .page:not(.page--no-logo) ~ * .state-container__header button.as-cell {
    padding: 4px 9px 33px;
  }
}

/*
    Custom state containers
*/
@media (min-width: 992px) {
  [class*=state-close-trigger--category-] {
    position: fixed;
    top: 0;
    right: 0;
    width: 35vw;
    background-color: #fff;
    text-align: right;
  }
  .layout--has-row-top:not(.layout--header-stuck) [class*=state-close-trigger--category-] {
    top: calc(30px - var(--scrollLock));
  }
}

.state-position--top-row-1 {
  top: -1px;
}
@media (min-width: 768px) {
  .state-position--top-row-1 {
    top: -1px;
  }
  .layout--has-row-top:not(.layout--header-stuck) .state-position--top-row-1 {
    top: calc(30px - var(--scrollLock));
  }
}

.category-state-container {
  position: fixed;
  z-index: 110;
  right: 0;
  left: 0;
}
@media (min-width: 992px) {
  .category-state-container {
    top: 45px;
  }
  .layout--has-row-top:not(.layout--header-stuck) .category-state-container {
    top: calc(45px + 30px - var(--scrollLock));
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) ~ * .category-state-container {
    top: 60px;
  }
  .layout--has-row-top:not(.layout--header-stuck) .page:not(.page--no-logo) ~ * .category-state-container {
    top: calc(60px + 30px - var(--scrollLock));
  }
}
@media (max-width: 991px) {
  .category-state-container {
    padding-bottom: 0;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .category-state-container {
      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
      padding-bottom: calc(0 + var(--safe-area-inset-bottom));
      transition: padding-bottom 0.15s ease;
      will-change: padding-bottom;
    }
  }
  .category-state-container {
    top: 0;
    height: 100%;
    background: #fff;
  }
}

.filter-state-container {
  display: grid;
}
@media (max-width: 767px) {
  .filter-state-container {
    display: block;
  }
}

@media (max-width: 767px) {
  .search-state-container .link--main-nav,
  .filter-state-container .link--main-nav {
    width: 100%;
  }
  .search-state-container .link--main-nav:not(.opened),
  .filter-state-container .link--main-nav:not(.opened) {
    border-bottom: 1px solid #f2f2f2;
  }
}

.category-state-container {
  display: grid;
}
.category-state-container button[class*=state-close-trigger--] {
  padding: 4px 9px 18px;
}
@media (max-width: 991px) {
  .category-state-container {
    display: block;
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) ~ * .category-state-container button[class*=state-close-trigger--] {
    padding: 4px 9px 33px;
  }
}

.filter-state-container {
  position: fixed;
  z-index: 110;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  height: auto;
  text-align: left;
}
.filter-state-container[aria-hidden=false] {
  z-index: 200;
}
@media (min-width: 768px) {
  .filter-state-container {
    position: absolute;
    top: 30px;
    bottom: auto;
  }
  .filter-state-container .state-container__header {
    position: absolute;
    top: -30px;
    border-bottom: none;
    background-color: transparent;
  }
}

.state-container--modal {
  position: fixed;
  z-index: 105;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.state-container--modal .state-container--modal {
  top: 0;
}
@media (max-width: 767px) {
  .state-container--modal.state-container--modal-bottom---small-down {
    top: auto;
    bottom: 0;
    height: auto;
  }
}
@media (min-width: 768px) {
  .state-container--modal {
    top: 15vh;
    left: 50%;
    max-width: 360px;
    height: auto;
    max-height: 75vh;
    transform: translate3d(-50%, 0, 0);
  }
  .state-container--modal .state-container__header {
    position: sticky;
    top: 0;
  }
  .state-container--modal .state-container--modal {
    top: 0;
    transform: translate3d(-50%, 0, 0);
    height: 100%;
  }
  .state-container--modal .state-container--modal .modal-body {
    min-height: calc(100% - 30px);
  }
}
@media (min-width: 768px) and (max-height: 992px) {
  .state-container--modal {
    top: 50%;
    max-height: calc(100vh - 75px);
    transform: translate3d(-50%, -50%, 0);
  }
  .state-container--modal .state-container--modal {
    top: 0;
    transform: translate3d(-50%, 0, 0);
  }
}

.state-container--modal-scroll {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}
.state-container--modal-scroll::-webkit-scrollbar {
  /* WebKit */
  display: none;
  width: 0;
  height: 0;
}
.state-container--modal-scroll {
  overflow-y: scroll;
}

@media (max-width: 767px) {
  .state-container--pos-bottom---small-down {
    padding-bottom: 0;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .state-container--pos-bottom---small-down {
      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
      padding-bottom: calc(0 + var(--safe-area-inset-bottom));
      transition: padding-bottom 0.15s ease;
      will-change: padding-bottom;
    }
  }
  .state-container--pos-bottom---small-down {
    height: auto;
    top: auto;
    bottom: 0;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Search buttons within nav
*/
.header__search-button {
  margin-right: auto;
}
@media (min-width: 992px) {
  .header__search-button {
    margin-left: auto;
    margin-right: 5px;
  }
}

.nav__search-button {
  width: 100%;
  max-width: 100%;
}
.nav__search-button [data-nav-component=search] {
  margin-top: 5px;
  float: right;
}

/*
    State - Common
*/
@media (max-width: 991px) {
  .search-state-container.drawer {
    top: 0;
    width: 100%;
    max-width: 100vw;
  }
  .layout--has-row-top:not(.layout--header-stuck) .search-state-container.drawer {
    top: 0;
  }
  .search-state-container .cell,
  .search-state-container .as-cell {
    min-height: 45px;
    padding: 4px 9px 18px;
  }
}
.search-state-container[aria-hidden=false] .search-field {
  padding-right: 31px;
  padding-left: 31px;
  border: 1px solid #000;
  text-transform: initial;
}
@media (max-width: 991px) {
  .search-state-container[aria-hidden=false] .search-field {
    height: 45px;
    padding: 10px 40px;
    font-size: 18px;
  }
  .search-state-container[aria-hidden=false] .search-field::-moz-placeholder {
    font-size: 18px;
    text-transform: none;
  }
  .search-state-container[aria-hidden=false] .search-field::placeholder {
    font-size: 18px;
    text-transform: none;
  }
}
.search-state-container .search-field {
  text-overflow: ellipsis;
}
.search-state-container .drawer__header {
  width: 100%;
  border-bottom: 0;
}
.search-state-container .drawer__scroll-area {
  margin-top: -1px;
  padding-bottom: 0;
}
@media (min-width: 768px) {
  .search-state-container {
    top: -1px;
    position: absolute;
  }
  .layout--has-row-top:not(.layout--header-stuck) .search-state-container {
    top: calc(30px - var(--scrollLock));
  }
}
@media (min-width: 992px) {
  .search-state-container .search-field__submit {
    max-height: 30px;
  }
}

.search-field__wrapper {
  position: relative;
  margin-top: 1px;
}
.search-field__wrapper .search__field {
  position: relative;
  width: 50%;
  flex-grow: 1;
}

button.search-field__clear {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 30px;
}
@media (max-width: 991px) {
  button.search-field__clear {
    min-height: 45px;
    padding: 10px;
  }
}

.search-field__submit {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  color: #000;
}
@media (max-width: 991px) {
  .search-field__submit {
    height: 45px;
    padding: 11px 9px 12px;
  }
  .search-field__submit svg {
    width: 16px;
    height: 16px;
  }
}

/*
    Suggestions
*/
[data-search-suggestions-state]:not([data-search-suggestions-state=empty]) [data-on-search-suggestions-state=empty],
[data-search-suggestions-state]:not([data-search-suggestions-state=searched]) [data-on-search-suggestions-state=searched] {
  display: none;
}

.search-suggestions__heading {
  min-height: 30px;
  border-top: 1px solid #000;
  background-color: #f7f7f7;
  scroll-snap-align: start end;
  text-transform: uppercase;
}

.suggestions__item {
  scroll-snap-align: start end;
}
.suggestions__item &gt; a:not(.text-decoration--none) {
  text-decoration: underline;
}

.search-suggestions__heading ~ a:not(.search-suggestions__item):not([class*=media-wrapper]),
.search-suggestions__item {
  background: #fff;
  text-transform: none;
}
.search-suggestions__heading ~ a:not(.search-suggestions__item):not([class*=media-wrapper]):not(:first-of-type),
.search-suggestions__item:not(:first-of-type) {
  border-top: 1px solid #f2f2f2;
}
.is--tabbing .search-suggestions__heading ~ a:not(.search-suggestions__item):not([class*=media-wrapper]):focus &gt; span,
.is--tabbing .search-suggestions__item:focus &gt; span {
  text-decoration: underline;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Minicart
*/
.minicart[data-cart-state=loading] [data-off-cart-state=loading],
.minicart:not([data-cart-state=loading]) [data-on-cart-state=loading],
.minicart[data-cart-state=empty] [data-off-cart-state=empty],
.minicart:not([data-cart-state=empty]) [data-on-cart-state=empty],
.minicart[data-cart-state=empty] .minicart__hide {
  display: none;
}

.minicart:not([data-cart-state=empty]) .minicart__total:not(.minicart__vat) {
  border-top: 1px solid;
  border-top-color: #000;
}
@media (min-width: 992px) {
  .minicart:not([data-cart-state=empty]) .minicart__total {
    background-color: #fff;
  }
}

/*
    Summary
*/
.minicart__summary-trigger {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 5px 10px 3px 10px;
}
.is--tabbing .minicart__summary-trigger:focus &gt; *:not(:last-child) {
  text-decoration: underline;
}
@media (min-width: 768px) and (max-width: 991px) {
  .minicart__summary-trigger {
    min-height: 60px;
    padding: 4px 10px 10px 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-bottom: -1px;
  }
}

.minicart__summary-trigger-content {
  width: auto;
  float: left;
}
.minicart__summary-trigger-content:last-child {
  float: right;
  text-align: right;
}

.minicart__summary-wrapper {
  padding: 0 10px;
}
@media (max-width: 767px) {
  .minicart__summary-wrapper {
    margin-top: -90px;
    margin-bottom: 60px;
    background-color: #f7f7f7;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .minicart__summary-wrapper {
    margin-bottom: 60px;
  }
}
@media (min-width: 992px) {
  .minicart__summary-wrapper {
    position: sticky;
    top: 45px;
    height: 100%;
    max-height: calc(100vh - 45px);
    margin-top: 5px;
  }
}
@media (min-width: 1280px) {
  .minicart__summary-wrapper {
    top: 60px;
    max-height: calc(100vh - 60px);
  }
}

/*
    Styles
*/
.minicart {
  display: flex;
  flex-direction: column;
}
.minicart .ascii-art-wrapper {
  padding-left: 10px;
}
@media (max-width: 405px) {
  .minicart {
    width: 100%;
    min-width: 100%;
  }
}

.minicart--fixed {
  top: -1px;
  position: fixed;
  z-index: 110;
  right: 0;
  bottom: 0;
  width: 50%;
  min-width: 360px;
  background-color: #f2f2f2;
}
.minicart--fixed:not([data-cart-state=empty]) {
  background-color: #fff;
}
@media (max-width: 360px) {
  .minicart--fixed {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .minicart--fixed {
    margin-bottom: 0;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .minicart--fixed {
      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
      margin-bottom: calc(0 + var(--safe-area-inset-bottom));
      transition: margin-bottom 0.15s ease;
      will-change: margin-bottom;
    }
  }
}
@media (min-width: 768px) {
  .minicart--fixed {
    top: -1px;
    width: 25%;
    max-width: 500px;
  }
  .layout--has-row-top:not(.layout--header-stuck) .minicart--fixed {
    top: calc(30px - var(--scrollLock));
  }
}

.minicart--summary .minicart__totals {
  z-index: 1;
  padding-bottom: 30px;
}
.minicart--summary .minicart__totals [data-cart-discount] {
  background-color: #e8f0fe;
}
@media (min-width: 768px) and (max-width: 991px) {
  .minicart--summary {
    padding-bottom: 1px;
    border-bottom: 1px solid #000;
  }
}
@media (min-width: 992px) {
  .minicart--summary {
    height: 100%;
    max-height: calc(100vh - 45px);
  }
}
@media (min-width: 1280px) {
  .minicart--summary {
    max-height: calc(100vh - 60px);
  }
}

.minicart__error {
  position: sticky;
  z-index: 2;
  top: 1px;
  padding: 30px 10px;
  border-bottom: 1px solid #000;
  margin-bottom: -1px;
  background-color: #ffffeb;
  text-transform: none;
}
.minicart__error:empty {
  display: none;
}

.minicart__warning {
  background: linear-gradient(to right, rgba(255, 255, 235, 0) 0%, #ffffeb 13px);
  background-repeat: no-repeat;
}

.minicart__warning-text {
  padding: 10px;
  text-align: center;
  text-transform: none;
}

.minicart__error-notice {
  padding: 5px 10px;
  border: 1px solid #dc0000;
  margin: -1px 10px 10px;
  background-color: rgba(255, 0, 0, 0.05);
  color: #dc0000;
}

.minicart__main {
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  margin: -1px 0;
}
.minicart__main .scroll-area {
  max-height: 100%;
}

.minicart__items + .info--bar.border-top--black {
  margin-top: 1px;
}

.minicart__main .scroll-gradients--y::before {
  display: none;
}
.minicart__main .scroll-gradients--y::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
}
.minicart--fixed .scroll-gradients--y::after {
  bottom: 1px;
}

.minicart__empty-message {
  padding-bottom: 10px;
}

.minicart__footer {
  z-index: 2;
  border-top: solid 1px #000;
  background-color: #f7f7f7;
}

.minicart__totals .font--monospace {
  margin-top: 1px;
}
.minicart__totals [data-cart-discount] {
  background-color: #f2f2f2;
}

.minicart__tax-calculator {
  margin-bottom: -1px;
}
.minicart__tax-calculator .field__error {
  padding-bottom: 5px;
}
.minicart__tax-calculator .form__error-item {
  border: 0;
  margin-bottom: 0;
}
.minicart__tax-calculator .field__action {
  padding-right: 10px;
}
.minicart__tax-calculator:not([data-state=false]) [data-on-state=false], .minicart__tax-calculator:not([data-state=estimate]) [data-on-state=estimate], .minicart__tax-calculator:not([data-state=noEstimate]) [data-on-state=noEstimate] {
  display: none;
}
.minicart__tax-calculator[data-active=true] .minicart__tax-toggle, .minicart__tax-calculator:not([data-active=true]) form {
  display: none;
}

.minicart__tax-toggle {
  min-width: 30px;
  text-align: left;
}

input[type=tel].minicart__tax-input {
  border-color: #000;
}
form:focus-within input[type=tel].minicart__tax-input {
  background-color: #e8f0fe;
}
input[type=tel].minicart__tax-input:not(:-moz-placeholder-shown) + label {
  opacity: 0;
}
input[type=tel].minicart__tax-input:not(:placeholder-shown) + label {
  opacity: 0;
}

.minicart__payment-logos {
  display: flex;
  height: 30px;
  align-items: center;
  background-color: #fff;
}
.minicart__payment-logos img {
  max-width: 40px;
  max-height: 20px;
  flex: 0 0 auto;
  margin-left: 5px;
}

.info &gt; .minicart__vat.cell.minicart__total {
  padding-top: 0;
}

.minicart__checkout-button {
  margin: 0 10px;
}
.minicart__checkout-button.action--tertiary {
  width: calc(100% - 20px);
  line-height: 35px;
  text-align: center;
}

/*
    Line item states
*/
.line-item[data-line-item-state=default] [data-off-line-item-state*=default],
.line-item[data-line-item-state=unavailable] [data-off-line-item-state*=unavailable],
.line-item[data-line-item-state=invalid] [data-off-line-item-state*=invalid],
.line-item[data-line-item-state=removed] [data-off-line-item-state*=removed],
.line-item[data-line-item-state=wishlist] [data-off-line-item-state*=wishlist],
.line-item:not([data-line-item-state=unavailable]) [data-on-line-item-state=unavailable],
.line-item:not([data-line-item-state=invalid]) [data-on-line-item-state=invalid],
[data-on-line-item-state*=removed],
[data-on-line-item-state*=wishlist] {
  display: none;
}

.line-item[data-line-item-state=removed],
.line-item[data-line-item-state=wishlist] {
  background-color: #fff;
}

.line-item[data-line-item-state=removed] [data-on-line-item-state*=removed],
.line-item[data-line-item-state=wishlist] [data-on-line-item-state*=wishlist] {
  display: block;
}

.line-item:not([data-line-item-state=confirmation]):not([data-line-item-state=default]):not([data-line-item-state=unavailable]):not([data-line-item-state=invalid]) .line-item__title &gt; a,
.line-item .info--bar &gt; *:only-child {
  grid-column-end: span 4;
}
.line-item:not([data-line-item-state=confirmation]):not([data-line-item-state=default]):not([data-line-item-state=unavailable]):not([data-line-item-state=invalid]) .line-item__title &gt; a .text-mask,
.line-item .info--bar &gt; *:only-child .text-mask {
  max-width: 100%;
}

.line-item[data-line-item-state=unavailable],
.line-item[data-line-item-state=invalid] {
  background-color: #ffffeb;
}
.line-item[data-line-item-state=unavailable] input,
.line-item[data-line-item-state=invalid] input {
  background-color: transparent;
  color: #dc0000;
}

.line-item[data-line-item-state=invalid] .line-item__stock-notice {
  display: none;
}
.line-item[data-line-item-state=invalid] picture::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #6b6b6b 50%, transparent calc(50% + 1px)), linear-gradient(to bottom right, transparent calc(50% - 1px), #6b6b6b 50%, transparent calc(50% + 1px));
  background-position: 0 0/100% 100%, 100% 100%/0 0;
  background-repeat: no-repeat;
  pointer-events: none;
}

/*
    Line item
*/
.line-item {
  position: relative;
  border-top: 1px solid #000;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.minicart--fixed .line-item:last-child {
  border-bottom: 1px solid #000;
}
.line-item .info__column {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.line-item .info__column .info__column {
  height: auto;
}

.line-item__link {
  color: #000;
}
.line-item__link::before, .line-item__link::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
}
.line-item__link::before {
  width: 100%;
  height: 30px;
}
.line-item__link::after {
  width: 90px;
  height: 135px;
  margin-top: 30px;
}

.line-item__price {
  position: relative;
  background-color: #fff;
}
.line-item__price::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -15px;
  display: block;
  width: 15px;
  height: 100%;
  background-image: linear-gradient(to left, #fff calc(100% - 15px), rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.line-item[data-line-item-state=unavailable] .line-item__price, .line-item[data-line-item-state=invalid] .line-item__price {
  background-color: #ffffeb;
}
.line-item[data-line-item-state=unavailable] .line-item__price::before, .line-item[data-line-item-state=invalid] .line-item__price::before {
  background-image: linear-gradient(to left, #ffffeb calc(100% - 15px), rgba(255, 255, 235, 0) 100%);
}

.line-item__product-info {
  margin-bottom: -1px;
}
.line-item__product-info &gt; .info__column:only-child {
  grid-column: 1/-1;
}

.line-item__invalid-info {
  margin-top: auto;
}

.line-item__invalid-info-text {
  z-index: 1;
  padding-left: 15px;
  background: linear-gradient(to right, rgba(255, 255, 235, 0) 0%, #ffffeb 13px);
  background-repeat: no-repeat;
}

.line-item__quantity {
  display: flex;
  margin-top: auto;
}
.line-item__quantity button,
.line-item__quantity input[type=number].field-size--small,
.line-item__quantity .as-cell {
  height: 44px;
  min-height: 44px;
  flex: 1;
  margin-top: -1px;
  margin-bottom: -1px;
}
.line-item__quantity button {
  border: 1px solid transparent;
}
.line-item__quantity button:disabled span::before {
  background-image: linear-gradient(#f2f2f2, #f2f2f2), linear-gradient(#f2f2f2, #f2f2f2);
}
.line-item__quantity button:not(:disabled) {
  color: #000;
}
.line-item__quantity button:not(:disabled) span::before {
  background-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
}
.line-item__quantity button:not(:disabled):hover, .is--tabbing .line-item__quantity button:not(:disabled):focus {
  z-index: 1;
  border-color: #000;
}
.line-item__quantity input[type=number] {
  border-top-color: #f2f2f2;
  border-bottom-color: #f2f2f2;
  margin-right: -1px;
  margin-left: -1px;
  text-align: center;
}

.line-item__actions {
  border-top: 1px solid #f2f2f2;
}
.line-item__actions &gt; *:only-child {
  margin-left: auto;
}

@media (max-width: 767px) {
  .line-item__quantity &gt; *:only-child {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 43px;
  }
  .line-item__quantity input[type=number].field-size--small {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .info .line-item__quantity.cell {
    min-height: 44px;
  }
}
@media (min-width: 768px) {
  .line-item__quantity button,
  .line-item__quantity input[type=number].field-size--small,
  .line-item__quantity .as-cell {
    height: 30px;
    min-height: 30px;
  }
}
/*
    Additionals
*/
[data-cart-sum][data-cart-sum-value="0"] {
  display: none;
}

[data-component-id=cartHandler] [aria-hidden=true] {
  display: none;
}

@media (max-width: 991px) {
  [data-component-id=cartHandler] [data-cart-component=bagText] {
    display: none;
  }
}

.minicart [data-cart-component=bagIcon] {
  display: none;
}

[data-cart-count] {
  margin-left: 5px;
}

[data-cart-component=bagIcon][data-cart-icon-state=active] .bag--active {
  fill: #6f0;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Info
    Defined by 2 or 3 immediate children, usually utilizes the .text-mask class on the child-items. Also check special modifier for product
*/
.info {
  align-items: flex-start;
  grid-auto-flow: dense;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}
.info, .info.cell {
  display: grid;
}
.info:not([class*=margin-between])[class*=border--] + .info:not([class*=margin-between])[class*=border--] {
  margin-top: -1px;
}
.info .cell {
  min-height: 30px;
}
.info .cell:not(.cell--no-padding) {
  padding: 4px 10px;
}
.info .cell:not([class*=border-top--]) {
  border-top: 1px solid transparent;
}
.info .cell:not([class*=border-bottom--]) {
  border-bottom: 1px solid transparent;
}

.info--bar[class*=border-bottom--] &gt; *:first-child:nth-last-child(2), .info--bar[class*=border-bottom--] &gt; *:first-child:nth-last-child(2) + * {
  margin-bottom: -1px;
}
.info--bar &gt; *:nth-child(1) {
  grid-column-end: span 3;
}
.info--bar &gt; *:nth-child(2) {
  min-width: -moz-max-content;
  min-width: max-content;
  grid-column-start: 4;
  justify-self: self-end;
}
.info--bar &gt; *:nth-child(2):last-child {
  text-align: right;
}
.info--bar &gt; *:nth-child(3) {
  grid-column-end: span 4;
  grid-row-start: 2;
}
@media (max-width: 991px) {
  .info--bar &gt; *:nth-child(1):nth-last-child(3), .info--bar &gt; *:nth-child(2):nth-last-child(2) {
    padding-bottom: 0;
  }
  .info--bar &gt; *:nth-child(3) {
    padding-top: 0;
  }
}
@media (min-width: 992px) {
  .info--bar &gt; *:nth-child(1):nth-last-child(3) {
    grid-column-end: span 1;
  }
  .info--bar &gt; *:nth-child(2):nth-last-child(2) {
    grid-column-start: 3;
  }
  .info--bar &gt; *:nth-child(2):nth-last-child(2):not([class*=justify-self--]) {
    justify-self: self-start;
  }
  .info--bar &gt; *:nth-child(3) {
    grid-column-end: span 1;
    grid-column-start: 2;
    grid-row-start: 1;
  }
}

/*
    Columns
*/
.info--column &gt; :not(.info__column), .info--column &gt; .info__column {
  grid-column: span 4;
}

@media (max-width: 767px) {
  .info--column---small-down &gt; .info__column {
    grid-column: span 4;
  }
}
.info--columns-2 {
  align-items: flex-start;
  padding: 0 10px;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.info--columns-2 &gt; .info__column {
  grid-column: span 1;
}
@media (min-width: 992px) {
  .info--columns-2 {
    padding: 0;
  }
}

@media (min-width: 992px) {
  .info--columns-2---large {
    align-items: flex-start;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
  .info--columns-2---large &gt; .info__column {
    grid-column: span 1;
  }
}
/*
    The info box for product with related image, the image should be first, second would have class .info__column
*/
.info--product {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 90px minmax(auto, 1fr);
}
.info--product .info__column {
  overflow: hidden;
}
.info--product .info__column &gt; .cell:not([class*=broder-top--]) {
  border-top-color: #f2f2f2;
}
.info--product .text-mask {
  max-width: calc(100% - 10px);
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Wrapper
*/
.page-notfound__wrapper {
  height: 100vh;
  background: #f7f7f7;
}
@media (max-width: 767px) {
  .page-notfound__wrapper .grid &gt; .cell.page-notfound__ascii {
    border-top: 1px solid #000;
  }
}
@media (max-width: 767px) {
  .page-notfound__text {
    order: 3;
  }
}
.page-notfound__info {
  padding-bottom: 20px;
}
.page-notfound__logo {
  width: 100%;
  margin-top: 30px;
}
@media (min-width: 992px) {
  .page-notfound__ascii {
    border-top: none;
    margin-top: 15%;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Country Selector Search
*/
.country-selector[data-is-searching=true] [data-country-selector-component=information] {
  display: none;
}

.country-selector__search {
  position: relative;
  background-color: #f7f7f7;
}
.country-selector__search .search-field__submit,
.country-selector__search .search-field__clear {
  position: absolute;
  height: 45px;
}
.country-selector__search .country-selector__region {
  height: 45px;
}
.country-selector__search .search-field__clear {
  padding: 0;
}
.country-selector__search .search-field__clear img {
  height: 15px;
}
.country-selector__search .search-field__submit {
  color: #6b6b6b;
  transform: translateX(1px);
}
.country-selector__search .country-selector__item:nth-child(odd) {
  background-color: #f7f7f7;
}
.country-selector__search button.country-selector__button,
.country-selector__search a.country-selector__button {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  text-align: left;
  text-overflow: inherit;
  white-space: normal;
}
.country-selector__search button.country-selector__button.active,
.country-selector__search a.country-selector__button.active {
  background-color: #e8f0fe;
  pointer-events: none;
}
.country-selector__search.focused .search-field__submit {
  color: #000;
}

input[type=search].country-selector__search-input.field-size--small {
  width: 100%;
  padding: 10px 35px 10px 33px;
  text-transform: capitalize;
}
input[type=search].country-selector__search-input.field-size--small::-moz-placeholder {
  color: #6b6b6b;
  opacity: 1;
  text-transform: none;
}
input[type=search].country-selector__search-input.field-size--small::placeholder {
  color: #6b6b6b;
  opacity: 1;
  text-transform: none;
}
.focused input[type=search].country-selector__search-input.field-size--small {
  border: 1px solid #000;
}
@media (max-width: 767px) {
  input[type=search].country-selector__search-input.field-size--small {
    padding-left: 35px;
  }
  input[type=search].country-selector__search-input.field-size--small {
    font-size: 18px;
  }
  input[type=search].country-selector__search-input.field-size--small::-moz-placeholder {
    font-size: 18px;
  }
  input[type=search].country-selector__search-input.field-size--small::placeholder {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  input[type=search].country-selector__search-input.field-size--small::-moz-placeholder {
    text-transform: uppercase !important;
  }
  input[type=search].country-selector__search-input.field-size--small::placeholder {
    text-transform: uppercase !important;
  }
}

.country-selector__search-message {
  position: relative;
  display: none;
  margin-top: -1px;
}
.focused + .country-selector__search-message {
  border: 1px solid #000;
}
.has--no-results .country-selector__search-message {
  display: block;
}

/*
    List wrapper
*/
.country-selector .drawer__container {
  position: relative;
}

@supports (-webkit-touch-callout: none) {
  .country-selector__list.scroll--start--stop {
    overflow: hidden;
  }
}

/*
    Country Selector Accordion
*/
.country-selector__region {
  width: 100%;
  border-top: 1px solid #f2f2f2;
  text-align: left;
}
.country-selector__region::after {
  left: 24px;
}
.country-selector:not(.country-selector--country-search) .country-selector__region + [data-content-toggle-id] .country-selector__button {
  text-indent: 25px;
}
@media (min-width: 768px) {
  .country-selector__region::after {
    left: 22px;
  }
}

/*
    Button
*/
button.country-selector__button,
a.country-selector__button {
  width: 100%;
  border: 1px solid transparent;
  text-align: left;
  text-overflow: inherit;
  white-space: normal;
}
button.country-selector__button.as-cell,
a.country-selector__button.as-cell {
  padding-right: 20px;
  padding-left: 20px;
}
button.country-selector__button[aria-pressed=true],
a.country-selector__button[aria-pressed=true] {
  border: 1px solid #000;
  background-color: #e8f0fe;
  pointer-events: none;
}
button.country-selector__button span:first-child,
button.country-selector__button span:nth-child(2),
a.country-selector__button span:first-child,
a.country-selector__button span:nth-child(2) {
  margin-right: 8px;
}
@media (min-width: 768px) {
  button.country-selector__button:hover, button.country-selector__button:focus,
  a.country-selector__button:hover,
  a.country-selector__button:focus {
    border: 1px solid #000;
  }
}

.country-selector__language {
  color: #000;
  float: right;
}

/*
    Modal
*/
.country-selector__modal .modal-body {
  padding: 15px 20px 50px;
}
.country-selector__modal .modal-footer button {
  width: 100%;
  margin: 0;
}
.country-selector__modal .modal-footer &gt; button + button {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .country-selector__modal {
    width: 360px;
    min-width: 360px;
  }
}

/*
    Current country, button or div
*/
.current-country {
  display: inline-flex;
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .current-country {
    width: 100%;
  }
}

.navigation-state-container .country-selector-trigger {
  border-top: 1px solid #f2f2f2;
}

.footer .country-selector-trigger:focus span {
  text-decoration: underline;
}

.current-country__flag {
  display: none;
  flex: 0 0 auto;
  margin: auto 8px auto 0;
}

.current-country__label {
  flex: 0 1 auto;
}

.current-country__shipping-to {
  display: inline-block;
}

.current-country__valid-in {
  display: none;
}

.country-selector__search-input:focus,
.country-selector__search-input:focus ~ .country-selector__search-message {
  border: 1px solid #000;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Form
*/
.form:not(.hide) + .form__success {
  display: none;
}

.form__error[aria-hidden=true] {
  display: none;
}

.form__error-item {
  display: block;
  padding: 5px 10px;
  text-transform: none;
}
.form__error-item:not(.form__error-item--warning) {
  border: 1px solid #dc0000;
  margin-bottom: 10px;
  background-color: rgba(255, 0, 0, 0.05);
  color: #dc0000;
}

.form__success-item {
  padding: 5px 10px;
  background-color: #f1ffe8;
}

.form__error-item--warning {
  padding: 15px 20px;
  background-color: #ffffeb;
  color: #000;
}
.form__error-item--warning + .form__error-item--warning {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .form__error-item--warning {
    padding: 35px 40px;
  }
}

@media (min-width: 577px) {
  .form__error:not(.form__error--no-padding) {
    padding-right: 50%;
  }
}
.login-register-form [data-component=membershipPolicyTrigger],
.login-register-form [data-component=privacyPolicyTrigger] {
  text-transform: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Field
*/
.field-title, .field__error, .field__description, label {
  display: block;
  width: auto;
  padding: 5px 10px;
}
.field-title &gt; img, .field__error &gt; img, .field__description &gt; img, label &gt; img,
.field-title .field-title-icon,
.field__error .field-title-icon,
.field__description .field-title-icon,
label .field-title-icon {
  display: inline-block;
  max-height: 20px;
  vertical-align: baseline;
}
.field-title &gt; img:first-child, .field__error &gt; img:first-child, .field__description &gt; img:first-child, label &gt; img:first-child,
.field-title .field-title-icon:first-child,
.field__error .field-title-icon:first-child,
.field__description .field-title-icon:first-child,
label .field-title-icon:first-child {
  margin-right: 10px;
}
.field-title &gt; img:first-child + span, .field__error &gt; img:first-child + span, .field__description &gt; img:first-child + span, label &gt; img:first-child + span,
.field-title .field-title-icon:first-child + span,
.field__error .field-title-icon:first-child + span,
.field__description .field-title-icon:first-child + span,
label .field-title-icon:first-child + span {
  margin-left: -2px;
}
.field-title &gt; img:last-child, .field__error &gt; img:last-child, .field__description &gt; img:last-child, label &gt; img:last-child,
.field-title .field-title-icon:last-child,
.field__error .field-title-icon:last-child,
.field__description .field-title-icon:last-child,
label .field-title-icon:last-child {
  margin-left: 10px;
}

.field-title--checkout {
  letter-spacing: 0;
}

.field-title--account {
  font-size: 18px;
  text-transform: none;
}

.field {
  position: relative;
  display: block;
}

.field--indent-small {
  margin-left: 10px;
}

.field--indent-large {
  margin-left: 40px;
}

.field--margin-top {
  position: relative;
}
.field--margin-top + .field--margin-top {
  margin-top: 10px;
}

.field-description {
  padding: 5px 10px;
  border: 1px solid #f7f7f7;
  border-top: 0;
}
*:focus:not(:-moz-placeholder-shown) ~ .field-description, .field:focus-within ~ .field-description:not(:-moz-placeholder-shown) &gt; .field-description {
  border-color: #000;
}
*:focus:not(:placeholder-shown) ~ .field-description, .field:focus-within ~ .field-description:not(:placeholder-shown) &gt; .field-description {
  border-color: #000;
}
*[aria-invalid=true] ~ .field-description {
  border-color: #dc0000;
}

/*
    Label
*/
label {
  -webkit-tap-highlight-color: transparent;
}

/*
    Defaults
*/
[data-input-search-component=input][type=button], .as-select,
select, input[type=text],
input[type=email],
input[type=search],
input[type=password],
input[type=number],
input[type=tel],
input[type=date],
input[type=time], [data-textarea-autogrow]::after, textarea {
  display: block;
  width: 100%;
  border: 1px solid #f7f7f7;
  border-radius: 0;
  -webkit-appearance: none;
  background-color: #f7f7f7;
  box-shadow: none;
  color: #000;
  font-family: inherit;
  letter-spacing: inherit;
  line-height: 20px;
  outline: none;
}
[data-input-search-component=input][type=button], .as-select,
select, input[type=text],
input[type=email],
input[type=search],
input[type=password],
input[type=number],
input[type=tel],
input[type=date],
input[type=time], [data-textarea-autogrow]::after, textarea {
  height: 60px;
  padding: 19px 10px;
  font-size: 18px;
}
.field-size--small[data-input-search-component=input][type=button], .field-size--small.as-select,
select.field-size--small, input.field-size--small[type=text],
input.field-size--small[type=email],
input.field-size--small[type=search],
input.field-size--small[type=password],
input.field-size--small[type=number],
input.field-size--small[type=tel],
input.field-size--small[type=date],
input.field-size--small[type=time], .field-size--small[data-textarea-autogrow]::after, textarea.field-size--small {
  height: 45px;
  padding: 20px 9px 4px 9px;
  font-size: 12px;
}
@media (min-width: 768px) {
  .field-size--small[data-input-search-component=input][type=button], .field-size--small.as-select,
  select.field-size--small, input.field-size--small[type=text],
  input.field-size--small[type=email],
  input.field-size--small[type=search],
  input.field-size--small[type=password],
  input.field-size--small[type=number],
  input.field-size--small[type=tel],
  input.field-size--small[type=date],
  input.field-size--small[type=time], .field-size--small[data-textarea-autogrow]::after, textarea.field-size--small {
    height: auto;
    padding: 4px 9px;
  }
}
[data-input-search-component=input][type=button]:not(.field-size--small):not(:-moz-placeholder-shown), .as-select:not(.field-size--small):not(:-moz-placeholder-shown), select:not(.field-size--small):not(:-moz-placeholder-shown), input[type=text]:not(.field-size--small):not(:-moz-placeholder-shown), input[type=email]:not(.field-size--small):not(:-moz-placeholder-shown), input[type=search]:not(.field-size--small):not(:-moz-placeholder-shown), input[type=password]:not(.field-size--small):not(:-moz-placeholder-shown), input[type=number]:not(.field-size--small):not(:-moz-placeholder-shown), input[type=tel]:not(.field-size--small):not(:-moz-placeholder-shown), input[type=date]:not(.field-size--small):not(:-moz-placeholder-shown), input[type=time]:not(.field-size--small):not(:-moz-placeholder-shown), [data-textarea-autogrow]:not(.field-size--small):not(:-moz-placeholder-shown)::after, textarea:not(.field-size--small):not(:-moz-placeholder-shown) {
  padding-top: 30.4px;
  padding-bottom: 7.6px;
}
[data-input-search-component=input][type=button]:not(.field-size--small):focus, .as-select:not(.field-size--small):focus,
select:not(.field-size--small):focus, input[type=text]:not(.field-size--small):focus,
input[type=email]:not(.field-size--small):focus,
input[type=search]:not(.field-size--small):focus,
input[type=password]:not(.field-size--small):focus,
input[type=number]:not(.field-size--small):focus,
input[type=tel]:not(.field-size--small):focus,
input[type=date]:not(.field-size--small):focus,
input[type=time]:not(.field-size--small):focus, [data-textarea-autogrow]:not(.field-size--small):focus::after, textarea:not(.field-size--small):focus, [data-input-search-component=input][type=button]:not(.field-size--small)[data-simulate-focus=true], .as-select:not(.field-size--small)[data-simulate-focus=true],
select:not(.field-size--small)[data-simulate-focus=true], input[type=text]:not(.field-size--small)[data-simulate-focus=true],
input[type=email]:not(.field-size--small)[data-simulate-focus=true],
input[type=search]:not(.field-size--small)[data-simulate-focus=true],
input[type=password]:not(.field-size--small)[data-simulate-focus=true],
input[type=number]:not(.field-size--small)[data-simulate-focus=true],
input[type=tel]:not(.field-size--small)[data-simulate-focus=true],
input[type=date]:not(.field-size--small)[data-simulate-focus=true],
input[type=time]:not(.field-size--small)[data-simulate-focus=true], [data-textarea-autogrow]:not(.field-size--small)[data-simulate-focus=true]::after, textarea:not(.field-size--small)[data-simulate-focus=true], [data-input-search-component=input][type=button]:not(.field-size--small):not(:placeholder-shown), .as-select:not(.field-size--small):not(:placeholder-shown),
select:not(.field-size--small):not(:placeholder-shown), input[type=text]:not(.field-size--small):not(:placeholder-shown),
input[type=email]:not(.field-size--small):not(:placeholder-shown),
input[type=search]:not(.field-size--small):not(:placeholder-shown),
input[type=password]:not(.field-size--small):not(:placeholder-shown),
input[type=number]:not(.field-size--small):not(:placeholder-shown),
input[type=tel]:not(.field-size--small):not(:placeholder-shown),
input[type=date]:not(.field-size--small):not(:placeholder-shown),
input[type=time]:not(.field-size--small):not(:placeholder-shown), [data-textarea-autogrow]:not(.field-size--small):not(:placeholder-shown)::after, textarea:not(.field-size--small):not(:placeholder-shown) {
  padding-top: 30.4px;
  padding-bottom: 7.6px;
}
[data-input-search-component=input][type=button]:hover, .as-select:hover,
select:hover, input[type=text]:hover,
input[type=email]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=tel]:hover,
input[type=date]:hover,
input[type=time]:hover, [data-textarea-autogrow]:hover::after, textarea:hover, [data-input-search-component=input][type=button]:focus, .as-select:focus,
select:focus, input[type=text]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=time]:focus, [data-textarea-autogrow]:focus::after, textarea:focus, [data-simulate-focus=true][data-input-search-component=input][type=button], [data-simulate-focus=true].as-select,
select[data-simulate-focus=true], input[data-simulate-focus=true][type=text],
input[data-simulate-focus=true][type=email],
input[data-simulate-focus=true][type=search],
input[data-simulate-focus=true][type=password],
input[data-simulate-focus=true][type=number],
input[data-simulate-focus=true][type=tel],
input[data-simulate-focus=true][type=date],
input[data-simulate-focus=true][type=time], [data-simulate-focus=true][data-textarea-autogrow]::after, textarea[data-simulate-focus=true], .field:hover &gt; [data-input-search-component=input][type=button], .field:hover &gt; .as-select,
.field:hover &gt; select, .field:hover &gt; input[type=text],
.field:hover &gt; input[type=email],
.field:hover &gt; input[type=search],
.field:hover &gt; input[type=password],
.field:hover &gt; input[type=number],
.field:hover &gt; input[type=tel],
.field:hover &gt; input[type=date],
.field:hover &gt; input[type=time], .field:hover &gt; [data-textarea-autogrow]::after, .field:hover &gt; textarea, .field:focus-within &gt; [data-input-search-component=input][type=button], .field:focus-within &gt; .as-select,
.field:focus-within &gt; select, .field:focus-within &gt; input[type=text],
.field:focus-within &gt; input[type=email],
.field:focus-within &gt; input[type=search],
.field:focus-within &gt; input[type=password],
.field:focus-within &gt; input[type=number],
.field:focus-within &gt; input[type=tel],
.field:focus-within &gt; input[type=date],
.field:focus-within &gt; input[type=time], .field:focus-within &gt; [data-textarea-autogrow]::after, .field:focus-within &gt; textarea {
  border-color: #000;
  box-shadow: none;
  outline: none;
}
[data-input-search-component=input][type=button]:focus, .as-select:focus,
select:focus, input[type=text]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=time]:focus, [data-textarea-autogrow]:focus::after, textarea:focus, [data-simulate-focus=true][data-input-search-component=input][type=button], [data-simulate-focus=true].as-select,
select[data-simulate-focus=true], input[data-simulate-focus=true][type=text],
input[data-simulate-focus=true][type=email],
input[data-simulate-focus=true][type=search],
input[data-simulate-focus=true][type=password],
input[data-simulate-focus=true][type=number],
input[data-simulate-focus=true][type=tel],
input[data-simulate-focus=true][type=date],
input[data-simulate-focus=true][type=time], [data-simulate-focus=true][data-textarea-autogrow]::after, textarea[data-simulate-focus=true] {
  background-color: #e8f0fe;
}

/*
    Input defaults
*/
input {
  -webkit-appearance: none;
  font-family: inherit;
  letter-spacing: inherit;
  -webkit-tap-highlight-color: transparent;
}
input:-webkit-autofill::first-line, input:-webkit-autofill {
  font-family: "Helvetica Now Text", Helvetica, Arial, sans-serif !important;
  font-size: 18px;
  letter-spacing: inherit;
}
input:-webkit-autofill:not(:focus), input:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 60px #f7f7f7;
}
input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  border: 1px solid #000;
}

/*
    Radio &amp; checkbox
*/
input[type=radio]:not(.native-radio),
input[type=checkbox] {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
input[type=radio]:not(.native-radio) + label,
input[type=checkbox] + label {
  width: 100%;
  cursor: pointer;
  pointer-events: all;
}

input[type=radio]:not(.radio-group__input) + label,
input[type=checkbox] + label {
  min-height: 30px;
  padding: 6px 10px 0 40px;
}
input[type=radio]:not(.radio-group__input) + label::before,
input[type=checkbox] + label::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  display: block;
  width: 29px;
  height: 29px;
  border: 1px solid #000;
  background-color: #f7f7f7;
}
.is--tabbing input[type=radio]:not(.radio-group__input):focus + label::before, input[type=radio]:not(.radio-group__input):checked + label::before, input[type=radio]:not(.radio-group__input) + label:hover::before,
.is--tabbing input[type=checkbox]:focus + label::before,
input[type=checkbox]:checked + label::before,
input[type=checkbox] + label:hover::before {
  background-color: #e8f0fe;
}
.is--tabbing input[type=radio]:not(.radio-group__input):focus + label::before,
.is--tabbing input[type=checkbox]:focus + label::before {
  outline: 1px solid #000;
  outline-offset: -3px;
}
input[type=radio]:not(.radio-group__input):checked + label::before,
input[type=checkbox]:checked + label::before {
  background-image: url("../icons/checked-black.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
}

input[type=radio][aria-invalid=true] + label,
input[type=checkbox][aria-invalid=true] + label {
  color: #dc0000;
}
input[type=radio][aria-invalid=true] + label::before,
input[type=checkbox][aria-invalid=true] + label::before {
  border-color: #dc0000;
}

textarea {
  min-height: 120px;
}
textarea.large {
  height: 12rem;
}

[data-textarea-count]::before {
  content: attr(data-textarea-count);
  position: absolute;
  z-index: 1;
  top: 11px;
  right: 0;
  display: block;
  padding: 0 10px;
  color: #6b6b6b;
  font-family: "Helvetica Now Micro", "Helvetica Now Text", Helvetica, Arial, sans-serif;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  vertical-align: 3px;
}
[data-textarea-count]:focus-within::before {
  opacity: 1;
}

[data-textarea-autogrow] {
  display: inline-grid;
  width: 100%;
  align-items: center;
  align-items: stretch;
  vertical-align: top;
}
[data-textarea-autogrow] textarea {
  resize: none;
}
[data-textarea-autogrow]::after {
  content: attr(data-textarea-autogrow) " ";
  visibility: hidden;
  white-space: pre-wrap;
}
[data-textarea-autogrow] textarea, [data-textarea-autogrow]::after {
  height: auto;
  min-height: 60px;
  grid-area: 2/1;
}

/*
    Text input
*/
input[type=text],
input[type=email],
input[type=search],
input[type=password],
input[type=number],
input[type=tel],
input[type=date],
input[type=time] {
  word-break: normal;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=date]::-moz-placeholder, input[type=time]::-moz-placeholder {
  color: #c2c2c2;
  font-size: 18px;
  line-height: normal !important;
  opacity: 0;
  text-transform: none;
  vertical-align: middle;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=search]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=date]::placeholder,
input[type=time]::placeholder {
  color: #c2c2c2;
  font-size: 18px;
  line-height: normal !important;
  opacity: 0;
  text-transform: none;
  vertical-align: middle;
}
input[type=text]:focus::-moz-placeholder, input[type=email]:focus::-moz-placeholder, input[type=search]:focus::-moz-placeholder, input[type=password]:focus::-moz-placeholder, input[type=number]:focus::-moz-placeholder, input[type=tel]:focus::-moz-placeholder, input[type=date]:focus::-moz-placeholder, input[type=time]:focus::-moz-placeholder {
  opacity: 1;
}
input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=search]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=date]:focus::placeholder,
input[type=time]:focus::placeholder {
  opacity: 1;
}
input[type=text].field-size--small::-moz-placeholder, input[type=email].field-size--small::-moz-placeholder, input[type=search].field-size--small::-moz-placeholder, input[type=password].field-size--small::-moz-placeholder, input[type=number].field-size--small::-moz-placeholder, input[type=tel].field-size--small::-moz-placeholder, input[type=date].field-size--small::-moz-placeholder, input[type=time].field-size--small::-moz-placeholder {
  font-size: 12px;
  text-transform: uppercase;
}
input[type=text].field-size--small::placeholder,
input[type=email].field-size--small::placeholder,
input[type=search].field-size--small::placeholder,
input[type=password].field-size--small::placeholder,
input[type=number].field-size--small::placeholder,
input[type=tel].field-size--small::placeholder,
input[type=date].field-size--small::placeholder,
input[type=time].field-size--small::placeholder {
  font-size: 12px;
  text-transform: uppercase;
}
input[type=text]:required:invalid,
input[type=email]:required:invalid,
input[type=search]:required:invalid,
input[type=password]:required:invalid,
input[type=number]:required:invalid,
input[type=tel]:required:invalid,
input[type=date]:required:invalid,
input[type=time]:required:invalid {
  box-shadow: none;
  outline: none;
}
@media (max-width: 767px) {
  input[type=text].field--hide-placeholder---small-down::-moz-placeholder, input[type=email].field--hide-placeholder---small-down::-moz-placeholder, input[type=search].field--hide-placeholder---small-down::-moz-placeholder, input[type=password].field--hide-placeholder---small-down::-moz-placeholder, input[type=number].field--hide-placeholder---small-down::-moz-placeholder, input[type=tel].field--hide-placeholder---small-down::-moz-placeholder, input[type=date].field--hide-placeholder---small-down::-moz-placeholder, input[type=time].field--hide-placeholder---small-down::-moz-placeholder {
    opacity: 0;
  }
  input[type=text].field--hide-placeholder---small-down::placeholder,
  input[type=email].field--hide-placeholder---small-down::placeholder,
  input[type=search].field--hide-placeholder---small-down::placeholder,
  input[type=password].field--hide-placeholder---small-down::placeholder,
  input[type=number].field--hide-placeholder---small-down::placeholder,
  input[type=tel].field--hide-placeholder---small-down::placeholder,
  input[type=date].field--hide-placeholder---small-down::placeholder,
  input[type=time].field--hide-placeholder---small-down::placeholder {
    opacity: 0;
  }
}

input[type=date],
input[type=time] {
  position: relative;
  cursor: text;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  padding: 0;
  background-position: center;
  background-size: 12px;
  cursor: pointer;
}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value {
  text-align: left;
}

input[type=time].field--has-placeholder-icon ~ .field__icon--placeholder {
  top: 30.4px;
  left: 65px;
  max-width: none;
  font-size: 18px;
  line-height: 22px;
}

input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
          appearance: none;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.custom_date ~ .icon img,
.custom_time ~ .icon img {
  display: none;
  padding: 8px;
}
@supports (font: -apple-system-body) and (-webkit-touch-callout: default) {
  .custom_date ~ .icon img,
  .custom_time ~ .icon img {
    display: block;
  }
}

input[data-type=password] ~ .field__action {
  display: none;
}
input[data-type=password]:not(:-moz-placeholder-shown) ~ .field__action {
  display: block;
}
input[data-type=password]:not(:placeholder-shown) ~ .field__action {
  display: block;
}

/*
    Select
    As currently overridden by choice.js with complementary scss file
*/
.as-select,
select {
  padding-top: 30.4px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.as-select ~ .field__label,
select ~ .field__label {
  top: 7.6px;
}
.as-select ~ .field__action img,
select ~ .field__action img {
  padding: 8px;
}

button.as-select {
  text-align: left;
  text-transform: none;
}
.is--tabbing button.as-select:focus, button.as-select:active, button.as-select:hover {
  color: inherit;
  text-decoration: none;
}

.native-select, .native-select.cell, .native-select.as-cell {
  position: relative;
  padding: 0;
  border: 0;
}
.native-select &gt; select {
  height: 45px;
  padding: 4px 9px;
  border: 1px solid transparent;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
}
.native-select &gt; select[required]:invalid {
  color: #0018a8;
}
.native-select &gt; select:not(.field-size--small):not(:-moz-placeholder-shown) {
  padding: 4px 9px;
}
.native-select &gt; select:not(.field-size--small):focus, .native-select &gt; select:not(.field-size--small)[data-simulate-focus=true], .native-select &gt; select:not(.field-size--small):not(:placeholder-shown) {
  padding: 4px 9px;
}
@media (min-width: 768px) {
  .native-select &gt; select:not(.native-select--big) {
    height: 30px;
  }
}
.native-select .field__action {
  top: 50%;
  padding-right: 10px;
  transform: translateY(-50%);
}

/*
    Field elements placements
*/
.adyen-payment-methods .adyen-checkout__label__text, .field__label {
  position: absolute;
  top: 20px;
  left: 0;
  padding-left: 11px;
}

.field__action {
  position: absolute;
  top: 20px;
  right: 0;
  padding-right: 11px;
}

.field__icon--placeholder {
  position: absolute;
  top: 34.8px;
  left: 0;
  padding-left: 11px;
}

.field__icon--success {
  position: absolute;
  top: 34.8px;
  right: 0;
  padding-right: 11px;
}

/*
    Field elements
*/
*:focus:not(.field-size--small):not(.field-size--small) ~ .field__placement--on-active-top, *[data-simulate-focus=true]:not(.field-size--small) ~ .field__placement--on-active-top, *:-webkit-autofill:not(.field-size--small) ~ .field__placement--on-active-top, input:not(:placeholder-shown):not(.field-size--small):not([data-input-search-component=input][type=button]) ~ .field__placement--on-active-top, textarea:not(:placeholder-shown):not(.field-size--small) ~ .field__placement--on-active-top {
  position: absolute;
  top: 7.6px;
  left: 0;
  padding-left: 11px;
}
*.field-size--small ~ .field__placement--on-active-top {
  top: 5px;
}

.field__label {
  padding-top: 0;
  padding-bottom: 0;
  color: #6b6b6b;
  pointer-events: none;
}
@media (min-width: 768px) {
  *.field-size--small:focus ~ .field__label, *.field-size--small:active ~ .field__label {
    display: none;
  }
}

.field__action {
  color: #0018a8;
  pointer-events: none;
  text-align: right;
}
.field__action:not([class*=icon]) {
  left: 0;
}
.field__action:not([class*=icon]) &gt; * {
  pointer-events: all;
}
.field__action.field__placement--on-active-top button {
  padding-bottom: 5px;
}

input:not([type=time]).field--has-placeholder-icon {
  padding-left: 43px;
}

.field__icon--placeholder {
  z-index: 2;
  display: none;
  line-height: 20px;
  pointer-events: none;
}
.field__icon--placeholder,
.field__icon--placeholder img {
  max-width: 30px;
}
*:focus ~ .field__icon--placeholder, input:-webkit-autofill ~ .field__icon--placeholder, input:not(:placeholder-shown) ~ .field__icon--placeholder {
  display: block;
}

.field__icon--success {
  display: none;
  pointer-events: none;
}
[aria-invalid=false]:not([data-show-success-icon]):not(:focus):not(:-moz-placeholder-shown) ~ .field__icon--success {
  display: block;
}
[aria-invalid=false]:not([data-show-success-icon]):not(:focus):not(:placeholder-shown) ~ .field__icon--success, [data-show-success-icon=true] ~ .field__icon--success {
  display: block;
}

/*
    Description
*/
.field__description {
  padding-bottom: 0;
  text-transform: none;
}

/*
    Errors
*/
.field__error {
  display: none;
  padding-bottom: 0;
  color: #dc0000;
  text-transform: none;
}
.field__error label {
  padding: 0;
}
[aria-invalid=true]:not([type=radio]):not(:focus) ~ .field__error:not(:empty), [aria-invalid=true][data-forced-focus=true]:not([type=radio]) ~ .field__error:not(:empty), [aria-invalid=true][data-keep-error-on-focus] ~ .field__error:not(:empty) {
  display: block;
}

[aria-invalid=true]:-moz-placeholder-shown, .field:focus-within &gt; [aria-invalid=true]:-moz-placeholder-shown {
  border-color: #dc0000 !important;
}

[aria-invalid=true]:not(:focus),
[aria-invalid=true]:placeholder-shown,
[aria-invalid=true][data-keep-error-on-focus],
[aria-invalid=true][type=date],
[data-forced-focus=true],
.field:focus-within &gt; [aria-invalid=true]:placeholder-shown {
  border-color: #dc0000 !important;
}

[aria-invalid=true]:-moz-placeholder-shown ~ .field__label {
  color: #dc0000;
}

[aria-invalid=true]:not(:focus) ~ .field__label, [aria-invalid=true]:placeholder-shown ~ .field__label, [aria-invalid=true][data-keep-error-on-focus] ~ .field__label, [aria-invalid=true][type=date] ~ .field__label, [data-forced-focus=true] ~ .field__label {
  color: #dc0000;
}

/*
    Disabled inputs
*/
.field--disabled, .choices.is-disabled,
input:disabled,
input:disabled + label,
input:disabled ~ .field__label,
textarea:disabled,
textarea:disabled + label,
textarea:disabled ~ .field__label {
  opacity: 0.5;
  pointer-events: none;
}

.as-radio-group {
  display: flex;
  justify-content: space-between;
}
.as-radio-group &gt; .as-radio {
  flex: 0 0 auto;
  padding: 5px 10px;
  cursor: pointer;
}
.as-radio-group &gt; .as-radio + .as-radio {
  margin-left: 10px;
}

.as-radio::before {
  content: "";
  top: 10px;
  left: 10px;
  display: inline-block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 100%;
  margin-right: 8px;
  vertical-align: -1px;
}
.as-radio.active::before {
  background: radial-gradient(#000 2px, rgba(255, 255, 255, 0) 2px);
}

@supports (-webkit-touch-callout: none) {
  .native-select {
    max-height: 45px;
  }
  input.field-size--small:not(.search-field),
  .native-select &gt; select:not(.field-size--small) {
    letter-spacing: 0.01em;
  }
  input.field-size--small:not(.search-field):focus, input.field-size--small:not(.search-field):active,
  .native-select &gt; select:not(.field-size--small):focus,
  .native-select &gt; select:not(.field-size--small):active {
    width: 200%;
    height: 90px;
    padding: 8px 18px 40px !important;
    border-width: 2px;
    margin-bottom: -45px;
    line-height: 40px;
    transform: scale(0.5);
    transform-origin: top left;
  }
  input.field-size--small:not(.search-field):focus::-moz-placeholder, input.field-size--small:not(.search-field):active::-moz-placeholder, .native-select &gt; select:not(.field-size--small):focus::-moz-placeholder, .native-select &gt; select:not(.field-size--small):active::-moz-placeholder {
    font-size: 24px;
  }
  input.field-size--small:not(.search-field):focus, input.field-size--small:not(.search-field):focus::placeholder, input.field-size--small:not(.search-field):active, input.field-size--small:not(.search-field):active::placeholder,
  .native-select &gt; select:not(.field-size--small):focus,
  .native-select &gt; select:not(.field-size--small):focus::placeholder,
  .native-select &gt; select:not(.field-size--small):active,
  .native-select &gt; select:not(.field-size--small):active::placeholder {
    font-size: 24px;
  }
  input.field-size--small:not(.search-field):focus, input.field-size--small:not(.search-field):active {
    padding: 40px 18px 8px;
  }
  @media (min-width: 768px) {
    input.field-size--small:not(.search-field):focus, input.field-size--small:not(.search-field):active {
      height: auto;
      padding: 8px 18px;
    }
  }
}
/*
    Fields, color overrides
*/
.fields--color-white input,
.fields--color-white input:focus,
.fields--color-white input[data-simulate-focus=true],
.fields--color-white input[type=checkbox]:focus + label::before,
.fields--color-white input[type=checkbox]:hover + label::before,
.fields--color-white input[type=checkbox] + label::before,
.fields--color-white input[type=radio]:focus + label::before,
.fields--color-white input[type=radio]:hover + label::before,
.fields--color-white input[type=radio] + label::before,
.fields--color-white select,
.fields--color-white .choices__list {
  background-color: #fff;
}
.fields--color-white:-webkit-autofill::first-line,
.fields--color-white input:-webkit-autofill,
.fields--color-white input:-webkit-autofill:hover,
.fields--color-white input:-webkit-autofill:focus,
.fields--color-white input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

.fields--small {
  /*
      Radios
  */
  /*
      Select
  */
}
.fields--small .field--margin-top {
  display: inline-block;
  width: auto;
}
.fields--small .field--margin-top + .field--margin-top {
  margin: 0 0 0 30px;
}
.fields--small input[type=radio] + label {
  min-height: 0;
  padding: 0;
}
.fields--small input[type=radio] + label::before {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #e8f0fe;
}
.fields--small input[type=radio]:checked + label::before {
  background-color: #000;
  background-image: none;
  box-shadow: inset 0 0 0 2px #e8f0fe;
}
.fields--small input[type=radio]:not(:checked):hover + label::before {
  background-color: #e8f0fe;
}
.fields--small .choices + label {
  display: none;
}
.fields--small .choices__list.choices__list--single {
  height: 30px;
}
.fields--small input.choices__input {
  height: 30px;
  font-size: 12px;
}
.fields--small input.choices__input, .fields--small input.choices__input:not(:focus) {
  padding: 4px 9px;
}
.fields--small input.choices__input::-moz-placeholder {
  font-size: 12px;
}
.fields--small input.choices__input::placeholder {
  font-size: 12px;
}
.fields--small .choices.is--unselected input.choices__input::-moz-placeholder {
  text-transform: uppercase;
}
.fields--small .choices.is--unselected input.choices__input::placeholder {
  text-transform: uppercase;
}
.fields--small .choices__list--single .choices__item {
  padding: 4px 9px;
  font-size: 12px;
}
.fields--small .choices__list--single .choices__item[data-custom-properties*=isPlaceholder] {
  text-transform: uppercase;
}
.fields--small .choices ~ .field__action.icon {
  top: 4px;
  padding-right: 0;
}
.is--tabbing .fields--small input[type=radio]:focus + label::before {
  background-color: #000;
  box-shadow: inset 0 0 0 2px #e8f0fe;
  outline: none;
}

.native-radio {
  -webkit-appearance: auto;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Radio group
*/
.mixinradio-group {
  padding-top: 1px;
}
.mixinradio-group .radio-group {
  /* stylelint-disable */
  /* stylelint-enable */
}
.mixinradio-group .radio-group .radio-group__item:not(:first-of-type) {
  margin-top: 10px;
}
.mixinradio-group .radio-group .radio-group__label {
  border-color: #000;
}
.mixinradio-group .radio-group .radio-group__input:checked + label {
  background-color: #fff;
}
.mixinradio-group .radio-group .radio-group__input:checked + label::before {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #000;
}
.mixinradio-group .radio-group .radio-group__content {
  background-color: #fff;
}

.radio-group__input:disabled {
  opacity: 0;
}
.is--tabbing .radio-group__input:focus + label {
  text-decoration: underline;
}
.radio-group__input:focus + label, .radio-group__input:checked + label, .radio-group__input + label:hover {
  border-color: #000;
}
.radio-group__input:checked + label, .radio-group__input:focus + label, .radio-group__input + label:hover {
  z-index: 1;
}
.radio-group__input:checked + label {
  background-color: #e8f0fe;
}
.radio-group__input:checked + label::before {
  box-shadow: inset 0 0 0 2px #e8f0fe, inset 0 0 0 4px #000;
}
.radio-group__input:checked + label.radio-group--has-content {
  border-bottom: 0;
}
.radio-group__input:checked + label.radio-group__label--shrink-on-checked {
  min-height: 0;
}

input.radio-group__input:not(:checked).show + label {
  border-color: #000;
}

input.radio-group__input.show + label {
  background-color: #fff;
}

.radio-group__label {
  position: relative;
  min-height: 45px;
  padding-bottom: 10px;
  padding-left: 31px;
  border: 1px solid #f7f7f7;
  margin-top: -1px;
}
.radio-group__label span {
  vertical-align: top;
}
.radio-group__label &gt; img,
.radio-group__label .field-title-icon {
  max-height: 30px;
  transform: translateY(4px);
}
.radio-group__label .item:only-child {
  flex-grow: 1;
}
.radio-group__label::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  display: block;
  width: 10px;
  height: 10px;
  padding: 2px;
  border: 1px solid #000;
  border-radius: 50%;
}
input:disabled + .radio-group__label {
  padding-left: 10px;
  opacity: 1;
}
input:disabled + .radio-group__label::before {
  display: none;
}

input[type=radio].inactive + label {
  pointer-events: none;
}

.radio-group__label.no-input {
  padding: 5px 10px !important;
}
.radio-group__label.no-input::before {
  border: none;
}

.radio-group__content {
  position: relative;
  z-index: 1;
  display: none;
  padding: 0 10px 10px 10px;
  border: 1px solid #000;
  border-top: 0;
  margin-top: -1px;
  background-color: #e8f0fe;
}
input:checked ~ .radio-group__content {
  display: block;
}
input:not(:checked) ~ .radio-group__content.show {
  display: block;
}
.radio-group__content input:-webkit-autofill::first-line,
.radio-group__content input:-webkit-autofill,
.radio-group__content input:-webkit-autofill:hover,
.radio-group__content input:-webkit-autofill:focus,
.radio-group__content input:-webkit-autofill:active {
  box-shadow: inset 0 0 0 60px #fff !important;
}
.radio-group__content input:not(:-moz-placeholder-shown), .radio-group__content input:not(:-moz-placeholder-shown):focus, .radio-group__content input:not(:-moz-placeholder-shown)[data-simulate-focus=true] {
  background-color: #fff;
  box-shadow: inset 0 0 0 60px #fff;
}
.radio-group__content input, .radio-group__content input:focus, .radio-group__content input[data-simulate-focus=true],
.radio-group__content input:not(:placeholder-shown),
.radio-group__content input:not(:placeholder-shown):focus,
.radio-group__content input:not(:placeholder-shown)[data-simulate-focus=true],
.radio-group__content select,
.radio-group__content select:focus,
.radio-group__content select[data-simulate-focus=true],
.radio-group__content .choices__list--single,
.radio-group__content .choices__list--single:focus,
.radio-group__content .choices__list--single[data-simulate-focus=true] {
  background-color: #fff;
  box-shadow: inset 0 0 0 60px #fff;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
[data-component-id=addressAutocomplete][aria-expanded=false] .address-manual-input {
  display: none;
}

[data-component-id=addressAutocomplete][data-container-set=false] .input-search__item:not([data-address-autocomplete-type=Address]) button::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  background-image: url("../icons/down-arrow-black.svg");
  float: right;
  transform: rotate(-90deg);
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.tooltip {
  position: relative;
}
.field__placement--on-active-top .tooltip {
  position: initial;
  text-align: left;
}

.tooltip__action {
  position: relative;
  color: #0018a8;
  cursor: help;
}
.tooltip__action::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  display: block;
}
.field__placement--on-active-top .tooltip__action::after {
  top: -20px;
  height: 60px;
}
*[tabindex="-1"] ~ .field__action .tooltip__action {
  display: none;
}

.tooltip__content {
  position: absolute;
  z-index: 2;
  bottom: 21px;
  left: 0;
  min-width: 50vw;
  border: 1px solid #000;
  background-color: #ffffeb;
  color: #000;
}
.tooltip__content .tooltip__title {
  border-bottom: 1px solid #000;
}
.tooltip__content:not([data-is-splitted-tooltip=true]) {
  display: none;
}
.tooltip__content[data-is-splitted-tooltip=true] {
  left: 5%;
  min-width: 93%;
}
.tooltip__content[data-is-splitted-tooltip=true] .tooltip__title {
  display: flex;
}
.tooltip__content[data-is-splitted-tooltip=true] .tooltip__title &gt; * {
  flex: 0 0 50%;
}
.tooltip__content[data-is-splitted-tooltip=true] .tooltip__title .as-cell {
  min-height: initial;
}
.tooltip__content .tooltip__body {
  padding: 5px 10px;
  text-transform: initial;
}
.field__placement--on-active-top .tooltip__content {
  right: 0;
  bottom: 39px;
  left: 0;
  min-width: 0;
}
*:focus ~ .field__placement--on-active-top .tooltip__content, *:-webkit-autofill ~ .field__placement--on-active-top .tooltip__content, input:not(:placeholder-shown) ~ .field__placement--on-active-top .tooltip__content {
  bottom: 27px;
}
.tooltip__action[aria-expanded=true] + .tooltip__content, .tooltip__action[aria-expanded=true] + .tooltip__content:not([data-is-splitted-tooltip=true]), .tooltip__content:hover {
  display: block;
}
.tooltip__content p {
  text-transform: none;
}
@media (min-width: 768px) {
  .tooltip__content {
    min-width: 25vw;
  }
}

@media (min-width: 768px) {
  .content-toggle--as-tooltip---medium-up {
    position: relative;
  }
  .content-toggle--as-tooltip---medium-up .content-toggle__content {
    position: absolute;
    z-index: 2;
    top: 100%;
    right: -1px;
    left: -1px;
    border: 1px solid #000;
    background-color: #ffffeb;
    color: #000;
  }
  .content-toggle--as-tooltip---medium-up .content-toggle__close {
    flex: 0 0 auto;
    padding-left: 10px;
    margin-left: auto;
  }
  .content-toggle--as-tooltip---medium-up .content-toggle__title {
    display: flex;
    padding: 5px 10px;
    border-bottom: 1px solid #000;
  }
  .content-toggle--as-tooltip---medium-up .content-toggle__body {
    padding: 5px 10px;
    text-transform: initial;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
button {
  letter-spacing: inherit;
}
button:disabled:not([class*=action--]) {
  color: #f2f2f2;
}

button.button--inline {
  display: inline-block;
  text-transform: inherit;
}

button.button--center {
  margin: 0 auto;
}

button.button--max-width {
  max-width: 375px;
}

button,
.button,
.cookie-banner__actions &gt; button {
  overflow: hidden;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: #0018a8;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  text-overflow: ellipsis;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
button:hover, .is--tabbing button:focus,
.button:hover,
.is--tabbing .button:focus {
  color: #051574;
}
.is--tabbing button:focus,
.is--tabbing .button:focus {
  text-decoration: underline;
}
button:active,
.button:active {
  color: #051574;
}
button.is--loading,
.button.is--loading {
  cursor: wait;
}

button.link {
  width: 100%;
}
button.link:not([class*=text--align]) {
  text-align: left;
}

button.link.is--loading,
.grid &gt; .button.is--loading,
.button.is--loading,
.cookie-banner__actions &gt; button.is--loading,
.action--secondary.is--loading,
.action--tertiary.is--loading {
  cursor: wait;
}
button.link, button.link.cell, button.link.as-cell,
.grid &gt; .button,
.grid &gt; .button.cell,
.grid &gt; .button.as-cell,
.button,
.cookie-banner__actions &gt; button,
.button.cell,
.button.as-cell,
.action--secondary,
.action--secondary.cell,
.action--secondary.as-cell,
.action--tertiary,
.action--tertiary.cell,
.action--tertiary.as-cell {
  padding: 4px 9px 18px;
}
@media (min-width: 768px) {
  button.link, button.link.cell, button.link.as-cell,
  .grid &gt; .button,
  .grid &gt; .button.cell,
  .grid &gt; .button.as-cell,
  .button,
  .cookie-banner__actions &gt; button,
  .button.cell,
  .button.as-cell,
  .action--secondary,
  .action--secondary.cell,
  .action--secondary.as-cell,
  .action--tertiary,
  .action--tertiary.cell,
  .action--tertiary.as-cell {
    padding: 4px 9px;
  }
}

/*
    Modifier types
*/
.action--colour {
  content: "";
  display: block;
  overflow: hidden;
  width: 45px;
  height: 45px;
  color: transparent;
}
.is--tabbing .action--colour:focus, .action--colour:hover, .action--colour:active {
  z-index: 1;
  border: 1px solid #000;
}
@media (min-width: 768px) {
  .action--colour {
    width: 30px;
    height: 30px;
  }
}

.action--default,
.action--primary,
.action--secondary,
.cookie-banner__actions &gt; button,
.action--tertiary {
  position: relative;
  width: 100%;
  padding: 4px 9px;
  background-color: transparent;
  color: #000;
  line-height: 20px;
  outline: none;
  text-align: left;
  word-break: break-word;
}
.action--default, .action--default.cell,
.action--primary,
.action--primary.cell,
.action--secondary,
.cookie-banner__actions &gt; button,
.action--secondary.cell,
.action--tertiary,
.action--tertiary.cell {
  border: 1px solid #000;
}
.is--tabbing .action--default:focus,
.is--tabbing .action--primary:focus,
.is--tabbing .action--secondary:focus,
.is--tabbing .cookie-banner__actions &gt; button:focus,
.is--tabbing .action--tertiary:focus {
  text-decoration: none;
}
.action--default:active, .is--tabbing .action--default:focus,
.action--primary:active,
.is--tabbing .action--primary:focus,
.action--secondary:active,
.cookie-banner__actions &gt; button:active,
.is--tabbing .action--secondary:focus,
.is--tabbing .cookie-banner__actions &gt; button:focus,
.action--tertiary:active,
.is--tabbing .action--tertiary:focus {
  outline: 1px solid currentColor;
  outline-offset: -3px;
}
.action--default:not([class*=action--color-]):hover, .action--default:not([class*=action--color-]):active, .is--tabbing .action--default:not([class*=action--color-]):focus,
.action--primary:not([class*=action--color-]):hover,
.action--primary:not([class*=action--color-]):active,
.is--tabbing .action--primary:not([class*=action--color-]):focus,
.action--secondary:not([class*=action--color-]):hover,
.cookie-banner__actions &gt; button:not([class*=action--color-]):hover,
.action--secondary:not([class*=action--color-]):active,
.cookie-banner__actions &gt; button:not([class*=action--color-]):active,
.is--tabbing .action--secondary:not([class*=action--color-]):focus,
.is--tabbing .cookie-banner__actions &gt; button:not([class*=action--color-]):focus,
.action--tertiary:not([class*=action--color-]):hover,
.action--tertiary:not([class*=action--color-]):active,
.is--tabbing .action--tertiary:not([class*=action--color-]):focus {
  border-color: #0018a8;
  color: #0018a8;
}
.action--default:not([class*=action--color-]):disabled, .action--default:not([class*=action--color-]).as-disabled,
.action--primary:not([class*=action--color-]):disabled,
.action--primary:not([class*=action--color-]).as-disabled,
.action--secondary:not([class*=action--color-]):disabled,
.cookie-banner__actions &gt; button:not([class*=action--color-]):disabled,
.action--secondary:not([class*=action--color-]).as-disabled,
.cookie-banner__actions &gt; button:not([class*=action--color-]).as-disabled,
.action--tertiary:not([class*=action--color-]):disabled,
.action--tertiary:not([class*=action--color-]).as-disabled {
  border-color: #f7f7f7;
  background-color: transparent;
  color: #000;
}
.action--default .icon,
.action--primary .icon,
.action--secondary .icon,
.cookie-banner__actions &gt; button .icon,
.action--tertiary .icon {
  position: absolute;
  top: 50%;
  left: 30px;
  width: 14px;
  height: auto;
  transform: translate3d(-50%, -50%, 0);
}

/*
    Sizes
*/
.action--icon {
  width: 30px;
  text-align: center;
}

.action--default, .action--default.cell {
  min-height: 30px;
}

.action--full {
  min-width: 100%;
}

.action--max-width {
  max-width: 340px;
}

.action--primary {
  display: block;
}
.action--primary, .action--primary.cell {
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 14px;
  text-align: center;
}
@media (min-width: 768px) {
  .action--primary, .action--primary.cell {
    padding-top: 19px;
    padding-bottom: 19px;
  }
}

@media (max-width: 767px) {
  .action--primary---small-down {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 45px;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .action--secondary, .cookie-banner__actions &gt; button, .action--secondary.cell {
    min-height: 45px;
  }
}

.action--tertiary {
  flex-direction: column;
}
.action--tertiary, .action--tertiary.cell {
  min-height: 45px;
}

@media (max-width: 767px) {
  .action--tertiary---small-down {
    flex-direction: column;
  }
  .action--tertiary---small-down, .action--tertiary---small-down.cell {
    min-height: 45px;
  }
}
/*
    Colors
*/
.action--color-inherit, .action--color-inherit:hover, .action--color-inherit:active, .is--tabbing .action--color-inherit:focus, .action--color-inherit:visited {
  color: currentColor;
}

.action--color-white {
  background-color: #fff;
}
.action--color-white:hover, .action--color-white:active, .is--tabbing .action--color-white:focus {
  border-color: currentColor;
}
.action--color-white .progress-bar--status {
  background: linear-gradient(to left, #e8f0fe, #e8f0fe);
  background-repeat: no-repeat;
  background-size: 0 100%;
}

.action--color-black {
  background-color: #000;
  color: #fff;
}
.action--color-black, .action--color-black.cell {
  border-color: transparent;
}
.action--color-black:hover, .action--color-black:active, .is--tabbing .action--color-black:focus {
  background-color: #0018a8;
  color: #fff;
}
.action--color-black:disabled, .action--color-black.as-disabled {
  outline: none;
}
.action--color-black:disabled:not(.is--loading), .action--color-black.as-disabled:not(.is--loading) {
  border-color: #000;
  background-color: transparent;
  color: #000;
}
.action--color-black:disabled:not(.is--loading):active, .action--color-black.as-disabled:not(.is--loading):active {
  border-color: #dc0000;
  color: #dc0000;
}
.action--color-black .progress-bar--status {
  background: linear-gradient(to left, #051574, #051574);
  background-repeat: no-repeat;
  background-size: 0 100%;
}
[data-component-state=loading] .action--color-black[data-component-animation=infiniteProgress] {
  background: linear-gradient(to right, #000 0%, #051574 0%, #051574 22%, #000 22%);
  background-size: 300% 100%;
}

.action--color-blue {
  background-color: #0018a8;
  color: #fff;
}
.action--color-blue, .action--color-blue.cell {
  border-color: transparent;
}
.action--color-blue:hover, .action--color-blue:active, .is--tabbing .action--color-blue:focus {
  background-color: #051574;
  color: #fff;
}
.action--color-blue:disabled, .action--color-blue.as-disabled {
  outline: none;
}
.action--color-blue:disabled:not(.is--loading), .action--color-blue.as-disabled:not(.is--loading) {
  border-color: #0018a8;
  background-color: transparent;
  color: #0018a8;
}
.action--color-blue.disabled:not(.is--loading):active, .action--color-blue.as-disabled:not(.is--loading):active {
  border-color: #dc0000;
  color: #dc0000;
}

.action--color-transparent {
  background-color: transparent;
  color: #0018a8;
}
.action--color-transparent, .action--color-transparent.cell, .action--color-transparent:active, .action--color-transparent:focus, .is--tabbing .action--color-transparent:focus {
  border-color: transparent;
  outline: none;
}
.is--tabbing .action--color-transparent:focus {
  text-decoration: underline;
}
.action--color-transparent:disabled {
  color: #c2c2c2;
}

.action--color-green {
  background-color: #6f0;
}
.action--color-green, .action--color-green.cell {
  border-color: transparent;
}
.action--color-green:hover, .action--color-green:active, .is--tabbing .action--color-green:focus {
  background-color: #5ce700;
  color: #000;
}
.action--color-green.is--loading {
  background-color: transparent;
}
.action--color-green .progress-bar--status {
  z-index: -1;
  background: linear-gradient(to left, #6f0, #6f0);
  background-color: #5ce700;
  background-repeat: no-repeat;
  background-size: 0 100%;
}

.action--color-red {
  background-color: #dc0000;
  color: #fff;
}
.action--color-red, .action--color-red.cell {
  border-color: transparent;
}
.action--color-red:hover, .action--color-red:active, .is--tabbing .action--color-red:focus {
  background-color: #dc0000;
  color: #fff;
}

.action--color-solitude.selected {
  border-color: #000;
  background-color: #e8f0fe;
}

.action--color-progress {
  border-color: #0018a8;
  color: #0018a8;
}
.is--tabbing .action--color-progress:focus {
  text-decoration: underline;
}

.action--color-silver {
  border: none;
  background-color: #c2c2c2;
  color: #000;
}
.action--color-silver:active, .action--color-silver:focus {
  outline: none;
}
.action--color-silver:hover, .action--color-silver:active, .is--tabbing .action--color-silver:focus {
  color: #000;
}

.action--color-gray {
  background-color: #f2f2f2;
}
.action--color-gray:active, .action--color-gray:focus {
  outline: none;
}
.action--color-gray:hover, .action--color-gray:active, .is--tabbing .action--color-gray:focus {
  background-color: #f2f2f2;
  color: #000;
}

.action--error, .action--error:hover, .action--error:active, .action--error:focus, .action--error:disabled, .action--error.as-disabled {
  border-color: #dc0000;
  background-color: #fff;
  box-shadow: none;
  color: #dc0000;
  outline: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
th,
td {
  text-align: left;
}
th:not(:first-of-type),
td:not(:first-of-type) {
  padding-left: 10px;
}

.table-title {
  display: inline-block;
  flex: 1;
  padding: 5px 0;
}

@media (min-width: 768px) {
  .table {
    min-width: 615px;
  }
}
@media (max-width: 767px) {
  .table {
    min-width: 767px;
    overflow-x: scroll;
  }
}
.table table {
  width: 100%;
  table-layout: fixed;
}
@media (max-width: 767px) {
  .table table {
    min-width: 100%;
  }
}
.table thead {
  text-transform: uppercase;
}
.table th,
.table td {
  padding: 5px 10px;
  border: 1px solid #000;
}
.table th {
  width: 30%;
}
.table th sup,
.table th .sup {
  color: #6b6b6b;
}

.simple-table {
  width: 100%;
}
.simple-table tr,
.simple-table th,
.simple-table td {
  border: none !important;
}
.simple-table tr:nth-child(even) {
  background-color: #f2f2f2;
}
.simple-table td,
.simple-table th {
  padding: 7px 10px;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.slider {
  position: relative;
  overflow: hidden;
  transition: max-height 200ms cubic-bezier(0, 0, 0.2, 1);
  will-change: max-height;
}

.slider__items {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}
.slider__items::-webkit-scrollbar {
  /* WebKit */
  display: none;
  width: 0;
  height: 0;
}
.slider__items {
  display: flex;
  overflow: scroll;
  background-color: #fff;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y pinch-zoom;
}
.slider__items.slider__items--disable-smooth-scroll {
  scroll-behavior: auto;
}

.slider__item {
  flex: 0 0 100%;
  margin-bottom: auto;
  scroll-snap-align: start end;
}

[data-slider-active=true] [data-slider-el][data-slide-preload=false] img:not(.lazyloaded) {
  display: none;
}

.slider__control-prev,
.slider__control-next {
  position: absolute;
  z-index: 10;
  top: 50%;
  padding: 10px;
  font-size: 2rem;
  transform: translate3d(0, -50%, 0);
}

.slider__control-prev {
  left: 0;
}
.slider__control-prev img {
  transform: rotate(-180deg);
}

.slider__control-next {
  right: 0;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.logo {
  width: auto;
  height: 100%;
  max-height: 45px;
}
@media (min-width: 992px) {
  header .logo {
    position: absolute;
    z-index: 151;
    top: 50%;
    left: 50%;
    height: auto;
    transform: translate3d(-50%, -50%, 0);
  }
}

.logo img {
  height: auto;
  max-height: 100%;
  padding: 15px 0;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .logo img {
    padding: 14px 0;
  }
}
@media (min-width: 992px) {
  .logo img {
    max-height: 22px;
    padding: 0;
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) .logo img {
    min-height: 28px;
  }
}

/*
    Archive timer
*/
[data-countdown-component=timer] {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -0.035em;
}
[data-countdown-component=timer]::before {
  content: "Acne Archive";
  display: block;
  margin-bottom: 7px;
}
@media (min-width: 768px) {
  [data-countdown-component=timer] {
    font-size: 30px;
  }
  [data-countdown-component=timer]::before {
    margin-bottom: 15px;
  }
  [data-module=productDetails] [data-countdown-component=timer] {
    margin-top: 22px;
  }
}

/*
    Logo index
*/
.logo--index {
  top: calc(50vh + 10vw);
  bottom: 10vh;
  width: 100%;
  pointer-events: none;
}
.logo--index, .logo--index.tile {
  position: sticky;
  position: -webkit-sticky;
  z-index: 10;
}
.logo--index::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(75% + 10px);
  padding-top: 15%;
  padding-bottom: 75px;
  background-image: url("../icons/acne_studios_logo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(100% - 10px) auto;
  transform: translate(-50%, -100%);
}
@media (max-width: 767px) {
  .logo--index {
    top: calc(50vh + 5vw);
  }
  .logo--index::after {
    padding-bottom: 75px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.tile {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  grid-auto-rows: min-content;
  grid-template-columns: 1fr 1fr;
}
.tile a:visited:not([class*=action--color-]) {
  color: #751a7c;
}
.tile a:not([class*=action]):visited {
  color: #751a7c;
}

/*
    Tile types
*/
.tile-type--title {
  padding-top: 30px;
  padding-bottom: 5px;
}

.tile-type--header {
  padding: 40px 10px 5px;
}

.tile-type--button {
  padding: 45px 10px 60px 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .tile-type--button {
    padding: 60px 10px 90px 10px;
  }
}
.tile-type--button &gt; * {
  max-width: 375px;
  margin: 0 auto;
}

.tile-type--content .tile__media + .tile__pos--below:last-child {
  min-height: 50px;
}
@media (min-width: 768px) {
  .tile-type--content.tile--row-span-2.tile--has-content-below .tile__media {
    height: 100%;
    margin-bottom: 50px;
  }
  .tile-type--content.tile--row-span-2.tile--has-content-below .tile__media picture,
  .tile-type--content.tile--row-span-2.tile--has-content-below .tile__media video {
    height: 100%;
  }
}
.tile-type--content.tile--row-span-2:not(.tile--has-content-below) .tile__media {
  height: calc(100% + 50px);
}
@media (min-width: 768px) {
  .tile-type--content.tile--row-span-2:not(.tile--has-content-below) .tile__media {
    height: calc(100% + 100px);
  }
  .tile-type--content.tile--row-span-2:not(.tile--has-content-below) .tile__media picture,
  .tile-type--content.tile--row-span-2:not(.tile--has-content-below) .tile__media video {
    height: 100%;
  }
}
@media (min-width: 768px) {
  .tile-type--content.tile--span-4 .tile__media ~ .tile__pos--below, .tile-type--content.tile--span-8 .tile__media ~ .tile__pos--below {
    display: flex;
    overflow: hidden;
    max-height: 50px;
    flex-direction: column;
    text-overflow: ellipsis;
  }
}

/*
    Tile sizes
*/
/* stylelint-disable */
.tile--span-2 {
  grid-column-end: span 2;
}

.tile--span-4 {
  grid-column-end: span 8;
  grid-row-end: span 1;
}

.tile--span-8 {
  grid-column-end: span 8;
}

.tile--span-12 {
  grid-column-end: span 8;
}

.tile--span-16 {
  grid-column-end: span 8;
}

@media (min-width: 360px) {
  .tile--span-4 {
    grid-column-end: span 4;
  }
  .tile--row-span-2 {
    grid-row-end: span 2;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .tile--span-4---small-down {
    grid-column-end: span 4;
  }
  .tile--span-4---small-down.tile--row-span-2 {
    grid-row-end: span 1;
  }
}
@media (min-width: 768px) {
  .tile--span-12 {
    grid-column-end: span 12;
  }
  .tile--span-16 {
    grid-column-end: span 16;
  }
  .tile--span-4---medium-up {
    grid-column-end: span 4;
  }
  .tile--span-8---medium-up {
    grid-column-end: span 8;
  }
  .tile--span-12---medium-up {
    grid-column-end: span 12;
  }
  .tile--span-16---medium-up {
    grid-column-end: span 16;
  }
}
/* stylelint-enable */
/*
    Tile modifiers
*/
.tile--has-link::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px #000;
  opacity: 0;
  pointer-events: none;
}

/*
    Tile controller
*/
.tile[data-is-active=true] .on--tile-inactive,
.tile[data-is-active=false] .on--tile-active {
  opacity: 0;
}

@media (min-width: 768px) {
  .tile[data-is-active=false] .on--tile-active---medium-up {
    opacity: 0;
  }
}
.tile[data-is-active=true] img.on--tile-inactive,
.tile[data-is-active=false] img.on--tile-active {
  display: none;
}

@media (min-width: 768px) {
  .tile[data-is-active=false] img.on--tile-active---medium-up {
    display: none;
  }
}
/*
    Tile elements
*/
.tile__link {
  content: "";
  z-index: 10;
  grid-column: 1/-1;
  grid-row: 1/span 7;
}
@media (min-width: 768px) {
  .tile--row-span-2:not(.tile--has-content-below) .tile__link {
    height: calc(100% + 100px);
  }
}

.tile__media {
  position: relative;
  height: -moz-min-content;
  height: min-content;
  grid-column: 1/span 2;
  grid-row: 1/span 3;
}
.tile__media picture + picture,
.tile__media picture + video {
  position: absolute;
  top: 0;
  left: 0;
}
.tile__media picture + video {
  z-index: 1;
  max-height: 100%;
}
.tile__media img,
.tile__media video {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.tile__media--grow {
  min-height: calc(100vh - 45px);
  height: 100%;
}
.tile__media--grow picture,
.tile__media--grow video {
  height: 100%;
}
.layout--has-row-top .tile__media--grow {
  min-height: calc(100vh - 90px);
}
@media (min-width: 768px) {
  .tile__media--grow {
    min-height: calc(100vh - 30px);
  }
  .layout--has-row-top .tile__media--grow {
    min-height: calc(100vh - 60px);
  }
}
@media (min-width: 1280px) {
  .tile__media--grow {
    min-height: calc(100vh - 60px);
  }
  .layout--has-row-top .tile__media--grow {
    min-height: calc(100vh - 90px);
  }
}

.breadcrumbs + * .tile__media--grow {
  min-height: calc(100vh - 90px);
  height: 100%;
}
.breadcrumbs + * .tile__media--grow picture,
.breadcrumbs + * .tile__media--grow video {
  height: 100%;
}
.layout--has-row-top .breadcrumbs + * .tile__media--grow {
  min-height: calc(100vh - 135px);
}
@media (min-width: 768px) {
  .breadcrumbs + * .tile__media--grow {
    min-height: calc(100vh - 60px);
  }
  .layout--has-row-top .breadcrumbs + * .tile__media--grow {
    min-height: calc(100vh - 90px);
  }
}
@media (min-width: 1280px) {
  .breadcrumbs + * .tile__media--grow {
    min-height: calc(100vh - 90px);
  }
  .layout--has-row-top .breadcrumbs + * .tile__media--grow {
    min-height: calc(100vh - 120px);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .tile__media--grow---medium {
    min-height: calc(100vh - 45px);
    height: 100%;
  }
  .tile__media--grow---medium picture,
  .tile__media--grow---medium video {
    height: 100%;
  }
  .layout--has-row-top .tile__media--grow---medium {
    min-height: calc(100vh - 75px);
  }
  .breadcrumbs + * .tile__media--grow---medium {
    min-height: calc(100vh - 75px);
    height: 100%;
  }
  .breadcrumbs + * .tile__media--grow---medium picture,
  .breadcrumbs + * .tile__media--grow---medium video {
    height: 100%;
  }
  .layout--has-row-top .breadcrumbs + * .tile__media--grow---medium {
    min-height: calc(100vh - 105px);
  }
}
@media (min-width: 768px) {
  .tile__media--grow---medium-up {
    min-height: calc(100vh - 45px);
    height: 100%;
  }
  .tile__media--grow---medium-up picture,
  .tile__media--grow---medium-up video {
    height: 100%;
  }
  .layout--has-row-top .tile__media--grow---medium-up {
    min-height: calc(100vh - 75px);
  }
  .breadcrumbs + * .tile__media--grow---medium-up {
    min-height: calc(100vh - 75px);
    height: 100%;
  }
  .breadcrumbs + * .tile__media--grow---medium-up picture,
  .breadcrumbs + * .tile__media--grow---medium-up video {
    height: 100%;
  }
  .layout--has-row-top .breadcrumbs + * .tile__media--grow---medium-up {
    min-height: calc(100vh - 105px);
  }
}
@media (min-width: 992px) {
  .tile__media--grow---large-up {
    min-height: calc(100vh - 45px);
    height: 100%;
  }
  .tile__media--grow---large-up picture,
  .tile__media--grow---large-up video {
    height: 100%;
  }
  .layout--has-row-top .tile__media--grow---large-up {
    min-height: calc(100vh - 75px);
  }
  .breadcrumbs + * .tile__media--grow---large-up {
    min-height: calc(100vh - 75px);
    height: 100%;
  }
  .breadcrumbs + * .tile__media--grow---large-up picture,
  .breadcrumbs + * .tile__media--grow---large-up video {
    height: 100%;
  }
  .layout--has-row-top .breadcrumbs + * .tile__media--grow---large-up {
    min-height: calc(100vh - 105px);
  }
}
@media (min-width: 1280px) {
  .tile__media--grow---medium-up,
  .tile__media--grow---large-up {
    min-height: calc(100vh - 60px);
  }
  .layout--has-row-top .tile__media--grow---medium-up,
  .layout--has-row-top .tile__media--grow---large-up {
    min-height: calc(100vh - 90px);
  }
  .breadcrumbs + * .tile__media--grow---medium-up,
  .breadcrumbs + * .tile__media--grow---large-up {
    min-height: calc(100vh - 90px);
  }
  .layout--has-row-top .breadcrumbs + * .tile__media--grow---medium-up,
  .layout--has-row-top .breadcrumbs + * .tile__media--grow---large-up {
    min-height: calc(100vh - 120px);
  }
}
/*
    Tile positionals
*/
.tile__pos--sticky {
  position: sticky;
  left: 0;
  top: 44px;
}
.tile--has-content-below .tile__pos--sticky {
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  .tile__pos--sticky---desktop {
    position: sticky;
    top: 45px;
    left: 0;
  }
  .tile--has-content-below .tile__pos--sticky---desktop {
    margin-bottom: 59px;
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) .tile__pos--sticky---desktop {
    top: 60px;
  }
}

@media (min-width: 1280px) {
  .search-section .tile__pos--sticky,
  .search-section .tile__pos--sticky---desktop {
    top: 60px;
  }
}

.search-section__body .tile__pos--sticky,
.search-section__body .tile__pos--sticky---desktop {
  top: 91px;
}
@media (min-width: 768px) {
  .search-section__body .tile__pos--sticky,
  .search-section__body .tile__pos--sticky---desktop {
    top: 76px;
  }
}
@media (min-width: 1280px) {
  .search-section__body .tile__pos--sticky, .page:not(.page--no-logo) .search-section__body .tile__pos--sticky,
  .search-section__body .tile__pos--sticky---desktop,
  .page:not(.page--no-logo) .search-section__body .tile__pos--sticky---desktop {
    top: 91px;
  }
}

/* Axis Y */
.tile__pos--middle.as-cell,
.tile__pos--bottom.as-cell {
  padding-top: 9px;
  padding-bottom: 9px;
}

.tile__pos--top,
.tile__pos--middle,
.tile__pos--bottom,
.tile__pos--below {
  z-index: 15;
  overflow: hidden;
  grid-column: 1/span 2;
  pointer-events: none;
}
.tile__pos--top a,
.tile__pos--top button,
.tile__pos--top iframe,
.tile__pos--middle a,
.tile__pos--middle button,
.tile__pos--middle iframe,
.tile__pos--bottom a,
.tile__pos--bottom button,
.tile__pos--bottom iframe,
.tile__pos--below a,
.tile__pos--below button,
.tile__pos--below iframe {
  pointer-events: all;
}
@media (min-width: 768px) {
  .tile__pos--top a[class*=action],
  .tile__pos--top button,
  .tile__pos--middle a[class*=action],
  .tile__pos--middle button,
  .tile__pos--bottom a[class*=action],
  .tile__pos--bottom button,
  .tile__pos--below a[class*=action],
  .tile__pos--below button {
    max-width: 360px;
  }
}

.tile__pos--top {
  align-self: flex-start;
  grid-row: 1;
}

.tile__pos--middle {
  align-self: center;
}
.tile__pos--middle:not(:only-child) {
  grid-row: 2;
}

.tile__pos--bottom {
  align-self: end;
  grid-row: 3;
}

.tile__pos--below {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-row: 4/span 4;
}

/* Axis X */
.tile__pos--left {
  grid-column: 1;
}

.tile__pos--right {
  grid-column: 2;
}

.tile__pos--left.tile__pos--right {
  grid-column: 1/span 2;
}

/* Stretch axis Y */
.tile__pos--top.tile__pos--bottom {
  grid-row: 1/span 3;
}

.tile__pos--top.tile__pos--below {
  grid-row: 1/span 4;
}

/* Normalize axis X */
@media (max-width: 767px) {
  .tile__pos--left,
  .tile__pos--right {
    grid-column-end: span 2;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
@media (max-width: 767px) {
  .product-tile picture {
    background-color: #f2f2f2;
  }
  .product-tile:nth-of-type(4n + 1) picture, .product-tile:nth-of-type(4n + 4) picture {
    background-color: #f7f7f7;
  }
}
@media (min-width: 768px) {
  .product-tile picture {
    background-color: #f7f7f7;
  }
  .product-tile:nth-of-type(8n + 2) picture, .product-tile:nth-of-type(8n + 4) picture, .product-tile:nth-of-type(8n + 5) picture, .product-tile:nth-of-type(8n + 7) picture {
    background-color: #f2f2f2;
  }
}

.product-tile[data-is-active=true].tile--has-link::after {
  opacity: 1;
}

.product-tile__icon {
  max-width: 25%;
}

.pdp-recommended .product-tile__icon,
.pdp-styled-with .product-tile__icon {
  display: none;
}

@media (min-width: 768px) {
  .product-tile__images &gt; a + a {
    position: absolute;
    inset: 0;
  }
  .product-tile__images &gt; a + a[data-product-tile-image-loaded=false], [data-is-active=false] .product-tile__images &gt; a + a picture {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .product-tile__images &gt; a {
    flex: 1 0 100%;
  }
  .product-tile__images [data-carousel-image-in-view=false] picture img:not(.lazyloaded) {
    display: none;
  }
  [data-is-active] .product-tile__images img.on--tile-active {
    display: block;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .product-tile__inforomation {
    line-height: 15px;
  }
}

.product-tile__name {
  min-width: 0;
  flex-grow: 1;
  padding-right: 10px;
}

.product-tile__price {
  flex-shrink: 0;
  text-transform: uppercase;
}
.product-tile__price .strike + span {
  margin-left: 5px;
}

[data-is-active=false] .product-tile__colors {
  opacity: 0;
}

[data-is-active=false] .product-icon--hover {
  display: none;
}

.product-tile__colors {
  display: grid;
  grid-template-columns: repeat(4, 30px);
}

.product-tile__color {
  position: relative;
  margin-left: -1px;
}
.product-tile__color:not(.product-tile__color--more) {
  display: block;
}
.product-tile__color::before {
  content: "";
  position: absolute;
  inset: 1px;
}

.product-tile__color--selected::before {
  z-index: 3;
  box-shadow: 0 0 0 1px #0018a8;
  outline: 1px solid #fff;
  outline-offset: -1px;
}

.product-tile__color:focus::before,
.product-tile__color:hover::before {
  z-index: 3;
  box-shadow: 0 0 0 1px #000;
}

.product-tile__describe {
  min-height: 20px;
}
@media (max-width: 767px) {
  .product-tile__describe {
    min-height: 15px;
  }
}

.product-tile__describe li {
  display: inline;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Tile Grid
 */
.tile-grid {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}
.tile-grid::-webkit-scrollbar {
  /* WebKit */
  display: none;
  width: 0;
  height: 0;
}
.tile-grid {
  position: relative;
  display: flex;
  overflow: scroll;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.tile-grid.tile-grid--gutter {
  padding-right: 10px;
  padding-left: 10px;
  scroll-padding-left: 10px;
  scroll-padding-right: 10px;
}
.tile-grid.tile-grid--gutter .tile-grid__item + .tile-grid__item {
  margin-left: 20px;
}
.tile-grid.tile-grid--disable-smooth-scroll {
  scroll-behavior: auto;
  scroll-behavior: none;
}
.tile-grid[data-is-dragging=true] {
  cursor: grabbing;
  scroll-behavior: auto;
}
.tile-grid[data-is-dragging=true] .tile-grid__item {
  pointer-events: none;
}

/* stylelint-disable */
@media (max-width: 767px) {
  .tile-grid--count-1 .tile-grid__item,
  .tile-grid--count-2 .tile-grid__item,
  .tile-grid--count-3 .tile-grid__item,
  .tile-grid--count-4 .tile-grid__item,
  .tile-grid--count-5 .tile-grid__item,
  .tile-grid--count-5-up .tile-grid__item {
    flex: 0 0 37.5%;
  }
}
/*
    Tile grid size
*/
.tile-grid--small .tile-grid__item {
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex: 0 0 auto;
}
.tile-grid--small .tile-grid__item &gt; *:last-child {
  padding-right: 35px;
}

.tile-grid--dence .tile-grid__item {
  min-width: -moz-fit-content;
  min-width: fit-content;
  flex: 0 1 0;
}

/* stylelint-enable */
.tile-grid__item {
  flex: 0 0 50%;
  opacity: 1;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .tile-grid__item {
    flex: 0 0 25%;
  }
}

/*
    Controls - Prev / Next
*/
.tile-grid__control {
  position: sticky;
  z-index: 11;
  display: flex;
  width: 45px;
  height: auto;
  min-height: 30px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
  clip-path: inset(2px -20px 2px -20px);
  font-size: 12px;
  will-change: opacity;
}
.tile-grid:not([data-component-state]) .tile-grid__control, .tile-grid__control[data-hidden=true] {
  opacity: 0;
  pointer-events: none;
}
.tile-grid:not(.tile-grid--controls-top) .tile-grid__control {
  justify-content: center;
}
.tile-grid--controls-small .tile-grid__control {
  padding-top: 10px;
}
@media (max-width: 767px) {
  .tile-grid--controls-small .tile-grid__control {
    width: 10px;
  }
  .tile-grid--controls-small .tile-grid__control img {
    display: none;
  }
}
.tile-grid--controls-small .tile-grid__control img {
  height: 10px;
}
.tile-grid--fade .tile-grid__control {
  overflow: visible;
  background-color: #fff;
}
.tile-grid--fade .tile-grid__control::before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 20px;
  height: 100%;
  pointer-events: none;
}
.tile-grid--fade.bg--concrete .tile-grid__control {
  background-color: #f2f2f2;
}
@media (min-width: 768px) {
  .tile-grid__control {
    width: 30px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .tile-grid__control {
    width: 1px;
    color: transparent;
  }
  .tile-grid__control img {
    display: none;
  }
}

.tile-grid__control--prev {
  left: 0;
  margin-right: -45px;
}
@media (max-width: 767px) {
  .tile-grid--controls-small .tile-grid__control--prev {
    margin-right: -10px;
  }
}
.tile-grid__control--prev img {
  transform: rotate(-180deg);
}
.tile-grid--fade .tile-grid__control--prev::before {
  left: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, white 75%);
}
.tile-grid--fade.bg--concrete .tile-grid__control--prev::before {
  left: 100%;
  background: linear-gradient(to left, rgba(242, 242, 242, 0) 0%, #f2f2f2 75%);
}
@media (min-width: 768px) {
  .tile-grid__control--prev {
    margin-right: -30px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .tile-grid__control--prev {
    margin-right: -1px;
  }
}

.tile-grid__control--next {
  right: 0;
  margin-left: -45px;
}
@media (max-width: 767px) {
  .tile-grid--controls-small .tile-grid__control--next {
    margin-left: -10px;
  }
}
.tile-grid--fade .tile-grid__control--next::before {
  right: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 75%);
}
.tile-grid--fade.bg--concrete .tile-grid__control--next::before {
  right: 100%;
  background: linear-gradient(to right, rgba(242, 242, 242, 0) 0%, #f2f2f2 75%);
}
@media (min-width: 768px) {
  .tile-grid__control--next {
    margin-left: -30px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .tile-grid__control--next {
    margin-left: -1px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Breadcrumbs
*/
.breadcrumbs {
  width: 100%;
}
@media (min-width: 768px) {
  .breadcrumbs {
    top: 45px;
    position: sticky;
    z-index: 97;
  }
}
@media (min-width: 1280px) {
  .breadcrumbs {
    top: 60px;
  }
}

/*
    Breadcrumbs list
*/
.breadcrumbs-list {
  display: flex;
  width: auto;
  flex: 1 0 auto;
  flex-wrap: nowrap;
}
.breadcrumbs-list a, .breadcrumbs-list a:visited {
  color: #000;
}
.breadcrumbs-list a:hover {
  color: #5c5c5c;
}
ul.breadcrumbs-list {
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
}
ul.breadcrumbs-list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 1px;
  height: auto;
  background-color: #f2f2f2;
  pointer-events: none;
  transform: translateX(-50%);
}

ul.breadcrumbs-list a[aria-current=location] {
  color: #5c5c5c;
  text-decoration: underline;
}

ol.breadcrumbs-list &gt; li:not(:only-child) &gt; a[aria-current=location] {
  color: #5c5c5c;
  text-decoration: underline;
}

ol.breadcrumbs-list &gt; li:has(ul) &gt; a[aria-current=location] {
  color: #5c5c5c;
  text-decoration: underline;
}

.breadcrumbs-list li {
  display: flex;
  align-items: flex-start;
}
ol.breadcrumbs-list &gt; li:not(:last-child)::after {
  content: "&gt;";
  padding: 4px 0;
  line-height: inherit;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.filter .scroll-area {
  overflow-x: hidden;
}

/*
    Filter buttons
*/
.filter-action-button[data-filter-component=apply] {
  border: 1px solid #000;
}

.filter-action-button[data-filter-component=reset] {
  border: 1px solid currentColor;
  color: #000;
}

.filter-action-button,
.filter-button {
  position: relative;
  width: 100%;
  padding: 4px 9px 18px;
  text-align: left;
}
.filter-action-button.is--loading,
.filter-button.is--loading {
  cursor: wait;
}

.filter-button {
  border: 1px solid #f2f2f2;
  margin: -1px 0 0 0;
  background-color: #fff;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  color: #000;
  text-transform: none;
  transform: translate(0, 0);
  will-change: transform;
}
.is--loading .filter-button {
  cursor: wait;
}
.filter-button:hover, .filter-button.active, .filter-button.selected, .is--tabbing .filter-button:focus {
  z-index: 1;
  border-color: #000;
  color: #000;
}
.filter-button.as-radio {
  text-indent: 20px;
}
.filter-button.as-radio::before {
  position: absolute;
  top: 9px;
}
.filter-button[data-hit-count="0"].active {
  opacity: 0.5;
}
.filter-button[data-hit-count="0"]:not(.active) {
  display: none;
}

.filter__toggle {
  padding: 4px 9px;
}
@media (max-width: 767px) {
  .filter__toggle {
    padding: 4px 9px 18px;
  }
}

.filter-button__color {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 10px;
  height: auto;
}
.filter-button__color[style*="#000006"] {
  background: linear-gradient(359.29deg, #f00 0%, #f90 17.71%, #ffd600 33.85%, #00d047 53.13%, #006bcd 69.27%, #001793 85.94%, #7e0093 100%);
}
.filter-button__color[style*="#ffffff"] {
  border-right: 1px solid #f2f2f2;
}

.filter-button__color ~ .filter-button__text {
  text-indent: 10px;
}

.filter-button .progress-bar--status {
  z-index: -1;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
}

/*
    Filter groups
*/
.filter-group__title {
  position: relative;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.filter-group__buttons {
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  padding: 1px 0 0 0;
}

.filter-group__toggle {
  display: none;
}

.filter-group--column .filter-button {
  width: 50%;
}
.filter-group--column .filter-button:nth-child(odd) {
  margin-right: -1px;
}

.filter-group--compact .filter-group__buttons {
  flex-direction: row;
  padding: 1px 0 0 1px;
}
.filter-group--compact .filter-button {
  width: auto;
  min-width: 55px;
  margin: -1px 0 0 -1px;
}
.filter-group--compact .text-mask {
  -webkit-mask-image: none;
          mask-image: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.featured-filter.is--loading {
  cursor: wait;
}

.action--featured-filter {
  position: relative;
  box-shadow: inset 0 0 0 1px #f2f2f2;
  color: #000;
  text-align: left;
  text-transform: none;
}
.action--featured-filter::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 1px;
  left: 0;
  display: block;
  width: auto;
  height: auto;
  pointer-events: none;
}
.action--featured-filter:hover, .action--featured-filter.selected {
  z-index: 1;
  color: #000;
  text-decoration: none;
}
.action--featured-filter:hover::after {
  border: 1px solid #000;
}
.action--featured-filter.selected {
  background-color: #e8f0fe;
}
.action--featured-filter.selected::after {
  border: 1px solid #0018a8;
}
.action--featured-filter.selected:hover .action--featured-filter.selected::after {
  border: 1px solid #051574;
}
@media (hover: none) and (pointer: coarse) {
  .action--featured-filter:not(.selected):hover {
    z-index: inherit;
  }
  .action--featured-filter:not(.selected):hover::after {
    border: 1px solid transparent;
  }
}
.is--tabbing .action--featured-filter:focus {
  color: #000;
  text-decoration: underline;
}
.is--loading .action--featured-filter {
  pointer-events: none;
}
.action--featured-filter img {
  width: 82px;
  height: 112px;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}
@media (min-width: 768px) {
  .action--featured-filter img {
    width: 90px;
    height: 123px;
  }
}
.action--featured-filter + .action--featured-filter {
  margin-left: -1px;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Progress bar
*/
.progress-bar {
  position: relative;
  width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-top: -1px;
  margin-bottom: -2px;
  background-color: #fff;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.progress-bar--large {
  padding-top: 45px;
}

.progress-bar--status {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  background: linear-gradient(to left, #e8f0fe, #e8f0fe);
  background-repeat: no-repeat;
  background-size: 0 100%;
  will-change: background-size;
}

.progress-bar--message {
  position: relative;
  z-index: 2;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .progress-bar {
    margin-bottom: 0;
  }
  .progress-bar--large,
  .progress-bar--large---medium-up {
    padding-top: 0;
    padding-bottom: 30px;
    text-align: center;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
[data-map]:not(:empty) {
  padding-bottom: 50%;
  filter: grayscale(1);
}

/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute;
  top: 0;
  left: 0;
  max-height: 60px;
  /* Style the bubble. */
  padding: 5px;
  border: 1px solid;
  background-color: #fff;
  font-family: sans-serif;
  overflow-y: auto;
  transform: translate(-50%, -100%);
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
}

/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
  position: absolute;
  top: -35.3585px !important;
  left: 150.7139px !important;
  /* The max width of the info window. */
  width: 400px;
  height: 0;
  cursor: auto;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.svg-icon {
  display: inline-block;
  vertical-align: -1px;
}

.svg-icon-favorite {
  color: #fff;
  vertical-align: -2px;
}

.svg-icon-favorite--active .svg-icon-favorite {
  color: #000;
}

*:not(.svg-icon-favorite--active) &gt; .svg-icon-favorite:hover path {
  stroke: #5c5c5c;
}

[data-pdp-component=productDetails] .svg-icon-favorite--active .svg-icon-favorite {
  color: #0018a8;
}
[data-pdp-component=productDetails] .svg-icon-favorite:hover path {
  fill: #e8f0fe;
  stroke: #0018a8;
}

[data-nav-component=burger],
[data-nav-component=search] {
  margin: 0 auto;
}

.svg-icon-wrapper {
  display: inline-flex;
  align-items: baseline;
}

.svg-icon-info {
  vertical-align: -4px;
}

.minicart--icon {
  display: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Footer
*/
.footer {
  border-top: 1px solid #f2f2f2;
  margin-top: -1px;
}
.footer .icon--chevron-toggle {
  position: relative;
}

@media (min-width: 768px) {
  .footer__top:not(:first-child) {
    border-top: 1px solid #f2f2f2;
  }
}
.footer__bottom {
  display: grid;
}
@media (min-width: 768px) {
  .footer__bottom {
    display: flex;
  }
  .footer__bottom .country-selector-trigger {
    order: 2;
  }
}

.footer__bottom--social-links {
  display: flex;
  flex: 3;
  justify-content: end;
  text-align: center;
}
@media (min-width: 768px) {
  .footer__bottom--social-links {
    justify-content: center;
  }
}

.footer__nav-item {
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  .footer__nav-item {
    line-height: 24px;
  }
}
@media (max-width: 767px) {
  .footer__nav-item {
    padding: 5px 10px 20px 20px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.status-bar {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-items: stretch;
}
@media (min-width: 768px) {
  .status-bar {
    flex-direction: row;
  }
}

.status-bar--loading span {
  filter: opacity(0);
}

.status-bar__item {
  min-height: 50px;
  flex: 1;
  padding: 5px 10px 0 10px;
  border-style: solid;
  border-color: #f2f2f2;
  border-left-width: 10px;
  color: #6b6b6b;
}
.status-bar__item--progress {
  border-color: #3b8048;
}
.status-bar__item--active {
  color: #000;
}
@media (min-width: 768px) {
  .status-bar__item {
    min-height: 0;
    border-top-width: 10px;
    border-left-width: 0;
    cursor: default;
  }
  .status-bar__item:not(:first-of-type):not(:last-of-type) {
    text-align: center;
  }
  .status-bar__item:last-of-type {
    text-align: right;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Gift cert page
*/
.page-giftcert-show [data-main-content] &gt; .gc-wrapper.grid {
  padding-top: 0;
}

.gc-wrapper.grid {
  min-height: calc(100vh - 90px);
}
.layout--has-row-top .gc-wrapper.grid {
  min-height: calc(100vh - 135px);
}
@media (min-width: 768px) {
  .gc-wrapper.grid {
    min-height: calc(100vh - 45px);
  }
  .layout--has-row-top .gc-wrapper.grid {
    min-height: calc(100vh - 75px);
  }
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) .gc-wrapper.grid {
    min-height: calc(100vh - 60px);
  }
  .layout--has-row-top .page:not(.page--no-logo) .gc-wrapper.grid {
    min-height: calc(100vh - 90px);
  }
}

.gc-left-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
@media (min-width: 768px) {
  .gc-left-pane {
    height: 100%;
  }
}

.gc-image {
  width: 100%;
}
@media (min-width: 577px) {
  .gc-image {
    max-width: 380px;
  }
}
@media (min-width: 1280px) {
  .gc-image {
    max-width: 75%;
  }
}
@media (min-width: 1440px) {
  .gc-image {
    max-width: 66%;
  }
}

.gc-right-pane {
  padding-top: 10px;
}
@media (min-width: 768px) {
  .gc-right-pane {
    max-width: 480px;
    padding-top: 60px;
  }
}

/*
    Gift cert line item
*/
[data-gift-cert-action=toggle][aria-expanded=false]::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 60px;
}

[data-gift-card-line-item=description].collapsed {
  overflow: hidden;
  max-height: 30px;
}
[data-gift-card-line-item=description].collapsed li:first-child::after {
  content: "...";
  display: inline-block;
}
[data-gift-card-line-item=description].collapsed li:not(:first-child) {
  opacity: 0;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Sizes
    TODO: Should be modifier related to size
*/
.message--large {
  padding: 15px 20px;
}
@media (min-width: 768px) {
  .message--large {
    padding: 35px 40px;
  }
}

.message--medium {
  padding: 20px;
}

.message--small {
  padding: 10px;
}

/*
    Colors
    TODO: Should be modifiers with color key
*/
.message-warning {
  background-color: #ffffeb;
}

.message-info {
  background-color: #e8f0fe;
}

.message-success {
  background-color: #3b8048;
}

.message-error {
  background-color: #dc0000;
}

/*
    Other
    TODO: Should be related to color and size
*/
.message-note {
  border: 1px solid #f2f2f2;
}
@media (max-width: 767px) {
  .message-note {
    padding: 15px 20px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.accordion-item {
  position: relative;
  padding: 10px !important;
  cursor: pointer;
}
.accordion-item:not(:first-of-type) {
  border-top: 1px solid #f2f2f2 !important;
}
.accordion-item .field__action {
  top: 12px !important;
  height: 20px;
  background-image: url("../icons/right-arrow.svg");
  background-repeat: no-repeat;
}
.accordion-item .field__action .arrow-right + .arrow-down {
  display: none;
}
.accordion-item.active .field__action {
  right: 10px;
  transform: rotate(90deg);
}

.accordion-content, .accordion-content.cell {
  padding-bottom: 20px;
}

.sub-accordion .accordion-item {
  padding: 12px 15px 16px;
  border: none !important;
}
.sub-accordion .accordion-item.active::before {
  content: "&gt;";
}
.sub-accordion .accordion-item.active &gt; button {
  display: inline-block;
  width: auto;
}
.sub-accordion .accordion-content {
  padding: 0 15px 30px;
}
@media (max-width: 767px) {
  .sub-accordion .accordion-content {
    padding: 20px 30px 30px;
  }
}

.sub-accordion-item {
  text-indent: 10px;
}
.sub-accordion-item &gt; button {
  text-transform: none;
}

.action--accordion {
  position: relative;
  width: 100%;
  padding: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  margin-top: -1px;
  text-align: left;
}
.action--accordion::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 10px;
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background-image: url(../icons/arrow-down.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 7px;
  pointer-events: none;
  transform: rotate(-90deg);
  transform-origin: center;
}
.action--accordion[aria-expanded=true] {
  border-bottom: 0;
}
.action--accordion[aria-expanded=true]::after {
  transform: rotate(0);
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.cookie-banner__container {
  position: sticky;
  position: -webkit-sticky;
  z-index: 90;
  top: auto;
  bottom: 0;
  left: 0;
  width: 50%;
  border: 1px solid #000;
  margin-right: auto;
}
.page-home-show .cookie-banner__container, .page-search-show .cookie-banner__container, .page-product-showincategory .cookie-banner__container, .page-product-show .cookie-banner__container {
  border: none;
}
.state--cart .cookie-banner__container {
  z-index: 101;
}
@media (max-width: 767px) {
  .cookie-banner__container {
    z-index: 100;
    bottom: 45px;
    width: 100%;
    max-width: none;
    padding-bottom: env(safe-area-inset-bottom);
    transition: padding-bottom 0.15s ease;
    will-change: padding-bottom;
  }
}
@media (min-width: 768px) {
  .cookie-banner__container {
    margin-bottom: 1px;
  }
}

.cookie-banner__inner {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: #fff;
}
@media (max-width: 767px) {
  .cookie-banner__inner {
    flex-direction: column;
    justify-content: stretch;
    padding: 10px;
  }
}

@media (max-width: 767px) {
  .page-search-show .cookie-banner__container {
    margin-top: -43px;
  }
  .page-checkout-begin .cookie-banner__container,
  .page-checkout-login .cookie-banner__container {
    bottom: 0;
  }
}
@media (min-width: 768px) {
  .page-home-show .cookie-banner__container {
    height: 0;
  }
  .page-home-show .cookie-banner__container .cookie-banner__inner {
    height: -moz-min-content;
    height: min-content;
    transform: translateY(-100%);
  }
}
@media (min-width: 768px) {
  .cookie-banner__text {
    max-width: 72%;
    flex: 1;
  }
}

@media (max-width: 767px) {
  .cookie-banner__actions {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
.cookie-banner__actions &gt; button {
  color: #0018a8;
  text-align: center;
}
@media (max-width: 767px) {
  .cookie-banner__actions &gt; button {
    color: #000;
  }
}
@media (min-width: 768px) {
  .cookie-banner__actions &gt; button {
    padding: 0;
    border: none;
    background-color: transparent;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Pagination
*/
[data-component-id=pagination] {
  position: relative;
  z-index: -1;
  order: 9999;
  margin-top: -75vh;
}
[data-component-id=pagination]::before {
  content: "";
  position: relative;
  z-index: -1;
  display: block;
  width: 100%;
  height: 75vh;
  opacity: 0;
  pointer-events: none;
}
[data-component-id=pagination][data-component-state=loaded] {
  display: none;
}

/*
    Below follows legacy structure which are way to nested and barely clickable...
    @TODO: Refactor this one to our needs...
*/
.pagination_wrapper {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
.pagination_wrapper .pagination_results-hits {
  display: inline-block;
}
.pagination_wrapper ul li {
  display: inline-block;
  padding: 0;
  margin-left: 14px;
}
.pagination_wrapper ul li.pagination_current-page {
  position: relative;
}
.pagination_wrapper ul li.pagination_current-page::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #000;
}
@media (max-width: 576px) {
  .pagination_wrapper .pagination_page-next,
  .pagination_wrapper .pagination_page-previous {
    display: block;
    width: 44%;
    padding: 10px;
    border: solid #000 1px;
    margin: 10px;
    color: #000;
    float: left;
  }
  .pagination_wrapper .pagination_page-only {
    width: 95%;
  }
}

[data-component-id=load-more-progress] .load-more-wrapper {
  max-width: 340px;
  margin: 0 auto;
  padding: 30px 10px;
}

[data-component-id=load-more-progress] .loadbar {
  margin: 15px 30px 20px 30px;
}

[data-component-id=load-more-progress] .loadbar_progress {
  height: 2px;
  width: 100%;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
body.state--newsletter &gt; .modal-backdrop.show {
  display: none;
}

.newsletter__loading-state {
  min-height: 140px;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.preferences__field input[type=checkbox] + label {
  padding-top: 0;
}
.preferences__field .field__error[aria-hidden=false] {
  display: block;
}

.preferences__header {
  padding-left: 10px;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.notifyme-state-container.notify--is-one-size .notify--off-one-size, .notifyme-state-container:not(.notify--is-one-size) .notify--on-one-size {
  display: none;
}

body.state--notifyme &gt; .modal-backdrop.show {
  display: none;
}

[data-component-id=notifyMe] .variations {
  padding: 0;
  margin: 10px 0;
}
[data-component-id=notifyMe] .variations[data-notselectable-variations-count="0"],
[data-component-id=notifyMe] .variations[data-notselectable-variations-count="1"] {
  display: none;
}
[data-component-id=notifyMe] .variations .variations__grid-item[data-availability-site=false] {
  color: initial;
  text-decoration: initial;
}

[data-component-id=notifyMe] [data-component-id=variantLowStockNotice] {
  display: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Drawer class helpers for unifying common draweer classes
*/
.drawer {
  position: fixed;
  z-index: 110;
  right: 0;
  display: flex;
  width: 50%;
  min-width: 360px;
  height: 100%;
  flex-direction: column;
  background-color: #fff;
}
.drawer:not(.drawer--dynamic-height) {
  top: -1px;
  bottom: 0;
  height: auto;
}
@media (min-width: 768px) {
  .drawer:not(.drawer--dynamic-height) {
    top: -1px;
    max-height: calc(100vh - -1px);
  }
  .layout--has-row-top:not(.layout--header-stuck) .drawer:not(.drawer--dynamic-height) {
    top: calc(30px - var(--scrollLock));
    max-height: calc(100vh - 30px + var(--scrollLock));
  }
}
.drawer.drawer--dynamic-height {
  top: -1px;
  max-height: calc(100vh - -1px);
}
@supports (max-height: -webkit-fill-available) {
  .drawer.drawer--dynamic-height {
    max-height: -webkit-fill-available;
  }
}
.drawer.drawer--dynamic-height {
  height: auto;
}
@media (max-width: 767px) {
  .drawer.drawer--dynamic-height {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .drawer {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .drawer {
    padding-bottom: 0;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .drawer {
      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
      padding-bottom: calc(0 + var(--safe-area-inset-bottom));
      transition: padding-bottom 0.15s ease;
      will-change: padding-bottom;
    }
  }
}
@media (min-width: 768px) {
  .drawer {
    top: -1px;
    width: 25%;
    max-width: 500px;
  }
  .layout--has-row-top:not(.layout--header-stuck) .drawer {
    top: calc(30px - var(--scrollLock));
  }
}

@media (min-width: 768px) {
  .layout--has-row-top:not(.layout--header-stuck) .drawer--dynamic-height .drawer__scroll-area.is--overflowing {
    padding-bottom: calc(30px - var(--scrollLock));
  }
}
.drawer__header {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 45px;
  border-bottom: 1px solid #000;
  background-color: #fff;
}
.drawer__header .drawer__close,
.drawer__header .as-cell {
  padding: 4px 9px 18px;
}
@media (min-width: 1280px) {
  .page:not(.page--no-logo) ~ .drawer__header {
    min-height: 60px;
  }
  .page:not(.page--no-logo) ~ .drawer__header .drawer__close,
  .page:not(.page--no-logo) ~ .drawer__header .as-cell {
    padding: 4px 9px 33px;
  }
}

.drawer__container {
  display: flex;
  overflow: hidden;
  max-height: 100%;
  flex-direction: column;
  flex-grow: 1;
  padding: 10px 10px 0 10px;
}
.drawer__container:not(.drawer__container--no-padding).scroll-gradients--y {
  position: relative;
}
.drawer__container:not(.drawer__container--no-padding).scroll-gradients--y::before {
  top: 10px;
}

.drawer__container--no-padding {
  padding: 0;
}

.drawer__scroll-area {
  padding-bottom: 0;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .drawer__scroll-area {
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    padding-bottom: calc(0 + var(--safe-area-inset-bottom));
    transition: padding-bottom 0.15s ease;
    will-change: padding-bottom;
  }
}
.drawer__scroll-area {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-wrap: nowrap;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  touch-action: pan-y;
}
.drawer__header + .drawer__scroll-area::before {
  transform: translateY(1px);
}
.drawer__scroll-area::after {
  transform: translateY(10px);
}
.drawer__scroll-area .drawer__list-item,
.drawer__scroll-area a,
.drawer__scroll-area button,
.drawer__scroll-area input,
.drawer__scroll-area .lazyload-image-wrapper,
.drawer__scroll-area h2,
.drawer__scroll-area h3,
.drawer__scroll-area h4,
.drawer__scroll-area h5,
.drawer__scroll-area p {
  scroll-snap-align: start end;
}

.drawer__list-item {
  position: relative;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  border: 1px solid #f2f2f2;
}
.drawer__list-item:not([data-status-indicator]) {
  padding-left: 10px;
}
.drawer__list-item + .drawer__list-item {
  margin-top: -1px;
}
.drawer__list-item sup {
  margin-left: 0;
}

.drawer__footer {
  position: sticky;
  z-index: 3;
  bottom: 0;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.contact-method {
  width: 100%;
  flex: 0 0 auto;
}
.contact-method:not([data-state=online]):not([data-state=offline]) sup {
  opacity: 0;
}
button.contact-method:not(.text--no-case) {
  text-transform: inherit;
}

@media (max-width: 767px) {
  .contact-method.contact-method--has-description {
    min-height: 65px;
  }
}

.contact-method__description {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.contact-method__expanded-description {
  padding-right: 10px;
  padding-left: 10px;
}
.contact-method__expanded-description img {
  width: 90%;
  max-width: 200px;
  margin: 0 auto;
}

/*
    Footer
*/
.footer .contact-method.contact-method--has-description {
  min-height: auto;
}
.footer .contact-method .icon--chevron-toggle,
.footer .contact-method__description {
  display: none;
}
.footer .contact-method__expanded-description {
  padding-right: inherit;
  padding-left: inherit;
}

/*
    CS pages
*/
.help-page [data-component-id=liveChat] {
  white-space: normal;
}
.help-page .contact-method {
  display: flex;
  width: 100%;
  padding-bottom: 20px;
}
.help-page .contact-method * {
  flex-basis: 50%;
}
.help-page .contact-method.contact-method--has-description {
  display: flex;
  padding-bottom: 20px;
}
.help-page .contact-method.contact-method--has-description * {
  flex-basis: 50%;
}
.help-page .contact-method.contact-method--has-description .icon--chevron-toggle {
  flex-basis: 0;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    RunwayTileZoomToggle
*/
[data-runway-zoom] [data-zoom-trigger] {
  cursor: zoom-in;
}

[data-runway-zoom=true] [data-zoom-trigger] {
  cursor: zoom-out;
}
@media (max-width: 767px) {
  [data-runway-zoom=true] [data-zoom-trigger].tile--span-4 {
    grid-column-end: span 8;
  }
}
@media (min-width: 768px) {
  [data-runway-zoom=true] [data-zoom-trigger].tile--span-4 {
    grid-column-end: span 8;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
[data-component-id=redirectModal] {
  position: fixed;
  z-index: 105;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media (min-width: 768px) {
  [data-component-id=redirectModal] {
    top: 30vh;
    width: 375px;
  }
}
@media (max-width: 767px) {
  [data-component-id=redirectModal] {
    bottom: 0;
  }
}

[data-redirect-modal-state=CHOOSE_LANGUAGE] [data-redirect-modal-content=CHOOSE_COUNTRY],
[data-redirect-modal-state=CHOOSE_COUNTRY] [data-redirect-modal-content=CHOOSE_LANGUAGE] {
  display: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
@media (max-width: 767px) {
  .horizontal-slider {
    position: relative;
    z-index: 11;
  }
}

.horizontal-slider__slider {
  flex: 0 0 100%;
}
@media (max-width: 767px) {
  .horizontal-slider__slider {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
  }
  .horizontal-slider__slider::-webkit-scrollbar {
    /* WebKit */
    display: none;
    width: 0;
    height: 0;
  }
  .horizontal-slider__slider {
    display: flex;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
}

@media (max-width: 767px) {
  .horizontal-slider__item {
    scroll-snap-align: start;
  }
}

.horizontal-slider__nav {
  position: absolute;
  top: calc(50% - 20px);
  padding: 20px 10px 20px 20px;
}

.horizontal-slider__nav--next {
  right: 0;
}

.horizontal-slider__nav--prev {
  left: 0;
  transform: rotate(180deg);
}

.horizontal-slider__tracks {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (min-width: 768px) {
  .horizontal-slider__tracks {
    display: none;
  }
}

.horizontal-slider__track {
  width: 10px;
  height: 22px;
  margin-right: 2px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.horizontal-slider__track[data-carousel-track-active=true] {
  background-image: linear-gradient(45deg, rgb(0, 0, 0), rgb(0, 0, 0));
}

.horizontal-slider__track:only-of-type {
  display: none;
}

@media (max-width: 767px) {
  body[data-is-pinch-zooming=true] .horizontal-slider {
    z-index: auto;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    pointer-events: none;
  }
  body[data-is-pinch-zooming=true] .horizontal-slider .horizontal-slider__slider {
    overflow: hidden;
    scroll-behavior: auto;
    scroll-snap-type: none;
    touch-action: auto;
  }
  body[data-is-pinch-zooming=true] .horizontal-slider .horizontal-slider__item {
    scroll-snap-align: none;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
[data-component-id=inputSearch] .field__action img {
  padding: 8px;
}

.input-search__list {
  position: absolute;
  z-index: 2;
  display: none;
  width: 100%;
  max-height: calc(45px * 4);
  border: 1px solid #000;
  border-top: none;
  overflow-y: scroll;
}
@media (min-width: 768px) {
  .input-search__list {
    max-height: calc(30px * 4);
  }
}

.input-search__list[aria-expanded=true]:not(:empty) {
  display: block;
}

.input-search__item {
  width: 100%;
  background-color: #fff;
  color: #000;
}

.input-search__item:nth-child(odd) {
  background-color: #f7f7f7;
}

.input-search__item:hover {
  background-color: #e8f0fe;
}

.input-search__item button:focus {
  text-decoration: underline;
}

[data-input-search-component=input][type=button] {
  word-break: normal;
}
[data-input-search-component=input][type=button]::-moz-placeholder {
  color: #c2c2c2;
  font-size: 18px;
  line-height: normal !important;
  opacity: 0;
  text-transform: none;
  vertical-align: middle;
}
[data-input-search-component=input][type=button]::placeholder {
  color: #c2c2c2;
  font-size: 18px;
  line-height: normal !important;
  opacity: 0;
  text-transform: none;
  vertical-align: middle;
}
[data-input-search-component=input][type=button]:focus::-moz-placeholder {
  opacity: 1;
}
[data-input-search-component=input][type=button]:focus::placeholder {
  opacity: 1;
}
[data-input-search-component=input][type=button].field-size--small::-moz-placeholder {
  font-size: 12px;
  text-transform: uppercase;
}
[data-input-search-component=input][type=button].field-size--small::placeholder {
  font-size: 12px;
  text-transform: uppercase;
}
[data-input-search-component=input][type=button]:required:invalid {
  box-shadow: none;
  outline: none;
}
@media (max-width: 767px) {
  [data-input-search-component=input][type=button].field--hide-placeholder---small-down::-moz-placeholder {
    opacity: 0;
  }
  [data-input-search-component=input][type=button].field--hide-placeholder---small-down::placeholder {
    opacity: 0;
  }
}
[data-input-search-component=input][type=button] {
  text-align: left;
}
[data-input-search-component=input][type=button]:not([value=""]) + .field__label.field__placement--on-active-top {
  position: absolute;
  top: 7.6px;
  left: 0;
  padding-left: 11px;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Page settings
*/
/*
    Search section
*/
.search-section {
  position: relative;
}
.search-section:not([data-search-section-state=complete]) [data-search-section-component=nextCategory] {
  display: none;
}

[data-search-section-component=nextCategory] {
  max-width: calc(375px * var(--button-cols));
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 767px) {
  [data-search-section-component=nextCategory] div {
    width: 100%;
  }
}

/*
    Search header
*/
.search-section__header {
  padding-top: 30px;
  border-top: 1px solid #000;
  margin-top: -1px;
}

/*
    Search nav &amp; Sibling categories
*/
.search-section__sibling-categories,
.search-section__nav {
  top: 44px;
  position: sticky;
  width: 100%;
  margin-top: -1px;
}
@media (min-width: 1280px) {
  .search-section__sibling-categories,
  .search-section__nav {
    top: 59px;
  }
}

.search-section__sibling-categories {
  z-index: 97;
}

.search-section__nav {
  --intersection-ratio: 45px;
}
@media (min-width: 1280px) {
  .search-section__nav {
    --intersection-ratio: 60px;
  }
}
.search-section__nav {
  z-index: 96;
}
.search-section__nav[data-sticky-state=stuck] {
  z-index: 98;
}
body[class*=state--category-] .search-section__nav {
  z-index: 90;
}
.search-section__nav[data-sticky-state=default] [data-on-sticky-state=stuck], .search-section__nav[data-sticky-state=stuck] [data-on-sticky-state=default] {
  display: none;
}

.search-section__nav-title::first-letter {
  text-transform: capitalize;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.help-page {
  max-width: 768px;
  padding: 90px 10px;
  margin: 0 auto;
}
.help-page .content-asset .help-main-title {
  padding: 0 0 10px;
}
.help-page .contact-us-copy &gt; .content-asset {
  display: block;
}
.help-page .accordion-content {
  text-transform: none;
}
@media (max-width: 767px) {
  .help-page .table {
    position: relative;
    min-width: auto;
    max-width: 100%;
    overflow-x: scroll;
  }
  .help-page .table .table-title {
    position: sticky;
    left: 0;
  }
  .help-page .table table {
    min-width: 768px;
  }
}

.help-page-main-title {
  padding: 16px 0 0 10px;
  margin-bottom: 16px;
}

.help-page-country-selector {
  margin: -5px 0;
}
.help-page-country-selector .flag {
  display: none;
  margin-left: -25px;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    PinkCard page
*/
@media (max-width: 767px) {
  .page[class*=page-pinkcard] {
    padding-bottom: 45px;
  }
}
.page[class*=page-pinkcard] .header {
  justify-content: flex-start;
}
.page[class*=page-pinkcard] main {
  max-width: 480px;
  padding-bottom: 90px;
  margin: 0 auto;
}
.page[class*=page-pinkcard] .pink-card__logout {
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Pre-checkout &amp; Checkout
*/
.page[class*=page-checkout-begin] [data-checkout-section=main],
.page[class*=page-checkout-login] [data-checkout-section=main] {
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .page[class*=page-checkout-begin] [data-checkout-section=main],
  .page[class*=page-checkout-login] [data-checkout-section=main] {
    padding-bottom: 90px;
  }
}
.page[class*=page-checkout-begin] .footer,
.page[class*=page-checkout-login] .footer {
  display: none;
}

/*
    Component states
*/
@keyframes checkoutShimmer {
  0% {
    background-position: 50% 0;
  }
  100% {
    background-position: -50% 0;
  }
}
[data-on-component-state*=placing-order],
[data-on-component-state*=placed-order],
[data-component=checkout][data-component-state=placing-order] [data-off-component-state*=placing-order],
[data-component=checkout][data-component-state=placed-order] [data-off-component-state*=placed-order] {
  display: none;
}

[data-component-state=placing-order] [data-component=buttonContentPlacingOrder] span {
  will-change: position opacity;
}
[data-component-state=placing-order] [data-component=buttonContentPlacingOrder] span:first-child {
  animation: cycleDisplay 4000ms step-end infinite;
}
[data-component-state=placing-order] [data-component=buttonContentPlacingOrder] span:last-child {
  animation: cycleDisplay 4000ms step-start infinite;
}

@keyframes cycleDisplay {
  50% {
    position: absolute;
    opacity: 0;
  }
}
[data-component=checkout][data-component-state=placing-order] [data-on-component-state*=placing-order],
[data-component=checkout][data-component-state=placed-order] [data-on-component-state*=placed-order] {
  display: block;
}

[data-component=checkout][data-component-state=placing-order] [data-checkout-section=main],
[data-component=checkout][data-component-state=placed-order] [data-checkout-section=main] {
  cursor: progress;
}
[data-component=checkout][data-component-state=placing-order] [data-checkout-section=main] *,
[data-component=checkout][data-component-state=placed-order] [data-checkout-section=main] * {
  pointer-events: none;
}
[data-component=checkout][data-component-state=placing-order] [data-checkout-section=shipping],
[data-component=checkout][data-component-state=placing-order] [data-checkout-section=billingAndPayments],
[data-component=checkout][data-component-state=placed-order] [data-checkout-section=shipping],
[data-component=checkout][data-component-state=placed-order] [data-checkout-section=billingAndPayments] {
  opacity: 0.5;
}
[data-component=checkout][data-component-state=placing-order] button.place-order,
[data-component=checkout][data-component-state=placed-order] button.place-order {
  animation: checkoutShimmer 2000ms linear forwards infinite;
  background: linear-gradient(to right, #f2f2f2 0%, #f2f2f2 30%, #c2c2c2 30%);
  background-color: #c2c2c2;
  background-size: 300% 100%;
  will-change: background-position;
}

/*
    Forms
*/
#shipping-addresses-list,
#billing-addresses-list {
  padding-bottom: 10px;
}
#shipping-addresses-list .radio-group__item,
#billing-addresses-list .radio-group__item {
  position: relative;
}
#shipping-addresses-list .radio-group__label,
#billing-addresses-list .radio-group__label {
  position: initial;
}
#shipping-addresses-list .radio-group__label::after,
#billing-addresses-list .radio-group__label::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#shipping-addresses-list input:checked + .radio-group__label,
#billing-addresses-list input:checked + .radio-group__label {
  background-color: #e8f0fe;
}
#shipping-addresses-list input:checked + .radio-group__label[for*=newAddress]::after,
#billing-addresses-list input:checked + .radio-group__label[for*=newAddress]::after {
  display: none;
}
#shipping-addresses-list input:not(:checked) ~ .radio-group__content.show,
#billing-addresses-list input:not(:checked) ~ .radio-group__content.show {
  background-color: #fff;
}
#shipping-addresses-list .radio-group__content,
#billing-addresses-list .radio-group__content {
  padding-top: 0;
  text-transform: none;
}
#shipping-addresses-list .radio-group__label,
#billing-addresses-list .radio-group__label {
  min-height: 38px;
  padding-top: 5px;
  padding-bottom: 0;
}
@media (max-width: 767px) {
  #shipping-addresses-list .right-block,
  #billing-addresses-list .right-block {
    margin-top: 15px;
  }
}
#shipping-addresses-list .field__label,
#billing-addresses-list .field__label {
  text-transform: uppercase;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.giftwrapping {
  position: relative;
  padding: 5px 10px 5px 38px;
}
.giftwrapping:not([data-active=true]) .giftwrapping__item--on-active, .giftwrapping[data-active=true] .giftwrapping__item--off-active {
  display: none;
}
.giftwrapping[data-active=true] {
  border: 1px solid #000;
  background-color: #e8f0fe;
}
.giftwrapping .state-trigger--giftwrapping {
  height: 20px;
  text-align: left;
  white-space: normal;
}
.giftwrapping [data-giftwrapping-component=remove] {
  height: 100%;
}
.giftwrapping &gt; .hide-visually {
  position: absolute;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Checkout order confirmation page
*/
.page-order-confirm [data-main-content] {
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .page-order-confirm [data-main-content] {
    padding-bottom: 90px;
  }
}

.order-confirmation__thank-you {
  padding: 0 20px;
}

.order-confirmation__details {
  padding-right: 10px;
  padding-left: 10px;
}

/*
    Create account
*/
.order-confirmation__create-account {
  padding: 20px 10px 30px 10px;
  background: #f7f7f7;
}
@media (min-width: 768px) {
  .order-confirmation__create-account {
    padding: 65px 0 90px;
  }
  .order-confirmation__create-account form {
    width: 62.5%;
    margin: 0 auto;
  }
}

/*
    Gift card
*/
.order-confirmation__gift-certificate {
  height: calc(100vh - 250px);
  flex: 0 0 50%;
  padding-top: 30px;
  background-color: #fff;
}
.order-confirmation__gift-certificate .gift-certificate-amount-ticket {
  display: none;
}

/*
    Common default page margins and paddings
*/
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.address-validation-error-message,
.address-validation-suggested-address {
  line-height: 25px;
}

.address-validation-suggested-address {
  padding-top: 10px;
  border-color: #000;
  text-transform: none;
}
.address-validation-suggested-address::before {
  top: 20px;
}

.selected-address-validation-address {
  background-color: #e8f0fe;
}
.selected-address-validation-address::before {
  top: 20px;
  box-shadow: inset 0 0 0 2px #e8f0fe, inset 0 0 0 4px #000;
}

.state--address-validation .page-overlay {
  z-index: 103;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    @TODO:
    WARNING: THIS FILE HAS MANY SHARED DUPLICATES BETWEEN
    `app_acne_sfra/cartridge/client/default/scss/vendor/_adyen.scss` AND
    `app_acne_sfra/cartridge/client/default/scss/components/checkout/_paymentMethods.scss`

    MAKE SURE TO JOIN THESE FILES IN `_adyen.scss` AND ONLY INLCUDE THIS VENDOR SCRIPT ON PAGES THAT NEEDS IT.
    USE THE VARS... F
*/
[data-checkout-section=paymentMethods] {
  /* stylelint-disable selector-class-pattern */
  /* stylelint-enable selector-class-pattern */
}
[data-checkout-section=paymentMethods] .paymentMethodsList {
  padding-top: 1px;
}
[data-checkout-section=paymentMethods] .paymentMethod {
  position: relative;
  display: grid;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 10px 10px;
  border: 1px solid #f7f7f7;
  margin-top: -1px;
  grid-template-areas: "pm-image pm-label" "pm-image pm-description" "pm-additional-fields pm-additional-fields" "pm-expanded-description pm-expanded-description";
  grid-template-columns: auto 1fr;
}
[data-checkout-section=paymentMethods] .paymentMethod.isScheme {
  background-position-y: 10px;
  grid-template-areas: "pm-image pm-label" "pm-additional-fields pm-additional-fields";
}
[data-checkout-section=paymentMethods] .paymentMethod.isScheme &gt; label {
  padding: 0 10px 10px 20px;
}
[data-checkout-section=paymentMethods] .paymentMethod.isScheme &gt; .paymentMethod_img {
  display: none;
}
@media (max-width: 576px) {
  [data-checkout-section=paymentMethods] .paymentMethod.isScheme .adyen-checkout__field-wrapper {
    flex-direction: column;
  }
  [data-checkout-section=paymentMethods] .paymentMethod.isScheme .adyen-checkout__field {
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  [data-checkout-section=paymentMethods] .paymentMethod.isScheme .adyen-checkout__field__exp-date {
    margin-bottom: 10px;
  }
}
[data-checkout-section=paymentMethods] .paymentMethod.storedCard[data-selected=true] {
  align-items: flex-start;
}
@media (min-width: 992px) {
  [data-checkout-section=paymentMethods] .paymentMethod.storedCard[data-selected=true] {
    grid-template-areas: "pm-image pm-label pm-additional-fields";
    grid-template-columns: 70px calc(50% - 35px) calc(50% - 35px);
  }
}
[data-checkout-section=paymentMethods] .paymentMethod.storedCard[data-selected=true] .additionalFields {
  padding-top: 5px;
}
[data-checkout-section=paymentMethods] .paymentMethod.storedCard[data-selected=true] .adyen-checkout__field--storedCard {
  display: none;
  width: 100%;
}
[data-checkout-section=paymentMethods] .paymentMethod.storedCard[data-selected=true] .adyen-checkout__field--storedCard.adyen-checkout__field__cvc {
  display: block;
}
@media (max-width: 991px) {
  [data-checkout-section=paymentMethods] .paymentMethod.storedCard[data-selected=true] .adyen-checkout__field--storedCard.adyen-checkout__field__cvc {
    margin-left: 0 !important;
  }
}
[data-checkout-section=paymentMethods] *:not([data-component-state=loading]) &gt; .paymentMethod {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0NSIgc3Ryb2tlPSJibGFjayIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgLz4KICAKPC9zdmc+");
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; img.paymentMethod_img {
  box-shadow: 0 0 0 1px #f7f7f7;
  grid-area: pm-image;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; label {
  padding: 0 10px;
  grid-area: pm-label;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; .additionalFields {
  padding: 0;
  grid-area: pm-additional-fields;
}
[data-checkout-section=paymentMethods] .paymentMethod[data-selected=true]:not([data-component-state=loading]) {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0NSIgc3Ryb2tlPSJibGFjayIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0iYmxhY2siIC8+Cjwvc3ZnPg==");
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; input ~ label::before,
[data-checkout-section=paymentMethods] .paymentMethod &gt; label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; input ~ label::before {
  z-index: -1;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; input:checked ~ label::before {
  background-color: #e8f0fe;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; label::after {
  z-index: 1;
  height: 100%;
  cursor: pointer;
}
[data-checkout-section=paymentMethods] .paymentMethod:hover &gt; label::after,
[data-checkout-section=paymentMethods] .paymentMethod &gt; input:focus ~ label::after,
[data-checkout-section=paymentMethods] .paymentMethod &gt; input:checked ~ label::after {
  outline: 1px solid #000;
  outline-offset: 0;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; input:checked ~ label::after {
  pointer-events: none;
}
[data-checkout-section=paymentMethods] .paymentMethod &gt; p {
  padding: 0 10px;
  grid-area: pm-description;
  text-transform: none;
}
[data-checkout-section=paymentMethods] img.paymentMethod_img {
  width: auto;
  height: 30px;
  max-height: 30px;
  border-radius: 3px;
  margin: 5px 5px 5px 20px;
}
[data-checkout-section=paymentMethods] [data-component-state=loading] img.paymentMethod_img {
  width: calc(45px + 5px);
  height: 30px;
  margin-left: 5px;
}
[data-checkout-section=paymentMethods] .additionalFields {
  flex: 0 0 100%;
  padding: 10px;
}
[data-checkout-section=paymentMethods] .additionalFields:empty {
  padding: 0;
}
[data-checkout-section=paymentMethods] .expanded-description {
  display: none;
  grid-area: pm-expanded-description;
}
[data-checkout-section=paymentMethods] input:checked ~ .expanded-description {
  display: block;
  padding: 10px 10px 0;
  border-top: 1px solid #000;
  margin-top: 10px;
}
[data-checkout-section=paymentMethods] .adyen-checkout__input {
  height: 60px;
  padding: 25px 10px 0;
  border-color: transparent;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-size: 18px;
  transition: none;
}
[data-checkout-section=paymentMethods] .adyen-checkout__input::-moz-placeholder {
  color: #6b6b6b;
}
[data-checkout-section=paymentMethods] .adyen-checkout__input::placeholder {
  color: #6b6b6b;
}
[data-checkout-section=paymentMethods] .adyen-checkout__input:-webkit-autofill, [data-checkout-section=paymentMethods] .adyen-checkout__input:-webkit-autofill:hover, [data-checkout-section=paymentMethods] .adyen-checkout__input:-webkit-autofill:focus, [data-checkout-section=paymentMethods] .adyen-checkout__input:-webkit-autofill:active, [data-checkout-section=paymentMethods] .adyen-checkout__input:-webkit-autofill:not(:focus) {
  background-color: #fff !important;
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}
[data-checkout-section=paymentMethods] .adyen-checkout__field {
  margin-bottom: 10px;
}
[data-checkout-section=paymentMethods] .adyen-checkout__label {
  position: relative;
  padding: 0;
}
[data-checkout-section=paymentMethods] .adyen-checkout__label .adyen-checkout__label__text {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 0;
  padding: 0 10px;
  color: #6b6b6b;
  font-size: 12px;
  line-height: inherit;
}
[data-checkout-section=paymentMethods] .adyen-checkout__label .adyen-checkout__input {
  pointer-events: all;
}
[data-checkout-section=paymentMethods] .adyen-checkout__label:not(.adyen-checkout__label--focused):not(.adyen-checkout__label--filled) .adyen-checkout__input iframe {
  position: absolute;
  top: 0;
  left: 0;
  cursor: text;
  opacity: 0;
}
[data-checkout-section=paymentMethods] .adyen-checkout__field--storedCard .adyen-checkout__label--disabled .adyen-checkout__label__text,
[data-checkout-section=paymentMethods] .adyen-checkout__label.adyen-checkout__label--focused .adyen-checkout__label__text,
[data-checkout-section=paymentMethods] .adyen-checkout__label.adyen-checkout__label--filled .adyen-checkout__label__text,
[data-checkout-section=paymentMethods] .adyen-checkout__field.adyen-checkout__field--valid .adyen-checkout__label__text {
  top: 8px;
  color: #6b6b6b;
}
[data-checkout-section=paymentMethods] .adyen-checkout__input--focus,
[data-checkout-section=paymentMethods] .adyen-checkout__input--focus:hover {
  box-shadow: none;
}
[data-checkout-section=paymentMethods] .adyen-checkout__input:hover {
  border: 1px solid #6b6b6b;
}
[data-checkout-section=paymentMethods] .adyen-checkout__input--focus,
[data-checkout-section=paymentMethods] .adyen-checkout__input--focus:hover,
[data-checkout-section=paymentMethods] .adyen-checkout__input:active,
[data-checkout-section=paymentMethods] .adyen-checkout__input:focus,
[data-checkout-section=paymentMethods] .adyen-checkout__input:active:hover,
[data-checkout-section=paymentMethods] .adyen-checkout__input:focus:hover {
  border: 1px solid #6b6b6b;
  box-shadow: none;
}
[data-checkout-section=paymentMethods] .adyen-checkout__card-input .adyen-checkout__label {
  pointer-events: none;
}
[data-checkout-section=paymentMethods] .adyen-checkout__label--focused .adyen-checkout__input {
  background-color: #fff;
}
[data-checkout-section=paymentMethods] .adyen-checkout__card__holderName {
  margin-top: 10px;
}
[data-checkout-section=paymentMethods] .adyen-checkout__field__cvc {
  margin-left: 5px !important;
}
[data-checkout-section=paymentMethods] .adyen-checkout__field__exp-date {
  margin-right: 5px !important;
}
[data-checkout-section=paymentMethods] input[value=ideal] ~ .additionalFields[id=component_ideal] .adyen-checkout__filter-input {
  display: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
@media (max-width: 767px) {
  .page-login-show,
  .page[class*=page-account-]:not(.page-account-renderprivacypolicypage),
  .page[class*=page-twrorder-],
  .page[class*=page-twrreturn-] {
    padding-bottom: 45px;
  }
}

@media (max-width: 767px) {
  .page-login-show [data-main-content] &gt; .grid,
  .page[class*=page-account-]:not(.page-account-landing):not(.page-account-renderprivacypolicypage):not(.page-account-loginorregister):not(.page-account-authorize):not(.page-account-renderprogressivedatacollection) [data-main-content] &gt; .grid,
  .page[class*=page-twrorder-] [data-main-content] &gt; .grid,
  .page[class*=page-twrreturn-] [data-main-content] &gt; .grid {
    padding: 10px 10px 60px 10px;
  }
}
@media (min-width: 768px) {
  .page-login-show [data-main-content],
  .page[class*=page-account-]:not(.page-account-landing):not(.page-account-renderprivacypolicypage):not(.page-account-loginorregister):not(.page-account-authorize):not(.page-account-renderprogressivedatacollection) [data-main-content],
  .page[class*=page-twrorder-] [data-main-content],
  .page[class*=page-twrreturn-] [data-main-content] {
    padding-bottom: 90px;
  }
}

/*
    Privacy policy page, shown for member when the policies updates
*/
.page-account-renderprivacypolicypage {
  padding-bottom: 0;
}
.page-account-renderprivacypolicypage .header-marquee,
.page-account-renderprivacypolicypage .header,
.page-account-renderprivacypolicypage .footer {
  display: none;
}
.page-account-renderprivacypolicypage .policy__footer {
  padding-bottom: 10px;
  background-color: #fff;
}
.page-account-renderprivacypolicypage .policy__footer::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  display: block;
  width: 100%;
  height: 45px;
  margin-top: -45px;
  background-image: linear-gradient(to top, #fff 0%, transparent 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .page-account-renderprivacypolicypage {
    padding: 0 15px 45px 15px;
  }
  .page-account-renderprivacypolicypage ol.list--count {
    max-width: 500px;
    margin-left: auto;
  }
  .page-account-renderprivacypolicypage .grid &gt; .cell.policy__title {
    min-height: 30px;
  }
}
@media (min-width: 768px) {
  .page-account-renderprivacypolicypage .policy__title {
    position: sticky;
    top: 0;
    background-color: #fff;
  }
  .page-account-renderprivacypolicypage .policy__text {
    padding-top: 5px;
  }
}

/*
    Address form: Account address
    NOTE, this is global for: Account address, Shipping address and Billing address
*/
.flex--gutter---small-up .field--postal.hide + * {
  width: 100%;
  padding-left: 0;
}

/*
    Page: My Information
*/
#new-payment-card-form,
.address-book {
  padding: 5px 10px 10px 10px;
  border: 1px solid #000;
  background-color: #e8f0fe;
}
#new-payment-card-form form,
.address-book form {
  width: 100%;
  padding-top: 4px;
}

.payment-card,
.address-book__address {
  border: 1px solid #f2f2f2;
}

.payment-card__header,
.address-book__header {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 5px;
  background-color: #f2f2f2;
}
.payment-card__header &gt; *,
.address-book__header &gt; * {
  padding: 5px 10px;
}
.payment-card__header button,
.payment-card__header a,
.address-book__header button,
.address-book__header a {
  min-width: -moz-max-content;
  min-width: max-content;
}

.payment-card__header-title,
.address-book__header-title {
  overflow: hidden;
  flex: 1 1 auto;
  white-space: nowrap;
}
.payment-card__header-title sup,
.address-book__header-title sup {
  position: sticky;
  z-index: 1;
  top: 2px;
  right: -10px;
  min-width: -moz-max-content;
  min-width: max-content;
  height: 15px;
  padding: 1px 10px 0 10px;
  margin-left: -3px;
  background: linear-gradient(60deg, rgba(242, 242, 242, 0) 0%, #f2f2f2 13px);
}

.address-book__cell:first-child {
  padding-bottom: 11px;
}
.address-book__cell:last-child {
  padding-bottom: 15px;
}

/*
    Page: Orders listing
*/
.ascii-art-wrapper--account-orders .ascii-art {
  margin: 0 auto;
}
@media (min-width: 768px) {
  .ascii-art-wrapper--account-orders.ascii-art-wrapper {
    padding: 0;
  }
}

.order {
  background-color: #f7f7f7;
  box-shadow: inset 0 0 0 1px #f2f2f2;
}
.order + .order {
  margin-top: 30px;
}

@media (min-width: 992px) {
  .order__info {
    grid-row-start: 1;
  }
}

.order__products {
  position: relative;
}

.order__products-item {
  position: relative;
  flex: 0 0 40px;
}
.order__products-item a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  height: auto;
  opacity: 0;
  outline: 1px solid #000;
  outline-offset: -1px;
}
.order__products-item a:focus::after,
.order__products-item a:hover::after {
  opacity: 1;
}

.order__actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
}
.order__actions:not(:last-child) {
  padding-bottom: 0;
}
.order__actions a {
  flex: 0 0 calc(50% - 5px);
}
@media (max-width: 576px) {
  .order__actions a {
    flex: 0 0 auto;
  }
}
@media (min-width: 992px) {
  .order__actions {
    z-index: 1;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 10px 10px 0;
    grid-row-end: span 2;
    grid-row-start: 1;
  }
  .order__actions a {
    flex: 0 0 auto;
  }
}

.order__list {
  padding: 10px;
}
.order__list + .order__list:not([class*=margin-between]) {
  margin-top: -10px;
}

/*
    Page: Order details
*/
/*
    Page: Return
*/
.return-item {
  position: relative;
}
.return-item.active {
  background-color: #e8f0fe;
}
.return-item.active::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  height: auto;
  border: 1px solid #000;
  pointer-events: none;
}

.return-item__header {
  padding: 5px 0;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: -1px;
}
.return-item.active .return-item__header {
  border-bottom: 1px solid #fff;
}
.return-item__header .field,
.return-item__header .field--margin-top {
  position: static;
}
.return-item__header input[type=checkbox] + label::before {
  top: 11px;
  left: 10px;
}
.return-item__header input[type=checkbox]:not(:checked) + label::before {
  background-color: transparent;
}
.return-item .return-item__header label::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: auto;
  height: auto;
}

.return-item__info .info__column &gt; .cell {
  border-top-color: transparent;
}
.return-item.active .return-item__info {
  box-shadow: inset 0 -1px 0 #fff;
}
.return-item__info .no-return {
  color: #dc0000;
  text-transform: none;
}

.return-item__content {
  position: relative;
  z-index: 2;
  padding: 10px;
}
.return-item__content .choices.is--unselected .choices__inner .choices__item {
  color: #0018a8;
}

.submit-return {
  z-index: 1;
}

.payment-card__header[data-account-component-state=deletion] .icon--delete,
.address-book__header[data-account-component-state=deletion] .icon--delete {
  color: #000;
  pointer-events: none;
}
.payment-card__header[data-account-component-state=deletion] .icon--delete::before,
.address-book__header[data-account-component-state=deletion] .icon--delete::before {
  content: url("../icons/delete-black.svg");
}
.payment-card__header:not([data-account-component-state=deletion]) .deletion--show,
.address-book__header:not([data-account-component-state=deletion]) .deletion--show {
  display: none;
}
@media (max-width: 576px) {
  .payment-card__header:not([data-account-component-state=deletion]) .remove-address--label,
  .address-book__header:not([data-account-component-state=deletion]) .remove-address--label {
    display: none;
  }
  .payment-card__header[data-account-component-state=deletion] .deletion--hide,
  .address-book__header[data-account-component-state=deletion] .deletion--hide {
    display: none;
  }
}

.order-placeholder-container {
  width: 100%;
  height: 160px;
}

.order-placeholder-body {
  height: 100px;
}

.order-placeholder-img {
  width: 90px;
  height: 135px;
  background-color: #f2f2f2;
}

.status-bar-wrapper {
  margin: 60px 0 20px;
}

.checkout-login--hr {
  width: 30px;
  transform: translate(0, 20px);
}

/*
    Payment cards section
*/
.payment-card__header {
  margin-bottom: 0;
}

.new-payment-card-label {
  padding: 0;
}

[data-card-error][aria-hidden=true],
.payment-form .alert.alert-danger {
  display: none;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    NOTE:
        - This is implemented for `informationTemplate.isml` which uses these classes.
        - This file is better named as `_page-information.scss` to connect them.
        - The controller is `Page-Show`, which also have some default styling as seen below.
        - The `_page-help.scss` is aimed to be removed and replaced by a more dynamic `informationTemplate.isml`.
*/
.content--information h1 {
  margin-bottom: 30px;
}
.content--information h1,
.content--information h2,
.content--information h3,
.content--information h4,
.content--information h5,
.content--information h6 {
  text-transform: uppercase;
}
.content--information p + ul,
.content--information p + ol,
.content--information ul + p,
.content--information ol + p,
.content--information ul + .subtitle,
.content--information ol + .subtitle {
  margin-top: 15px;
}
.content--information a {
  text-decoration: underline;
}

.content__main .content__section {
  margin-top: 60px;
}
.content__main .content__section::before {
  content: "";
  display: block;
  width: calc(100% + 20px);
  height: 1px;
  margin-bottom: 5px;
  margin-left: -10px;
  background-color: #f2f2f2;
}
.content__main h2,
.content__main h3,
.content__main h4,
.content__main h5,
.content__main h6 {
  margin-bottom: 10px;
}
.content__main h1 + .content__section {
  margin-top: 0;
}
.content__main .subtitle {
  text-decoration: underline;
  text-transform: none;
}
.content__main p + .subtitle {
  margin-top: 20px;
  margin-bottom: 0;
}
.content__main &gt; .list--count {
  padding-left: 0;
}
.content__main &gt; .list--count::before {
  content: none;
}
.content__main &gt; .list--count &gt; li {
  padding-top: 5px;
  margin-top: 60px;
  counter-increment: step-counter;
}
.content__main &gt; .list--count &gt; li ol {
  counter-reset: subCount;
}
.content__main &gt; .list--count &gt; li ol &gt; li {
  counter-increment: subCount;
}
.content__main &gt; .list--count &gt; li ol &gt; li::before {
  content: counters(step-counter, ".") "." counters(subCount, ".");
  position: static;
  padding-right: 10px;
  float: left;
}
.content__main &gt; .list--count &gt; li::before {
  content: counter(step-counter) ".";
  position: static;
  padding-right: 10px;
  float: left;
}
.content__main &gt; .list--count &gt; li::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: calc(100% + 20px);
  height: 1px;
  margin-left: -10px;
  background-color: #f2f2f2;
}
.content__main .action--primary h2 {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .content__main .content__half {
    width: 50%;
  }
  .content__main .asset-sustainability img {
    height: 100%;
    max-height: 90px;
  }
}
/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.modal--bg {
  background-color: rgba(0, 0, 0, 0.35);
}
.modal--bg:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

.modal-dialog {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}
.modal-dialog::-webkit-scrollbar {
  /* WebKit */
  display: none;
  width: 0;
  height: 0;
}
.modal-dialog {
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: auto;
  min-width: 100%;
  max-height: 100%;
  margin: 0;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  pointer-events: all;
  transform: translate(-50%, -50%) !important;
}
@media (min-width: 768px) {
  .modal-dialog {
    min-width: 50%;
    max-height: 60%;
  }
}

.modal-header {
  position: sticky;
  z-index: 15;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background-color: #fff;
  box-shadow: inset 0px -1px 0px 0px #000;
}

.modal-header .as-cell {
  min-height: 45px;
  padding: 4px 9px 18px;
}

.modal-close {
  background-color: transparent;
  color: #0018a8;
  font-size: inherit;
}

.modal-body {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}
.modal-body::-webkit-scrollbar {
  /* WebKit */
  display: none;
  width: 0;
  height: 0;
}
.modal-body {
  padding: 60px 10px;
}

.modal-body--text {
  max-width: 500px;
  padding-bottom: 60px;
  margin: 0 auto;
}
.modal-body--text h1:not(:first-child),
.modal-body--text h2:not(:first-child),
.modal-body--text h3:not(:first-child),
.modal-body--text h4:not(:first-child),
.modal-body--text h5:not(:first-child) {
  margin-top: 20px;
}
.modal-body--text p {
  text-transform: none;
}
.modal-body--text p + p {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .modal-body--text {
    width: 80%;
  }
}

.modal-footer {
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 10px 10px 10px;
  border: none;
}
.modal-footer &gt; * {
  margin: 0;
}
.modal-footer &gt; :first-child:not(button):not(label) {
  width: auto;
  margin-top: 22.5px !important;
  margin-bottom: 30px !important;
}
.modal-footer &gt; button {
  width: calc(50% - 5px);
}
.modal-footer &gt; button + button {
  margin-left: 10px;
}
@media (max-width: 767px) {
  .modal-footer .action {
    font-size: 10px;
  }
}

.modal-footer--sticky {
  position: sticky;
  bottom: 0;
  background-color: #fff;
}
.modal-footer--sticky::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  display: block;
  width: 100%;
  height: 30px;
  margin-top: -30px;
  background-image: linear-gradient(to top, #fff 0%, transparent 100%);
  pointer-events: none;
}

.nested-modal {
  max-height: 100%;
  top: 0;
}

.modal:not(.nested-modal) .modal-footer--sticky {
  width: 490px;
  align-self: center;
}
@media (max-width: 767px) {
  .modal:not(.nested-modal) .modal-footer--sticky {
    width: 100%;
    align-self: unset;
  }
}

iframe[title="Button to launch messaging window"] {
  z-index: 100 !important;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.choices {
  position: relative;
}
.choices.is-open ~ * {
  z-index: 20;
}
.choices[aria-invalid=true].is-open ~ .field__label {
  color: #6b6b6b;
}
.choices:not(.is--unselected) ~ .field__placement--on-active-top {
  top: 7.6px;
}
.choices ~ .field__action img {
  padding: 8px;
}

.choices__input[hidden] {
  position: absolute;
  z-index: -1;
  display: block;
  opacity: 0;
}

.choices__list {
  background-color: #f7f7f7;
  cursor: pointer;
  text-transform: none;
}
.choices__list.choices__list--single {
  height: 60px;
  border: 1px solid #f7f7f7;
  font-size: 18px;
}
[aria-invalid=true] .choices__list.choices__list--single {
  color: #dc0000;
}
[aria-invalid=true] .choices__list.choices__list--single, [aria-invalid=true] .choices__list.choices__list--single:hover {
  border-color: #dc0000;
}

.choices__list.choices__list--single:hover, .is-focused .choices__list.choices__list--single {
  border-color: #000;
}

.choices__item {
  display: block;
  width: 100%;
  height: auto;
  padding: 19px 10px;
  cursor: pointer;
  line-height: 20px;
}
.choices__list--single .choices__item {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 0;
  left: 1px;
  display: block;
  overflow: hidden;
  width: auto;
  height: auto;
  padding-top: 30.4px;
  padding-bottom: 7.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choices__item.choices__item--choice {
  padding-top: 5px;
  padding-bottom: 5px;
  scroll-snap-align: start;
}
.choices__item.choices__item--choice[data-choice-disabled] {
  color: #c2c2c2;
  cursor: not-allowed;
}
.choices__item.choices__item--choice:nth-child(odd) {
  background-color: #fff;
}
.choices__item.choices__item--choice:hover, .choices__item.choices__item--choice.is-highlighted {
  background-color: #e8f0fe;
}
.choices__item.choices__item--choice[data-is-placeholder] {
  display: none;
}
.choices__item.choices__item--choice .choices__item-callout {
  float: right;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .choices__item.choices__item--choice {
    min-height: 45px;
  }
}
.choices__list--big .choices__item.choices__item--choice {
  min-height: 45px;
}
.choices__item.has-no-results {
  pointer-events: none;
}

.choices__list--dropdown {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  overflow: visible;
  max-height: 258px;
}
.choices[aria-expanded=true] .choices__list--dropdown {
  display: block;
}

input.choices__input:not(:focus) {
  padding-top: 30.4px;
  padding-bottom: 7.6px;
  border-color: #000;
}
input.choices__input::-moz-placeholder {
  opacity: 1;
  text-transform: none;
}
input.choices__input::placeholder {
  opacity: 1;
  text-transform: none;
}

.choices__list[role=listbox] {
  overflow: scroll;
  max-height: 198px;
  border: 1px solid #000;
  border-top: 0;
  background-color: #f7f7f7;
  scroll-snap-type: y mandatory;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.pac-container {
  box-sizing: content-box;
  border: 1px solid #000;
  border-radius: 0;
  margin-top: -1px;
  box-shadow: none;
  color: #f2f2f2;
  font-family: inherit;
  font-size: 12px;
  text-transform: none;
}
.pac-container::after {
  display: none;
}

.pac-icon {
  display: none;
}

.pac-item {
  position: relative;
  padding: 5px 10px;
  border-top: 0;
  cursor: pointer;
  line-height: inherit;
}
.pac-item:nth-child(even) {
  background-color: #f7f7f7;
}
.pac-item::after {
  content: attr(data-hover);
  position: absolute;
  top: 50%;
  right: 0;
  display: none;
  padding: 10px;
  color: #0018a8;
  text-transform: uppercase;
  transform: translateY(-50%);
}
.pac-item:hover, .pac-item:focus {
  background-color: #e8f0fe;
}
.pac-item:hover::after, .pac-item:focus::after {
  display: block;
}

.pac-item-query {
  display: block;
  color: #000;
}

.pac-matched {
  color: #0018a8;
  font-weight: normal;
}

.grecaptcha-badge {
  display: none !important;
  visibility: hidden;
}

.recaptcha--disclaimer {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  padding: 10px;
  color: #6b6b6b;
  font-size: 8px;
  line-height: 18px;
}
.state-container--modal .recaptcha--disclaimer {
  position: initial;
}
.recaptcha--disclaimer a {
  text-decoration: underline;
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    @TODO:
    WARNING: THIS FILE HAS MANY SHARED DUPLICATES BETWEEN
    `app_acne_sfra/cartridge/client/default/scss/vendor/_adyen.scss` AND
    `app_acne_sfra/cartridge/client/default/scss/components/checkout/_paymentMethods.scss`

    MAKE SURE TO JOIN THESE FILES IN `_adyen.scss` AND ONLY INLCUDE THIS VENDOR SCRIPT ON PAGES THAT NEEDS IT.
    USE THE VARS... F
*/
/* stylelint-disable selector-class-pattern */
/*
    Adyen payment method icons
*/
.payment-method__icon {
  overflow: hidden;
}

.payment-method__icon--single {
  width: auto;
  max-width: 54px;
  height: 30px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #f7f7f7;
  float: left;
  -o-object-fit: contain;
     object-fit: contain;
}
.payment-method__icon--single[src*=".png"] {
  background-color: #f7f7f7;
}
input:checked + label .payment-method__icon--single {
  box-shadow: none;
}
.payment-method__icon--single + span {
  display: inline-block;
}

.payment-method__icon--multiple {
  width: 22px;
  height: 14px;
  border-radius: 3px;
  margin-left: 20px;
}
label &gt; .payment-method__icon--multiple.field-title-icon {
  margin-right: 0;
  transform: translateY(3px);
}
.payment-method__icon--multiple + .payment-method__icon--multiple.field-title-icon {
  margin-left: 5px;
}

/*
    Tooltip
*/
.adyen-custom-tooltip {
  position: absolute;
  z-index: 2;
  top: 1px;
  right: 0;
  left: 0;
  width: auto;
  height: 100%;
  pointer-events: none;
}
.adyen-custom-tooltip .tooltip,
.adyen-custom-tooltip .tooltip__action {
  position: inherit;
}
.adyen-custom-tooltip .tooltip {
  width: 100%;
  pointer-events: all;
}
.adyen-custom-tooltip .tooltip__content {
  bottom: 100%;
  width: 100%;
  min-width: 0;
  max-width: none;
}
.adyen-custom-tooltip .tooltip__action {
  position: absolute;
  top: 10px;
  right: 0;
  padding: 10px;
}
.adyen-checkout__label:focus-within .adyen-custom-tooltip .tooltip__action, .adyen-checkout__label--focused .adyen-custom-tooltip .tooltip__action, .adyen-checkout__label--filled .adyen-custom-tooltip .tooltip__action, .adyen-checkout__field--valid .adyen-custom-tooltip .tooltip__action, .adyen-checkout__field--error .adyen-checkout__label--filled .adyen-custom-tooltip .tooltip__action {
  top: -2.4px;
}

/*
    Adyen overrides
*/
.adyen-checkout__spinner__wrapper {
  display: none !important;
}

.adyen-checkout__button,
.adyen-checkout__label__text,
.adyen-checkout__radio_group__label::before,
.adyen-checkout__radio_group__label::after,
.adyen-checkout__radio_group__label--selected,
.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::before,
.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::after {
  transition: none !important;
}

.adyen-payment-methods .radio-group__content {
  z-index: 2;
}
.adyen-payment-methods .adyen-checkout__field-wrapper &gt; .adyen-checkout__field:first-child {
  margin-right: 5px;
}
.adyen-payment-methods .adyen-checkout__field-wrapper &gt; .adyen-checkout__field:nth-child(2) {
  margin-left: 5px;
}
@media (max-width: 576px) {
  .adyen-payment-methods .adyen-checkout__field-wrapper {
    flex-direction: column;
  }
  .adyen-payment-methods .adyen-checkout__field-wrapper &gt; .adyen-checkout__field:first-child, .adyen-payment-methods .adyen-checkout__field-wrapper &gt; .adyen-checkout__field:nth-child(2) {
    margin: 0 0 10px 0;
  }
  .adyen-payment-methods .adyen-checkout__field-wrapper &gt; .adyen-checkout__field:last-child {
    margin: 0;
  }
  .adyen-payment-methods .adyen-checkout__field-wrapper .adyen-checkout__field--50 {
    width: 100%;
  }
}
.adyen-payment-methods .adyen-checkout__card-input .adyen-checkout__fieldset--billingAddress,
.adyen-payment-methods .adyen-checkout__card__holderName,
.adyen-payment-methods .adyen-checkout__card__kcp-authentication,
.adyen-payment-methods .adyen-checkout__installments,
.adyen-payment-methods .adyen-checkout__store-details {
  margin-top: 10px;
}
.adyen-payment-methods .adyen-checkout__field {
  position: relative;
  overflow: visible;
  margin-bottom: 10px;
}
.adyen-payment-methods .adyen-checkout__label {
  padding: 0;
}
.adyen-payment-methods .adyen-checkout__helper-text,
.adyen-payment-methods .adyen-checkout__label__text {
  line-height: 20px;
}
.adyen-payment-methods .adyen-checkout__label__text {
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
  color: #6b6b6b;
  font-size: 12px;
  pointer-events: none;
}
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__label__text,
.adyen-payment-methods .adyen-checkout__label--focused .adyen-checkout__label__text,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__label__text,
.adyen-payment-methods .adyen-checkout__field--valid .adyen-checkout__label__text,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__label--filled .adyen-checkout__label__text {
  top: 7.6px;
  color: #6b6b6b;
}
.adyen-payment-methods .adyen-checkout__input-wrapper {
  cursor: text;
}
.adyen-payment-methods .adyen-checkout__input {
  overflow: hidden;
  height: 60px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 0;
  caret-color: #000;
  font-size: 18px;
}
.adyen-payment-methods .adyen-checkout__input iframe {
  opacity: 0;
}
.adyen-payment-methods .adyen-checkout__input::-moz-placeholder {
  color: #6b6b6b !important;
  font-weight: normal !important;
  font-size: 18px;
  opacity: 0;
  text-transform: none;
}
.adyen-payment-methods .adyen-checkout__input::placeholder {
  color: #6b6b6b !important;
  font-weight: normal !important;
  font-size: 18px;
  opacity: 0;
  text-transform: none;
}
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__input,
.adyen-payment-methods .adyen-checkout__input--focus,
.adyen-payment-methods .adyen-checkout__input--focus:hover,
.adyen-payment-methods .adyen-checkout__input--focus:active,
.adyen-payment-methods .adyen-checkout__input--focus:focus,
.adyen-payment-methods .adyen-checkout__input:focus-within,
.adyen-payment-methods .adyen-checkout__input:hover,
.adyen-payment-methods .adyen-checkout__input:active,
.adyen-payment-methods .adyen-checkout__input:active:hover,
.adyen-payment-methods .adyen-checkout__input:focus,
.adyen-payment-methods .adyen-checkout__input:focus:hover {
  border: 1px solid #000;
  box-shadow: none;
  outline: 0;
}
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__input,
.adyen-payment-methods .adyen-checkout__input--focus,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__input,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__label--filled .adyen-checkout__input {
  padding-bottom: 7.6px;
}
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__input iframe,
.adyen-payment-methods .adyen-checkout__input--focus iframe,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__input iframe,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__label--filled .adyen-checkout__input iframe {
  opacity: 1;
}
.adyen-payment-methods .adyen-checkout__checkbox {
  padding: 0;
}
.adyen-payment-methods .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label {
  position: relative;
  min-height: 30px;
  padding: 6px 10px 0 40px;
  font-size: inherit;
}
.adyen-payment-methods .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::before {
  display: none;
}
.adyen-payment-methods .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  display: block;
  width: 29px;
  height: 29px;
  border: 1px solid #000 !important;
  border-radius: 0;
  background-color: #f7f7f7;
  box-shadow: none !important;
}
.adyen-payment-methods .adyen-checkout__checkbox__input:not(:checked) + .adyen-checkout__checkbox__label:hover::after, .adyen-payment-methods .adyen-checkout__checkbox__input:not(:checked) + .adyen-checkout__checkbox__label:focus::after {
  background-color: #e8f0fe !important;
}
.is--tabbing .adyen-payment-methods .adyen-checkout__checkbox__input:focus + .adyen-checkout__checkbox__label::after {
  outline: 1px solid #000;
  outline-offset: -3px;
}
.adyen-payment-methods .adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label::after {
  background-color: #e8f0fe;
  background-image: url("../icons/checked-black.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
}
.adyen-payment-methods .adyen-checkout__dropdown {
  font-size: inherit;
}
.adyen-payment-methods .adyen-checkout__dropdown__button {
  height: 45px;
  padding: 2.5px 9px;
  border: 1px solid transparent;
  border-radius: 0;
  color: #000;
  font-size: inherit;
  transition: none;
}
@media (min-width: 768px) {
  .adyen-payment-methods .adyen-checkout__dropdown__button {
    height: 30px;
    padding: 4px 9px;
  }
}
.adyen-payment-methods .adyen-checkout__dropdown__button::after {
  right: 10px;
  width: 12px;
  background-image: url(../icons/arrow-down.svg);
  background-size: 12px 7px;
}
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__dropdown__button {
  border-color: #dc0000;
  color: #dc0000;
}
.adyen-payment-methods .adyen-checkout__dropdown__button:hover,
.adyen-payment-methods .adyen-checkout__dropdown__button:active,
.adyen-payment-methods .adyen-checkout__dropdown__button:focus,
.adyen-payment-methods .adyen-checkout__dropdown__button--active,
.adyen-payment-methods .adyen-checkout__dropdown__button--active:hover,
.adyen-payment-methods .adyen-checkout__dropdown__button--active:active,
.adyen-payment-methods .adyen-checkout__dropdown__button--active:focus {
  border-color: #000;
  box-shadow: none;
  color: #000;
}
.adyen-payment-methods .adyen-checkout__dropdown__button__icon {
  max-height: 20px;
  border: 1px solid #f2f2f2;
  border-radius: 0;
  margin-right: 21px;
}
.adyen-payment-methods .adyen-checkout__dropdown__list {
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
}
.adyen-payment-methods .adyen-checkout__dropdown__list, .adyen-payment-methods .adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active {
  margin-top: -1px;
}
.adyen-payment-methods .adyen-checkout__dropdown__element {
  position: relative;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  scroll-snap-align: start;
  text-transform: none;
  transition: none;
}
.adyen-payment-methods .adyen-checkout__dropdown__element:not(:first-child) {
  border-top: 1px solid #f2f2f2;
}
.adyen-payment-methods .adyen-checkout__dropdown__element:hover, .adyen-payment-methods .adyen-checkout__dropdown__element:focus {
  background-color: #f7f7f7;
}
.adyen-payment-methods .adyen-checkout__dropdown__element span {
  height: 45px;
  padding: 0 10px 0 45px;
  line-height: 45px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .adyen-payment-methods .adyen-checkout__dropdown__element span {
    height: 30px;
    line-height: 30px;
  }
}
.adyen-payment-methods .adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:active,
.adyen-payment-methods .adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:focus,
.adyen-payment-methods .adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active:hover {
  background: #e8f0fe;
}
.adyen-payment-methods .adyen-checkout__dropdown__element__icon {
  position: absolute;
  top: 50%;
  left: 4px;
  max-height: 20px;
  transform: translateY(-48%);
}
.adyen-payment-methods .adyen-checkout__card__cardNumber__input,
.adyen-payment-methods .adyen-checkout__card__cvc__input {
  padding-left: 40px;
}
.adyen-payment-methods .adyen-checkout__card__cardNumber__brandIcon,
.adyen-payment-methods .adyen-checkout__field__cvc--back-hint,
.adyen-payment-methods .adyen-checkout__field__cvc--front-hint {
  top: 33.4px;
  right: auto;
  left: 10px;
  display: block;
  margin: 0;
  opacity: 0 !important;
  pointer-events: none;
  transform: none;
}
.adyen-payment-methods .adyen-checkout__card__cardNumber__brandIcon,
.adyen-payment-methods .adyen-checkout__card__cardNumber__brandIcon svg,
.adyen-payment-methods .adyen-checkout__field__cvc--back-hint,
.adyen-payment-methods .adyen-checkout__field__cvc--back-hint svg,
.adyen-payment-methods .adyen-checkout__field__cvc--front-hint,
.adyen-payment-methods .adyen-checkout__field__cvc--front-hint svg {
  width: 22px;
  height: 14px;
  border-radius: 3px;
}
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__card__cardNumber__brandIcon,
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__card__cardNumber__brandIcon svg,
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__field__cvc--back-hint,
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__field__cvc--back-hint svg,
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__field__cvc--front-hint,
.adyen-payment-methods .adyen-checkout__label:focus-within .adyen-checkout__field__cvc--front-hint svg,
.adyen-payment-methods .adyen-checkout__label--focused .adyen-checkout__card__cardNumber__brandIcon,
.adyen-payment-methods .adyen-checkout__label--focused .adyen-checkout__card__cardNumber__brandIcon svg,
.adyen-payment-methods .adyen-checkout__label--focused .adyen-checkout__field__cvc--back-hint,
.adyen-payment-methods .adyen-checkout__label--focused .adyen-checkout__field__cvc--back-hint svg,
.adyen-payment-methods .adyen-checkout__label--focused .adyen-checkout__field__cvc--front-hint,
.adyen-payment-methods .adyen-checkout__label--focused .adyen-checkout__field__cvc--front-hint svg,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__card__cardNumber__brandIcon,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__card__cardNumber__brandIcon svg,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__field__cvc--back-hint,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__field__cvc--back-hint svg,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__field__cvc--front-hint,
.adyen-payment-methods .adyen-checkout__label--filled .adyen-checkout__field__cvc--front-hint svg,
.adyen-payment-methods .adyen-checkout__field--valid .adyen-checkout__card__cardNumber__brandIcon,
.adyen-payment-methods .adyen-checkout__field--valid .adyen-checkout__card__cardNumber__brandIcon svg,
.adyen-payment-methods .adyen-checkout__field--valid .adyen-checkout__field__cvc--back-hint,
.adyen-payment-methods .adyen-checkout__field--valid .adyen-checkout__field__cvc--back-hint svg,
.adyen-payment-methods .adyen-checkout__field--valid .adyen-checkout__field__cvc--front-hint,
.adyen-payment-methods .adyen-checkout__field--valid .adyen-checkout__field__cvc--front-hint svg,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__card__cardNumber__brandIcon,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__card__cardNumber__brandIcon svg,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__field__cvc--back-hint,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__field__cvc--back-hint svg,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__field__cvc--front-hint,
.adyen-payment-methods .adyen-checkout__field--error .adyen-checkout__field__cvc--front-hint svg {
  display: block !important;
  opacity: 1 !important;
}
.adyen-payment-methods .adyen-checkout__field--valid rect.adyen-checkout__card__cvc__hint__location {
  stroke: #007701;
}
.adyen-payment-methods .adyen-checkout-input__inline-validation--valid {
  top: 33.4px;
  right: 10px;
  text-align: right;
  transform: none;
}
.adyen-payment-methods .adyen-checkout-input__inline-validation--valid img {
  display: none;
}
.adyen-payment-methods .adyen-checkout-input__inline-validation--valid::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px;
  background-image: url("../icons/checked-green.svg");
}

.adyen-checkout__field--error .adyen-checkout__error-text {
  padding: 5px 10px 0 10px;
  margin: 0;
  color: #dc0000;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.adyen-checkout__field--error .adyen-checkout-input__inline-validation--invalid {
  display: none;
}
.adyen-checkout__field--error .adyen-checkout__label__text {
  color: #dc0000 !important;
}
.adyen-checkout__field--error .adyen-checkout__input {
  border-color: #dc0000 !important;
}

/* stylelint-enable selector-class-pattern */
/*
    Payment methods config
*/
.adyen-item--saved-card .adyen-checkout__field-wrapper &gt; .adyen-checkout__field {
  width: auto;
}
.adyen-item--saved-card .adyen-checkout__field-wrapper &gt; .adyen-checkout__field:first-child, .adyen-item--saved-card .adyen-checkout__field-wrapper &gt; .adyen-checkout__field:nth-child(2) {
  margin: 0;
}
.adyen-item--saved-card .adyen-checkout__field.adyen-checkout__field__cvc {
  width: 100%;
}
.adyen-item--saved-card .adyen-checkout__label--disabled {
  display: none;
}
@media (min-width: 768px) {
  .adyen-item--saved-card {
    display: flex;
    flex-direction: row;
    justify-items: stretch;
  }
  .adyen-item--saved-card input:checked + label, .adyen-item--saved-card input:checked ~ .radio-group__content {
    width: 50%;
  }
  .adyen-item--saved-card input:checked + label, .adyen-item--saved-card input:checked + label.radio-group--has-content {
    border-right: 0;
    border-bottom: 1px solid #000;
  }
  .adyen-item--saved-card input:checked + label.radio-group--has-content ~ .radio-group__content {
    padding-top: 10px;
    border-top: 1px solid #000;
    border-left: 0;
  }
}

[data-checkout-section=paymentMethods] .payment-card {
  /* stylelint-disable-next-line selector-class-pattern */
}
[data-checkout-section=paymentMethods] .payment-card .paymentMethod_img {
  margin-right: 0;
  margin-left: 0;
}
@media (max-width: 576px) {
  [data-checkout-section=paymentMethods] #card .adyen-checkout__field-wrapper {
    flex-direction: column;
  }
  [data-checkout-section=paymentMethods] #card .adyen-checkout__field {
    width: 100%;
    margin-left: 0 !important;
  }
  [data-checkout-section=paymentMethods] #card .adyen-checkout__field__exp-date {
    margin-bottom: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  [data-checkout-section=paymentMethods] .payment-method__icon {
    display: none;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
/*
    Default the styling for Apple Pay
*/
/* stylelint-disable-next-line selector-type-no-unknown */
isapplepay:empty {
  display: none;
}

button.dw-apple-pay-button {
  width: 100%;
  -webkit-appearance: none;
}
button.dw-apple-pay-button, button.dw-apple-pay-button:hover, button.dw-apple-pay-button:active {
  min-height: 43px;
  border-radius: 0;
  margin: 0;
  background-color: #fff;
  background-image: -webkit-named-image(apple-pay-logo-black);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 14px;
}
button.dw-apple-pay-button:not(.button), button.dw-apple-pay-button:hover:not(.button), button.dw-apple-pay-button:active:not(.button) {
  border: 0;
}
@media (min-width: 768px) {
  button.dw-apple-pay-button, button.dw-apple-pay-button:hover, button.dw-apple-pay-button:active {
    min-height: 28px;
  }
}

.apple-pay-wrapper, .apple-pay-wrapper.cell {
  display: none;
}

@supports (-webkit-appearance: -apple-pay-button) {
  .apple-pay-wrapper, .apple-pay-wrapper.cell {
    display: block;
  }
}
/*
    Minicart
*/
.minicart .apple-pay-wrapper {
  padding: 0 10px 10px;
  background-color: #fff;
}
.minicart .apple-pay-wrapper &gt; button {
  min-height: 45px;
  margin-top: 10px;
}
.minicart .apple-pay-wrapper &gt; .action--secondary {
  padding: 0;
}

.minicart[data-cart-state=loading] [data-off-cart-state=loading] + .apple-pay-wrapper &gt; .action--secondary,
.minicart:not([data-cart-state=loading]) [data-on-cart-state=loading] + .apple-pay-wrapper &gt; .action--secondary,
.minicart[data-cart-state=empty] [data-off-cart-state=empty] + .apple-pay-wrapper &gt; .action--secondary,
.minicart:not([data-cart-state=empty]) [data-on-cart-state=empty] + .apple-pay-wrapper &gt; .action--secondary {
  border: none;
}

/*
    PDP
*/
.pdp-apple-pay-wrapper.cell {
  padding: 10px;
  border: 0;
}
@media (min-width: 768px) {
  .pdp-apple-pay-wrapper.cell {
    padding: 0;
  }
}

.apple-pay-size-warning {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  display: block;
  display: none;
  height: auto;
  padding: 4px 9px;
  background-color: #fff;
  cursor: pointer;
}

.pdp-apple-pay {
  position: relative;
}
.pdp-apple-pay.action--secondary {
  padding: 0;
}
.pdp-apple-pay.as-disabled {
  outline: 0;
}
.pdp-apple-pay.as-disabled:active {
  border-color: #dc0000;
  color: #dc0000;
}
.pdp-apple-pay.as-disabled:hover .apple-pay-size-warning {
  display: block;
}
@media (min-width: 992px) {
  .pdp-apple-pay {
    margin-top: 4px;
  }
}

/*
    Main
    Only to be used with global components and assets.
    Make sure to scope local components and assets to their sepratae pages.
*/
.ot-fade-in,
#onetrust-banner-sdk {
  animation: none !important;
  transition: none !important;
}

html #onetrust-consent-sdk * {
  box-sizing: border-box !important;
}
html #onetrust-consent-sdk *:focus, html #onetrust-consent-sdk:focus {
  outline: none !important;
}
html #onetrust-consent-sdk #onetrust-banner-sdk {
  /* stylelint-disable-next-line selector-class-pattern */
}
html #onetrust-consent-sdk #onetrust-banner-sdk.otCenterRounded {
  top: 30vh;
  width: 100%;
  min-width: auto;
  max-width: 375px;
  border-radius: 0;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-policy {
  margin-top: 0;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-policy-title {
  width: 100%;
  height: 45px;
  padding: 5px 10px;
  background-color: #fff;
  box-shadow: inset 0px -1px 0px 0px #000;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.025em;
  line-height: 20px;
  text-transform: uppercase;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-policy-text {
  padding: 15px 20px 25px;
  margin: 0;
  float: none;
  font-size: 12px;
  letter-spacing: 0.025em;
  line-height: 20px;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-button-group-parent {
  padding: 10px;
}
html #onetrust-consent-sdk #onetrust-banner-sdk .banner-actions-container {
  width: 100%;
  border-radius: 0;
  float: none;
  text-align: center;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-accept-btn-handler {
  width: 100%;
  min-width: unset;
  max-width: unset;
  height: 45px;
  padding: 13px 12px 12px;
  border-radius: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 20px;
  opacity: 1;
  text-decoration: none !important;
  text-transform: uppercase;
  border: 1px solid #000;
  background-color: #000;
  margin-bottom: 10px;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-accept-btn-handler:hover {
  opacity: 1;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-accept-btn-handler:hover {
  border-color: #0018a8 !important;
  background-color: #0018a8 !important;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-pc-btn-handler {
  width: 100%;
  min-width: unset;
  max-width: unset;
  height: 45px;
  padding: 13px 12px 12px;
  border-radius: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 20px;
  opacity: 1;
  text-decoration: none !important;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background-color: #fff;
  color: #000;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-pc-btn-handler:hover {
  opacity: 1;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-pc-btn-handler:hover {
  color: #0018a8;
}
html #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-pc-btn-handler:focus-visible {
  text-decoration: underline;
}
html #onetrust-consent-sdk #onetrust-pc-sdk {
  /* stylelint-disable-next-line selector-class-pattern */
}
html #onetrust-consent-sdk #onetrust-pc-sdk.otPcCenter {
  top: 12.5vh;
  width: 100%;
  min-width: auto;
  max-width: 480px;
  height: 75vh;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-header,
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-logo,
html #onetrust-consent-sdk #onetrust-pc-sdk #close-pc-btn-handler.ot-close-icon {
  height: auto;
  background-image: none !important;
  font-size: 12px;
  font-weight: 400;
  line-height: inherit;
  text-transform: uppercase;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-header {
  height: 45px;
  padding: 5px 10px;
  border-bottom: none;
  background-color: #fff;
  box-shadow: inset 0px -1px 0px 0px #000;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-logo {
  width: auto;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #close-pc-btn-handler.ot-close-icon {
  top: 5px;
  right: 10px;
  width: 90px;
  color: #0018a8;
  text-align: right;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-content {
  top: 45px;
  bottom: 66px;
  width: 100%;
  padding: 0;
  margin: 0;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title {
  padding: 25px 30px 10px;
  margin: 0;
  float: none;
  font-size: 18px;
  font-weight: 400;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc {
  padding: 10px 30px 0;
  font-size: 12px;
  line-height: 20px;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc a {
  text-decoration: none;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout .ot-subgrp-cntr {
  width: 100%;
  padding: 0;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout .ot-subgrp-cntr li.ot-subgrp {
  margin: 5px 0 0;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #accept-recommended-btn-handler {
  width: 100%;
  min-width: unset;
  max-width: unset;
  height: 45px;
  padding: 13px 12px 12px;
  border-radius: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 20px;
  opacity: 1;
  text-decoration: none !important;
  text-transform: uppercase;
  border: 1px solid #000;
  background-color: #000;
  width: calc(100% - 30px);
  margin: 0 10px 0 20px;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #accept-recommended-btn-handler:hover {
  opacity: 1;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #accept-recommended-btn-handler:hover {
  border-color: #0018a8 !important;
  background-color: #0018a8 !important;
}
html #onetrust-consent-sdk #onetrust-pc-sdk #ot-category-title {
  padding: 15px 30px 10px;
  border-top: 1px solid #f2f2f2;
  font-size: 18px;
  font-weight: 400;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item {
  padding: 0 15px 0 30px;
  border: none;
  border-radius: 0;
  border-top: 1px solid #f2f2f2;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item:first-of-type {
  margin: 0;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-cat-header {
  margin: 0;
  color: #0018a8;
  font-size: 12px;
  font-weight: 100;
  text-transform: uppercase;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-switch {
  width: 40px;
  height: 20px;
  outline: none !important;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-switch .ot-switch-nob {
  background-color: #c2c2c2;
  /* stylelint-disable max-nesting-depth */
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-switch .ot-switch-nob::before {
  bottom: 0;
  width: 18px;
  height: 18px;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-plus-minus,
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-arw-cntr {
  margin: -6px 0 0 !important;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-acc-grpdesc {
  width: 100%;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item .ot-always-active {
  color: #6b6b6b;
  font-size: 12px;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-footer {
  padding: 10px 20px;
  background-color: #fff;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .save-preference-btn-handler.onetrust-close-btn-handler {
  width: 100%;
  min-width: unset;
  max-width: unset;
  height: 45px;
  padding: 13px 12px 12px;
  border-radius: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 20px;
  opacity: 1;
  text-decoration: none !important;
  text-transform: uppercase;
  border: 1px solid #000 !important;
  background-color: #fff !important;
  color: #000 !important;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .save-preference-btn-handler.onetrust-close-btn-handler:hover {
  opacity: 1;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .save-preference-btn-handler.onetrust-close-btn-handler:hover {
  border-color: #0018a8 !important;
  color: #0018a8 !important;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .save-preference-btn-handler.onetrust-close-btn-handler:focus-visible {
  text-decoration: underline;
}
html #onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-footer-logo {
  display: none;
}
@media (max-width: 576px) {
  html #onetrust-consent-sdk #onetrust-banner-sdk {
    /* stylelint-disable-next-line selector-class-pattern */
  }
  html #onetrust-consent-sdk #onetrust-banner-sdk.otCenterRounded {
    position: fixed;
    top: unset;
    bottom: 0;
    width: 100%;
    max-width: unset;
    transform: unset;
  }
  html #onetrust-consent-sdk #onetrust-pc-sdk {
    /* stylelint-disable-next-line selector-class-pattern */
  }
  html #onetrust-consent-sdk #onetrust-pc-sdk.otPcCenter {
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100vh;
  }
  html #onetrust-consent-sdk #onetrust-pc-sdk .ot-pc-logo,
  html #onetrust-consent-sdk #onetrust-pc-sdk #close-pc-btn-handler.ot-close-icon {
    height: auto;
    line-height: inherit;
  }
  html #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-content {
    top: 45px;
  }
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy {
  font-size: 12px !important;
}

#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy #cookie-policy-description,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-sdk-cookie-policy-group-desc,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy .ot-table-header,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy a,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy span,
#ot-sdk-cookie-policy-v2.ot-sdk-cookie-policy td {
  font-size: inherit !important;
}

#ot-sdk-btn.ot-sdk-show-settings:hover {
  background-color: #000 !important;
  color: #fff !important;
}

#ot-sdk-btn.ot-sdk-show-settings {
  border-color: #000 !important;
  color: #000 !important;
}

#onetrust-reject-all-handler {
  min-width: 1px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: #0018a8 !important;
  font-size: 12px !important;
  font-weight: normal !important;
}

.ot-sdk-row:not(.ot-loaded) #onetrust-button-group-parent &gt; * {
  opacity: 0;
}
.ot-sdk-row:not(.ot-loaded) p#onetrust-policy-text {
  color: transparent !important;
}
.ot-sdk-row:not(.ot-loaded) p#onetrust-policy-text,
.ot-sdk-row:not(.ot-loaded) #onetrust-button-group-parent {
  animation: moveBackground 1100ms linear forwards infinite;
  background: linear-gradient(to right, #f7f7f7 0%, #f2f2f2 15%, #f2f2f2 22%, #f7f7f7 30%);
  background-size: 300% 100%;
  color: transparent;
  will-change: background-position, color;
}

#onetrust-banner-sdk .has-reject-all-button .banner-actions-container,
#onetrust-reject-all-handler {
  width: auto !important;
  max-width: 100% !important;
}</pre></body></html>