@charset "UTF-8";
/*
 * Variables, Mixins, Functions
 * ---------------------------- */
/*
 *  First define your SASS variables
 *  Only then they can be used as CSS variables in the :root{}
 */
/*
 *  Define all CSS root variables
 *  Watch the syntax, this is needed to embed SASS variables into CSS root variables.
 */
:root {
  --color-grey-200: #F4F1EF;
  --color-grey-300: #B4B4B4;
  --color-grey-400: #DDDDDD;
  --color-grey-500: #7E7E7E;
  --color-grey-600: #8D8D8D;
  --color-grey-700: #6B6B6B;
  --color-grey-800: #272727;
  --color-red-500: #BA0032;
  --color-red-900: #F0D8D6;
  --color-green-500: #1AA540;
  --color-blue-500: #013FBE;
  --color-blue-900: #1D2145;
  --color-blue-1000: #2A2B33;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --font-proxima: proxima-nova, "Helvetica", sans-serif;
  --font-helvetica: "HelveticaNeue", "Poppins", "Helvetica", sans-serif;
  --grid-gutter-x: 4px;
  --grid-col-sm: repeat(4, 1fr);
  --grid-col-lg: repeat(12, 1fr);
  --cubic-bezier: cubic-bezier(.5, 0, .5, 1);
}
/*
 *	Define a Theme-colors variable.
 *	This can be used to generate a bunch of styles at once
 *	Such as all alert messages on the site
 */
/*
 * Icon sizes
 */
/*
 * Tailwind variables
 * ======================================
 * Enables selected Tailwind classes as SASS variables.
 */
/*

















Bootstrap variables
==================================================
Contains all overrides of bootstra variables.

https://getbootstrap.com/docs/4.3/getting-started/theming/#variabls
*/
/*
 *  Media query
 */
/*
 *  Set aspect ratio for a div and its inner children
 */
/*
 *  Call an psuedo icon after an element.
 */
/*
 *  Mixin for button backgrounds
 *  Default, Hover and Active state
 */
/*
 *  Mixin for buttons
 */
/*
 *	Create different alert styles used throughout the site
 */
/*
 * Vendors
 * ---------------------------- */
/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*, ::before, ::after {
  box-sizing: border-box;
}
/**
Use a more readable tab size (opinionated).
*/
html {
  -moz-tab-size: 4;
  tab-size: 4;
}
/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/*
Sections
========
*/
/**
Remove the margin in all browsers.
*/
body {
  margin: 0;
}
/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
}
/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
/**
Add the correct font weight in Edge and Safari.
*/
b, strong {
  font-weight: 700;
}
/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
}
/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button, input, optgroup, select, textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/
button, select {
  /* 1 */
  text-transform: none;
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: 2px;
  /* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */
/**
 * Removes the default spacing and border for appropriate elements.
 */
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}
button {
  background-color: transparent;
  background-image: none;
}
fieldset {
  margin: 0;
  padding: 0;
}
ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/**
 * Tailwind custom reset styles
 */
/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */
html {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 1 */
  line-height: 1.5;
  /* 2 */
}
/**
 * Inherit font-family and line-height from `html` so users can set them as
 * a class directly on the `html` element.
 */
body {
  font-family: inherit;
  line-height: inherit;
}
/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */
*, ::before, ::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}
/*
 * Ensure horizontal rules are visible by default
 */
hr {
  border-top-width: 1px;
}
/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */
img {
  border-style: solid;
}
textarea {
  resize: vertical;
}
input::placeholder, textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
button, [role="button"] {
  cursor: pointer;
}
/**
 * Override legacy focus reset from Normalize with modern Firefox focus styles.
 *
 * This is actually an improvement over the new defaults in Firefox in our testing,
 * as it triggers the better focus styles even for links, which still use a dotted
 * outline in Firefox by default.
 */
:-moz-focusring {
  outline: auto;
}
table {
  border-collapse: collapse;
}
/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */
a {
  color: inherit;
  text-decoration: inherit;
}
/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */
button, input, optgroup, select, textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}
/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */
pre, code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/**
 * 1. Make replaced elements `display: block` by default as that's
 *    the behavior you want almost all of the time. Inspired by
 *    CSS Remedy, with `svg` added as well.
 *
 *    https://github.com/mozdevs/cssremedy/issues/14
 *
 * 2. Add `vertical-align: middle` to align replaced elements more
 *    sensibly by default when overriding `display` by adding a
 *    utility like `inline`.
 *
 *    This can trigger a poorly considered linting error in some
 *    tools but is included by design.
 *
 *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
 */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}
/**
 * Constrain images and videos to the parent width and preserve
 * their intrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */
img, video {
  max-width: 100%;
  height: auto;
}
/**
 * Ensure the default browser behavior of the `hidden` attribute.
 */
[hidden] {
  display: none;
}
*, ::before, ::after {
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}
.tns-outer {
  padding: 0 !important;
}
.tns-outer [hidden] {
  display: none !important;
}
.tns-outer [aria-controls], .tns-outer [data-action] {
  cursor: pointer;
}
.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
}
.tns-slider > .tns-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tns-horizontal.tns-subpixel {
  white-space: nowrap;
}
.tns-horizontal.tns-subpixel > .tns-item {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}
.tns-horizontal.tns-no-subpixel:after {
  content: "";
  display: table;
  clear: both;
}
.tns-horizontal.tns-no-subpixel > .tns-item {
  float: left;
}
.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
  margin-right: -100%;
}
.tns-no-calc {
  position: relative;
  left: 0;
}
.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px;
}
.tns-gallery > .tns-item {
  position: absolute;
  left: -100%;
  -webkit-transition: transform 0s, opacity 0s;
  -moz-transition: transform 0s, opacity 0s;
  transition: transform 0s, opacity 0s;
}
.tns-gallery > .tns-slide-active {
  position: relative;
  left: auto !important;
}
.tns-gallery > .tns-moving {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  transition: all 0.25s;
}
.tns-autowidth {
  display: inline-block;
}
.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6;
}
.tns-lazy-img.tns-complete {
  opacity: 1;
}
.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s;
}
.tns-ovh {
  overflow: hidden;
}
.tns-visually-hidden {
  position: absolute;
  left: -10000em;
}
.tns-transparent {
  opacity: 0;
  visibility: hidden;
}
.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0;
}
.tns-normal, .tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}
.tns-vpfix {
  white-space: nowrap;
}
.tns-vpfix > div, .tns-vpfix > li {
  display: inline-block;
}
.tns-t-subp2 {
  margin: 0 auto;
  width: 310px;
  position: relative;
  height: 10px;
  overflow: hidden;
}
.tns-t-ct {
  width: 2333.3333333333%;
  width: -webkit-calc(100% * 70 / 3);
  width: -moz-calc(100% * 70 / 3);
  width: calc(100% * 70 / 3);
  position: absolute;
  right: 0;
}
.tns-t-ct:after {
  content: "";
  display: table;
  clear: both;
}
.tns-t-ct > div {
  width: 1.4285714286%;
  width: -webkit-calc(100% / 70);
  width: -moz-calc(100% / 70);
  width: calc(100% / 70);
  height: 10px;
  float: left;
}
/*
** Slick slider for homepage
**/
.slick-prev, .slick-next {
  width: 44px;
  height: 44px;
  font-size: 0;
  color: transparent;
  z-index: 2;
  background-color: white;
  border: 1px solid white;
  transition: all 0.3s ease;
}
.slick-prev:hover:not(:disabled), .slick-next:hover:not(:disabled) {
  background-color: #ebebeb;
  border: 1px solid #ebebeb;
}
.slick-prev:active:not(:disabled), .slick-next:active:not(:disabled) {
  background-color: #bfbfbf;
  border: 1px solid #bfbfbf;
}
.slick-prev:disabled, .slick-next:disabled {
  cursor: default;
}
.slick-prev.slick-disabled::after, .slick-next.slick-disabled::after {
  opacity: 0.4;
}
/*
 * Slick button style
 */
.slick-buttons-bottom-right .slick-prev, .slick-buttons-bottom-right .slick-next {
  position: absolute;
  z-index: 10;
  bottom: 0;
}
.slick-buttons-bottom-right .slick-prev {
  right: 44px;
}
.slick-buttons-bottom-right .slick-next {
  right: 0;
}
/*
 * Arrows middle-placed
 */
.slick-arrows-center .slick-prev, .slick-arrows-center .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.slick-arrows-center .slick-prev {
  left: 0;
}
.slick-arrows-center .slick-next {
  right: 0;
}
/*
 * arrows & animations
 */
.slick-prev::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/bundles/ndjansennoytheme/nodots/icons/chevron-left.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s var(--cubic-bezier), opacity 0.5s var(--cubic-bezier);
}
.slick-next::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/bundles/ndjansennoytheme/nodots/icons/chevron-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s var(--cubic-bezier), opacity 0.5s var(--cubic-bezier);
}
.slick-prev::before, .slick-next::before {
  opacity: 0;
  transition: opacity 0.3s var(--cubic-bezier), transform 0.3s var(--cubic-bezier);
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -25%) scaleX(0);
  transform-origin: center;
  background-size: cover;
  content: "";
  width: 18px;
  height: 2px;
  background-color: black;
}
.slick-prev:not(.slick-disabled):hover:after {
  transform: translateX(-6px);
}
.slick-prev:not(.slick-disabled):hover:before {
  opacity: 1;
  transform: translate(-50%, -25%) scaleX(1);
}
.slick-next:not(.slick-disabled):hover:after {
  transform: translateX(6px);
}
.slick-next:not(.slick-disabled):hover:before {
  opacity: 1;
  transform: translate(-50%, -25%) scaleX(1);
}
.slick-arrow.slick-disabled {
  opacity: 0.3;
  cursor: auto;
}
.slick-arrow.slick-disabled:hover {
  transform: none;
}
.slick-dots {
  display: flex;
  grid-gap: 2px;
  flex-wrap: wrap;
  justify-content: right;
  pointer-events: none;
}
.slick-dots button {
  font-size: 0;
  color: transparent;
  display: block;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  border: 2px solid white;
  box-sizing: content-box;
  background-color: #DDDDDD;
  border: 1px solid #DDDDDD;
  transition: all 0.3s ease;
}
.slick-dots button:hover:not(:disabled) {
  background-color: #c9c9c9;
  border: 1px solid #c9c9c9;
}
.slick-dots button:active:not(:disabled) {
  background-color: #9d9d9d;
  border: 1px solid #9d9d9d;
}
.slick-dots button:disabled {
  cursor: default;
}
.slick-dots button[aria-selected="true"] {
  background-color: black;
}
@media (min-width: 1536px) {
  .slick-buttons-bottom-right .slick-prev, .slick-buttons-bottom-right .slick-next {
    width: 64px;
    height: 64px;
  }
  .slick-buttons-bottom-right .slick-prev {
    right: 64px;
  }
}
/*
 * SLICK SLIDE INFINITE
 * Set cursor-pointer for slides on the infinite slick slider (slide both ways)
 */
.hero-slick .slick-slide:not(.slick-active) {
  cursor: pointer;
}
/*
 * SLICK SLIDE SPACERS
 * Premade classes to add spacing in between slides
 * According to the Tailwind utility classes
 */
.slick-space-1 .slick-slide {
  margin: 0 4px;
}
.slick-space-1 .slick-list {
  margin: 0 -4px;
}
.slick-space-2 .slick-slide {
  margin: 0 8px;
}
.slick-space-2 .slick-list {
  margin: 0 -8px;
}
/*
 * SLICK SLIDE PADDING
 * Premade classes to ensure a padding-left, while maintaining proper slides (no cutoff)
 * According to Tailwind utility classes
 */
@media (max-width: 767px) {
  .slick-padding-left-8 {
    padding-left: 32px;
  }
  .slick-padding-left-8 .slick-list {
    margin-left: -32px;
  }
  .slick-padding-left-8 .slick-track {
    left: 32px !important;
  }
  .slick-padding-left-16 {
    padding-left: 64px;
  }
  .slick-padding-left-16 .slick-list {
    margin-left: -64px;
  }
  .slick-padding-left-16 .slick-track {
    left: 64px !important;
  }
}
/*
 * SLICK SLIDE EQUAL HEIGHT
 */
.slick-equal-height .slick-track {
  display: flex !important;
}
.slick-equal-height .slick-slide {
  height: inherit !important;
  background-color: #F4F1EF;
}
.slick-equal-height .slick-slide > div {
  display: block;
}
/*
 * EMPTY PIXEL HACK
 * Remove 'empty' pixels below the slick-track
 */
.slick-track {
  line-height: 0;
}
.slick-track > .slick-slide {
  line-height: 1rem;
}
.slick-images .slick-slide > div {
  line-height: 0;
}
/*
 * LAYOUT SHIFT HACK
 * Prevent page load layout shift when Slick is not initialized yet.
 */
.slick-init:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}
.slick-init:not(.slick-initialized) > * {
  flex-shrink: 0;
  width: 100%;
}
/*
 *
 *
 *
 * Default Slick Slider styles
 * Do not edit the below styles
 *
 *
 *
 */
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
  width: 100%;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.payment-method-label {
  display: flex;
  grid-gap: 8px;
}
/*
 * Base
 * ---------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height, 0px) + 16px);
  /* stylelint-disable-next-line selector-class-pattern -- allow BEM here as it is a generated class name from the administration
	 * sw-text-editor component adds a column selector to configure the width of table columns
	 * this must no be shown in the storefront as it breaks table layouts
	 */
}
html.no-scroll {
  position: relative;
  overflow: hidden;
}
html .sw-text-editor-table__col-selector {
  display: none;
}
body {
  background-color: #fff;
}
/*
 * Below is required for Shopware functionalities such as the Flyout menu
 * used by viewport detection helper to determine the current viewport
 */
html::before {
  position: absolute;
  top: -100%;
  font-size: 0;
}
@media (max-width: 575.98px) {
  html::before {
    content: "xs";
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  html::before {
    content: "sm";
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  html::before {
    content: "md";
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  html::before {
    content: "lg";
  }
}
@media (min-width: 1200px) {
  html::before {
    content: "xl";
  }
}
/*
 * Shopware 6.6: the ViewportDetection helper reads the CSS variable
 * --sw-current-breakpoint instead of the html::before content above.
 * Same breakpoints as the ::before marker; without this every
 * ViewportDetection.isXS()/isSM()/... check returns false.
 */
@media (max-width: 575.98px) {
  :root {
    --sw-current-breakpoint: "xs";
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --sw-current-breakpoint: "sm";
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --sw-current-breakpoint: "md";
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --sw-current-breakpoint: "lg";
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root {
    --sw-current-breakpoint: "xl";
  }
}
@media (min-width: 1400px) {
  :root {
    --sw-current-breakpoint: "xxl";
  }
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("/bundles/ndcoeftheme/assets/font/helvetica/HelveticaNeueBoldCondensed.woff2") format("woff2"), url("/bundles/ndcoeftheme/assets/font/helvetica/HelveticaNeueBoldCondensed.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  font-stretch: condensed;
}
/*
 *  Base typography
 *  Body
 *  h1, h2, h3, h4, h5
 *  p and paragraph text
 */
body {
  color: var(--color-grey-800);
  font-family: var(--font-proxima);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, .h1 {
  font-size: 48px;
  line-height: 52px;
  font-weight: 300;
  font-family: var(--font-proxima);
}
@media (min-width: 1280px) {
  h1, .h1 {
    font-size: 60px;
    line-height: 80px;
  }
}
h2, .h2 {
  font-size: 32px;
  line-height: 44px;
  font-weight: 300;
  font-family: var(--font-proxima);
}
@media (min-width: 1280px) {
  h2, .h2 {
    font-size: 48px;
    line-height: 52px;
  }
}
.h2-small {
  font-size: 24px;
  line-height: 34px;
  font-weight: 300;
  font-family: var(--font-proxima);
}
@media (min-width: 1280px) {
  .h2-small {
    font-size: 40px;
    line-height: 48px;
  }
}
h3, .h3 {
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
  font-stretch: condensed;
  font-family: var(--font-helvetica);
}
@media (min-width: 1280px) {
  h3, .h3 {
    font-size: 32px;
    line-height: 40px;
  }
}
h4, .h4 {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  font-stretch: condensed;
  font-family: var(--font-helvetica);
}
@media (min-width: 1280px) {
  h4, .h4 {
    font-size: 16px;
    line-height: 24px;
  }
}
h5, .h5 {
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 1280px) {
  h5, .h5 {
    font-size: 16px;
  }
}
.helvetica {
  font-family: var(--font-helvetica);
  text-transform: uppercase;
  font-stretch: condensed;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.paragraph, p {
  line-height: 28px;
}
@media (min-width: 1280px) {
  body {
    font-size: 16px;
    letter-spacing: 0.64px;
  }
  .paragraph, p {
    line-height: 28px;
  }
}
.wysiwyg {
  line-height: 28px;
  font-weight: 300;
}
.wysiwyg a {
  text-decoration: underline;
  transition: 0.2s color var(--cubic-bezier);
}
.wysiwyg a:hover, .wysiwyg a:active {
  color: purple;
}
.wysiwyg ul {
  list-style: disc;
  margin-block: 1em;
  padding-inline-start: 1.5em;
}
.wysiwyg ol {
  list-style: decimal;
  margin-block: 1em;
  padding-inline-start: 1.5em;
}
/*
 *  Display titles and labels
 *  .heading-large uses Playfair by default
 *  .label are cool little things, used for labels
 */
.label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8D8D8D;
}
.heading-large {
  font-family: var(--font-proxima);
  font-size: 48px;
  line-height: 60px;
  font-weight: 300;
}
@media (min-width: 1280px) {
  .label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8D8D8D;
  }
  .heading-large {
    font-size: 80px;
    line-height: 96px;
  }
}
.unbox-top .boxed {
  padding-top: 0;
}
.unbox-bottom .boxed {
  padding-bottom: 0;
}
.d-block {
  display: block;
}
.d-none {
  display: none;
}
@media only screen and (max-width: 1440px) {
  .no-scroll-search {
    overflow: hidden;
    /* Hide scrollbars on search */
  }
}
.hero-carousel .slick-track {
  display: flex;
}
/*
 *  gradient top to bottom
 */
.gradient-white-to-bottom {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%);
}
/*
 *  Custom scrollbar to be used in overflow containers
 */
.custom-scrollbar::-webkit-scrollbar {
  background-color: purple;
  border-radius: 16px;
  width: 8px;
  height: 8px;
  box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}
/* background of the scrollbar except button or resizer */
.custom-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}
/* scrollbar itself */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #8D8D8D;
  border-radius: 16px;
  box-shadow: inset 0 4px 6px -1px rgba(255, 255, 255, 0.15);
}
/* set button(top and bottom of the scrollbar) */
.custom-scrollbar::-webkit-scrollbar-button {
  display: none;
}
/*
 *  Overlay images with a transparent (black or white) color.
 *  <div class="overlay-image overlay-black">
 *    <img src="">
 *  </div>
 */
.overlay-container {
  position: relative;
  z-index: 0;
}
.overlay-container:after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.overlay-container.overlay-black:after {
  background-color: rgba(0, 0, 0, 0.1);
}
@media (min-width: 1024px) {
  .col-12 {
    grid-column: span 12;
  }
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/*
 * Layout
 * ---------------------------- */
.cookie-bg {
  height: calc(100vh);
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}
.cookie-content {
  background-color: var(--color-white);
  display: inline-block;
  position: absolute;
  /* Required for vertical centering */
  top: 70%;
  /* Move down by 50% of its own height */
  left: 50%;
  /* Move right by 50% of its own width */
  transform: translate(-50%, -50%);
  /* Center both vertically and horizontally */
}
@media (min-width: 640px) {
  .cookie-content {
    top: 50%;
  }
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
.offcanvas-backdrop.show {
  display: flex;
  align-items: center;
  justify-content: center;
}
.offcanvas {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  position: fixed;
  top: 0;
  transition: transform 0.3s ease-in-out;
  z-index: 1050;
}
.offcanvas.offcanvas-start {
  left: 0;
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.offcanvas-end {
  right: 0;
  transform: translateX(100%);
}
.offcanvas.show {
  transform: translateX(0) !important;
}
.offcanvas.offcanvas-start.show.hiding {
  transform: translateX(-100%) !important;
}
.offcanvas.offcanvas-end.show.hiding {
  transform: translateX(100%) !important;
}
.offcanvas.is-fullwidth {
  width: 100%;
}
.offcanvas.is-bottom {
  bottom: 0;
  top: auto;
  height: 90%;
  width: 100%;
  border-radius: 8px 8px 0 0;
  transform: translateY(100%);
}
.offcanvas.is-bottom .offcanvas-close {
  display: flex;
  border: 0;
  padding: 0;
}
.offcanvas .offcanvas-header .offcanvas-title {
  font-size: 24px;
  font-weight: 700;
}
.offcanvas .offcanvas-footer {
  bottom: 0;
  top: auto;
}
.offcanvas .offcanvas-close:focus {
  box-shadow: none;
}
.offcanvas > .loader, .offcanvas .offcanvas-body > .loader, .offcanvas .offcanvas-content-container > .loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1rem;
  margin-top: -1rem;
}
/*
 * Offcanvas background color
 */
.cart-offcanvas, .account-menu-offcanvas, .offcanvas-filter {
  background-color: #F4F1EF;
}
/*
 * Offcanvas Cart
 */
.offcanvas.cart-offcanvas, .offcanvas.navigation-offcanvas {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.offcanvas.cart-offcanvas .offcanvas-content-footer, .offcanvas.navigation-offcanvas .offcanvas-content-footer {
  margin-top: auto;
}
@media (min-width: 640px) {
  .offcanvas {
    width: 60vw;
  }
}
@media (min-width: 768px) {
  .offcanvas {
    width: auto;
    min-width: 380px;
    max-width: 500px;
  }
}
.offcanvas-cart .loader {
  margin: 0 auto;
  display: block;
  margin-top: 100px;
}
/*
Navigation offcanvas
==============================================
Custom styling for navigation offcanvas which replaces main navigation on smaller screens.
Based on custom offcanvas component.
*/
.navigation-offcanvas {
  overflow-x: hidden;
  background: #1D2145;
  color: #FFFFFF;
}
.navigation-offcanvas .offcanvas-content-container, .navigation-offcanvas .offcanvas-body {
  padding: 0;
}
.navigation-offcanvas-container {
  position: relative;
  height: calc(100vh - 100px);
}
.navigation-offcanvas-overlay.has-transition {
  transition: left 0.5s ease-in;
}
.navigation-offcanvas-placeholder, .navigation-offcanvas-overlay {
  width: 100%;
  background-color: #1D2145;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100% !important;
}
.navigation-offcanvas-link-icon {
  display: inline-flex;
}
.navigation-offcanvas-link-icon .loader {
  width: 1rem;
  height: 1rem;
}
.collapse:not(.show) {
  display: none;
}
.top-bar-nav {
  display: flex;
  align-items: center;
  padding: 8px;
}
.top-bar-carousel {
  width: 100%;
}
.top-bar-carousel-item {
  text-align: center;
}
.top-bar-message {
  display: none;
}
@media (min-width: 768px) {
  .top-bar-nav {
    padding-inline: 0px;
    justify-content: space-between;
  }
  .top-bar-carousel {
    width: 250px;
  }
  .top-bar-carousel-item {
    text-align: initial;
  }
}
@media (min-width: 1024px) {
  .top-bar-carousel {
    width: 400px;
  }
}
@media (min-width: 1280px) {
  .top-bar-nav {
    display: grid;
    grid-template-columns: 1fr 250px 1fr;
  }
  .top-bar-message {
    display: block;
    text-align: center;
  }
}
.header-shadow {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 0px 30px 0px rgba(0, 0, 0, 0.09);
}
.search-suggest-product .icon-default-placeholder svg {
  width: 48px;
  height: 60px;
}
.shadow-tapbar {
  box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.08);
}
@keyframes openSearchBar {
  0% {
    opacity: 0;
    transform: translateY(-50%);
    width: 60%;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    width: 100%;
  }
}
.header-search input[type="search"]::-webkit-search-decoration, .header-search input[type="search"]::-webkit-search-cancel-button, .header-search input[type="search"]::-webkit-search-results-button, .header-search input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
.header-search .loader {
  display: none;
}
.header-search .search-suggest {
  display: none;
}
.header-search .form-control {
  border-bottom: 0px;
}
body.no-scroll-search {
  overflow: hidden;
}
body.no-scroll-search:before, body.no-scroll-search header:before {
  content: "";
  clear: both;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background-color: #00000059;
  display: inline-block;
}
@media (max-width: 767px) {
  body.no-scroll-search:before, body.no-scroll-search header:before {
    background-color: #FFFFFF;
  }
}
body.no-scroll-search .search-suggest {
  display: block;
}
body.no-scroll-search .header-search {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  max-width: calc(100% - 20px);
  margin: 0 10px;
  z-index: 1000;
  background-color: white;
  animation: openSearchBar 0.2s ease-out;
}
@media (min-width: 767px) {
  body.no-scroll-search .header-search {
    max-width: 600px;
    margin: 0 auto;
    top: 22px;
  }
}
body.no-scroll-search .header-search .input-group {
  position: relative;
}
body.no-scroll-search .header-search .search-back {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  padding-left: 10px;
  padding-top: 7px;
  padding-right: 10px;
  color: #798490;
}
body.no-scroll-search .header-search input {
  outline: none;
  padding-left: 40px;
}
body.no-scroll-search .header-search .input-group > button[type="submit"] {
  height: 42px;
  bottom: auto;
}
body.no-scroll-search .header-search .search-suggest-container {
  padding: 20px;
  border-top: 1px solid #F4F1EF;
}
body.no-scroll-search .header-search .search-suggest-container span {
  font-size: 1.3em;
  display: block;
  margin-bottom: 5px;
  color: #272727;
}
body.no-scroll-search .header-search .search-suggest-container a {
  display: block;
}
body.no-scroll-search .header-search .search-suggest-container a:hover {
  text-decoration: underline;
}
body.no-scroll-search .header-search .search-suggest-container > div:not(:last-child), body.no-scroll-search .header-search .search-suggest-container .acris-search-suggest-results > div:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid #F4F1EF;
}
/*
 * Components
 * ---------------------------- */
.alert {
  position: relative;
  grid-column: 1 / -1;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-has-icon {
  display: flex;
  align-items: center;
}
.alert {
  font-size: 14px;
  max-width: calc(100vw - 64px);
  margin-left: auto;
  margin-right: auto;
}
.alert .alert-content-container, .alert .icon {
  padding: 8px;
}
.alert a {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  font-weight: 400;
}
.alert-list {
  padding-left: 20px;
  margin-bottom: 0;
}
.alert-heading {
  color: inherit;
}
.alert-link {
  font-weight: 600;
}
.alert-dismissible {
  padding-right: 3.8125rem;
}
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
@media (min-width: 1024px) {
  .alert {
    max-width: 70vw;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1280px) {
  .alert {
    max-width: 600px;
  }
}
/*
 * Theming for alert variants is currently DISABLED
 * Default shopware alert theming is used. See styles below
 */
/*
 * Default shopware alert theming below
 */
.alert-primary {
  color: #6d050f;
  background-color: #f6ced2;
  border-color: #f2bac0;
}
.alert-primary hr {
  border-top-color: #eea5ac;
}
.alert-primary .alert-link {
  color: #3c0308;
}
.alert-secondary {
  color: #828180;
  background-color: #fefefd;
  border-color: #fefdfd;
}
.alert-secondary hr {
  border-top-color: #f0f0f0;
}
.alert-secondary .alert-link {
  color: #686867;
}
.alert-success {
  color: #2b5f47;
  background-color: #dcf1e7;
  border-color: #cfebde;
}
.alert-success hr {
  border-top-color: #bde3d1;
}
.alert-success .alert-link {
  color: #1b3c2d;
}
.alert-info {
  color: #566e7a;
  background-color: #edf6fb;
  border-color: #e6f3f9;
}
.alert-info hr {
  border-top-color: #d1e8f5;
}
.alert-info .alert-link {
  color: #41535c;
}
.alert-warning {
  color: #853d00;
  background-color: #ffe4cc;
  border-color: #ffd9b8;
}
.alert-warning hr {
  border-top-color: #ffcb9e;
}
.alert-warning .alert-link {
  color: #522600;
}
.alert-danger {
  color: #6f2017;
  background-color: #f7d8d5;
  border-color: #f4c9c4;
}
.alert-danger hr {
  border-top-color: #efb5af;
}
.alert-danger .alert-link {
  color: #45140e;
}
.alert-light {
  color: #828180;
  background-color: #fefefd;
  border-color: #fefdfd;
}
.alert-light hr {
  border-top-color: #f0f0f0;
}
.alert-light .alert-link {
  color: #686867;
}
.alert-dark {
  color: #1c1912;
  background-color: #d7d6d3;
  border-color: #c7c5c1;
}
.alert-dark hr {
  border-top-color: #bbb8b4;
}
.alert-dark .alert-link {
  color: black;
}
.alert-primary-alt {
  color: #6b7330;
  background-color: #f5f8df;
  border-color: #f1f5d2;
}
.alert-primary-alt hr {
  border-top-color: #eaf1bd;
}
.alert-primary-alt .alert-link {
  color: #494f21;
}
.account-address-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0 0 24px;
  padding: 20px;
  background: #fcf3f2;
  border-left: 3px solid #a64238;
  color: #542b27;
}
.account-address-notice__content {
  min-width: 0;
}
.account-address-notice__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.account-address-notice__description {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.account-address-notice__action {
  flex-shrink: 0;
  text-align: center;
}
.account-address-notice__action:focus-visible {
  outline: 2px solid #542b27;
  outline-offset: 4px;
}
@media (min-width: 768px) {
  .account-address-notice {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
  }
}
.account-address-notice.account-address-notice--checkout {
  margin-bottom: 0;
  padding: 16px 20px;
}
#checkoutOverviewAddresses {
  grid-template-columns: minmax(0, 1fr);
}
#checkoutOverviewAddresses .card-title {
  overflow-wrap: anywhere;
}
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.cms-element-text hr {
  max-width: 160px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #DDDDDD;
}
.btn {
  height: max-content;
  font-family: var(--font-proxima);
  font-size: 14px;
  display: flex;
  grid-gap: 8px;
  align-items: center;
  width: fit-content;
  justify-content: center;
}
.btn-big {
  height: max-content;
}
.btn-blue {
  height: max-content;
  background-color: #013FBE;
  border: 1px solid #013FBE;
  transition: all 0.3s ease;
  text-transform: uppercase;
  padding: 16px 16px;
  color: #FFFFFF;
}
.btn-blue:hover:not(:disabled) {
  background-color: #013295;
  border: 1px solid #013295;
}
.btn-blue:active:not(:disabled) {
  background-color: #00153f;
  border: 1px solid #00153f;
}
.btn-blue:disabled {
  cursor: default;
}
@media (min-width: 768px) {
  .btn-blue {
    padding: 16px 32px;
  }
}
.btn-primary, .btn-black {
  height: max-content;
  background-color: #000000;
  border: 1px solid #000000;
  transition: all 0.3s ease;
  text-transform: uppercase;
  padding: 16px 16px;
  color: #FFFFFF;
}
.btn-primary:hover:not(:disabled), .btn-black:hover:not(:disabled) {
  background-color: #595959;
  border: 1px solid #595959;
}
.btn-primary:active:not(:disabled), .btn-black:active:not(:disabled) {
  background-color: #737373;
  border: 1px solid #737373;
}
.btn-primary:disabled, .btn-black:disabled {
  cursor: default;
}
@media (min-width: 768px) {
  .btn-primary, .btn-black {
    padding: 16px 32px;
  }
}
.btn-white {
  height: max-content;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  transition: all 0.3s ease;
  text-transform: uppercase;
  padding: 16px 20px;
  border: 1px solid #FFFFFF;
  color: #000000;
}
.btn-white:hover:not(:disabled) {
  background-color: #ebebeb;
  border: 1px solid #ebebeb;
}
.btn-white:active:not(:disabled) {
  background-color: #bfbfbf;
  border: 1px solid #bfbfbf;
}
.btn-white:disabled {
  cursor: default;
}
@media (min-width: 768px) {
  .btn-white {
    padding: 20px 74px;
    font-size: 16px;
  }
}
.btn-secondary, .btn-outline {
  text-transform: uppercase;
  padding: 16px 16px;
  border: 1px solid #000000;
  color: #000000;
  transition: all 0.3s ease;
}
.btn-secondary:hover, .btn-outline:hover {
  background-color: #000000;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .btn-secondary, .btn-outline {
    padding: 16px 32px;
  }
}
.btn-light {
  padding: 8px 16px;
  color: #000000;
  background-color: #F4F1EF;
  border: 1px solid #F4F1EF;
  transition: all 0.3s ease;
}
.btn-light:hover:not(:disabled) {
  background-color: #e3dcd7;
  border: 1px solid #e3dcd7;
}
.btn-light:active:not(:disabled) {
  background-color: #c0afa3;
  border: 1px solid #c0afa3;
}
.btn-light:disabled {
  cursor: default;
}
.btn-link {
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: underline;
  color: black;
  font-size: 12px;
  text-underline-offset: 6px;
  transition: all 0.4s var(--cubic-bezier);
}
.btn-link:hover {
  opacity: 0.8;
}
.btn-link-arrow::after {
  position: relative;
  top: 4px;
  margin-left: 8px;
  transform: translateX(0);
  transition: all var(--cubic-bezier) 0.3s;
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/bundles/ndjansennoytheme/nodots/icons/btn-arrow-right.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.btn-link-arrow:hover::after {
  transform: translateX(2px);
}
.btn-underline {
  font-weight: 400;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: all 0.15s var(--cubic-bezier);
}
.btn-underline:hover, .btn-underline.active {
  border-bottom-color: currentColor;
  color: black;
}
.btn-square {
  padding: 6px;
}
.btn-sm {
  padding: 8px 16px;
}
.btn-disabled {
  background-color: #8D8D8D;
  border-color: #8D8D8D;
}
.btn-disabled:hover, .btn-disabled:active, .btn-disabled:focus {
  background-color: #8D8D8D;
  border-color: #8D8D8D;
}
.icon {
  display: inline-flex;
  align-self: center;
}
.icon-block {
  display: block;
}
.icon > svg {
  position: relative;
  fill: currentColor;
}
.icon-theme-icons-instagram > svg {
  position: unset;
}
.icon-theme-icons-youtube > svg {
  position: unset;
}
.icon-theme-icons-facebook > svg {
  position: unset;
}
.icon-stroke > svg {
  fill: none;
  stroke: currentColor;
}
.icon.full-size svg, .icon-placeholder svg {
  width: 100%;
  height: 100%;
}
.icon-10 {
  width: 10px;
  height: 10px;
}
.icon-10 svg {
  width: 100%;
  height: 100%;
}
.icon-12 {
  width: 12px;
  height: 12px;
}
.icon-12 svg {
  width: 100%;
  height: 100%;
}
.icon-14 {
  width: 14px;
  height: 14px;
}
.icon-14 svg {
  width: 100%;
  height: 100%;
}
.icon-16 {
  width: 16px;
  height: 16px;
}
.icon-16 svg {
  width: 100%;
  height: 100%;
}
.icon-18 {
  width: 18px;
  height: 18px;
}
.icon-18 svg {
  width: 100%;
  height: 100%;
}
.icon-20 {
  width: 20px;
  height: 20px;
}
.icon-20 svg {
  width: 100%;
  height: 100%;
}
.icon-22 {
  width: 22px;
  height: 22px;
}
.icon-22 svg {
  width: 100%;
  height: 100%;
}
.icon-24 {
  width: 24px;
  height: 24px;
}
.icon-24 svg {
  width: 100%;
  height: 100%;
}
.anchor-underline a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dropup, .dropright, .dropdown, .dropleft {
  position: relative;
}
.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: #4a545b;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #bcc1c7;
  border-radius: 3px;
}
.dropdown-menu-left {
  right: auto;
  left: 0;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}
.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropright .dropdown-toggle::after {
  vertical-align: 0;
}
.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}
.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropleft .dropdown-toggle::after {
  display: none;
}
.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}
.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}
.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #eee;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f9f9f9;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #008490;
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: #798490;
  pointer-events: none;
  background-color: transparent;
}
.dropdown-menu.show {
  display: block;
}
.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .tab-pane.active {
  display: block;
}
.tab-trigger.active {
  color: black;
  border-bottom-color: black;
}
.badge:not(:empty) {
  --tw-shadow: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1em;
  background-color: var(--color-blue-500);
  border-radius: 624.9375rem;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  right: -0.5rem;
  top: -0.5rem;
  position: absolute;
}
/*
 * Disables zooming of browsers on mobile devices
 */
.form-control {
  padding: 8px;
  border-bottom: 1px solid #8D8D8D;
  background-color: transparent;
  width: 100%;
  -webkit-appearance: none;
  font-size: 16px;
  border-radius: 0;
}
.autocomplete {
  color: #B4B4B4;
}
.form-control::placeholder {
  color: #8D8D8D;
  font-weight: 300;
  font-size: 16px;
}
.custom-select {
  padding: 8px 12px;
  border-bottom: 1px solid #DDDDDD;
  width: 100%;
  color: #8D8D8D;
  font-size: 14px;
}
.custom-select::placeholder {
  color: #8D8D8D;
  font-size: 14px;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z' fill='%231B202D'/%3E%3C/svg%3E%0A");
  background-size: 18px;
  background-position: calc(100% - 12px) center;
  background-repeat: no-repeat;
}
select::-ms-expand {
  display: none;
}
/*
 * Range slider, used for the price input
 * @src: https://tailwindcomponents.com/component/multi-range-slider-with-alpinejs
 */
input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
}
/*
 * Form validation
 */
.invalid-feedback {
  color: #BA0032;
  font-size: 12px;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #BA0032;
}
@media (min-width: 1024px) {
  .form-control {
    font-size: 16px;
  }
}
@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}
.loader, .spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  top: 42px;
  vertical-align: -0.125em;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
}
.offcanvas-backdrop .loader, .offcanvas-backdrop .spinner-border {
  color: white;
}
.js-offcanvas-cart-promotion {
  position: relative;
}
.js-offcanvas-cart-promotion .element-loader-backdrop {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.caret-up::after {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 12px;
  height: 12px;
  top: -7px;
  content: "";
  display: block;
  position: absolute;
  background: #FFFFFF;
  left: 50%;
  border: 1px solid currentColor;
  border-top: 0 none;
  border-right: 0 none;
}
.caret-up::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  background-color: transparent;
  width: 100%;
  height: 35px;
}
/*
Product box for wishlist
==============================================
Styling for productbox component.
*/
.product-wishlist .product-wishlist-not-added .icon-wishlist-added, .product-wishlist .product-wishlist-not-added .text-wishlist-remove {
  display: none;
}
.product-wishlist .product-wishlist-not-added .icon-wishlist-not-added, .product-wishlist .product-wishlist-not-added .text-wishlist-not-added {
  display: inline-flex;
}
.product-wishlist .product-wishlist-not-added .icon-wishlist-not-added {
  animation: pulse 0.5s alternate;
}
.product-wishlist .product-wishlist-added .icon-wishlist-added, .product-wishlist .product-wishlist-added .text-wishlist-remove {
  display: inline-flex;
}
.product-wishlist .product-wishlist-added .icon-wishlist-added {
  animation: pulse 0.5s alternate;
}
.product-wishlist .product-wishlist-added .icon-wishlist-not-added, .product-wishlist .product-wishlist-added .text-wishlist-not-added {
  display: none;
}
.product-wishlist .product-wishlist-action {
  background: transparent;
  border-style: none;
  padding: 0;
  display: inline-flex;
}
.product-wishlist .product-wishlist-action:focus {
  outline: none;
}
.product-wishlist .product-wishlist-action, .product-wishlist .product-wishlist-action-circle {
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
}
.product-wishlist .product-wishlist-action:focus-visible, .product-wishlist .product-wishlist-action-circle:focus-visible {
  outline: 2px solid #013FBE;
  outline-offset: 2px;
}
.product-wishlist .icon-wishlist {
  width: 20px;
  height: 20px;
}
.product-wishlist .icon-wishlist svg {
  top: 0;
}
.product-wishlist .product-wishlist-btn-content {
  text-decoration: underline;
}
.product-wishlist .product-wishlist-btn-content-md {
  margin-left: 8px;
  font-size: 14px;
}
.product-wishlist .product-wishlist-btn-content-sm {
  margin-left: 6px;
  font-size: 12px;
}
.product-wishlist .product-wishlist-btn-content-disabled {
  display: none;
}
.product-wishlist .product-wishlist-btn-content-active {
  display: inline-flex;
}
.product-wishlist-info {
  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
}
.product-wishlist-info-item {
  min-height: 2em;
}
.product-wishlist-info-manufacturer {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-wishlist-info .product-variant-characteristics-text {
  text-transform: capitalize;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/*
Gallery slider
==============================================
Styling for gallery slider component.
Displays images in a slider gallery with thumbnail navigation.
based on "base-slider" component and "tiny-slider" (https://github.com/ganlanyuan/tiny-slider)
*/
.gallery-slider {
  width: 99.9%;
}
/*
 * Images
 */
.gallery-slider-item, .gallery-slider-single-image {
  position: relative;
}
.gallery-slider-item:after, .gallery-slider-single-image:after {
  content: "";
  display: block;
}
.gallery-slider-item > img, .gallery-slider-item > .content, .gallery-slider-item > .product-image-placeholder, .gallery-slider-single-image > img, .gallery-slider-single-image > .content, .gallery-slider-single-image > .product-image-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
}
.gallery-slider-item > img, .gallery-slider-item > .content, .gallery-slider-item > .product-image-placeholder, .gallery-slider-single-image > img, .gallery-slider-single-image > .content, .gallery-slider-single-image > .product-image-placeholder {
  object-fit: contain;
  font-family: "object-fit: contain;";
}
.gallery-slider-item:after, .gallery-slider-single-image:after {
  padding-bottom: 100%;
}
/*
 * Thumbnails
 */
.gallery-slider-thumbnails-col.is-underneath {
  margin-top: 16px;
}
.gallery-slider-thumbnails {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 16px;
}
.gallery-slider-thumbnails-item {
  cursor: pointer;
  height: 40px;
  width: 40px;
}
.tns-nav-active .gallery-slider-thumbnails-item-inner {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.gallery-slider-thumbnails.tns-slider {
  width: 100% !important;
}
.gallery-slider-thumbnails.tns-slider > .tns-item {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
}
.gallery-slider-thumbnails-container .tns-ovh {
  overflow: visible;
}
/*
 * Controls
 */
.gallery-slider-controls-prev {
  left: 0;
}
.gallery-slider-controls-prev.is-nav-prev-outside {
  left: -10px;
}
.gallery-slider-controls-next {
  right: 0;
}
.gallery-slider-controls-next.is-nav-next-outside {
  right: -10px;
}
@media (min-width: 768px) {
  .gallery-slider-controls, .base-slider-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    justify-items: flex-end;
  }
  .gallery-slider-controls .base-slider-controls-prev, .gallery-slider-controls .base-slider-controls-next, .base-slider-controls .base-slider-controls-prev, .base-slider-controls .base-slider-controls-next {
    position: relative;
    transform: initial;
  }
}
/*













 * OLD STYLING FROM SHOPWARE
 */
.gallery-slider-row.is-loading {
  height: 430px;
  overflow: hidden;
}
.gallery-slider-row.is-single-image {
  justify-content: center;
}
.gallery-slider-single-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-slider-container {
  position: relative;
  height: 100%;
}
.gallery-slider-container .gallery-slider-image {
  display: block;
}
.gallery-slider-thumbnails-container {
  position: relative;
  height: 48px;
}
.gallery-slider-thumbnails-container .tns-inner {
  display: flex;
  justify-content: center;
}
.gallery-slider-thumbnails-container.is-underneath .tns-inner {
  display: block;
}
.gallery-slider-thumbnails-container.hide-thumbs {
  display: none;
}
.gallery-slider-modal-controls {
  z-index: 10;
}
.gallery-slider-modal-controls .gallery-slider-thumbnails-controls-prev {
  left: 0;
}
.gallery-slider-modal-controls .gallery-slider-thumbnails-controls-next {
  right: 0;
}
.gallery-slider-thumbnails-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.gallery-slider-thumbnails-image, .gallery-slider-image {
  flex: 0 0 auto;
  max-height: 100%;
  max-width: 100%;
}
.gallery-slider-thumbnails-controls {
  display: none;
  margin: 0;
}
@media (min-width: 768px) {
  .gallery-slider-row {
    justify-content: center;
  }
  .gallery-slider-thumbnails-controls {
    display: block;
  }
  .gallery-slider-thumbnails-col.is-left .gallery-slider-thumbnails-item {
    margin-bottom: 0 !important;
    padding-bottom: 10px;
  }
}
@media (min-width: 1536px) {
  .gallery-slider-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-gap: 16px;
    justify-content: initial;
  }
  .gallery-slider-col {
    grid-column: 2;
    grid-row: 1;
  }
  .gallery-slider-thumbnails-col {
    grid-column: 1;
    grid-row: 1;
  }
  .gallery-slider-thumbnails.tns-slider > .tns-item {
    width: 120px !important;
    height: 120px !important;
    padding-bottom: 0 !important;
  }
}
/*
Base slider
==============================================
Styling for base slider component.
Contains minimal styling for a slider with arrow and/or dot navigation.
based on: https://github.com/ganlanyuan/tiny-slider
*/
.base-slider {
  position: relative;
}
.base-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  grid-gap: 4px;
}
.base-slider-dots button {
  padding: 4px;
}
.base-slider-dots button:focus {
  outline: none;
}
.base-slider-dots button:hover .dot, .base-slider-dots .tns-nav-active .dot {
  background-color: #000000;
}
.base-slider-dots .dot {
  background-color: #DDDDDD;
  border: 0;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}
.base-slider.has-dots-outside {
  margin-bottom: 35px;
}
.base-slider.has-dots-outside .tns-nav, .base-slider.has-dots-outside .base-slider-dots {
  bottom: auto;
}
/*
 * Base slider controls
 * Previous / next
 */
.base-slider-controls {
  margin-bottom: 0;
}
.base-slider-controls-prev, .base-slider-controls-next {
  display: block;
  width: 30px;
  height: 65px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #8D8D8D;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  transition: opacity 0.3s ease;
  cursor: pointer;
  padding: 0;
}
.base-slider-controls-prev:hover, .base-slider-controls-next:hover {
  color: #000000;
  opacity: 1;
}
.base-slider-controls-prev.is-nav-prev-outside, .base-slider-controls-prev.is-nav-next-outside, .base-slider-controls-next.is-nav-prev-outside, .base-slider-controls-next.is-nav-next-outside {
  border: 0;
  background: none;
}
.base-slider-controls-prev[disabled], .base-slider-controls-next[disabled] {
  opacity: 0.2;
  cursor: default;
}
@media (min-width: 768px) {
  .base-slider .tns-nav.hide-dots, .base-slider .base-slider-dots.hide-dots {
    display: none;
  }
  .base-slider-controls-prev, .base-slider-controls-next {
    top: auto;
    bottom: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
  }
  .base-slider-controls-prev {
    padding-right: 3px;
  }
  .base-slider-controls-next {
    padding-left: 3px;
  }
}
/*
Zoom modal
==============================================
Styling for zoom modal component.
Displays a single image or a gallery slider in a zoom modal with zoom functions.
*/
.zoom-modal-wrapper {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.modal.zoom-modal {
  overflow: hidden;
}
.modal.zoom-modal .zoom-modal-actions {
  display: none;
}
.modal.zoom-modal .tns-ovh {
  overflow: visible;
}
.modal.zoom-modal .zoom-modal-actions, .modal.zoom-modal .modal-close {
  position: absolute;
  top: 0;
  opacity: 1;
  z-index: 10;
  margin: 15px;
}
.modal.zoom-modal .zoom-modal-actions {
  left: 0;
}
.modal.zoom-modal .modal-close {
  right: 0;
}
.modal.zoom-modal .modal-dialog .modal-content, .modal.zoom-modal .modal-dialog .modal-body {
  padding: 0;
  overflow: hidden;
}
.modal.zoom-modal .modal-footer {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  margin: 0 30px;
}
.modal.zoom-modal .gallery-slider-modal-controls {
  display: none;
}
.modal.zoom-modal .gallery-slider-controls {
  z-index: 15;
}
.modal.zoom-modal .gallery-slider {
  top: 0;
  bottom: 0;
  position: absolute;
  height: auto;
  width: 100%;
}
.modal.zoom-modal .gallery-slider-thumbnails {
  margin: 0 auto 16px auto;
}
.modal.zoom-modal .gallery-slider-controls-next {
  right: 0;
}
.modal.zoom-modal .gallery-slider-controls-prev {
  left: 0;
}
.modal.zoom-modal .gallery-slider-thumbnails-item {
  width: auto;
}
.modal.zoom-modal .gallery-slider-thumbnails-controls-next {
  right: -30px;
}
.modal.zoom-modal .gallery-slider-thumbnails-controls-prev {
  left: -30px;
}
.modal.zoom-modal .image-zoom-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.modal.zoom-modal .image-zoom-container > * {
  position: relative;
}
.modal.zoom-modal .image-zoom-btn.disabled {
  opacity: 0.3;
}
.modal.zoom-modal .tns-inner {
  margin: 0 !important;
}
@media (min-width: 768px) {
  .modal.zoom-modal .gallery-slider {
    bottom: 100px;
  }
  .modal.zoom-modal .modal-footer {
    display: flex;
  }
}
/*
Gallery lightbox
==============================================
Product detail image gallery lightbox with zoom (scale 1×–3×).
Fullscreen. WCAG: focus trap, keyboard, aria.
*/
.gallery-lightbox-open {
  overflow: hidden;
}
.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow: hidden;
  outline: 0;
}
.gallery-lightbox.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
}
.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: #f4f1ef;
  cursor: pointer;
}
.gallery-lightbox-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: black;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.gallery-lightbox-close .icon, .gallery-lightbox-close svg {
  width: 1rem;
  height: 1rem;
}
.gallery-lightbox-close:hover, .gallery-lightbox-close:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  color: white;
}
.gallery-lightbox-close:focus {
  outline: 0;
}
.gallery-lightbox-close:focus-visible {
  box-shadow: 0 0 0 2px currentColor;
}
.gallery-lightbox-prev, .gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #FFF;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.gallery-lightbox-prev:hover, .gallery-lightbox-prev:focus-visible, .gallery-lightbox-next:hover, .gallery-lightbox-next:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  color: #FFF;
}
.gallery-lightbox-prev:focus, .gallery-lightbox-next:focus {
  outline: 0;
}
.gallery-lightbox-prev:focus-visible, .gallery-lightbox-next:focus-visible {
  box-shadow: 0 0 0 2px currentColor;
}
.gallery-lightbox-prev .icon, .gallery-lightbox-next .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-prev {
  left: 0.5rem;
}
@media (min-width: 1024px) {
  .gallery-lightbox-prev {
    left: 2rem;
  }
}
.gallery-lightbox-next {
  right: 0.5rem;
}
@media (min-width: 1024px) {
  .gallery-lightbox-next {
    right: 2rem;
  }
}
.gallery-lightbox-slider {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* When zoomed, allow panned image to extend so it isn’t clipped */
}
.gallery-lightbox-slider:has(.gallery-lightbox-zoom-target.is-zoomed) {
  overflow: visible;
}
.gallery-lightbox-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.gallery-lightbox-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.gallery-lightbox.is-panning, .gallery-lightbox.is-panning .gallery-lightbox-zoom-target {
  cursor: grabbing;
}
.gallery-lightbox-zoom-target {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: visible;
  /* When zoomed, fill the slide so no white bands show at top/bottom */
}
.gallery-lightbox-zoom-target.is-zoomed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.gallery-lightbox-zoom-target.is-zoom-out {
  cursor: zoom-out;
}
.gallery-lightbox-zoom-target:focus {
  outline: 0;
}
.gallery-lightbox-zoom-target:focus-visible .gallery-lightbox-image, .gallery-lightbox-zoom-target:focus-visible img {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.gallery-lightbox-image, .gallery-lightbox-zoom-target img {
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.15s ease-out;
  display: block;
  touch-action: none;
  /* allow drag/pan when zoomed on mobile */
}
/* No transition during drag or pinch so interaction feels direct */
.gallery-lightbox.is-panning .gallery-lightbox-image, .gallery-lightbox.is-panning .gallery-lightbox-zoom-target img, .gallery-lightbox.is-pinching .gallery-lightbox-image, .gallery-lightbox.is-pinching .gallery-lightbox-zoom-target img {
  transition: none;
}
/* When zoomed, image fills the viewport (no white letterboxing) */
.gallery-lightbox-zoom-target.is-zoomed .gallery-lightbox-image, .gallery-lightbox-zoom-target.is-zoomed img {
  max-width: none;
  max-height: none;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.25rem;
  max-width: calc(100% - 2rem);
  flex-shrink: 0;
  position: absolute;
  z-index: 20;
  bottom: max(10px, env(safe-area-inset-bottom));
}
.gallery-lightbox-model-information {
  padding: 0.25rem 0.5rem;
  background: rgba(244, 241, 239, 0.9);
  color: black;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}
.gallery-lightbox-counter {
  padding: 0.75rem 1rem;
  background: #f4f1ef;
  font-size: 0.875rem;
  color: black;
}
.gallery-lightbox-trigger:focus:not(:focus-visible) {
  outline: 0;
}
.slick-gallery-container .slick-slide:not(.slick-active) .gallery-lightbox-open-btn {
  display: none;
}
.slick-gallery-container .slick-dots {
  position: absolute;
  left: 0;
  right: 1.5rem;
  bottom: 1.2rem;
  z-index: 5;
  margin: 0;
  list-style: none;
  pointer-events: auto;
}
.slick-gallery-container .slick-dots li {
  margin: 0;
  pointer-events: auto;
}
.slick-gallery-container .slick-dots button {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
.slick-gallery-container .slick-dots li.slick-active button, .slick-gallery-container .slick-dots button[aria-selected="true"] {
  background-color: black;
}
.slick-gallery-container .slick-dots button:focus {
  outline: 0;
}
.slick-gallery-container .slick-dots button:focus-visible {
  box-shadow: 0 0 0 2px currentColor;
}
/*
Modal
==============================================
Custom styling for bootstrap modal component.

https://getbootstrap.com/docs/4.3/components/modal/
*/
.modal .boxed {
  padding: 0;
}
.modal .modal-header.only-close {
  border-bottom-color: transparent;
}
.modal .modal-close:focus {
  outline: 0;
}
.modal.is-fullscreen .modal-dialog, .modal.is-fullscreen .modal-content {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  max-width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  overflow-y: scroll;
  box-shadow: none;
}
.modal.is-fullscreen .modal-dialog, .modal.is-fullscreen .modal-content, .modal.is-fullscreen .modal-header, .modal.is-fullscreen .modal-body, .modal.is-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-open {
  overflow: hidden;
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-close .icon path {
  fill: #8D8D8D;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
.modal-dialog {
  position: relative;
  width: auto;
  pointer-events: none;
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: white;
  background-clip: padding-box;
  outline: 0;
}
.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 950;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}
.offcanvas-backdrop.open {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px;
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
}
.modal-body hr {
  border: 0;
  border-top: 1px solid #DDDDDD;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    max-width: 500px;
    margin: 24px auto;
  }
}
/*
Pagination
==============================================
Custom styling for bootstrap pagination component.

https://getbootstrap.com/docs/4.3/components/pagination/
*/
.pagination {
  display: flex;
  justify-content: center;
}
.pagination .page-item.disabled {
  display: none;
}
.pagination .page-item {
  transition: background-color 0.15s var(--cubic-bezier);
}
.pagination .page-item.active {
  color: #FFFFFF;
  background-color: #000000;
}
.pagination .page-item.active:hover {
  background-color: black;
}
.pagination .page-item:hover {
  background-color: #F4F1EF;
}
.pagination .page-link {
  cursor: pointer;
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*
Slider navigation
==============================================
Prev/next buttons for the product sliders, styled like the listing pagination
arrows: round, bordered, white background. Vertically centered on the slider,
only visible while hovering the slider, and hidden entirely when disabled
(start/end reached) or when the slider is not initialized (e.g. the sliders
that turn into a grid on desktop).

Markup: a wrapper with .slider-nav-container holding the slick container,
directly followed by the two .slider-nav buttons as siblings of it.
*/
.slider-nav-container {
  position: relative;
}
.slider-nav-container .slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 40px;
  height: 40px;
  display: none !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #7E7E7E;
  background-color: #FFFFFF;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--cubic-bezier), background-color 0.15s var(--cubic-bezier);
}
.slider-nav-container .slider-nav:hover {
  background-color: #F4F1EF;
}
.slider-nav-container .slick-initialized ~ .slider-nav, .slider-nav-container .slick-initialized ~ .slider-nav-box .slider-nav {
  display: flex !important;
}
.slider-nav-container .slider-nav-prev {
  left: 16px;
}
.slider-nav-container .slider-nav-next {
  right: 16px;
}
.slider-nav-container:hover .slider-nav {
  opacity: 1;
  pointer-events: auto;
}
.slider-nav-container .slider-nav.slick-disabled {
  display: none !important;
}
@media (max-width: 767px) {
  .slider-nav-container .slider-nav, .slider-nav-container .slick-initialized ~ .slider-nav {
    display: none !important;
  }
}
.slider-nav-container.slider-nav-boxed .slider-nav-next {
  right: 32px;
}
@media (min-width: 1024px) {
  .slider-nav-container.slider-nav-boxed .slider-nav-next {
    right: 86px;
  }
}
@media (min-width: 1920px) {
  .slider-nav-container.slider-nav-boxed .slider-nav-next {
    right: calc((100vw - 1748px) / 2);
  }
}
[data-element="circular-thumbnail-slider"] .slider-nav-prev {
  left: 56px;
}
@media (min-width: 1024px) {
  [data-element="circular-thumbnail-slider"] .slider-nav-prev {
    left: 32px;
  }
}
@media (min-width: 1536px) {
  [data-element="circular-thumbnail-slider"] .slider-nav-prev {
    left: 96px;
  }
}
/*
Mobile scroll slider
==============================================
Below 1024px the product sliders that carry this class are not run by slick
(responsive setting "unslick") but scroll natively, with snap points per card.
Native scrolling has real touch momentum, which slick's JS dragging lacks.
Desktop is untouched: there slick is active and wraps the slides in its own
track, so none of these rules match the slick markup.
*/
@media (max-width: 1023px) {
  .mobile-scroll-slider:not(.slick-initialized) {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-left: 32px;
    padding-right: 32px;
    scroll-padding-left: 32px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-scroll-slider:not(.slick-initialized)::-webkit-scrollbar {
    display: none;
  }
  .mobile-scroll-slider:not(.slick-initialized) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}
/*
Quick navigation chip rows
==============================================
The category chips above a listing, and the quick button navigation that shares their markup, scroll
sideways: on a category page the row is some 750px wider than the viewport, so the overflow itself
has to stay. Only its scrollbar goes. It claimed 15px of layout height and drew a full-width grey bar
straight under the chips, which read as a page element rather than as a control.

Same approach as _mobile-scroll-slider.scss. Deliberately a class on these two rows instead of a
general utility: main.scss still carries a commented-out `.hide-scrollbar` with a note that doing it
globally caused trouble.

The row stays reachable without the bar - the chips are links, so tabbing through them scrolls the
row along, and a trackpad swipes it sideways.
*/
.quick-nav-scroller {
  scrollbar-width: none;
}
.quick-nav-scroller::-webkit-scrollbar {
  display: none;
}
/*
Scroll up
==============================================
Shows a scroll up button at the bottom right of the page.
*/
.scroll-up-button {
  opacity: 0;
  transform: scale(0);
  transition: 0.45s cubic-bezier(0.3, 0, 0.15, 1);
  visibility: hidden;
}
.scroll-up-button button {
  background-color: #000000;
  border: 1px solid #000000;
  transition: all 0.3s ease;
}
.scroll-up-button button:hover:not(:disabled) {
  background-color: #595959;
  border: 1px solid #595959;
}
.scroll-up-button button:active:not(:disabled) {
  background-color: #737373;
  border: 1px solid #737373;
}
.scroll-up-button button:disabled {
  cursor: default;
}
.scroll-up-button.is-visible {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.scroll-up-button:hover {
  transform: translateY(-4px);
}
.card-title {
  margin-bottom: 8px;
}
.delivery-status-indicator {
  border-radius: 100%;
  background-clip: padding-box;
  display: inline-block;
  height: 12px;
  line-height: 12px;
  margin-right: 5px;
  position: relative;
  width: 12px;
}
.delivery-status-indicator.bg-danger {
  background-color: #BA0032;
}
.pure-css-carousel .carousel-item:nth-of-type(1) {
  animation: carousel1 6s ease-in-out 0s infinite;
}
.pure-css-carousel .carousel-item:nth-of-type(2) {
  animation: carousel2 6s ease-in-out 0s infinite;
}
.pure-css-carousel .carousel-item:nth-of-type(3) {
  animation: carousel3 6s ease-in-out 0s infinite;
}
@keyframes carousel1 {
  0% {
    opacity: 100%;
  }
  30% {
    opacity: 100%;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes carousel2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0%;
  }
  33% {
    opacity: 100%;
  }
  64% {
    opacity: 100%;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes carousel3 {
  0% {
    opacity: 0;
  }
  64% {
    opacity: 0%;
  }
  67% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
  }
}
.order-hide-btn .order-hide-btn-text {
  display: block;
}
.order-hide-btn .order-view-btn-text {
  display: none;
}
.order-hide-btn.collapsed .order-hide-btn-text {
  display: none;
}
.order-hide-btn.collapsed .order-view-btn-text {
  display: block;
}
/*
 * Variables
 */
/*
 * Parent class for all inputs
 * <div class="custom-control custom-TYPE">
 * 	<input type="TYPE" class="custom-control-input">
 */
.custom-control {
  position: relative;
  display: block;
  min-height: 1.3125rem;
  padding-left: 1.5rem;
}
.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem;
}
/*
 * Input fields
 * Class should be added to the <input> field
 * <input type="TYPE" class="custom-control-input">
 */
.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #013FBE;
  background-color: #013FBE;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 132, 144, 0.25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #013FBE;
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #013FBE;
  border-color: #013FBE;
}
.custom-control-input:disabled ~ .custom-control-label {
  color: #798490;
}
.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #eee;
}
/*
 * Labels
 */
.custom-control-label {
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}
.custom-control-label::before {
  position: absolute;
  top: 0.15625rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #8D8D8D solid 1px;
}
.custom-control-label::after {
  position: absolute;
  top: 0.15625rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50%/50% 50%;
}
/*
 * Checkbox field
 * <div class="custom-control custom-checkbox">
 * 	<input type="checkbox" class="custom-control-input">
 */
.custom-checkbox .custom-control-label::before {
  border-radius: 2px;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #013FBE;
  background-color: #013FBE;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 132, 144, 0.5);
}
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 132, 144, 0.5);
}
/*
 * Radio field
 * <div class="custom-control custom-radio">
 * 	<input type="radio" class="custom-control-input">
 */
.custom-radio .custom-control-label::before {
  border-radius: 50%;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 132, 144, 0.5);
}
/*
 * Switch field
 * <div class="custom-control custom-switch">
 * 	<input type="checkbox" class="custom-control-input">
 */
.custom-switch {
  padding-left: 2.25rem;
}
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}
.custom-switch .custom-control-label::after {
  top: calc(.15625rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #8D8D8D;
  border-radius: 0.5rem;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  transform: translateX(0.75rem);
}
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 132, 144, 0.5);
}
/*
 * Select field
 * <div class="custom-control custom-select">
 * 	<select class="custom-select">
 *	<option>America</option>
 */
.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1.125rem + 2px);
  line-height: calc(1.5em + 1.125rem + 2px);
  padding: 0 20px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #4a545b;
  vertical-align: middle;
  text-align: left;
  text-transform: uppercase;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.828' height='9.414' viewBox='0 0 16.828 9.414'%3E%3Cg transform='translate(1.414 1.414)'%3E%3Cg transform='translate(14) rotate(90)'%3E%3Cpath d='M0,14,7,7,0,0' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat right 24px top 50%/8px 10px;
  background-color: #fff;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
  appearance: none;
}
.custom-select.active {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.828' height='9.414' viewBox='0 0 16.828 9.414'%3E%3Cg transform='translate(1.414 1)'%3E%3Cg transform='translate(3.5 -3.5)'%3E%3Cpath d='M9,5l7,7L9,19' transform='translate(-8.5 19.5) rotate(-90)' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat right 24px top 50%/8px 10px;
  background-color: #fff;
}
.custom-select:focus {
  border-color: #013FBE;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 132, 144, 0.25);
}
.custom-select:focus::-ms-value {
  color: #4a545b;
  background-color: #fff;
}
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.5625rem;
  background-image: none;
}
.custom-select:disabled {
  color: #798490;
  background-color: #eee;
}
.custom-select::-ms-expand {
  display: none;
}
.custom-select-sm {
  height: calc(1.5em + .5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.75rem;
}
.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1rem;
}
/*
 * File field
 * <div class="custom-control custom-file">
 * 	<input type="file" class="custom-file-input">
 */
.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 1.125rem + 2px);
  margin-bottom: 0;
}
.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 1.125rem + 2px);
  margin: 0;
  opacity: 0;
}
.custom-file-input:focus ~ .custom-file-label {
  border-color: #013FBE;
  box-shadow: 0 0 0 0.2rem rgba(0, 132, 144, 0.25);
}
.custom-file-input:disabled ~ .custom-file-label {
  background-color: #eee;
}
.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}
.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}
.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 1.125rem + 2px);
  padding: 0.5625rem 0.5625rem;
  font-weight: 400;
  line-height: 1.5;
  color: #4a545b;
  background-color: #fff;
  border: 1px solid #DDDDDD;
  border-radius: 2px;
}
.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 1.125rem);
  padding: 0.5625rem 0.5625rem;
  line-height: 1.5;
  color: #4a545b;
  content: "Browse";
  background-color: #eee;
  border-left: inherit;
  border-radius: 0 3px 3px 0;
}
/*
 * Range field
 * <div class="custom-control custom-radio">
 * 	<input type="radio" class="custom-control-input">
 */
.custom-range {
  width: 100%;
  height: calc(1rem + .4rem);
  padding: 0;
  background-color: transparent;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.custom-range:focus {
  outline: none;
}
.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 132, 144, 0.25);
}
.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 132, 144, 0.25);
}
.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 132, 144, 0.25);
}
.custom-range::-moz-focus-outer {
  border: 0;
}
.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #013FBE;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.custom-range::-webkit-slider-thumb:active {
  background-color: #44efff;
}
.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #DDDDDD;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #013FBE;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.custom-range::-moz-range-thumb:active {
  background-color: #44efff;
}
.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #DDDDDD;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #013FBE;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.custom-range::-ms-thumb:active {
  background-color: #44efff;
}
.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}
.custom-range::-ms-fill-lower {
  background-color: #DDDDDD;
  border-radius: 1rem;
}
.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #DDDDDD;
  border-radius: 1rem;
}
.custom-range:disabled::-webkit-slider-thumb {
  background-color: #8D8D8D;
}
.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}
.custom-range:disabled::-moz-range-thumb {
  background-color: #8D8D8D;
}
.custom-range:disabled::-moz-range-track {
  cursor: default;
}
.custom-range:disabled::-ms-thumb {
  background-color: #8D8D8D;
}
.custom-control-label::before, .custom-file-label, .custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before, .custom-file-label, .custom-select {
    transition: none;
  }
}
/*
Filter panel
==============================================
Styling for filter panel component.
This file contains the generic styling for all filter items.
*/
/*
 * Filter panel
 */
.filter-panel-offcanvas-header {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
  padding: 25px;
}
.filter-panel-offcanvas-title {
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
  font-stretch: condensed;
  font-family: var(--font-helvetica);
}
@media (min-width: 1280px) {
  .filter-panel-offcanvas-title {
    font-size: 32px;
    line-height: 40px;
  }
}
.filter-panel-offcanvas-close {
  cursor: pointer;
}
/*
 * Padding
 */
.offcanvas .filter-panel-items-container {
  margin-left: 8px;
  margin-right: 8px;
}
.offcanvas .filter-panel-title {
  margin-left: 24px;
  margin-right: 24px;
}
/*
 * Filters
 */
.filter-panel-item-toggle[aria-expanded="true"] svg {
  color: green;
  transform: rotate(180deg);
  display: none;
}
.filter-panel-item-toggle {
  font-weight: bold;
  font-size: 16px;
  width: 100%;
  justify-content: space-between;
  padding: 8px 8px 8px 16px;
}
.filter-panel-item-toggle > * {
  pointer-events: none;
}
.filter-panel-item-toggle svg {
  stroke: black;
  fill: transparent;
  transform: rotate(270deg);
}
.filter-panel-item-toggle.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: #DDDDDD;
}
/*
 * An option that would return nothing is greyed out rather than removed. Hiding it makes the list
 * jump around as choices are made and quietly rewrites what the shop appears to stock; greying it
 * keeps the shape of the range visible while making the dead end obvious.
 * Requires `core.listing.disableEmptyFilterOptions` to be on, otherwise nothing ever gets the class.
 */
.filter-multi-select-list-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.filter-multi-select-list-item.disabled .filter-multi-select-item-label, .filter-multi-select-list-item.disabled .filter-property-select-preview {
  cursor: not-allowed;
  text-decoration: none;
}
.filter-multi-select-list-item.disabled .filter-multi-select-item-label:hover {
  color: inherit;
  text-decoration: none;
}
.icon-filter-panel-item-toggle {
  align-items: center;
}
.offcanvas .filter-panel-item-dropdown {
  margin-top: 4px;
  margin-bottom: 12px;
  padding: 0px 8px 4px 16px;
}
.filter-multi-select-list {
  display: grid;
  grid-row-gap: 8px;
}
/*
 * Checkboxes
 *
 * The browser default is a small rounded control in the operating system's accent colour, which sits
 * at odds with a panel built from square edges, black rules and greys. This replaces the rendering
 * only: it is still a real <input type="checkbox">, so keyboard operation, the tab order and the
 * role exposed to assistive technology are untouched. `:focus-visible` keeps a visible focus ring,
 * which `appearance: none` would otherwise throw away.
 *
 * The colour swatches are excluded - their checkbox is a transparent overlay on the swatch itself,
 * with the tick drawn by .filter-property-select-preview-checkmark.
 */
.filter-multi-select-list-item .form-check {
  display: flex;
  align-items: center;
  grid-gap: 10px;
}
.filter-multi-select-checkbox:not(.filter-property-select-checkbox) {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid #DDDDDD;
  border-radius: 0;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
  cursor: pointer;
  transition: background-color 0.15s var(--cubic-bezier), border-color 0.15s var(--cubic-bezier);
}
.filter-multi-select-checkbox:not(.filter-property-select-checkbox):hover {
  border-color: #272727;
}
.filter-multi-select-checkbox:not(.filter-property-select-checkbox):checked {
  background-color: #000000;
  border-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4'/%3E%3C/svg%3E");
}
.filter-multi-select-checkbox:not(.filter-property-select-checkbox):focus-visible {
  outline: 2px solid #013FBE;
  outline-offset: 2px;
}
.filter-multi-select-item-label {
  font-size: 14px;
  color: #272727;
}
.filter-multi-select-item-label::before {
  background-color: #FFFFFF;
}
.filter-property-select-preview, .filter-multi-select-item-label {
  cursor: pointer;
  transition: all 0.2s var(--cubic-bezier);
}
.filter-property-select-preview:hover, .filter-multi-select-item-label:hover {
  color: #000000;
  text-decoration: underline;
}
/*
 * Active filters
 */
.filter-panel-active-container {
  padding: 0 24px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  grid-gap: 16px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .filter-panel-active-container {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
.filter-active {
  position: relative;
  display: inline-flex;
  justify-content: center;
  background-color: #F4F1EF;
  font-weight: 500;
  align-items: center;
  padding: 4px 35px 4px 16px;
  border-radius: 2px;
  line-height: 32px;
}
.offcanvas .filter-active {
  background: #DDDDDD;
}
.filter-active-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 8px;
  background-position: center center;
  background-size: cover;
  vertical-align: text-bottom;
}
.filter-active-remove {
  padding: 0 8px;
  line-height: 1;
  border: 0 none;
  font-weight: 500;
  color: #000000;
  font-size: 28px;
  background-color: transparent;
  appearance: none;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 100%;
  bottom: 0;
  width: 22px;
  text-align: left;
  box-sizing: content-box;
}
.filter-active-remove:focus {
  outline: none;
}
.filter-active-remove:focus-visible {
  outline: 2px solid #013FBE;
  outline-offset: -2px;
}
.filter-active-remove:hover {
  color: #BA0032;
}
.filter-reset-all {
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-right: 8px;
  color: #6B6B6B;
  transition: all 0.3s var(--cubic-bezier);
  white-space: nowrap;
}
.filter-reset-all:hover {
  color: #272727;
}
/*
 * Option search
 * Rendered for filter groups above the option-count threshold, in the docked column and in the
 * offcanvas alike, so these styles are deliberately not scoped to either.
 */
.filter-option-search {
  margin-bottom: 12px;
}
.filter-option-search-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  color: #272727;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 0;
  appearance: none;
  transition: border-color 0.15s var(--cubic-bezier);
}
.filter-option-search-input::placeholder {
  color: #6B6B6B;
}
.filter-option-search-input:focus {
  outline: none;
  border-color: #000000;
}
.filter-option-search-input:focus-visible {
  outline: 2px solid #013FBE;
  outline-offset: 2px;
}
.filter-option-search-input::-webkit-search-decoration, .filter-option-search-input::-webkit-search-cancel-button {
  appearance: none;
}
.filter-multi-select-list-item.is--search-hidden {
  display: none;
}
.filter-option-search-empty {
  margin: 0;
  font-size: 13px;
  color: #6B6B6B;
}
/*
 * Show more / show less
 * Styled as a quiet text link rather than a button: it reveals more of the same list, it does not
 * apply anything.
 */
.filter-option-more {
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: #6B6B6B;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s var(--cubic-bezier);
}
.filter-option-more:hover {
  color: #000000;
}
/*
 * Per-option product count, e.g. "adidas 45".
 *
 * Deliberately quiet: it is a decision aid next to the option, not a second label, so it sits at the
 * same weight as the greyed-out state rather than competing with the name. It sits inside the
 * option's label, so the brackets and the visually hidden word after the number become part of the
 * checkbox's accessible name: "adidas (45 producten)".
 */
.filter-option-count {
  margin-left: 4px;
  color: #6B6B6B;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.filter-option-count::before {
  content: "(";
}
.filter-option-count::after {
  content: ")";
}
.filter-property-select-list-item .filter-option-count {
  flex-shrink: 0;
}
/*
Docked filter column
==============================================
From lg up the filter panel is not an offcanvas overlay but a column next to the product grid.
Below lg nothing changes: the panel stays hidden and is moved into the offcanvas by
offcanvas-filter.plugin.js, exactly as before.

The collapsed state lives as `is--filters-collapsed` on <body>, because the button that expands the
column again sits in the sidebar-filter CMS block, which is a sibling of the listing block.
*/
/*
 * The row that holds the column and the grid
 */
@media (min-width: 1024px) {
  .listing-layout > .cms-element-product-listing {
    min-width: 0;
  }
}
@media (min-width: 1024px) {
  .listing-filter-column {
    width: 260px;
    margin-right: 32px;
    flex-shrink: 0;
    position: sticky;
    top: var(--filter-dock-top, 24px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
    transition: width 0.28s var(--cubic-bezier), margin-right 0.28s var(--cubic-bezier), opacity 0.168s var(--cubic-bezier), top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .listing-filter-column:hover {
    scrollbar-color: #DDDDDD transparent;
  }
}
.listing-filter-column-header {
  min-height: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid #000000;
}
.listing-filter-column-title {
  margin: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.listing-filter-column-collapse {
  width: 44px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: 0;
  cursor: pointer;
  color: #8D8D8D;
  transition: color 0.2s var(--cubic-bezier);
}
.listing-filter-column-collapse:hover {
  color: #000000;
}
.listing-filter-column-collapse .icon {
  width: 16px;
  height: 16px;
}
.listing-filter-column-collapse .icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/*
 * The panel itself, while docked
 */
.listing-filter-column {
  /*
	 * Price range
	 *
	 * The storefront's default form styling leaves the two number fields as 16px borderless text,
	 * which reads as a label rather than an input and sits a type size above everything else in the
	 * column. These selectors are two classes deep on purpose: a single-class rule would lose to the
	 * Tailwind utilities in the markup, since Tailwind is imported last.
	 */
}
.listing-filter-column .filter-panel {
  height: auto;
}
.listing-filter-column .filter-panel-offcanvas-header, .listing-filter-column .filter-panel-offcanvas-only, .listing-filter-column .filter-panel-title, .listing-filter-column .offcanvas-content-footer {
  display: none;
}
.listing-filter-column .filter-panel-items-container {
  margin-left: 0;
  margin-right: 0;
}
.listing-filter-column .filter-panel-items-container .icon {
  width: 14px;
  height: 14px;
}
.listing-filter-column .filter-panel-items-container .icon svg {
  width: 100%;
  height: 100%;
}
.listing-filter-column button.filter-panel-item-toggle {
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #DDDDDD;
}
.listing-filter-column button.filter-panel-item-toggle svg {
  display: block;
  color: inherit;
  transform: rotate(0deg);
  transition: transform 0.18s var(--cubic-bezier);
}
.listing-filter-column button.filter-panel-item-toggle[aria-expanded="true"] svg {
  display: block;
  color: inherit;
  transform: rotate(180deg);
}
.listing-filter-column .filter-panel-item-dropdown {
  margin-top: 0;
  margin-bottom: 0;
  padding: 14px 0 18px;
}
.listing-filter-column .filter-multi-select-count {
  display: none;
}
.listing-filter-column .input-container {
  grid-gap: 10px;
  justify-content: flex-start;
}
.listing-filter-column .filter-range-min, .listing-filter-column .filter-range-max {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.listing-filter-column .min-input, .listing-filter-column .max-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  color: #272727;
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 0;
  appearance: textfield;
  transition: border-color 0.15s var(--cubic-bezier);
}
.listing-filter-column .min-input::-webkit-outer-spin-button, .listing-filter-column .min-input::-webkit-inner-spin-button, .listing-filter-column .max-input::-webkit-outer-spin-button, .listing-filter-column .max-input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.listing-filter-column .min-input::placeholder, .listing-filter-column .max-input::placeholder {
  color: #6B6B6B;
}
.listing-filter-column .min-input:focus, .listing-filter-column .max-input:focus {
  outline: none;
  border-color: #000000;
}
.listing-filter-column .min-input:focus-visible, .listing-filter-column .max-input:focus-visible {
  outline: 2px solid #013FBE;
  outline-offset: 2px;
}
.listing-filter-column .slider-container {
  margin-top: 20px;
  margin-bottom: 2px;
}
.listing-filter-column input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
}
.listing-filter-column input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
}
/*
 * The result count keeps one fixed home on the sorting line in both states, so it no longer hops
 * between two absolute offsets when the column collapses.
 */
.listing-result-count {
  white-space: nowrap;
}
.listing-result-count.is--empty {
  display: none;
}
/*
 * The sidebar-filter bar keeps its sorting dropdown on the right whether or not the expand button
 * is showing next to it - `justify-content: space-between` alone would pull it left on desktop,
 * where the mobile filter button is hidden.
 */
@media (min-width: 1024px) {
  .cms-element-sidebar-filter .cms-element-product-listing-actions {
    margin-left: auto;
  }
}
/*
 * Collapsed
 *
 * The column shrinks to nothing rather than being switched off, so width, gutter and opacity can be
 * animated. `visibility` still flips at the end of the transition, which keeps the collapsed panel
 * out of the tab order and away from screen readers.
 */
@media (min-width: 1024px) {
  body.is--filters-collapsed .listing-filter-column {
    width: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: width 0.28s var(--cubic-bezier), margin-right 0.28s var(--cubic-bezier), opacity 0.168s var(--cubic-bezier), visibility 0s linear 0.28s;
  }
}
/*
 * The grid's track count flips in one step - repeat(3, ...) and repeat(4, ...) cannot tween - and it
 * does so right at the start, while the eye is still on the collapsing column. Everything after that
 * is the continuous widening of the cards, which is why this reads better than deferring the flip to
 * the end of the transition.
 */
@media (prefers-reduced-motion: reduce) {
  .listing-filter-column, body.is--filters-collapsed .listing-filter-column {
    transition: none;
  }
}
/*
 * The button that brings the column back. It lives in the sidebar-filter bar next to the sorting
 * dropdown and is only ever shown on desktop while the column is collapsed.
 */
.filter-dock-expand {
  display: none;
}
@media (min-width: 1024px) {
  body.is--filters-collapsed .filter-dock-expand {
    display: flex;
  }
}
/*
 * Grid columns
 * The state class cannot live on the grid itself: the Listing plugin replaces
 * .cms-element-product-listing from the ajax response on every filter change, and that markup is
 * rendered server side, which knows nothing about the collapsed state.
 */
@media (min-width: 1024px) {
  .cms-element-product-listing-wrapper.has--filter-dock .cms-listing-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.is--filters-collapsed .cms-element-product-listing-wrapper.has--filter-dock .cms-listing-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/*
Filter range
==============================================
Styling for range filter item.
This filter item should only be used inside a filter panel.
*/
input[type="range"] {
  appearance: none;
  width: 100%;
  outline: none;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  background-color: transparent;
  pointer-events: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 5px;
}
input[type="range"]::-moz-range-track {
  -moz-appearance: none;
  height: 5px;
}
input[type="range"]::-ms-track {
  appearance: none;
  height: 5px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1.5em;
  width: 1.5em;
  background-color: #013FBE;
  cursor: pointer;
  margin-top: -8px;
  pointer-events: auto;
  border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 1.5em;
  width: 1.5em;
  cursor: pointer;
  border-radius: 50%;
  background-color: #013FBE;
  pointer-events: auto;
}
input[type="range"]::-ms-thumb {
  appearance: none;
  height: 1.5em;
  width: 1.5em;
  cursor: pointer;
  border-radius: 50%;
  background-color: #013FBE;
  pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb {
  background-color: #ffffff;
  border: 3px solid #013FBE;
}
/*
Filter property select
==============================================
Styling for property select filter item.
This filter item should only be used inside a filter panel.
*/
.filter-property-select-list-item {
  display: flex;
  align-items: center;
  grid-gap: 6px;
}
.filter-property-select-preview {
  width: 24px;
  height: 24px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #bcc1c7;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath fill='%2352B788' d='M0 0h30v30H0zM30 30h30v30H30zM60 0h30v30H60zM60 60h30v30H60zM0 60h30v30H0z'/%3E%3C/svg%3E");
  background-position: center center;
  background-size: cover;
  position: relative;
  flex-shrink: 0;
}
.filter-property-select-preview-checkmark {
  width: 16px;
  height: 16px;
  background-color: #DDDDDD;
  position: absolute;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-in-out;
  opacity: 0;
  transform: translateY(-5px);
}
.filter-property-select-preview-checkmark .icon {
  width: 10px;
  height: 10px;
  color: #FFFFFF;
  display: inline-flex;
  align-self: center;
}
.filter-property-select-preview-checkmark .icon svg {
  top: 0;
}
.filter-property-select-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  opacity: 0;
}
.filter-property-select-checkbox:checked ~ .filter-property-select-preview-checkmark {
  transform: translateY(0);
  opacity: 1;
}
/*
 * Increase Slick slide spacing on the Image Thumbnail Slider (manufacturer)
 */
@media (min-width: 1024px) {
  .circular-thumbnail-slider .slick-slider .slick-slide {
    margin: 0 16px;
  }
  .circular-thumbnail-slider .slick-slider .slick-list {
    margin: 0 -16px;
  }
  .circular-thumbnail-slider .slick-slider .slick-track {
    left: 0 !important;
  }
}
.filter-panel-active-container.hide-clear-all .filter-reset-all, .filter-panel-active-container.hide-active-filters .filter-active {
  display: none !important;
}
@media (min-width: 1024px) {
  .custom-store-select-ratio-padding::after {
    padding-bottom: 120% !important;
  }
}
.is-stretch > img {
  width: 100%;
}
.shipping-method-description {
  width: 100%;
  margin-bottom: 12px;
}
.shipping-method .shipping-method-radio, .shipping-method .shipping-method-label {
  display: flex;
  align-items: flex-start;
}
.shipping-method .form-check-label.shipping-method-label, .shipping-method .shipping-method-label {
  width: 100%;
}
.shipping-method .shipping-method-input {
  margin-right: 0.5rem;
  margin-top: 4px;
  flex-shrink: 0;
}
.order-postnl-pickup__name {
  font-weight: 600;
  margin-bottom: 4px;
}
.order-postnl-pickup__address {
  font-size: 0.875rem;
  color: #7E7E7E;
  line-height: 1.4;
}
.order-postnl-pickup__code {
  font-size: 0.8125rem;
  margin-top: 6px;
  color: #7E7E7E;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 950;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-backdrop.modal-backdrop-open {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.modal-backdrop .loader, .modal-backdrop .spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  top: 42px;
  vertical-align: -0.125em;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
}
.modal-backdrop .loader, .modal-backdrop .spinner-border {
  color: white;
}
.hide-loading {
  display: none;
}
.loading-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.loading-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #000;
  border-color: #000 transparent #000 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*
 * Pages
 * ---------------------------- */
#hero_carousel_slick .slick-prev, #hero_carousel_slick .slick-next {
  bottom: 16px;
}
@media (min-width: 1024px) {
  #hero_carousel_slick .slick-prev, #hero_carousel_slick .slick-next {
    bottom: 32px;
  }
}
@media (min-width: 1536px) {
  #hero_carousel_slick .slick-prev, #hero_carousel_slick .slick-next {
    bottom: 48px;
  }
}
.manufacturer-bg-overlay {
  background-color: rgba(17, 19, 38, 0.7);
}
.order-item-variants-properties, .order-item-quantity, .order-item-price, .order-item-total, .order-item-detail-labels, .order-item-detail-summary {
  display: grid;
  grid-template-columns: 140px 1fr;
}
.order-detail-content-footer {
  margin-top: 20px;
}
.order-overview-productlist-label {
  margin-top: 4px;
}
.order-item-label, .order-item-variants-properties-name, .order-item-detail-labels dt, .order-item-detail-summary dt {
  font-weight: bold;
}
.order-item-detail .collapse {
  margin-top: 16px;
}
.line-item-img-container .line-item-img-link svg {
  width: 7rem;
  height: auto;
}
.line-item-img-container .line-item-icon {
  width: 7rem;
  text-align: center;
}
.line-item-img-container .line-item-icon svg {
  width: 4rem;
  height: auto;
}
.product-detail-configurator-options {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  grid-gap: 8px;
}
.product-detail-configurator-option-input {
  display: none;
}
.product-detail-configurator-option-input.is-combinable + .product-detail-configurator-option-label {
  opacity: 1;
}
.product-detail-configurator-option-image {
  height: 100%;
}
.product-detail-configurator-option-label {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  height: 40px;
  padding: 0 8px;
  min-width: 40px;
  opacity: 0.35;
  border: 1px solid transparent;
  transition: border-color 0.2s var(--cubic-bezier), background-color 0.2s var(--cubic-bezier), box-shadow 0.2s var(--cubic-bezier);
}
.product-detail-configurator-option-label .is-display-media.active {
  border-color: green;
}
.product-detail-configurator-option-label.is-display-text {
  background-color: purple;
  height: auto;
  padding: 5px 10px;
}
.product-detail-configurator-option-label .is-display-text.active {
  border-color: green;
}
.product-detail-configurator-option-label:hover {
  border-color: #8D8D8D;
}
.product-detail-configurator-option-label.active, .product-detail-configurator-option-input:checked + .product-detail-configurator-option-label {
  background-color: purple;
  border: 1px solid #000000;
  color: #000000;
}
.product-detail-review-widget {
  z-index: 1;
}
.product-detail-reviews .icon svg {
  top: 2px;
}
.product-detail-review-teaser-btn .product-detail-review-teaser-hide {
  display: none;
}
.product-detail-review-teaser-btn.collapsed .product-detail-review-teaser-show {
  display: none;
}
.product-detail-review-teaser-btn.collapsed .product-detail-review-teaser-hide {
  display: block;
}
.product-detail-review-item-content {
  word-break: break-word;
}
.product-detail-review-form-radio {
  display: none;
}
.product-detail-review-form-rating-input {
  display: flex;
  align-items: center;
}
.product-review-point svg {
  top: 0;
}
.product-review-point, .point-container {
  display: inline-block;
  position: relative;
}
.point-rating {
  display: block;
  top: 0;
  left: 0;
}
.point-partial {
  position: absolute;
}
.product-detail-review-form-rating-text {
  margin-bottom: 0;
}
.product-detail-review-form-star {
  margin-right: 10px;
}
.product-detail-review-login .login-card .card-body {
  padding-top: 0;
}
.product-detail-review-cancel {
  margin-right: 5px;
}
.offcanvas .product-detail-review-widget {
  position: static;
}
@media (min-width: 768px) {
  .product-detail-review-widget {
    margin-bottom: 0;
  }
  .product-detail-review-sortby-form {
    justify-content: flex-end;
  }
  .product-detail-review-language {
    margin-bottom: 0;
  }
  .product-detail-review-item-points {
    padding-right: 0;
    margin-bottom: 0;
  }
  .product-detail-review-item-title {
    padding-left: 0;
  }
  .product-detail-review-form-star {
    margin-right: 5px;
  }
}
.properties-label {
  text-align: left;
}
.product-detail-buy .product-wishlist-action-circle {
  width: 52px;
  height: 52px;
  background-color: #DDDDDD;
  border: 1px solid #DDDDDD;
  transition: all 0.3s ease;
}
.product-detail-buy .product-wishlist-action-circle:hover:not(:disabled) {
  background-color: #c9c9c9;
  border: 1px solid #c9c9c9;
}
.product-detail-buy .product-wishlist-action-circle:active:not(:disabled) {
  background-color: #9d9d9d;
  border: 1px solid #9d9d9d;
}
.product-detail-buy .product-wishlist-action-circle:disabled {
  cursor: default;
}
.custom-select-options::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
.custom-select-options::-webkit-scrollbar-thumb {
  border-radius: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.product-size-selector__buttons {
  --tw-ring-offset-color: #fff;
}
.store-stock-offcanvas-size.store-stock-offcanvas-size--active {
  border-color: #000;
  background-color: #000;
  color: #fff;
}
/* Out of stock (size buttons only — not dropdown list items): diagonal BL→TR; 1px stroke like `border`, colour $grey-300 */
.product-size-option__label--out-of-stock {
  position: relative;
  overflow: hidden;
}
.product-size-option__label--out-of-stock::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23B4B4B4' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.opcLoading::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999999;
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='loader-1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='40px' height='40px' viewBox='0 0 40 40' enable-background='new 0 0 40 40' xml:space='preserve'%3E%3Cpath opacity='0.2' fill='%23000' d='M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z'/%3E%3Cpath fill='%23000' d='M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.5s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.opcLoading #opcCheckout > * {
  opacity: 0.75;
  pointer-events: none;
}
#opcProgressBar #opcStepButton_1 {
  background-color: #013FBE;
  --tw-ring-color: #013FBE;
}
#opcProgressBar[data-step="2"] #opcStepButton_2 {
  background-color: #013FBE;
  --tw-ring-color: #013FBE;
}
#opcProgressBar[data-step="2"] #opcProgressMeter {
  transform: translateX(-28%);
}
.postnl-step-locked {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.postnl-spinner {
  width: 24px;
  height: 24px;
  margin: 16px auto;
  border: 3px solid #DDDDDD;
  border-top-color: #013FBE;
  border-radius: 50%;
  animation: postnl-spin 0.6s linear infinite;
}
@keyframes postnl-spin {
  to {
    transform: rotate(360deg);
  }
}
#postnlChangeLocationBtn.is-postnl-change-location--hidden {
  display: none !important;
}
.postnl-location-card {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #DDDDDD;
  transition: background-color 0.15s ease-in-out;
}
.postnl-location-card:last-child {
  border-bottom: none;
}
.postnl-location-card:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.postnl-location-card.is-active {
  background-color: rgba(1, 63, 190, 0.06);
  border-left: 3px solid #013FBE;
  padding-left: 9px;
}
.postnl-location-card__name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.postnl-location-card__title {
  flex: 1;
  min-width: 0;
}
.postnl-location-card__distance {
  flex-shrink: 0;
  font-weight: 400;
  color: #7E7E7E;
}
.postnl-location-card__address {
  font-size: 12px;
  color: #7E7E7E;
  margin-top: 1px;
}
.postnl-location-card__details {
  margin-top: 8px;
}
.postnl-location-card__details-summary {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #B4B4B4;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.postnl-location-card__details-summary::-webkit-details-marker {
  display: none;
}
.postnl-location-card__details-summary:focus {
  outline: none;
}
.postnl-location-card__details-summary:focus-visible {
  outline: 2px solid #DDDDDD;
  outline-offset: 2px;
}
.postnl-location-card__hours {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #DDDDDD;
}
.postnl-location-card__hours-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.postnl-location-card__hours-table th {
  text-align: left;
  font-weight: 500;
  color: #8D8D8D;
  padding: 2px 8px 2px 0;
  vertical-align: top;
  width: 38%;
}
.postnl-location-card__hours-table td {
  color: #7E7E7E;
  padding: 2px 0;
}
.postnl-location-card__hours-empty {
  font-size: 12px;
  color: #7E7E7E;
  margin: 0;
}
#opcCheckout .form-label {
  color: #8D8D8D;
}
#opcCheckout .card-title {
  font-size: 20px;
  font-family: var(--font-helvetica);
  text-transform: uppercase;
  font-stretch: condensed;
  font-weight: bold;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  #opcCheckout .card-title {
    font-size: 24px;
  }
}
.manufacturer_slick {
  position: initial;
}
.manufacturer_slick .slick-slide {
  margin: 0 12px;
}
.manufacturer_slick .slick-track {
  margin: 0 -12px;
}
.loyalty-points {
  font-weight: 600;
  color: #013fbe;
}
.shipping-method-image {
  width: 24px;
  aspect-ratio: auto;
  margin-right: 8px;
}
.custom-control-label.shipping-method-label {
  display: flex;
  flex-direction: row;
}
.zoom-container {
  overflow: hidden;
}
.zoom-container img {
  transform-origin: center center;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.magnifier-zoom-image {
  margin-top: 8px;
  width: 400px;
  height: 350px;
  object-fit: contain;
  background-repeat: no-repeat;
  background-size: contain;
}
.upsell-product-card .product-wishlist {
  top: 0;
  right: 0;
}
.upsell-product-card .product-wishlist button {
  height: 35px;
  width: 35px;
}
*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: currentColor;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.\!visible {
  visibility: visible !important;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.top-0 {
  top: 0px;
}
.left-9 {
  left: 2.25rem;
}
.top-5 {
  top: 1.25rem;
}
.right-12 {
  right: 3rem;
}
.left-4 {
  left: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.left-1\/2 {
  left: 50%;
}
.top-1\/2 {
  top: 50%;
}
.bottom-2 {
  bottom: 0.5rem;
}
.left-6 {
  left: 1.5rem;
}
.left-2 {
  left: 0.5rem;
}
.top-8 {
  top: 2rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.bottom-10 {
  bottom: 2.5rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.right-0 {
  right: 0px;
}
.top-auto {
  top: auto;
}
.top-full {
  top: 100%;
}
.right-4 {
  right: 1rem;
}
.top-2 {
  top: 0.5rem;
}
.right-2 {
  right: 0.5rem;
}
.-top-2 {
  top: -0.5rem;
}
.-right-2 {
  right: -0.5rem;
}
.-bottom-5 {
  bottom: -1.25rem;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-20 {
  z-index: 20;
}
.z-\[1000\] {
  z-index: 1000;
}
.z-\[-1\] {
  z-index: -1;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
.order-2 {
  order: 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-auto {
  grid-column: auto;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.m-auto {
  margin: auto;
}
.mx-10 {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mx-8 {
  margin-left: -2rem;
  margin-right: -2rem;
}
.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}
.mr-6 {
  margin-right: 1.5rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mr-4 {
  margin-right: 1rem;
}
.-mt-8 {
  margin-top: -2rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.ml-\[2px\] {
  margin-left: 2px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-mr-3 {
  margin-right: -0.75rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-11 {
  margin-bottom: 2.75rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.\!hidden {
  display: none !important;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-10 {
  height: 2.5rem;
}
.h-full {
  height: 100%;
}
.h-\[90px\] {
  height: 90px;
}
.h-6 {
  height: 1.5rem;
}
.h-12 {
  height: 3rem;
}
.h-8 {
  height: 2rem;
}
.h-\[calc\(100\%_-_32px\)\] {
  height: calc(100% - 32px);
}
.h-auto {
  height: auto;
}
.h-40 {
  height: 10rem;
}
.h-max {
  height: -moz-max-content;
  height: max-content;
}
.h-28 {
  height: 7rem;
}
.h-0 {
  height: 0px;
}
.h-14 {
  height: 3.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-\[1px\] {
  height: 1px;
}
.h-1 {
  height: 0.25rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-5 {
  height: 1.25rem;
}
.h-\[68px\] {
  height: 68px;
}
.h-4 {
  height: 1rem;
}
.h-0\.5 {
  height: 0.125rem;
}
.max-h-\[1500px\] {
  max-height: 1500px;
}
.max-h-\[250px\] {
  max-height: 250px;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-\[3rem\] {
  min-height: 3rem;
}
.min-h-0 {
  min-height: 0px;
}
.w-full {
  width: 100%;
}
.w-10 {
  width: 2.5rem;
}
.w-\[90px\] {
  width: 90px;
}
.\!w-72 {
  width: 18rem !important;
}
.w-5 {
  width: 1.25rem;
}
.w-24 {
  width: 6rem;
}
.\!w-48 {
  width: 12rem !important;
}
.w-6 {
  width: 1.5rem;
}
.w-12 {
  width: 3rem;
}
.w-8 {
  width: 2rem;
}
.w-\[2px\] {
  width: 2px;
}
.w-auto {
  width: auto;
}
.w-\[28px\] {
  width: 28px;
}
.w-20 {
  width: 5rem;
}
.\!w-\[calc\(100vw-2rem\)\] {
  width: calc(100vw - 2rem) !important;
}
.w-80 {
  width: 20rem;
}
.w-28 {
  width: 7rem;
}
.w-0 {
  width: 0px;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-48 {
  width: 12rem;
}
.w-screen {
  width: 100vw;
}
.w-10\/12 {
  width: 83.333333%;
}
.w-52 {
  width: 13rem;
}
.w-1\/2 {
  width: 50%;
}
.w-4\/5 {
  width: 80%;
}
.w-\[68px\] {
  width: 68px;
}
.w-40 {
  width: 10rem;
}
.w-4 {
  width: 1rem;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-\[1670px\] {
  max-width: 1670px;
}
.max-w-\[1920px\] {
  max-width: 1920px;
}
.max-w-\[1748px\] {
  max-width: 1748px;
}
.max-w-\[70\%\] {
  max-width: 70%;
}
.max-w-\[90\%\] {
  max-width: 90%;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[1710px\] {
  max-width: 1710px;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.max-w-\[155px\] {
  max-width: 155px;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.flex-grow {
  flex-grow: 1;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: var(--tw-transform);
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: var(--tw-transform);
}
.-translate-y-full {
  --tw-translate-y: -100%;
  transform: var(--tw-transform);
}
.translate-x-2 {
  --tw-translate-x: 0.5rem;
  transform: var(--tw-transform);
}
.translate-y-2 {
  --tw-translate-y: 0.5rem;
  transform: var(--tw-transform);
}
.-translate-x-6 {
  --tw-translate-x: -1.5rem;
  transform: var(--tw-transform);
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: var(--tw-transform);
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: var(--tw-transform);
}
.translate-y-full {
  --tw-translate-y: 100%;
  transform: var(--tw-transform);
}
.-translate-x-2\/3 {
  --tw-translate-x: -66.666667%;
  transform: var(--tw-transform);
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: var(--tw-transform);
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: var(--tw-transform);
}
.transform {
  transform: var(--tw-transform);
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.resize {
  resize: both;
}
.scroll-mt-4 {
  scroll-margin-top: 1rem;
}
.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.columns-1 {
  -moz-columns: 1;
  columns: 1;
}
.break-inside-avoid {
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-\[100\%\] {
  grid-template-columns: 100%;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-\[max-content_1fr\] {
  grid-template-columns: max-content 1fr;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[max-content_max-content\] {
  grid-template-columns: max-content max-content;
}
.grid-cols-\[1fr_max-content_1fr\] {
  grid-template-columns: 1fr max-content 1fr;
}
.grid-cols-\[1fr_max-content\] {
  grid-template-columns: 1fr max-content;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.content-center {
  align-content: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-12 {
  gap: 3rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-12 {
  row-gap: 3rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-grey-400 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-grey-400);
}
.place-self-start {
  place-self: start;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-visible {
  overflow-y: visible;
}
.overflow-x-scroll {
  overflow-x: scroll;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-t-\[272px\] {
  border-top-left-radius: 272px;
  border-top-right-radius: 272px;
}
.rounded-t-full {
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
}
.rounded-tl-\[272px\] {
  border-top-left-radius: 272px;
}
.rounded-tr-\[272px\] {
  border-top-right-radius: 272px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-x-0 {
  border-left-width: 0px;
  border-right-width: 0px;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-t {
  border-top-width: 1px;
}
.border-grey-500 {
  border-color: var(--color-grey-500);
}
.border-transparent {
  border-color: transparent;
}
.border-grey-400 {
  border-color: var(--color-grey-400);
}
.border-grey-600 {
  border-color: var(--color-grey-600);
}
.border-white {
  border-color: var(--color-white);
}
.border-black {
  border-color: var(--color-black);
}
.border-grey-200 {
  border-color: var(--color-grey-200);
}
.border-grey-800 {
  border-color: var(--color-grey-800);
}
.border-red-500 {
  border-color: var(--color-red-500);
}
.border-y-grey-400 {
  border-top-color: var(--color-grey-400);
  border-bottom-color: var(--color-grey-400);
}
.border-b-grey-600 {
  border-bottom-color: var(--color-grey-600);
}
.border-b-grey-400 {
  border-bottom-color: var(--color-grey-400);
}
.border-b-white {
  border-bottom-color: var(--color-white);
}
.border-t-grey-400 {
  border-top-color: var(--color-grey-400);
}
.bg-white {
  background-color: var(--color-white);
}
.bg-blue-1000 {
  background-color: var(--color-blue-1000);
}
.bg-\[\#f4f1ef\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 241 239 / var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.bg-\[\#111326\]\/\[\.7\] {
  background-color: rgb(17 19 38 / 0.7);
}
.bg-grey-200 {
  background-color: var(--color-grey-200);
}
.bg-\[\#000000\]\/\[\.6\] {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-900 {
  background-color: var(--color-blue-900);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-\[\#521515\] {
  --tw-bg-opacity: 1;
  background-color: rgb(82 21 21 / var(--tw-bg-opacity));
}
.bg-blue-500 {
  background-color: var(--color-blue-500);
}
.bg-grey-400 {
  background-color: var(--color-grey-400);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.\!bg-white {
  background-color: var(--color-white) !important;
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-blue-900 {
  --tw-gradient-from: var(--color-blue-900);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0));
}
.\!bg-contain {
  background-size: contain !important;
}
.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}
.p-6 {
  padding: 1.5rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-0 {
  padding: 0px;
}
.p-10 {
  padding: 2.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-8 {
  padding: 2rem;
}
.p-2 {
  padding: 0.5rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pb-0 {
  padding-bottom: 0px;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pl-0 {
  padding-left: 0px;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pt-0 {
  padding-top: 0px;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-\[120px\] {
  padding-bottom: 120px;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pt-\[1px\] {
  padding-top: 1px;
}
.pt-5 {
  padding-top: 1.25rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.\!text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-light {
  font-weight: 300;
}
.font-semibold {
  font-weight: 600;
}
.font-normal {
  font-weight: 400;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-none {
  line-height: 1;
}
.leading-8 {
  line-height: 2rem;
}
.leading-tight {
  line-height: 1.25;
}
.leading-\[14px\] {
  line-height: 14px;
}
.leading-\[22px\] {
  line-height: 22px;
}
.leading-4 {
  line-height: 1rem;
}
.leading-normal {
  line-height: 1.5;
}
.tracking-\[0\.05em\] {
  letter-spacing: 0.05em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.text-grey-500 {
  color: var(--color-grey-500);
}
.text-grey-700 {
  color: var(--color-grey-700);
}
.text-blue-500 {
  color: var(--color-blue-500);
}
.text-blue-900 {
  color: var(--color-blue-900);
}
.text-black {
  color: var(--color-black);
}
.text-white {
  color: var(--color-white);
}
.text-red-500 {
  color: var(--color-red-500);
}
.text-grey-800 {
  color: var(--color-grey-800);
}
.text-grey-600 {
  color: var(--color-grey-600);
}
.text-blue-1000 {
  color: var(--color-blue-1000);
}
.text-grey-300 {
  color: var(--color-grey-300);
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-\[\#1E47B9\] {
  --tw-text-opacity: 1;
  color: rgb(30 71 185 / var(--tw-text-opacity));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-red-900 {
  color: var(--color-red-900);
}
.underline {
  text-decoration: underline;
}
.line-through {
  text-decoration: line-through;
}
.no-underline {
  text-decoration: none;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
.\!opacity-100 {
  opacity: 1 !important;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-40 {
  opacity: 0.4;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.outline-blue-500 {
  outline-color: var(--color-blue-500);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-red-500 {
  --tw-ring-color: var(--color-red-500);
}
.ring-grey-400 {
  --tw-ring-color: var(--color-grey-400);
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-filter);
}
.filter {
  filter: var(--tw-filter);
}
.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.boxed-layout {
  max-width: calc(100vw - 64px);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .boxed-layout {
    max-width: calc(100vw - 172px);
  }
  .ml-box {
    margin-left: 86px;
  }
  .mr-box {
    margin-right: 86px;
  }
  .escape-boxed-layout {
    margin-left: -86px;
    margin-right: -86px;
  }
}
@media (min-width: 1536px) {
  /*.boxed-layout {*/
  /*	max-width: calc(1536px - 172px);*/
  /*}*/
  /*.ml-box {*/
  /*	margin-left: calc((100vw - 1364px) / 2);*/
  /*}*/
  /*.mr-box {*/
  /*	margin-right: calc((100vw - 1364px) / 2);*/
  /*}*/
}
@media (min-width: 1920px) {
  .boxed-layout {
    max-width: calc(1920px - 172px);
  }
  .ml-box {
    margin-left: calc((100vw - 1748px) / 2);
  }
  .mr-box {
    margin-right: calc((100vw - 1748px) / 2);
  }
}
.section-p-x {
  padding-left: 35px;
  padding-right: 35px;
}
.section-m-x {
  margin-left: 35px;
  margin-right: 35px;
}
/* Negative margins */
.-section-m-x {
  margin-left: -35px;
  margin-right: -35px;
}
.section-p-y {
  padding-top: 40px;
  padding-bottom: 40px;
}
.boxed {
  /*margin-left: 35px;
		margin-right: 35px;*/
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  /* Negative margins */
  .section-p-x {
    padding-left: 32px;
    padding-right: 32px;
  }
  .section-m-x {
    margin-left: 32px;
    margin-right: 32px;
  }
  .-section-m-x {
    margin-left: -32px;
    margin-right: -32px;
  }
  .section-p-y {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-m-y {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .boxed {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (min-width: 1024px) {
  /* Negative margins */
  .section-p-x {
    padding-left: 70px;
    padding-right: 70px;
  }
  .section-m-x {
    margin-left: 70px;
    margin-right: 70px;
  }
  .-section-m-x {
    margin-left: -70px;
    margin-right: -70px;
  }
  .section-p-y {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .section-m-y {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
@media (min-width: 1440px) {
  /* Negative margins */
  .section-p-x {
    padding-left: 78px;
    padding-right: 78px;
  }
  .section-m-x {
    margin-left: 78px;
    margin-right: 78px;
  }
  .-section-m-x {
    margin-left: -78px;
    margin-right: -78px;
  }
}
@media (min-width: 1536px) {
  /* Negative margins */
  .section-p-x {
    padding-left: 44px;
    padding-right: 44px;
  }
  .section-m-x {
    margin-left: 44px;
    margin-right: 44px;
  }
  .-section-m-x {
    margin-left: -44px;
    margin-right: -44px;
  }
  .section-p-y {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-m-y {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}
.top-100 {
  top: 100%;
}
.bottom-100 {
  bottom: 100%;
}
.ratio {
  position: relative;
}
.ratio:after {
  content: "";
  display: block;
}
.ratio .content, .ratio > img, .ratio > iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.ratio.object-contain .content, .ratio.object-contain > img, .ratio.object-contain > iframe {
  -o-object-fit: contain;
  object-fit: contain;
}
/*
	** Square container
	**/
.ratio_1x1:after {
  padding-bottom: 100%;
}
/*
	** 1920x1080 // 16x9 container
	**/
/*
	** 750x1000 // 3x4 container
	**/
.ratio_3x4:after {
  padding-bottom: 125%;
}
/*
	** 1000x750 // 4x3 container
	**/
.ratio_4x3:after {
  padding-bottom: 75%;
}
/*
	** 1000x1250 // 4x5 container
	**/
.ratio_4x5:after {
  padding-bottom: 125%;
}
/*
	** 1920x768 // 5x2 container
	**/
/*
	** 430x602 // 5x7 container
	**/
.ratio_5x7:after {
  padding-bottom: 140%;
}
/*
	** 600x900 // 2x3 container
	**/
.ratio_2x3:after {
  padding-bottom: 150%;
}
/*
	** Remove aspect ratio
	**/
.ratio-unset .content, .ratio-unset > img, .ratio-unset > iframe {
  position: inherit;
  width: inherit;
  height: inherit;
  -o-object-fit: inherit;
  object-fit: inherit;
}
.ratio-unset.object-contain .content, .ratio-unset.object-contain > img, .ratio-unset.object-contain > iframe {
  -o-object-fit: inherit;
  object-fit: inherit;
}
.theme-grid {
  display: grid;
  grid-template-columns: var(--grid-col-sm);
  grid-column-gap: var(--grid-gutter-x);
}
.col-span-full {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .theme-grid {
    grid-template-columns: var(--grid-col-lg);
  }
  .col-span-center-offset-1 {
    grid-column: 2 / 8;
  }
}
.grid-gap-1 {
  grid-gap: 0.25rem;
}
.grid-gap-2 {
  grid-gap: 0.5rem;
}
.grid-gap-3 {
  grid-gap: 0.75rem;
}
.grid-gap-4 {
  grid-gap: 1rem;
}
.grid-gap-5 {
  grid-gap: 1.25rem;
}
.grid-gap-6 {
  grid-gap: 1.5rem;
}
.grid-gap-8 {
  grid-gap: 2rem;
}
.grid-gap-10 {
  grid-gap: 2.5rem;
}
.grid-gap-x-6 {
  grid-column-gap: 1.5rem;
}
.grid-gap-x-10 {
  grid-column-gap: 2.5rem;
}
.grid-gap-y-1 {
  grid-row-gap: 0.25rem;
}
.grid-gap-y-4 {
  grid-row-gap: 1rem;
}
.grid-gap-y-6 {
  grid-row-gap: 1.5rem;
}
.grid-gap-y-8 {
  grid-row-gap: 2rem;
}
.grid-gap-y-10 {
  grid-row-gap: 2.5rem;
}
.grid-gap-y-20 {
  grid-row-gap: 5rem;
}
/*
**	Tailwind currently has the following properties
**	gap-2     gap-y-2     gap-x-2
**	These properties will translate to {gap: 2} or {gap-row: 2}
**	The {gap} property has very low browser support. Safari for instance does not accept it.
**	Using the {grid-gap} property however has better browser support
**	AND works in combination with Flexbox.
**/
.slick-variable-width-desktop {
  display: flex;
  width: 100%;
  overflow-x: scroll;
}
@media (min-width: 768px) {
  .slick-variable-width-desktop {
    justify-content: space-between;
  }
  .slick-variable-width-desktop {
    overflow-x: hidden;
  }
}
.slick-variable-width-desktop .manufacturer-container {
  height: 90px;
  width: 90px;
  border-radius: 9999px;
}
@media (min-width: 768px) {
  .slick-variable-width-desktop .manufacturer-container {
    height: 10rem;
  }
  .slick-variable-width-desktop .manufacturer-container {
    width: 10rem;
  }
}
.slick-variable-width-desktop .manufacturer-container .manufacturer-title {
  z-index: 1;
  max-width: 90%;
  overflow-wrap: break-word;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 0.75rem;
  color: var(--color-white);
}
@media (min-width: 640px) {
  .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
#homepage-category-slider .slick-variable-width-desktop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  #homepage-category-slider .slick-variable-width-desktop {
    display: flex;
  }
}
#homepage-category-slider .slick-variable-width-desktop .manufacturer-container {
  height: 150px;
  width: 100%;
  border-radius: 0px;
}
@media (min-width: 768px) {
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container {
    height: 10rem;
  }
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container {
    width: 10rem;
  }
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container {
    border-radius: 9999px;
  }
}
#homepage-category-slider .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
  z-index: 1;
  display: flex;
  height: 50px;
  width: 100%;
  max-width: 90%;
  align-items: center;
  justify-content: center;
  overflow-wrap: break-word;
  border-width: 2px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.75rem;
  color: var(--color-white);
}
@media (min-width: 640px) {
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media (min-width: 768px) {
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
    display: block;
  }
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
    height: auto;
  }
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
    border-style: none;
  }
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
    padding: 0px;
  }
}
@media (min-width: 1024px) {
  #homepage-category-slider .slick-variable-width-desktop .manufacturer-container .manufacturer-title {
    font-weight: 500;
  }
}
.first-letter\:uppercase::first-letter {
  text-transform: uppercase;
}
.first\:ml-8:first-child {
  margin-left: 2rem;
}
.first\:ml-6:first-child {
  margin-left: 1.5rem;
}
.first\:hidden:first-child {
  display: none;
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.first\:border-l-grey-400:first-child {
  border-left-color: var(--color-grey-400);
}
.first\:pl-8:first-child {
  padding-left: 2rem;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.first\:pt-2:first-child {
  padding-top: 0.5rem;
}
.first\:ml-box:first-child {
  margin-left: 32px;
}
@media (min-width: 1024px) {
  .boxed-layout {
    max-width: calc(100vw - 172px);
  }
  .first\:ml-box:first-child {
    margin-left: 86px;
  }
  .mr-box {
    margin-right: 86px;
  }
  .escape-boxed-layout {
    margin-left: -86px;
    margin-right: -86px;
  }
}
@media (min-width: 1920px) {
  .boxed-layout {
    max-width: calc(1920px - 172px);
  }
  .first\:ml-box:first-child {
    margin-left: calc((100vw - 1748px) / 2);
  }
  .mr-box {
    margin-right: calc((100vw - 1748px) / 2);
  }
}
.last\:mr-8:last-child {
  margin-right: 2rem;
}
.last\:mb-0:last-child {
  margin-bottom: 0px;
}
.last\:mr-6:last-child {
  margin-right: 1.5rem;
}
.last\:\!border-r:last-child {
  border-right-width: 1px !important;
}
.last\:border-r-grey-400:last-child {
  border-right-color: var(--color-grey-400);
}
.last\:pr-8:last-child {
  padding-right: 2rem;
}
.last\:mr-box:last-child {
  margin-right: 32px;
}
@media (min-width: 1024px) {
  .boxed-layout {
    max-width: calc(100vw - 172px);
  }
  .ml-box {
    margin-left: 86px;
  }
  .last\:mr-box:last-child {
    margin-right: 86px;
  }
  .escape-boxed-layout {
    margin-left: -86px;
    margin-right: -86px;
  }
}
@media (min-width: 1920px) {
  .boxed-layout {
    max-width: calc(1920px - 172px);
  }
  .ml-box {
    margin-left: calc((100vw - 1748px) / 2);
  }
  .last\:mr-box:last-child {
    margin-right: calc((100vw - 1748px) / 2);
  }
}
.focus-within\:outline-none:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: var(--tw-transform);
}
.hover\:-translate-y-0:hover {
  --tw-translate-y: -0px;
  transform: var(--tw-transform);
}
.hover\:-translate-x-0\.5:hover {
  --tw-translate-x: -0.125rem;
  transform: var(--tw-transform);
}
.hover\:-translate-x-0:hover {
  --tw-translate-x: -0px;
  transform: var(--tw-transform);
}
.hover\:translate-x-0\.5:hover {
  --tw-translate-x: 0.125rem;
  transform: var(--tw-transform);
}
.hover\:translate-x-0:hover {
  --tw-translate-x: 0px;
  transform: var(--tw-transform);
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: var(--tw-transform);
}
.hover\:border-black:hover {
  border-color: var(--color-black);
}
.hover\:border-grey-800:hover {
  border-color: var(--color-grey-800);
}
.hover\:border-grey-600:hover {
  border-color: var(--color-grey-600);
}
.hover\:\!border-grey-600:hover {
  border-color: var(--color-grey-600) !important;
}
.hover\:bg-grey-400:hover {
  background-color: var(--color-grey-400);
}
.hover\:bg-blue-500:hover {
  background-color: var(--color-blue-500);
}
.hover\:bg-grey-200:hover {
  background-color: var(--color-grey-200);
}
.hover\:bg-\[\#1942B7\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(25 66 183 / var(--tw-bg-opacity));
}
.hover\:text-white:hover {
  color: var(--color-white);
}
.hover\:text-black:hover {
  color: var(--color-black);
}
.hover\:text-blue-500:hover {
  color: var(--color-blue-500);
}
.hover\:text-grey-600:hover {
  color: var(--color-grey-600);
}
.hover\:\!text-grey-600:hover {
  color: var(--color-grey-600) !important;
}
.hover\:underline:hover {
  text-decoration: underline;
}
.hover\:opacity-75:hover {
  opacity: 0.75;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:shadow:hover {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-black:focus-visible {
  --tw-ring-color: var(--color-black);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.active\:-translate-x-0\.5:active {
  --tw-translate-x: -0.125rem;
  transform: var(--tw-transform);
}
.active\:-translate-x-0:active {
  --tw-translate-x: -0px;
  transform: var(--tw-transform);
}
.active\:translate-x-0\.5:active {
  --tw-translate-x: 0.125rem;
  transform: var(--tw-transform);
}
.active\:translate-x-0:active {
  --tw-translate-x: 0px;
  transform: var(--tw-transform);
}
.group:hover .group-hover\:text-blue-500 {
  color: var(--color-blue-500);
}
.group:hover .group-hover\:underline {
  text-decoration: underline;
}
.group:hover .group-hover\:decoration-1 {
  text-decoration-thickness: 1px;
}
.peer:checked ~ .peer-checked\:border-black {
  border-color: var(--color-black);
}
.peer:checked ~ .peer-checked\:bg-grey-200 {
  background-color: var(--color-grey-200);
}
.peer:checked ~ .peer-checked\:bg-blue-500 {
  background-color: var(--color-blue-500);
}
.peer:checked ~ .peer-checked\:bg-black {
  background-color: var(--color-black);
}
.peer:checked ~ .peer-checked\:text-white {
  color: var(--color-white);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-black {
  --tw-ring-color: var(--color-black);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.peer:disabled ~ .peer-disabled\:pointer-events-none {
  pointer-events: none;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:border-grey-300 {
  border-color: var(--color-grey-300);
}
.peer:disabled ~ .peer-disabled\:text-grey-500 {
  color: var(--color-grey-500);
}
@media (min-width: 640px) {
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .sm\:mt-0 {
    margin-top: 0px;
  }
  .sm\:inline-block {
    display: inline-block;
  }
  .sm\:w-40 {
    width: 10rem;
  }
  .sm\:columns-2 {
    -moz-columns: 2;
    columns: 2;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:pt-0 {
    padding-top: 0px;
  }
}
@media (min-width: 768px) {
  .md\:pointer-events-none {
    pointer-events: none;
  }
  .md\:absolute {
    position: absolute;
  }
  .md\:relative {
    position: relative;
  }
  .md\:sticky {
    position: sticky;
  }
  .md\:-bottom-10 {
    bottom: -2.5rem;
  }
  .md\:left-0 {
    left: 0px;
  }
  .md\:bottom-0 {
    bottom: 0px;
  }
  .md\:top-0 {
    top: 0px;
  }
  .md\:z-\[1\] {
    z-index: 1;
  }
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .md\:col-start-2 {
    grid-column-start: 2;
  }
  .md\:col-start-1 {
    grid-column-start: 1;
  }
  .md\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .md\:row-start-1 {
    grid-row-start: 1;
  }
  .md\:my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .md\:mt-6 {
    margin-top: 1.5rem;
  }
  .md\:mb-0 {
    margin-bottom: 0px;
  }
  .md\:mr-0 {
    margin-right: 0px;
  }
  .md\:-mb-10 {
    margin-bottom: -2.5rem;
  }
  .md\:mt-9 {
    margin-top: 2.25rem;
  }
  .md\:-mt-\[25\%\] {
    margin-top: -25%;
  }
  .md\:ml-auto {
    margin-left: auto;
  }
  .md\:ml-48 {
    margin-left: 12rem;
  }
  .md\:mr-2 {
    margin-right: 0.5rem;
  }
  .md\:mt-0 {
    margin-top: 0px;
  }
  .md\:ml-4 {
    margin-left: 1rem;
  }
  .md\:ml-0 {
    margin-left: 0px;
  }
  .md\:block {
    display: block;
  }
  .md\:\!block {
    display: block !important;
  }
  .md\:flex {
    display: flex;
  }
  .md\:grid {
    display: grid;
  }
  .md\:hidden {
    display: none;
  }
  .md\:\!hidden {
    display: none !important;
  }
  .md\:h-40 {
    height: 10rem;
  }
  .md\:h-full {
    height: 100%;
  }
  .md\:w-40 {
    width: 10rem;
  }
  .md\:w-3\/5 {
    width: 60%;
  }
  .md\:max-w-\[100\%\] {
    max-width: 100%;
  }
  .md\:-translate-y-\[150\%\] {
    --tw-translate-y: -150%;
    transform: var(--tw-transform);
  }
  .md\:translate-y-\[1px\] {
    --tw-translate-y: 1px;
    transform: var(--tw-transform);
  }
  .md\:columns-3 {
    -moz-columns: 3;
    columns: 3;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-\[1fr_2fr\] {
    grid-template-columns: 1fr 2fr;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-\[max-content_1fr\] {
    grid-template-columns: max-content 1fr;
  }
  .md\:grid-rows-\[max-content_max-content\] {
    grid-template-rows: max-content max-content;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:flex-col {
    flex-direction: column;
  }
  .md\:flex-col-reverse {
    flex-direction: column-reverse;
  }
  .md\:flex-wrap {
    flex-wrap: wrap;
  }
  .md\:items-end {
    align-items: flex-end;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:gap-16 {
    gap: 4rem;
  }
  .md\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }
  .md\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .md\:border {
    border-width: 1px;
  }
  .md\:border-b-0 {
    border-bottom-width: 0px;
  }
  .md\:border-r {
    border-right-width: 1px;
  }
  .md\:border-grey-400 {
    border-color: var(--color-grey-400);
  }
  .md\:p-10 {
    padding: 2.5rem;
  }
  .md\:p-6 {
    padding: 1.5rem;
  }
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .md\:pr-0 {
    padding-right: 0px;
  }
  .md\:pl-10 {
    padding-left: 2.5rem;
  }
  .md\:pb-32 {
    padding-bottom: 8rem;
  }
  .md\:pl-8 {
    padding-left: 2rem;
  }
  .md\:pb-8 {
    padding-bottom: 2rem;
  }
  .md\:pt-0 {
    padding-top: 0px;
  }
  .md\:pb-0 {
    padding-bottom: 0px;
  }
  .md\:pr-10 {
    padding-right: 2.5rem;
  }
  .md\:text-right {
    text-align: right;
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .md\:leading-tight {
    line-height: 1.25;
  }
  .md\:ratio_16x9:after {
    padding-bottom: 56.25%;
  }
  .md\:ratio_5x2:after {
    padding-bottom: 40%;
  }
  .md\:theme-grid {
    display: grid;
    grid-template-columns: var(--grid-col-sm);
    grid-column-gap: var(--grid-gutter-x);
  }
  .md\:grid-gap-2 {
    grid-gap: 0.5rem;
  }
  .md\:grid-gap-4 {
    grid-gap: 1rem;
  }
  .md\:grid-gap-5 {
    grid-gap: 1.25rem;
  }
  .md\:grid-gap-6 {
    grid-gap: 1.5rem;
  }
  .md\:grid-gap-8 {
    grid-gap: 2rem;
  }
  .md\:grid-gap-16 {
    grid-gap: 4rem;
  }
  .first\:md\:ml-2:first-child {
    margin-left: 0.5rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .md\:theme-grid {
    grid-template-columns: var(--grid-col-lg);
  }
  .col-span-center-offset-1 {
    grid-column: 2 / 8;
  }
}
@media (min-width: 1024px) {
  .lg\:absolute {
    position: absolute;
  }
  .lg\:relative {
    position: relative;
  }
  .lg\:-top-\[1px\] {
    top: -1px;
  }
  .lg\:left-0 {
    left: 0px;
  }
  .lg\:right-0 {
    right: 0px;
  }
  .lg\:top-10 {
    top: 2.5rem;
  }
  .lg\:bottom-auto {
    bottom: auto;
  }
  .lg\:left-auto {
    left: auto;
  }
  .lg\:top-4 {
    top: 1rem;
  }
  .lg\:right-4 {
    right: 1rem;
  }
  .lg\:bottom-0 {
    bottom: 0px;
  }
  .lg\:top-2 {
    top: 0.5rem;
  }
  .lg\:right-2 {
    right: 0.5rem;
  }
  .lg\:left-1\/2 {
    left: 50%;
  }
  .lg\:bottom-10 {
    bottom: 2.5rem;
  }
  .lg\:order-none {
    order: 0;
  }
  .lg\:order-2 {
    order: 2;
  }
  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .lg\:col-start-2 {
    grid-column-start: 2;
  }
  .lg\:col-start-8 {
    grid-column-start: 8;
  }
  .lg\:col-start-6 {
    grid-column-start: 6;
  }
  .lg\:col-start-3 {
    grid-column-start: 3;
  }
  .lg\:col-start-5 {
    grid-column-start: 5;
  }
  .lg\:col-end-12 {
    grid-column-end: 12;
  }
  .lg\:col-end-13 {
    grid-column-end: 13;
  }
  .lg\:col-end-7 {
    grid-column-end: 7;
  }
  .lg\:col-end-5 {
    grid-column-end: 5;
  }
  .lg\:col-end-11 {
    grid-column-end: 11;
  }
  .lg\:col-end-10 {
    grid-column-end: 10;
  }
  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .lg\:m-0 {
    margin: 0px;
  }
  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .lg\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .lg\:mt-4 {
    margin-top: 1rem;
  }
  .lg\:mt-8 {
    margin-top: 2rem;
  }
  .lg\:mt-10 {
    margin-top: 2.5rem;
  }
  .lg\:mt-14 {
    margin-top: 3.5rem;
  }
  .lg\:mb-16 {
    margin-bottom: 4rem;
  }
  .lg\:ml-auto {
    margin-left: auto;
  }
  .lg\:mt-0 {
    margin-top: 0px;
  }
  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }
  .lg\:mt-auto {
    margin-top: auto;
  }
  .lg\:mb-20 {
    margin-bottom: 5rem;
  }
  .lg\:mt-3 {
    margin-top: 0.75rem;
  }
  .lg\:mb-0 {
    margin-bottom: 0px;
  }
  .lg\:mb-12 {
    margin-bottom: 3rem;
  }
  .lg\:mt-6 {
    margin-top: 1.5rem;
  }
  .lg\:mt-11 {
    margin-top: 2.75rem;
  }
  .lg\:ml-page {
    margin-left: 86px;
  }
  .lg\:mt-\[125px\] {
    margin-top: 125px;
  }
  .lg\:mb-11 {
    margin-bottom: 2.75rem;
  }
  .lg\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .lg\:block {
    display: block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:inline-flex {
    display: inline-flex;
  }
  .lg\:\!grid {
    display: grid !important;
  }
  .lg\:grid {
    display: grid;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:h-40 {
    height: 10rem;
  }
  .lg\:max-h-\[768px\] {
    max-height: 768px;
  }
  .lg\:max-h-\[1500px\] {
    max-height: 1500px;
  }
  .lg\:min-h-\[950px\] {
    min-height: 950px;
  }
  .lg\:w-40 {
    width: 10rem;
  }
  .lg\:\!w-full {
    width: 100% !important;
  }
  .lg\:\!w-\[600px\] {
    width: 600px !important;
  }
  .lg\:w-8 {
    width: 2rem;
  }
  .lg\:w-\[300px\] {
    width: 300px;
  }
  .lg\:w-4\/5 {
    width: 80%;
  }
  .lg\:\!w-\[calc\(100vw-10\.75rem\)\] {
    width: calc(100vw - 10.75rem) !important;
  }
  .lg\:w-auto {
    width: auto;
  }
  .lg\:w-max {
    width: -moz-max-content;
    width: max-content;
  }
  .lg\:w-1\/2 {
    width: 50%;
  }
  .lg\:w-full {
    width: 100%;
  }
  .lg\:\!w-auto {
    width: auto !important;
  }
  .lg\:min-w-0 {
    min-width: 0px;
  }
  .lg\:\!max-w-\[580px\] {
    max-width: 580px !important;
  }
  .lg\:\!max-w-\[600px\] {
    max-width: 600px !important;
  }
  .lg\:max-w-\[435px\] {
    max-width: 435px;
  }
  .lg\:\!max-w-\[435px\] {
    max-width: 435px !important;
  }
  .lg\:max-w-\[580px\] {
    max-width: 580px;
  }
  .lg\:max-w-\[600px\] {
    max-width: 600px;
  }
  .lg\:max-w-\[960px\] {
    max-width: 960px;
  }
  .lg\:max-w-max {
    max-width: -moz-max-content;
    max-width: max-content;
  }
  .lg\:flex-1 {
    flex: 1 1 0%;
  }
  .lg\:flex-grow {
    flex-grow: 1;
  }
  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: var(--tw-transform);
  }
  .lg\:translate-y-0 {
    --tw-translate-y: 0px;
    transform: var(--tw-transform);
  }
  .lg\:columns-4 {
    -moz-columns: 4;
    columns: 4;
  }
  .lg\:grid-flow-col {
    grid-auto-flow: column;
  }
  .lg\:grid-flow-col-dense {
    grid-auto-flow: column dense;
  }
  .lg\:grid-cols-\[435px_calc\(100\%-499px\)\] {
    grid-template-columns: 435px calc(100% - 499px);
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[2fr_1fr_2fr_1fr\] {
    grid-template-columns: 2fr 1fr 2fr 1fr;
  }
  .lg\:grid-cols-\[4fr_2fr\] {
    grid-template-columns: 4fr 2fr;
  }
  .lg\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-rows-\[max-content_max-content\] {
    grid-template-rows: max-content max-content;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:flex-col {
    flex-direction: column;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:justify-end {
    justify-content: flex-end;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:gap-0 {
    gap: 0px;
  }
  .lg\:gap-11 {
    gap: 2.75rem;
  }
  .lg\:gap-x-12 {
    -moz-column-gap: 3rem;
    column-gap: 3rem;
  }
  .lg\:justify-self-end {
    justify-self: end;
  }
  .lg\:overflow-visible {
    overflow: visible;
  }
  .lg\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .lg\:whitespace-normal {
    white-space: normal;
  }
  .lg\:border-b {
    border-bottom-width: 1px;
  }
  .lg\:border-b-grey-400 {
    border-bottom-color: var(--color-grey-400);
  }
  .lg\:bg-grey-200 {
    background-color: var(--color-grey-200);
  }
  .lg\:p-0 {
    padding: 0px;
  }
  .lg\:p-5 {
    padding: 1.25rem;
  }
  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .lg\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lg\:pl-16 {
    padding-left: 4rem;
  }
  .lg\:pl-0 {
    padding-left: 0px;
  }
  .lg\:pl-4 {
    padding-left: 1rem;
  }
  .lg\:pb-0 {
    padding-bottom: 0px;
  }
  .lg\:pt-0 {
    padding-top: 0px;
  }
  .lg\:pl-5 {
    padding-left: 1.25rem;
  }
  .lg\:pb-20 {
    padding-bottom: 5rem;
  }
  .lg\:pt-40 {
    padding-top: 10rem;
  }
  .lg\:pl-8 {
    padding-left: 2rem;
  }
  .lg\:pl-page {
    padding-left: 86px;
  }
  .lg\:pt-6 {
    padding-top: 1.5rem;
  }
  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .lg\:leading-4 {
    line-height: 1rem;
  }
  .lg\:leading-5 {
    line-height: 1.25rem;
  }
  .lg\:boxed-layout {
    max-width: calc(100vw - 64px);
    margin-left: auto;
    margin-right: auto;
  }
  .lg\:ml-box {
    margin-left: 32px;
  }
  .lg\:section-p-y {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .lg\:theme-grid {
    display: grid;
    grid-template-columns: var(--grid-col-sm);
    grid-column-gap: var(--grid-gutter-x);
  }
  .lg\:grid-gap-1 {
    grid-gap: 0.25rem;
  }
  .lg\:grid-gap-2 {
    grid-gap: 0.5rem;
  }
  .lg\:grid-gap-4 {
    grid-gap: 1rem;
  }
  .lg\:grid-gap-8 {
    grid-gap: 2rem;
  }
  .lg\:grid-gap-10 {
    grid-gap: 2.5rem;
  }
  .lg\:grid-gap-x-10 {
    grid-column-gap: 2.5rem;
  }
  .lg\:grid-gap-x-20 {
    grid-column-gap: 5rem;
  }
  .lg\:first\:ml-0:first-child {
    margin-left: 0px;
  }
  .lg\:first\:pl-0:first-child {
    padding-left: 0px;
  }
  .lg\:last\:mr-0:last-child {
    margin-right: 0px;
  }
  .lg\:last\:pr-0:last-child {
    padding-right: 0px;
  }
  .group:hover .lg\:group-hover\:opacity-0 {
    opacity: 0;
  }
  .group:hover .lg\:group-hover\:opacity-100 {
    opacity: 1;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .lg\:boxed-layout {
    max-width: calc(100vw - 172px);
  }
  .ml-box {
    margin-left: 86px;
  }
  .mr-box {
    margin-right: 86px;
  }
  .escape-boxed-layout {
    margin-left: -86px;
    margin-right: -86px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .boxed-layout {
    max-width: calc(100vw - 172px);
  }
  .lg\:ml-box {
    margin-left: 86px;
  }
  .mr-box {
    margin-right: 86px;
  }
  .escape-boxed-layout {
    margin-left: -86px;
    margin-right: -86px;
  }
}
@media (min-width: 1024px) and (min-width: 1920px) {
  .lg\:boxed-layout {
    max-width: calc(1920px - 172px);
  }
  .ml-box {
    margin-left: calc((100vw - 1748px) / 2);
  }
  .mr-box {
    margin-right: calc((100vw - 1748px) / 2);
  }
}
@media (min-width: 1024px) and (min-width: 1920px) {
  .boxed-layout {
    max-width: calc(1920px - 172px);
  }
  .lg\:ml-box {
    margin-left: calc((100vw - 1748px) / 2);
  }
  .mr-box {
    margin-right: calc((100vw - 1748px) / 2);
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  /* Negative margins */
  .section-p-x {
    padding-left: 32px;
    padding-right: 32px;
  }
  .section-m-x {
    margin-left: 32px;
    margin-right: 32px;
  }
  .-section-m-x {
    margin-left: -32px;
    margin-right: -32px;
  }
  .lg\:section-p-y {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-m-y {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  .boxed {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  /* Negative margins */
  .section-p-x {
    padding-left: 70px;
    padding-right: 70px;
  }
  .section-m-x {
    margin-left: 70px;
    margin-right: 70px;
  }
  .-section-m-x {
    margin-left: -70px;
    margin-right: -70px;
  }
  .lg\:section-p-y {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .section-m-y {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
@media (min-width: 1024px) and (min-width: 1536px) {
  /* Negative margins */
  .section-p-x {
    padding-left: 44px;
    padding-right: 44px;
  }
  .section-m-x {
    margin-left: 44px;
    margin-right: 44px;
  }
  .-section-m-x {
    margin-left: -44px;
    margin-right: -44px;
  }
  .lg\:section-p-y {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-m-y {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .lg\:theme-grid {
    grid-template-columns: var(--grid-col-lg);
  }
  .col-span-center-offset-1 {
    grid-column: 2 / 8;
  }
}
@media (min-width: 1440px) {
  .xl\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .xl\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .xl\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .xl\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .xl\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .xl\:col-start-2 {
    grid-column-start: 2;
  }
  .xl\:col-start-3 {
    grid-column-start: 3;
  }
  .xl\:col-start-6 {
    grid-column-start: 6;
  }
  .xl\:col-start-4 {
    grid-column-start: 4;
  }
  .xl\:col-start-5 {
    grid-column-start: 5;
  }
  .xl\:col-end-12 {
    grid-column-end: 12;
  }
  .xl\:col-end-5 {
    grid-column-end: 5;
  }
  .xl\:col-end-13 {
    grid-column-end: 13;
  }
  .xl\:col-end-11 {
    grid-column-end: 11;
  }
  .xl\:mt-0 {
    margin-top: 0px;
  }
  .xl\:block {
    display: block;
  }
  .xl\:flex {
    display: flex;
  }
  .xl\:hidden {
    display: none;
  }
  .xl\:w-8 {
    width: 2rem;
  }
  .xl\:\!w-\[47vw\] {
    width: 47vw !important;
  }
  .xl\:w-40 {
    width: 10rem;
  }
  .xl\:w-\[289px\] {
    width: 289px;
  }
  .xl\:max-w-\[740px\] {
    max-width: 740px;
  }
  .xl\:max-w-\[670px\] {
    max-width: 670px;
  }
  .xl\:max-w-\[180px\] {
    max-width: 180px;
  }
  .xl\:max-w-\[311px\] {
    max-width: 311px;
  }
  .xl\:max-w-\[436px\] {
    max-width: 436px;
  }
  .xl\:flex-shrink-0 {
    flex-shrink: 0;
  }
  .xl\:grid-cols-\[435px_calc\(100\%-563px\)\] {
    grid-template-columns: 435px calc(100% - 563px);
  }
  .xl\:grid-cols-\[1fr_max-content\] {
    grid-template-columns: 1fr max-content;
  }
  .xl\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:flex-row {
    flex-direction: row;
  }
  .xl\:flex-col {
    flex-direction: column;
  }
  .xl\:flex-col-reverse {
    flex-direction: column-reverse;
  }
  .xl\:items-center {
    align-items: center;
  }
  .xl\:justify-end {
    justify-content: flex-end;
  }
  .xl\:gap-32 {
    gap: 8rem;
  }
  .xl\:overflow-hidden {
    overflow: hidden;
  }
  .xl\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .xl\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .xl\:pl-10 {
    padding-left: 2.5rem;
  }
  .xl\:pb-10 {
    padding-bottom: 2.5rem;
  }
  .xl\:pl-\[12\%\] {
    padding-left: 12%;
  }
  .xl\:pt-20 {
    padding-top: 5rem;
  }
  .xl\:pb-20 {
    padding-bottom: 5rem;
  }
  .xl\:pb-0 {
    padding-bottom: 0px;
  }
  .xl\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .xl\:boxed-layout {
    max-width: calc(100vw - 64px);
    margin-left: auto;
    margin-right: auto;
  }
  .xl\:grid-gutter-x {
    grid-column-gap: var(--grid-gutter-x);
  }
  .xl\:theme-grid {
    display: grid;
    grid-template-columns: var(--grid-col-sm);
    grid-column-gap: var(--grid-gutter-x);
  }
  .xl\:grid-gap-6 {
    grid-gap: 1.5rem;
  }
  .xl\:grid-gap-10 {
    grid-gap: 2.5rem;
  }
  .xl\:grid-gap-32 {
    grid-gap: 8rem;
  }
  .xl\:first\:ml-0:first-child {
    margin-left: 0px;
  }
  .xl\:last\:mr-0:last-child {
    margin-right: 0px;
  }
}
@media (min-width: 1440px) and (min-width: 1024px) {
  .xl\:boxed-layout {
    max-width: calc(100vw - 172px);
  }
  .ml-box {
    margin-left: 86px;
  }
  .mr-box {
    margin-right: 86px;
  }
  .escape-boxed-layout {
    margin-left: -86px;
    margin-right: -86px;
  }
}
@media (min-width: 1440px) and (min-width: 1920px) {
  .xl\:boxed-layout {
    max-width: calc(1920px - 172px);
  }
  .ml-box {
    margin-left: calc((100vw - 1748px) / 2);
  }
  .mr-box {
    margin-right: calc((100vw - 1748px) / 2);
  }
}
@media (min-width: 1440px) and (min-width: 768px) {
  .xl\:theme-grid {
    grid-template-columns: var(--grid-col-lg);
  }
  .col-span-center-offset-1 {
    grid-column: 2 / 8;
  }
}
@media (min-width: 1536px) {
  .\32 xl\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .\32 xl\:ml-16 {
    margin-left: 4rem;
  }
  .\32 xl\:mt-20 {
    margin-top: 5rem;
  }
  .\32 xl\:mt-6 {
    margin-top: 1.5rem;
  }
  .\32 xl\:h-56 {
    height: 14rem;
  }
  .\32 xl\:\!w-96 {
    width: 24rem !important;
  }
  .\32 xl\:w-56 {
    width: 14rem;
  }
  .\32 xl\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: var(--tw-transform);
  }
  .\32 xl\:translate-y-8 {
    --tw-translate-y: 2rem;
    transform: var(--tw-transform);
  }
  .\32 xl\:translate-x-1\/2 {
    --tw-translate-x: 50%;
    transform: var(--tw-transform);
  }
  .\32 xl\:-translate-y-8 {
    --tw-translate-y: -2rem;
    transform: var(--tw-transform);
  }
  .\32 xl\:p-20 {
    padding: 5rem;
  }
  .\32 xl\:px-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .\32 xl\:px-36 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .\32 xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .\32 xl\:pl-36 {
    padding-left: 9rem;
  }
  .\32 xl\:pb-36 {
    padding-bottom: 9rem;
  }
  .\32 xl\:pt-56 {
    padding-top: 14rem;
  }
  .\32 xl\:pb-40 {
    padding-bottom: 10rem;
  }
  .\32 xl\:pt-32 {
    padding-top: 8rem;
  }
  .\32 xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .\32 xl\:grid-gap-8 {
    grid-gap: 2rem;
  }
  .\32 xl\:grid-gap-x-28 {
    grid-column-gap: 7rem;
  }
}
@media (min-width: 1920px) {
  .\33 xl\:w-8 {
    width: 2rem;
  }
  .\33 xl\:grid-gap-6 {
    grid-gap: 1.5rem;
  }
}
/*
 * Tailwind CSS
 */
.filter-panel-items-container .icon {
  width: 30px;
  height: 30px;
}
.product-detail-configurator-option-label {
  text-transform: capitalize;
}
.no-padding .boxed {
  padding-top: 0px;
  padding-bottom: 0px;
}
.product-detail-tab-accordion .faq-answer * {
  font-size: 14px !important;
}