/** Shopify CDN: Minification failed

Line 10681:1 Unexpected "/"

**/
@charset "UTF-8";
/**
 * =============================================================
 * =============================================================
 *
 * # Settings
 * SCSS variables. These won't appear on compiled CSS file.
 *
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * =============================================================
 *
 * # Tools
 * SCSS mixins. These won't appear on compiled CSS file.
 *
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * =============================================================
 *
 * # Generic
 * Generic styling such as resets
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## RESET
 * =============================================================
 */
/**
 * 1. Font smoothing for Mac OS X. This property can have some negative affects 
 *    if using very light fonts especially Raleway.
 * 2. Text size adjust to ensure mobile devices do not alter font sizes.
 * 3. Touch action that enables no-delay taps (FastClick-esque) on supporting 
 *    browsers.
 */
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  /* [1] */
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  /* [2] */
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -ms-touch-action: manipulation;
  /* [3] */
  touch-action: manipulation;
  overflow-x: hidden;
}

/**
 * We use box-sizing inherit to make it easier to change the box-sizing in 
 * plugins or other components that leverage other behavior.
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*, *::before, *::after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  text-align: inherit;
}

button,
[type=submit] {
  padding: 0;
  overflow: visible;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

img,
video {
  height: auto;
  max-width: 100%;
  border-style: none;
  vertical-align: top;
}

/* By default Firefox shows the alt tag of image while image is loading, which is often not desirable */
img:-moz-loading {
  visibility: hidden;
}

iframe {
  border: 0;
}

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

td,
th {
  padding: 0;
}

[hidden] {
  display: none;
}

b, strong {
  font-weight: var(--font-weight-body-bold);
}

/**
 * =============================================================
 * =============================================================
 *
 * # Elements
 * Styling of general elements such as HTML. This has some overlap
 * with the `Base` section but we want this declared before our
 * `Objects` section
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## HTML
 * =============================================================
 */
html {
  font-family: var(--font-family-body);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  font-weight: var(--font-weight-body);
  font-style: var(--font-style-body);
  color: rgb(var(--color-text));
  background: rgb(var(--color-bg));
}

/**
 * =============================================================
 * =============================================================
 *
 * # Objects
 * Structural classes that largely feature no styling
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## CONTAINER
 * =============================================================
 */
.o-container,
.shopify-policy__container.shopify-policy__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}

.o-container--flush {
  padding-left: 0;
  padding-right: 0;
}

/**
 * =============================================================
 * ## Anchor
 *    https://gomakethings.com/how-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header-with-one-line-of-css/
 * =============================================================
 */
.o-anchor {
  scroll-margin-top: calc(0px * var(--enable-sticky-header) + 0px * var(--enable-sticky-announcement-bar) + 20px);
  scroll-margin-top: calc(var(--header-height, 0px) * var(--enable-sticky-header) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar) + var(--anchor-offset, 20px));
}

/**
 * =============================================================
 * ## TAP AREA
 * - Provides additional spacing around an element for a larger tap area.
 * =============================================================
 */
.o-tap-area {
  position: relative;
}

.o-tap-area::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  bottom: -6px;
  right: -6px;
}

.o-tap-area--large::before {
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
}

/**
 * =============================================================
 * ## Flex Grid
 * A Flexbox grid system. We've only added this to work with the `Promo Grid`
 * section which was largely copied from the Impulse theme.
 * =============================================================
 */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
}

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

.flex-grid--gutters {
  margin-top: -15px;
  margin-left: -15px;
}

.flex-grid__item {
  flex: 0 1 100%;
  display: flex;
  align-items: stretch;
}

.flex-grid--gutters .flex-grid__item {
  padding-top: 15px;
  padding-left: 15px;
}

.flex-grid__item > * {
  flex: 1 1 100%;
}

.flex-grid__item--stretch {
  flex: 1 1 100%;
}

.flex-grid__item--stretch:first-child {
  min-width: 250px;
}

@media screen and (min-width: 768px) {
  .flex-grid__item--33 {
    flex-basis: 33.33%;
  }

  .flex-grid__item--50 {
    flex-basis: 50%;
  }
}
@media screen and (max-width: 767px) {
  .flex-grid__item--mobile-second {
    order: 2;
  }
}
/**
 * =============================================================
 * =============================================================
 *
 * # Base
 * This includes general accessibility setup and styling of major
 * HTML elements using classes
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## No JS
 * =============================================================
 */
.js .no-js {
  display: none !important;
}

/**
 * =============================================================
 * ## Account
 * =============================================================
 */
/* ### Tab Focus Styles
 * ========================================================== */
/**
 * JS file will recognise when tabs are occurring and add a `focus-outline`
 * class to the body allowing to show outlines.
 */
.js .no-focus-outline *:focus {
  outline: none;
}

/* ### Skip to Content
 * ========================================================== */
.skip-to-content:focus {
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-bg));
  padding: 10px;
  opacity: 1;
  z-index: 10000;
  transition: none;
}

/* ### Visually Hidden
 * ========================================================== */
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.no-js .transition-cover {
  display: none;
}

.transition-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgb(var(--color-bg));
  z-index: 1000;
  pointer-events: none;
  transition-property: opacity, visibility;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

.loaded .transition-cover {
  opacity: 0;
  visibility: hidden;
}

.unloading .transition-cover {
  opacity: 1;
  visibility: visible;
}

/**
 * =============================================================
 * ## Typography
 * =============================================================
 */
:lang(ar) * {
  letter-spacing: normal !important;
  /* Arabic should never have letter spacing as it makes it unreadable on some fonts */
}

/* ### General Typography
 * ========================================================== */
p:first-child,
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child,
.rte h1:first-child, .rte h2:first-child, .rte h3:first-child, .rte h4:first-child, .rte h5:first-child, .rte h6:first-child,
blockquote:first-child, .rte blockquote:first-child {
  margin-top: 0;
}
p:last-child,
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child,
.rte h1:last-child, .rte h2:last-child, .rte h3:last-child, .rte h4:last-child, .rte h5:last-child, .rte h6:last-child,
blockquote:last-child, .rte blockquote:last-child {
  margin-bottom: 0;
}

p {
  margin-bottom: 1em;
}

strong,
b {
  font-weight: var(--font-weight-body-bold);
}

/* ### Headings
 * ========================================================== */
.heading,
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
  display: block;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-style: var(--font-style-heading);
}

.heading-h0 {
  font-size: 39px;
  line-height: 1.1;
}
@media screen and (min-width: 768px) {
  .heading-h0 {
    font-size: 47px;
  }
}

.heading-h1,
.rte h1 {
  font-size: 33px;
  line-height: 1.125;
}
@media screen and (min-width: 768px) {
  .heading-h1,
.rte h1 {
    font-size: 40px;
  }
}

.heading-h2,
.rte h2 {
  font-size: 27px;
  line-height: 1.14285;
}
@media screen and (min-width: 768px) {
  .heading-h2,
.rte h2 {
    font-size: 33px;
  }
}

.heading-h3,
.rte h3 {
  font-size: 23px;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .heading-h3,
.rte h3 {
    font-size: 27px;
  }
}

.heading-h4,
.rte h4 {
  font-size: 19px;
  line-height: 1.33333;
}
@media screen and (min-width: 768px) {
  .heading-h4,
.rte h4 {
    font-size: 23px;
  }
}

.heading-h5,
.rte h5 {
  font-size: 16px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .heading-h5,
.rte h5 {
    font-size: 19px;
  }
}

.heading-h6,
.rte h6 {
  font-size: 13px;
  line-height: 1.4285;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 768px) {
  .heading-h6,
.rte h6 {
    font-size: 14px;
  }
}

/* ### Sub headings
 * ========================================================== */
.subheading {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.subheading-h0 {
  font-size: 18px;
  line-height: 1.1;
}
@media screen and (min-width: 768px) {
  .subheading-h0 {
    font-size: 19px;
  }
}

.subheading-h1 {
  font-size: 16px;
  line-height: 1.125;
}
@media screen and (min-width: 768px) {
  .subheading-h1 {
    font-size: 17px;
  }
}

.subheading-h2 {
  font-size: 14px;
  line-height: 1.14285;
}
@media screen and (min-width: 768px) {
  .subheading-h2 {
    font-size: 15px;
  }
}

.subheading-h3 {
  font-size: 12px;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .subheading-h3 {
    font-size: 13px;
  }
}

.subheading-h4 {
  font-size: 11px;
  line-height: 1.33333;
}
@media screen and (min-width: 768px) {
  .subheading-h4 {
    font-size: 12px;
  }
}

/* ### Deck
 * Commonly used as text underneath a heading
 * ========================================================== */
.deck-text--max-width {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ### Blockquotes
 * ========================================================== */
.blockquote,
.rte blockquote {
  border-left: 5px solid rgb(var(--color-border));
  padding: 12px 0 12px 24px;
  font-size: 18px;
  line-height: 1.33333;
}
@media screen and (min-width: 768px) {
  .blockquote,
.rte blockquote {
    font-size: 24px;
  }
}

/* ### Assorted text classes
 * ========================================================== */
.text--strong {
  font-weight: var(--font-weight-body-bold);
}

.text--small {
  font-size: calc(var(--base-font-size) - 2px);
}

.text--x-small {
  font-size: calc(var(--base-font-size) - 3px);
}

.text--subdued {
  color: rgba(var(--color-text), 0.7);
}

.heading--accent,
.text--accent {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text--warning {
  color: rgba(var(--color-error));
}

/**
 * =============================================================
 * ## LINKS
 * =============================================================
 */
p a:not(.button),
p a:not(.btn),
.rte a:not(.button),
.rte a:not(.btn),
.link {
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-text-decoration-color: rgba(var(--color-text), 0.35);
  text-decoration-color: rgba(var(--color-text), 0.35);
  transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
  transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: text-decoration-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
}
@media screen and (pointer: fine) {
  p a:not(.button):hover,
p a:not(.btn):hover,
.rte a:not(.button):hover,
.rte a:not(.btn):hover,
.link:hover {
    color: rgb(var(--color-text));
    -webkit-text-decoration-color: rgb(var(--color-text));
    text-decoration-color: rgb(var(--color-text));
  }
}

/**
 * =============================================================
 * ## LISTS
 * =============================================================
 */
.list--unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.unordered-list,
.text-container ul,
.rte ul {
  margin-left: 1.25em;
  margin-right: 0;
  padding: 0;
}

.unordered-list li,
.text-container ul li,
.rte ul li {
  padding: 2px 0 2px 5px;
}
.unordered-list li::marker,
.text-container ul li::marker,
.rte ul li::marker {
  color: inherit;
  font-size: 16px;
}

.ordered-list,
.text-container ol,
.rte ol {
  margin-left: 1.25em;
  margin-right: 0;
  padding: 0;
}

.ordered-list li,
.text-container ol li,
.rte ol li {
  padding: 2px 0 2px 5px;
}
.ordered-list li::marker,
.text-container ol li::marker,
.rte ol li::marker {
  color: inherit;
  font-size: 12px;
}

/**
 * =============================================================
 * ## TABLE
 =============================================================
 */
.table-wrapper {
  overflow-x: auto;
}

.table,
.rte table {
  --table-spacing: 16px;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .table,
.rte table {
    --table-spacing: 24px;
  }
}

.table--loose {
  --table-spacing: 24px;
}
@media screen and (min-width: 1025px) {
  .table--loose {
    --table-spacing: 32px;
  }
}

.table th:not([class*=text--]),
.rte table th:not([class*=text--]) {
  text-align: left;
}

.table th,
.rte table th {
  padding-left: var(--table-spacing);
  padding-right: var(--table-spacing);
  padding-bottom: 15px;
  border-bottom: 1px solid rgb(var(--color-border));
}

.table td.half-spaced,
.rte table td.half-spaced {
  padding: calc(var(--table-spacing) / 2);
}

.table td,
.rte table td {
  padding: var(--table-spacing);
  padding-bottom: 0;
}

.table tr[onclick] {
  cursor: pointer;
}

.table th:first-child,
.rte table th:first-child,
.table td:first-child,
.rte table td:first-child {
  padding-left: 0;
}

.table th:first-child,
.rte table th:first-child,
.table td:first-child,
.rte table td:first-child {
  padding-right: 0;
}

.table th:last-child,
.rte table th:last-child,
.table td:last-child,
.rte table td:last-child {
  padding-right: 0;
}

.table th:last-child,
.rte table th:last-child,
.table td:last-child,
.rte table td:last-child {
  padding-left: 0;
}

.table tfoot tr:first-child td,
.rte table tfoot tr:first-child td {
  border-top: 1px solid rgb(var(--color-border));
}

.table tfoot tr:not(:first-child) td,
.rte table tfoot tr:not(:first-child) td {
  padding-top: 8px;
}

@media screen and (max-width: 767px) {
  .table tfoot td,
.rte table tfoot td {
    padding-top: 16px;
  }
}

.table--bordered td {
  border-top: 1px solid rgb(var(--color-border));
  padding-bottom: var(--table-spacing);
}

.table--bordered th {
  border-bottom: 0;
}

.table--footered tbody tr:last-child td {
  padding-bottom: var(--table-spacing);
}

/**
 * =============================================================
 * ## RTE Spacing
 * =============================================================
 */
.text-container p:not(.heading) + p,
.rte p:not(.heading) + p,
.text-container p + form,
.rte p + form {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .text-container p + form,
.rte p + form {
    margin-top: 32px;
  }
}

.text-container .heading-h1,
.rte h1 {
  margin: 32px 0 24px;
}
@media screen and (min-width: 768px) {
  .text-container .heading-h1,
.rte h1 {
    margin: 32px 0 24px;
  }
}

.text-container .heading-h2,
.rte h2,
.text-container .heading-h3,
.rte h3,
.text-container .heading-h4,
.rte h4,
.text-container .heading-h5,
.rte h5,
.text-container .heading-h6,
.rte h6 {
  margin: 32px 0 16px;
}

@media screen and (min-width: 768px) {
  .text-container .heading-h2,
.rte h2,
.text-container .heading-h3,
.rte h3,
.text-container .heading-h4,
.rte h4 {
    margin: 32px 0 16px;
  }
}

@media screen and (min-width: 768px) {
  .text-container .heading-h5,
.rte h5,
.text-container .heading-h6,
.rte h6 {
    margin: 32px 0 16px;
  }
}

.blockquote,
.rte blockquote {
  margin: 32px 0 32px;
}
@media screen and (min-width: 768px) {
  .blockquote,
.rte blockquote {
    margin: 32px 0 32px;
  }
}

.text-container img:not([style*=float]),
.rte img:not([style*=float]) {
  display: block;
  margin: 32px 0;
}

.text-container ul,
.rte ul,
.text-container ol,
.rte ol {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* We remove the spacing for first item and last item */
.rte > :first-child,
.text-container > :first-child {
  margin-top: 0;
}

.rte > :last-child,
.text-container > :last-child {
  margin-bottom: 0;
}

.rte .subheading + .heading,
.rte .subheading + h1,
.rte .subheading + h2,
.rte .subheading + h3,
.rte .subheading + h4 {
  margin-top: 12px;
}
@media screen and (min-width: 768px) {
  .rte .subheading + .heading,
.rte .subheading + h1,
.rte .subheading + h2,
.rte .subheading + h3,
.rte .subheading + h4 {
    margin-top: 12px;
  }
}

/**
 * =============================================================
 * ## FORM ELEMENTS
 * =============================================================
 */
/* Make sure to keep this order the same as it relies on inheritance */
.form__banner:not(:last-child) {
  margin-bottom: 24px;
}

.form__info {
  margin-top: 0;
  margin-bottom: 24px;
}

.form__submit {
  margin-top: var(--form-submit-margin);
}

.form__submit--closer {
  margin-top: calc(var(--form-submit-margin) / 2);
}

/* Element that is added below a submit form to provide a secondary, subdued action */
.form__secondary-action {
  display: block;
  width: 100%;
  margin-top: 16px;
  text-align: center;
}

.form__secondary-action .link {
  padding-left: 8px;
}

@media screen and (min-width: 1025px) {
  .form__banner:not(:last-child),
.form__info {
    margin-bottom: 32px;
  }
}
/* ### Input
 * ========================================================== */
.input {
  position: relative;
}

.input + .input,
.input + .input-row,
.input-row + .input-row,
.input-row + .input {
  margin-top: var(--form-input-gap);
}

.input__field,
#shopify-product-reviews .spr-form-input-text,
#shopify-product-reviews .spr-form-input-email,
#shopify-product-reviews .spr-form-input-textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border-radius: var(--button-border-radius);
  border: 1px solid rgba(var(--color-text), 0.15);
  box-shadow: none;
  background: transparent;
  color: var(--color-text);
  transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.input__field:focus,
select:focus,
#shopify-product-reviews .spr-form-input-text:focus,
#shopify-product-reviews .spr-form-input-email:focus,
#shopify-product-reviews .spr-form-input-textarea:focus {
  border-color: rgb(var(--color-text));
  box-shadow: 0 0 0 1px rgb(var(--color-text)) inset;
  outline: none;
}

.input__field::placeholder {
  color: rgba(var(--color-text), 0.7);
}

.input__field--transparent {
  background: transparent;
}

.input__field--textarea,
#shopify-product-reviews .spr-form-input-textarea {
  resize: vertical;
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: top;
  line-height: inherit;
}

/**
 * 12px top and bottom padding = 24px padding
 * 1.65 line height * 16px font size = 26.4px
 * TOTAL HEIGHT OF BOX is 50.4px
 *
 * Label line height = 16px
 * 50.4px - 16px = 34.4px of space
 * 34.4px / 2 = 17.2px from top
 */
.input__label {
  position: absolute;
  font-size: 16px;
  top: 17.2px;
  left: 16px;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.2s ease-in-out;
  background: rgb(var(--color-bg));
  padding: 0 5px;
  color: rgba(var(--color-text), 0.7);
  line-height: 1;
  white-space: nowrap;
}

[focus-within] ~ .input__label,
.is-filled ~ .input__label {
  transform: translateY(-23.2px) scale(0.75);
}

:focus-within ~ .input__label,
.is-filled ~ .input__label {
  transform: translateY(-23.2px) scale(0.75);
}

/* Block label is outside the field itself (used on very few forms actually) */
.input__block-label {
  display: inline-block;
  margin-bottom: 8px;
}

.input__field-link {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
}

/* This icon is placed within an input div */
.input__submit-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.input-row .button {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .input-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
    grid-gap: var(--form-input-gap);
    gap: var(--form-input-gap);
  }

  .input-row .input {
    margin-top: 0;
  }

  .input + .input--checkbox,
.input-row + .input--checkbox {
    margin-top: 30px;
  }

  .input__field-link {
    right: 18px;
  }
}
/* ### Input Prefix
 * Allows to create a small input with a prefixed value
 * ========================================================== */
.input-prefix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid rgb(var(--color-border));
}

.input-prefix__field {
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
  min-width: 0;
  width: 100%;
  border: none;
  text-align: right;
}

.input-prefix__field::-webkit-outer-spin-button,
.input-prefix__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ### Checkbox
 * ========================================================== */
.checkbox-container {
  display: flex;
  align-items: baseline;
}

.checkbox-container + .checkbox-container {
  margin-top: 10px;
}

.checkbox {
  position: relative;
  top: 2px;
  -webkit-appearance: none;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgb(var(--color-border));
  background-color: rgb(var(--color-bg));
  border-radius: 0;
  transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
  cursor: pointer;
}

.checkbox:checked {
  border-color: rgb(var(--color-text));
  background-color: rgb(var(--color-text));
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgM0w0IDZMOS4wMDE0NiAxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg==);
  background-position: center;
  background-repeat: no-repeat;
}

.checkbox:disabled + label {
  opacity: 0.7;
  cursor: default;
}

.checkbox + label {
  cursor: pointer;
  padding-left: 12px;
}

@media screen and (min-width: 1025px) {
  .checkbox-container + .checkbox-container {
    margin-top: 2px;
  }
}
/* ### Select
 * ========================================================== */
.select-wrapper {
  position: relative;
}

.select {
  -webkit-appearance: none;
  appearance: none;
  /* Remove default style if applied to a built-in select */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  width: 100%;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--button-border-radius);
  background: transparent;
  cursor: pointer;
}

.select--collapse-start {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.select--collapse-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.select svg {
  margin-left: 20px;
}

.select svg {
  transition: transform 0.25s ease-in-out;
}

/* When the select class is applied to a native select, then the svg arrow is positioned absolutely */
.select ~ svg {
  right: 18px;
}

.select ~ svg {
  position: absolute;
  top: calc(50% - 4px);
}

.select__selected-value {
  position: relative;
  display: flex;
  align-items: center;
  top: -1px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select__color-swatch {
  margin-right: 10px;
}

.select__color-swatch {
  margin-left: 10px;
}

.select__color-swatch {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: var(--swatch-color-border-radius);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.select__color-swatch--white {
  box-shadow: 0 0 0 1px rgba(var(--color-text), 0.3) inset;
}

.select--small {
  font-size: 14px;
  padding: 6px 12px;
}

.select--small svg {
  margin-left: 10px;
}

.select--small svg {
  margin-right: 10px;
}

.select[aria-expanded=true] svg {
  transform: rotateZ(180deg);
}

@media screen and (min-width: 768px) {
  .select__selected-value {
    pointer-events: none;
  }
}
/* ### Range
 * ========================================================== */
/*
 * Styling range are pretty complex as each browsers has their own way to do it
 */
/* First we revert the styling of range elements */
.range {
  -webkit-appearance: none;
  appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
  background: transparent;
  /* Otherwise white in Chrome */
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
}

/* Chrome and Safari */
.range::-webkit-slider-thumb {
  position: relative;
  height: 14px;
  width: 14px;
  border-radius: 100%;
  border: none;
  background: rgb(var(--color-bg));
  cursor: pointer;
  margin-top: -5px;
  z-index: 1;
  box-shadow: 0 0 0 5px rgb(var(--color-text)) inset;
}

.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgb(var(--color-border));
  border-radius: 4px;
  border: none;
}

/* Firefox */
.range::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 100%;
  border: none;
  background: rgb(var(--color-bg));
  cursor: pointer;
  box-shadow: 0 0 0 5px rgb(var(--color-text)) inset;
}

.range::-moz-range-progress,
.range::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
}

.range::-moz-range-progress {
  background-color: rgba(var(--color-text), 0.7);
}

.range::-moz-range-track {
  background-color: rgb(var(--color-border));
}

/* On non-hover devices, we make the thumb bigger */
@media not screen and (pointer: fine) {
  .range::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    margin-top: -7px;
    box-shadow: 0 0 0 7px rgb(var(--color-text)) inset;
  }

  .range::-moz-range-thumb {
    height: 20px;
    width: 20px;
    box-shadow: 0 0 0 7px rgb(var(--color-text)) inset;
  }
}
/* Range group (when using double range, we need to rely on some clever trick). Range min and max are set in JS or directly in elements */
.range-group {
  height: 6px;
  background: linear-gradient(to right, rgb(var(--color-border)) var(--range-min), rgba(var(--color-text), 0.7) var(--range-min), rgba(var(--color-text), 0.7) var(--range-max), rgb(var(--color-border)) var(--range-max));
  border-radius: 4px;
}

.range-group .range {
  pointer-events: none;
  height: 6px;
  vertical-align: top;
}

.range-group .range::-webkit-slider-runnable-track {
  background: none;
}

.range-group .range::-webkit-slider-thumb {
  pointer-events: auto;
}

.range-group .range::-moz-range-progress,
.range-group .range::-moz-range-track {
  background: none;
}

.range-group .range::-moz-range-thumb {
  pointer-events: auto;
}

.range-group .range:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/**
 * =============================================================
 * =============================================================
 *
 * # Vendor
 * 3rd Party vendor code
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * =============================================================
 *
 * # Components / Media
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Aspect Ratio
 *    https://css-tricks.com/aspect-ratio-boxes/
 * =============================================================
 */
.aspect-ratio {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* The aspect-ratio can also contain a native HTML5 video element */
.aspect-ratio img,
.aspect-ratio video,
.aspect-ratio svg {
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.aspect-ratio--square img,
.aspect-ratio--short img,
.aspect-ratio--tall img,
.aspect-ratio--x-tall img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  top: 50%;
  left: 50%;
  /* We must use this and not logical property here */
  transform: translate(-50%, -50%) !important;
}

.aspect-ratio--cover img,
.aspect-ratio--cover video,
.aspect-ratio--cover svg {
  o-object-fit: cover;
  object-fit: cover;
}

.aspect-ratio--square {
  padding-bottom: 100% !important;
}

.aspect-ratio--short {
  padding-bottom: 75% !important;
}

.aspect-ratio--tall {
  padding-bottom: 133% !important;
}

.aspect-ratio--x-tall {
  padding-bottom: 150% !important;
}

.aspect-ratio--wide {
  padding-bottom: 56.25% !important;
}

@supports (aspect-ratio: 1/1) {
  .aspect-ratio {
    padding-bottom: 0 !important;
    aspect-ratio: var(--aspect-ratio);
  }

  .aspect-ratio--natural img,
.aspect-ratio--natural video,
.aspect-ratio--natural svg {
    position: relative;
    width: auto;
  }

  .aspect-ratio--square {
    aspect-ratio: 1;
  }

  .aspect-ratio--short {
    aspect-ratio: 4/3;
  }

  .aspect-ratio--tall {
    aspect-ratio: 3/4;
  }

  .aspect-ratio--x-tall {
    aspect-ratio: 2/3;
  }

  .aspect-ratio--wide {
    aspect-ratio: 16/9;
  }
}
/**
 * =============================================================
 * ## PLACEHOLDER
 * - Styling for Shopify placeholder images used across sections and blocks
 * =============================================================
 */
.placeholder-image {
  position: relative;
  padding-bottom: 75%;
  background-color: rgb(var(--color-secondary-bg));
}
@media screen and (min-width: 1025px) {
  .placeholder-image {
    padding-bottom: 45%;
  }
}

.placeholder-background {
  background-color: rgb(var(--color-secondary-bg));
}

.placeholder-image svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/**
 * =============================================================
 * ## Video Wrapper
 * These settings are currently being used for product media.
 * =============================================================
 */
.video-wrapper {
  display: block;
  position: relative;
}

.video-wrapper::after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
  /* 16:9 */
  pointer-events: none;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* The cover variation is used when we use an iframe such as YouTube and Vimeo, and want the video to covers the whole div */
.video-wrapper--cover {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.video-wrapper--cover::after {
  display: none;
}

.video-wrapper--cover iframe {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: 100%;
  width: var(--video-width, 100%);
  height: 100%;
  height: var(--video-height, 100%);
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-wrapper--cover iframe {
    --video-height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-wrapper--cover iframe {
    --video-width: 177.78vh;
    height: calc(var(--video-height) + 200px);
  }
}
/* Inert variation is useful for background video */
.video-wrapper--inert iframe {
  pointer-events: none;
}

/* For native one we use a different thing */
.video-wrapper--native {
  aspect-ratio: var(--aspect-ratio);
}

.video-wrapper--native video {
  width: 100%;
  height: 100%;
}

.video-wrapper--native::after {
  display: none;
}

@supports not (aspect-ratio: 1) {
  .video-wrapper--native video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .video-wrapper--native::after {
    display: block;
    padding-bottom: calc(100% / var(--aspect-ratio));
  }
}
/* A cover image can be optionally added before the iframe / video tag */
.video-wrapper__poster {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.video-wrapper__poster,
.video-wrapper iframe {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

.video-wrapper__poster-content {
  position: absolute;
}

.video-wrapper__poster-image {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  height: 100%;
  width: 100%;
}

@keyframes playButtonRipple {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--color-play-button-bg)), 0 0 0 0 rgb(var(--color-play-button-bg));
  }
  100% {
    box-shadow: 0 0 0 9px rgba(var(--color-play-button-bg), 0), 0 0 0 18px rgba(var(--color-play-button-bg), 0);
  }
}
@media screen and (min-width: 1025px) {
  @keyframes playButtonRipple {
    0% {
      box-shadow: 0 0 0 0 rgb(var(--color-play-button-bg)), 0 0 0 0 rgb(var(--color-play-button-bg));
    }
    100% {
      box-shadow: 0 0 0 17px rgba(var(--color-play-button-bg), 0), 0 0 0 32px rgba(var(--color-play-button-bg), 0);
    }
  }
}
.video-wrapper__play-button {
  border-radius: 100%;
}

.video-wrapper__play-button--ripple {
  animation: playButtonRipple 1400ms ease-in-out infinite;
}

.video-wrapper__play-button:not(:only-child) {
  margin-bottom: 32px;
}
@media screen and (min-width: 1025px) {
  .video-wrapper__play-button:not(:only-child) {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 1025px) {
  .video-wrapper__play-button--large svg {
    width: 104px;
    height: 104px;
  }
}

/* For the boxed variation, the size setting controls the width */
.video-section--boxed {
  margin-left: auto;
  margin-right: auto;
}

.video-section--boxed.video-section--small {
  max-width: 800px;
}

.video-section--boxed.video-section--medium {
  max-width: 1000px;
}

.video-section--boxed.video-section--large {
  max-width: 1200px;
}

/* For the full-width, the size setting controls the height */
.video-section--full .video-wrapper {
  --video-width: 100vw;
  height: var(--video-height);
}

.video-section--full.video-section--small {
  --video-height: 250px;
}

.video-section--full.video-section--medium {
  --video-height: 350px;
}

.video-section--full.video-section--large {
  --video-height: 450px;
}

@media screen and (min-width: 741px) and (max-width: 999px) {
  .video-section--full.video-section--small {
    --video-height: 300px;
  }

  .video-section--full.video-section--medium {
    --video-height: 375px;
  }

  .video-section--full.video-section--large {
    --video-height: 425px;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1199px) {
  .video-section--full.video-section--small {
    --video-height: 400px;
  }

  .video-section--full.video-section--medium {
    --video-height: 500px;
  }

  .video-section--full.video-section--large {
    --video-height: 570px;
  }
}
@media screen and (min-width: 1200px) {
  .video-section--full.video-section--small {
    --video-height: 600px;
  }

  .video-section--full.video-section--medium {
    --video-height: 700px;
  }

  .video-section--full.video-section--large {
    --video-height: 800px;
  }
}
/**
 * =============================================================
 * ## 3D Model
 * - Shopify 3D Model Viewer on product pages
 * =============================================================
 */
.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
  background: rgb(var(--color-bg));
  border-color: rgba(var(--color-text), 0.25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
  color: rgb(var(--color-text));
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
  color: rgba(var(--color-text), 0.55);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus {
  color: rgba(var(--color-text), 0.55);
  background: rgba(var(--color-text), 0.25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
  border-color: rgba(var(--color-text), 0.25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
  background: rgb(var(--color-bg));
  border-color: rgba(var(--color-text), 0.25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
  color: rgba(var(--color-text), 0.55);
}

.model-wrapper {
  display: block;
  position: relative;
  padding-bottom: 100%;
}

.model-wrapper .shopify-model-viewer-ui,
.model-wrapper model-viewer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Recurring UI
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## ICON
 * =============================================================
 */
.icon {
  display: block;
  vertical-align: middle;
  background: none;
  pointer-events: none;
  overflow: visible;
}

.icon--inline {
  display: inline-block;
}

/* Simple component allowing to align a text with an icon */
.icon-text {
  display: flex;
  align-items: center;
}

.icon-text svg,
.icon-text img {
  margin-right: 12px;
}

/**
 * =============================================================
 * ## Banner
 * - Used for providing information and validation such as success and error
     messages
 * =============================================================
 */
.banner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px 16px;
}

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

.banner--margin {
  margin-top: 24px;
}

.banner--vertical-spacing {
  margin-top: 24px;
  margin-bottom: 24px;
}

.banner__ribbon {
  margin-right: 10px;
}

.banner__content {
  margin: 0;
}

.banner--success {
  --color-text: rgb(var(--color-success));
  background: rgb(var(--color-success-bg));
  color: rgb(var(--color-success));
}

.banner--error {
  --color-text: rgb(var(--color-error));
  background: rgb(var(--color-error-bg));
  color: rgb(var(--color-error));
}

.banner--note {
  background: rgb(var(--color-secondary-bg));
}

.banner__content ul {
  list-style-position: inside;
  padding-left: 10px;
}

@media screen and (min-width: 768px) {
  .banner {
    padding: 13px 18px;
  }
}
/**
 * =============================================================
 * ## Tooltip
 * =============================================================
 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  position: absolute;
  content: attr(data-tooltip);
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 5px 10px;
  white-space: nowrap;
  background: rgb(var(--color-text));
  color: rgb(var(--color-bg));
  font-size: calc(var(--base-font-size) - 2px);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  z-index: 1;
  transform: translateX(-50%);
}

[data-tooltip]::after {
  position: absolute;
  content: "";
  left: calc(50% - 7px);
  bottom: calc(100% + 1px);
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgb(var(--color-text)) rgb(var(--color-text));
  visibility: hidden;
  z-index: 1;
  opacity: 0;
  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transform: rotate(-45deg);
  box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1);
}

[data-tooltip]:hover::before, [data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

[data-tooltip-position=bottom-left]::before {
  top: calc(100% + 4px);
  bottom: auto;
  left: auto;
  right: -6px;
  transform: none;
}

[data-tooltip-position=bottom-left]::after {
  top: calc(100% - 1px);
  transform: rotate(135deg);
  left: calc(50% - 6px);
}

/**
 * =============================================================
 * ## Bubble Count
 * - used in various places to show a count
 * =============================================================
 */
.bubble-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  height: 21px;
  min-width: 21px;
  line-height: 1;
  border-radius: 21px;
  letter-spacing: 0;
  background: rgb(var(--color-text));
  color: rgb(var(--color-bg));
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.bubble-count--top {
  vertical-align: top;
}

/**
 * =============================================================
 * ## EMPTY STATE
 * =============================================================
 */
.empty-state {
  position: relative;
  text-align: center;
  margin: 100px 0;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .empty-state {
    margin-top: 150px;
    margin-bottom: 150px;
  }
}
@media screen and (min-width: 1025px) {
  .empty-state {
    margin-top: 225px;
    margin-bottom: 225px;
  }
}

.empty-state__text {
  margin-top: 16px;
}

.empty-state .button-wrapper {
  margin-top: 24px;
}

.empty-state--bottom-only {
  margin-top: 24px;
}
@media screen and (min-width: 768px) {
  .empty-state--bottom-only {
    margin-top: 50px;
  }
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Navigation
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Linklist
 * =============================================================
 */
.linklist__item:not(:first-child) {
  padding-top: 12px;
}
@media screen and (min-width: 1025px) {
  .linklist__item:not(:first-child) {
    padding-top: 6px;
    /* On desktop we use less space as we do not have as much constraint for tap area */
  }
}

.linklist__item a {
  display: inline-block;
  word-break: break-word;
}

/**
 * =============================================================
 * ## PAGINATION
 * =============================================================
 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
@media screen and (min-width: 768px) {
  .pagination {
    margin-top: 48px;
  }
}

.pagination__nav {
  display: table;
  border-collapse: separate;
  table-layout: fixed;
}

.pagination__nav-item {
  position: relative;
  display: table-cell;
  box-shadow: 1px 0 0 0 rgb(var(--color-border)), 0 1px 0 0 rgb(var(--color-border)), 1px 1px 0 0 rgb(var(--color-border)), 1px 0 0 0 rgb(var(--color-border)) inset, 0 1px 0 0 rgb(var(--color-border)) inset;
  vertical-align: middle;
  height: 47px;
  width: 47px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .pagination__nav-item {
    height: 56px;
    width: 56px;
  }
}

.pagination__nav-item:first-child,
.pagination__nav-item:first-child::before {
  border-top-left-radius: var(--button-border-radius);
  border-bottom-left-radius: var(--button-border-radius);
}

.pagination__nav-item:last-child,
.pagination__nav-item:last-child::before {
  border-top-right-radius: var(--button-border-radius);
  border-bottom-right-radius: var(--button-border-radius);
}

.pagination__nav-item svg {
  margin: 0 auto;
}

.pagination__nav-item[aria-current]::before {
  content: "";
  position: absolute;
  max-width: calc(100% - 3px);
  max-height: calc(100% - 3px);
  top: 2px;
  left: 2px;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 0 2px currentColor;
}

/**
 * =============================================================
 * ## Link Bar
 * - Shows a list of links horizontally. Used on customer account pages as main
 *   nav
 * =============================================================
 */
.link-bar {
  position: relative;
  display: block;
  box-shadow: 0 1px rgb(var(--color-border)), 0 -1px rgb(var(--color-border));
  text-align: center;
}

.link-bar__wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

@media screen and (max-width: 1024px) {
  .link-bar__wrapper::after {
    content: "";
    position: absolute;
    height: 100%;
    width: var(--container-gutter);
    top: 0;
    left: 100%;
    background-image: linear-gradient(to left, rgb(var(--color-bg)), rgba(var(--color-bg), 0));
  }
}

.link-bar__scroller {
  scroll-snap-type: x proximity;
}
@media screen and (max-width: 1024px) {
  .link-bar__scroller {
    margin-right: calc(-1 * var(--container-gutter));
  }
}

.link-bar__title {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  flex-shrink: 0;
  z-index: 1;
  background: rgb(var(--color-bg));
}

.link-bar__title::after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  width: 28px;
  background-image: linear-gradient(to right, rgb(var(--color-bg)) 35%, rgba(var(--color-bg), 0));
}

.link-bar__title + .link-bar__scroller {
  padding-left: 28px;
}
@media screen and (min-width: 768px) {
  .link-bar__title + .link-bar__scroller {
    padding-left: 48px;
  }
}

.link-bar__linklist {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-gap: 28px;
  gap: 28px;
  min-width: max-content;
}
@media screen and (max-width: 1024px) {
  .link-bar__linklist {
    padding-right: var(--container-gutter);
  }
}
@media screen and (min-width: 768px) {
  .link-bar__linklist {
    gap: 40px;
  }
}

.link-bar__link-item,
.link-bar__title {
  padding-top: 14px;
  padding-bottom: 14px;
}
@media screen and (min-width: 768px) {
  .link-bar__link-item,
.link-bar__title {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media screen and (min-width: 1280px) {
  .link-bar__link-item,
.link-bar__title {
    padding-top: 27px;
    padding-bottom: 27px;
  }
}

.link-bar__link-item--selected {
  scroll-snap-align: center;
}

/**
 * =============================================================
 * ## Dots Navigation
 * =============================================================
 */
.dots-nav {
  display: flex;
  margin: -6px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.dots-nav--large {
  display: flex;
  margin: -12px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.dots-nav--centered {
  justify-content: center;
}

/**
 * By default, dot nav items will be a transparent circle with a border. 
 * Active dot navs will have a background colour matching the border.
 * We set the background colour on a ::before pseudoelement with an opacity of 0.
 * When active, the opacity will transition to 1. We transition opacity rather
 * than background-color as it is more performant.
 */
.dots-nav__item {
  position: relative;
  width: 6px;
  height: 6px;
  margin: 6px;
  background-color: transparent;
  border: 1px solid rgb(var(--color-dots));
  border-radius: 50%;
  position: relative;
}
.dots-nav__item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 6px;
  background-color: rgb(var(--color-dots));
  opacity: 0;
  border-radius: 50%;
  transition: opacity 0.5s ease-in-out;
}

.dots-nav__item[aria-current=true]::before {
  opacity: 1;
}

.dots-nav--large .dots-nav__item {
  position: relative;
  width: 12px;
  height: 12px;
  margin: 12px;
}

/**
 * =============================================================
 * ## Prev Next Buttons
 * =============================================================
 */
.prev-next-buttons {
  display: inline-grid;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .prev-next-button:not(.prev-next-button--small) {
    width: 56px;
    height: 56px;
  }
}

.prev-next-buttons--row {
  grid-auto-flow: column;
}

.prev-next-button {
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  color: rgb(var(--root-color-text));
  color: rgb(var(--color-prev-next-button, var(--root-color-text)));
  pointer-events: auto;
  overflow: hidden;
}

.prev-next-button[disabled] {
  color: rgba(var(--color-prev-next-button), 0.3);
}

.prev-next-button svg {
  width: 100%;
}

/**
 * =============================================================
 * ## Tabs Nav
 * - Can create tabs across different pages
 * - Currently used on the search page to show different search categories
 * =============================================================
 */
.tabs-nav {
  position: relative;
  display: block;
  margin-bottom: 32px;
}

.tabs-nav:not(:first-child) {
  margin-top: 24px;
}
@media screen and (min-width: 768px) {
  .tabs-nav:not(:first-child) {
    margin-top: 32px;
  }
}

/* ### Tabs Nav Scroller
 * ========================================================== */
.tabs-nav__scroller {
  display: block;
}

.tabs-nav__scroller-inner {
  position: relative;
  line-height: 1;
}

.tabs-nav[arrows] .tabs-nav__scroller {
  overflow: hidden;
  /* Prevent to be manually scrollable as we want to allow scroll with arrows only */
}

/* ### Tabs Nav List
 * ========================================================== */
.tabs-nav__item-list {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: flex-start;
  gap: 32px;
  vertical-align: top;
  border-bottom: 1px solid rgb(var(--color-border));
}
@media screen and (min-width: 768px) {
  .tabs-nav__item-list {
    gap: 54px;
  }
}

.tabs-nav__item-list--center {
  justify-content: center;
}

.tabs-nav__item {
  padding-bottom: 18px;
  opacity: 0.7;
  transition: opacity 0.25s ease-in-out;
  border-bottom: 2px solid transparent;
}

.tabs-nav__item[aria-expanded=true] {
  opacity: 1;
  border-bottom-color: rgb(var(--color-text));
}

/**
 * Tab items are usually button elements. Active styling is applied via JavaScript. 
 * However, we use links on the search page instead of buttons so need a different
 * solution.
 */
.tabs-nav__item--link--active {
  box-shadow: inset 0 -2px rgb(var(--color-text));
}

/* ### Tabs Nav Center Variation
 * ========================================================== */
.tabs-nav--center .tabs-nav__scroller-inner {
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
}

/* ### Tabs Nav Arrows
 * ========================================================== */
.tabs-nav__arrows {
  display: none;
  position: absolute;
  top: -5px;
  right: 0;
  z-index: 1;
}

.tabs-nav__scroller.is-scrollable + .tabs-nav__arrows {
  display: flex;
}

.tabs-nav__arrow-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgb(var(--color-bg));
  border: 1px solid rgb(var(--color-border));
}

.tabs-nav__arrow-item + .tabs-nav__arrow-item {
  border-left: none;
}

.tabs-nav__arrow-item[disabled] {
  cursor: not-allowed;
}
.tabs-nav__arrow-item[disabled] svg {
  opacity: 0.3;
}

.tabs-nav[arrows] .tabs-nav__scroller {
  overflow: hidden;
  /* Prevent to be manually scrollable as we want to allow scroll with arrows only */
}

.tabs-nav[arrows] .tabs-nav__scroller.is-scrollable::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 100%;
  top: -2px;
  /* Prevent to overlap the bottom border */
  /* Shift by the arrows size */
  right: 48px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, rgb(var(--color-bg)), rgba(var(--color-bg), 0));
  background: linear-gradient(to left, rgb(var(--section-background, var(--color-bg))), rgba(var(--section-background, var(--color-bg)), 0));
}

.tabs-nav[arrows] .tabs-nav__item-list {
  width: 100%;
  /* In arrow mode we want to extend the list all the time */
  margin-right: 0;
  min-width: max-content;
}

.tabs-nav[arrows] .tabs-nav__item-list::after {
  display: block;
  content: "";
  width: 35px;
}

/* ### Tabs Nav No Border Variation
 * ========================================================== */
.tabs-nav--no-border.tabs-nav--narrow {
  margin-bottom: 24px;
  /* When there is no bottom border spacing with next elements is closer */
}
@media screen and (min-width: 768px) {
  .tabs-nav--no-border.tabs-nav--narrow {
    margin-bottom: 32px;
    /* When there is no bottom border spacing with next elements is closer */
  }
}

.tabs-nav--no-border .tabs-nav__item-list {
  box-shadow: none;
}

.tabs-nav--no-border.tabs-nav--narrow .tabs-nav__item {
  padding-bottom: 5px;
  /* Due to the lack of border we reduce the spacing with the moving link */
}

/* ### Tabs Nav Narrow Variation
 * ========================================================== */
@media screen and (min-width: 768px) {
  .tabs-nav--narrow .tabs-nav__item-list {
    gap: 40px;
  }
}

/* ### Tabs Nav Loose Variation
 * ========================================================== */
@media screen and (min-width: 768px) {
  .tabs-nav--loose .tabs-nav__item-list {
    gap: 72px;
  }
}

/* ### Tabs Nav Edge 2 Edge variation
 * ========================================================== */
/* On phone and tablet, when the tab nav is contained within a section header, we stretch it to be edge to edge */
@media screen and (max-width: 1024px) {
  .tabs-nav--edge2edge {
    margin-left: calc(-1 * var(--container-gutter));
    margin-right: calc(-1 * var(--container-gutter));
  }
}

@media screen and (max-width: 1024px) {
  .tabs-nav--edge2edge .tabs-nav__scroller-inner {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    min-width: max-content;
  }
}

/**
 * =============================================================
 * ## Mobile Toolbar
 * - Used on collection and account pages to create links to sub-sections
 * =============================================================
 */
.mobile-toolbar {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--enable-sticky-header) * 0px + 0px * var(--enable-sticky-announcement-bar));
  top: calc(var(--enable-sticky-header) * 0px + 0px * var(--enable-sticky-announcement-bar));
  top: calc(var(--enable-sticky-header) * var(--header-height, 0px) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar));
  display: flex;
  align-items: center;
  visibility: visible;
  z-index: 2;
  transition: margin-top 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.mobile-toolbar.is-collapsed {
  margin-top: -48px;
  visibility: hidden;
}

.mobile-toolbar--fixed {
  position: relative;
  top: 0;
}

.mobile-toolbar__item {
  display: flex;
  flex: 1 0 0;
  justify-content: center;
  align-items: center;
  padding: 11px;
  border-top: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-bg));
}

.mobile-toolbar__item + .mobile-toolbar__item {
  border-left: 1px solid rgb(var(--color-border));
}

.mobile-toolbar__item .icon--chevron {
  margin-left: 10px;
}

/**
 * =============================================================
 * ## MOBILE NAV
 * =============================================================
 */
.mobile-nav__item {
  display: flow-root;
}

.mobile-nav__item:not(:last-child) {
  border-bottom: 1px solid rgba(var(--color-text), 0.15);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 21px 0;
}

.mobile-nav .collapsible {
  margin-left: calc(-1 * var(--container-gutter));
  margin-right: calc(-1 * var(--container-gutter));
}

/* ### Level 2
 * ========================================================== */
.mobile-nav .mobile-nav {
  padding-left: 8px;
  margin-left: var(--container-gutter);
  margin-right: var(--container-gutter);
  margin-bottom: 24px !important;
  /* Sorry about the important, may me soul be in peace */
}

.mobile-nav .mobile-nav .mobile-nav__item {
  margin-bottom: 15px;
  border: none;
}

.mobile-nav .mobile-nav .mobile-nav__link {
  padding: 0;
}

/* ### Level 3
 * ========================================================== */
.mobile-nav .mobile-nav .mobile-nav {
  border-left: 1px solid rgba(var(--color-text), 0.15);
  padding-left: 20px;
  margin-top: 16px !important;
  margin-bottom: 10px !important;
}

.mobile-nav .mobile-nav .mobile-nav .mobile-nav__item {
  margin-bottom: 14px;
}

.mobile-nav .mobile-nav .mobile-nav .mobile-nav__item:last-child {
  margin-bottom: 0;
}

/* ### Mobile Nav Footer
 * ========================================================== */
.mobile-nav__footer {
  display: flex;
  justify-content: space-between;
}

/**
 * =============================================================
 * ## Scroller
 * =============================================================
 */
@media screen and (max-width: 1024px) {
  .scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--container-gutter));
    margin-right: calc(-1 * var(--container-gutter));
    /* On mobile we remove the container gutter to make sure the scroll is edge to edge */
    scrollbar-width: none;
    /* Hide scrollbar for Firefox */
  }
}

@media screen and (max-width: 1024px) {
  .scroller::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar for Chrome and Safari */
  }
}

@media screen and (max-width: 1024px) {
  .scroller__inner {
    min-width: min-content;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    margin-left: auto;
    margin-right: auto;
    /* margin rules allow to center the content if there are not enough elements to scroll */
  }
}

/**
 * -------------------------------------------------------------
 * HIDE SCROLLBAR
 * -------------------------------------------------------------
 */
.hide-scrollbar {
  scrollbar-width: none;
  /* For Firefox */
  overflow-x: auto;
  overflow-y: hidden;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* For Chrome and Safari */
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Openable Elements
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Combo Box
 * Implementation note: on mobile the combo-box is largely similar to the
 * popover and therefore re-use lot of styles. I preferred doing some
 * duplication here rather than rely on JavaScript to dynamically transformed
 * a non-popover on desktop to a popover
 * =============================================================
 */
@media screen and (max-width: 767px) {
  .combo-box {
    --color-text: var(--root-color-text);
    --background: var(--root-color-bg);
    display: flex;
    position: fixed;
    left: 0;
    z-index: 10;
    color: rgb(var(--color-text));
    background: rgb(var(--color-bg));
    visibility: hidden;
    flex-direction: column;
    bottom: 0;
    width: 100vw;
    max-height: 75vh;
    border-radius: 10px 10px 0 0;
    transform: translateY(100%);
    transition: transform 0.7s cubic-bezier(0.75, 0, 0.175, 1), visibility 0.7s cubic-bezier(0.75, 0, 0.175, 1);
  }

  .combo-box[open] {
    visibility: visible;
    transform: translateY(0);
  }

  .combo-box__overlay {
    position: absolute;
    content: "";
    height: 100vh;
    width: 100%;
    bottom: calc(100% - 10px);
    /* There is a border radius on the header on mobile so we slightly move down the overlay */
    left: 0;
    background: #000000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  }

  .combo-box__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 32px;
    min-height: 64px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px rgb(var(--color-border));
  }

  .combo-box__header,
.combo-box__content {
    background: inherit;
  }

  .combo-box__title {
    margin-bottom: 0;
  }

  .combo-box__close-button {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
  }

  .combo-box[open] > .combo-box__overlay {
    visibility: visible;
    opacity: 0.3;
  }

  .combo-box__option-list {
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px) + 16px);
  }

  .combo-box__option-item {
    position: relative;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(var(--color-border));
  }

  .combo-box__option-item:not([hidden]) {
    display: block;
  }

  .combo-box__option-item:last-child {
    border-bottom: none;
  }

  .combo-box__option-item[aria-selected=true]::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 9px;
    margin-left: 12px;
    background-color: currentColor;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 12px 9px;
    mask-size: 12px 9px;
  }

  .combo-box__option-item.is-disabled {
    color: rgba(var(--color-text), 0.5);
  }
}
@media screen and (min-width: 768px) {
  .combo-box {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 245px;
    overscroll-behavior: contain;
    overflow: auto;
    background: rgb(var(--color-bg));
    z-index: 2;
    padding: 8px 0;
    border: 1px solid rgb(var(--color-border));
    border-top: none;
    border-radius: 0 0 var(--button-border-radius) var(--button-border-radius);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  }

  .combo-box--top {
    top: auto;
    bottom: 100%;
    border-top: 1px solid rgb(var(--color-border));
    border-bottom: none;
    border-radius: var(--button-border-radius) var(--button-border-radius) 0 0;
  }

  .combo-box:not([open]) {
    visibility: hidden;
    opacity: 0;
  }

  .combo-box__header {
    display: none;
    /* Nothing on tablet and up */
  }

  .combo-box__option-list {
    min-width: max-content;
  }

  .combo-box__option-item:not([hidden]) {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 18px;
    transition: background 0.2s ease-in-out;
    text-align: left;
  }

  .combo-box__option-item.is-disabled {
    color: rgba(var(--color-text), 0.5);
  }

  .combo-box__option-item:hover,
.combo-box__option-item:focus {
    background: rgb(var(--color-secondary-bg));
  }

  .combo-box__color-swatch {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: var(--color-swatch-border-radius);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  /* Adjustment to the toggle button */
  .combo-box + .select {
    transition: border-radius 0.2s ease-in-out;
  }

  .combo-box[open] + .select {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .combo-box--top[open] + .select {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
/**
 * =============================================================
 * ## COLLAPSIBLE
 * =============================================================
 */
.collapsible {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.no-js .collapsible,
.collapsible[open] {
  height: auto;
  overflow: visible;
  visibility: visible;
}

.collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
}

.collapsible-toggle__selected-value {
  margin-left: auto;
  margin-right: 12px;
  font-weight: normal;
  max-width: 45%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.collapsible-toggle svg {
  transition: transform 0.2s ease-in-out;
}

.collapsible-toggle[aria-expanded=true] svg {
  transform: rotateZ(180deg);
}

.animated-plus {
  position: relative;
  width: 10px;
  height: 10px;
}

.animated-plus::before,
.animated-plus::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background-color: currentColor;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.animated-plus::before {
  width: 10px;
  height: 2px;
  opacity: 1;
}

.animated-plus::after {
  width: 2px;
  height: 10px;
}

[aria-expanded=true] > .animated-plus::before {
  opacity: 0;
}

[aria-expanded=true] > .animated-plus::before,
[aria-expanded=true] > .animated-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/**
 * =============================================================
 * ## Modal
 * =============================================================
 */
.modal {
  /* Make sure the modal component does not inherit values from the section it is included to */
  --color-text: var(--root-color-text);
  --color-bg: var(--root-color-bg);
  position: fixed;
  top: 0;
  left: 0;
  font-size: 1rem;
  z-index: 10;
  visibility: hidden;
  transition: visibility 0.25s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.modal[open] {
  visibility: visible;
}

.modal[open] .modal__inner {
  transform: scale(1);
  opacity: 1;
}

.modal__overlay {
  position: fixed;
  content: "";
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  bottom: auto;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.modal[open] > .modal__overlay {
  visibility: visible;
  opacity: 0.3;
}

.modal__close-button {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
}

.modal__close-button--fixed {
  position: fixed;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgb(var(--color-border));
}

.modal__inner {
  position: relative;
  display: flow-root;
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  margin: 40px;
  /* Allows to guarantee spacing around the edges */
  max-height: calc(100vh - 160px);
  overflow: auto;
  transform: scale(0.8);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.75, 0, 0.175, 1), opacity 0.3s cubic-bezier(0.75, 0, 0.175, 1);
  will-change: transform;
}

.modal--product-zoom .modal__inner {
  width: 100%;
  height: 100%;
  max-height: initial;
  margin: 0;
}

.modal--padding .modal__inner {
  padding: 40px;
}
@media screen and (min-width: 768px) {
  .modal--padding .modal__inner {
    padding: 80px;
  }
}

@media screen and (min-width: 768px) {
  .modal--max-width .modal__inner {
    max-width: 600px;
  }
}

/**
 * =============================================================
 * ## DRAWER
 * =============================================================
 */
.drawer {
  /* Make sure the drawer component does not inherit values from the section it is included to */
  --color-text: var(--root-color-text);
  --color-bg: var(--root-color-bg);
  --color-button-primary-bg: var(--root-color-button-primary-bg);
  --color-button-primary-text: var(--root-color-button-primary-text);
  --color-section-bg: initial;
  /* Allows to remove the inheritance */
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  text-align: left;
  width: 89vw;
  max-width: 400px;
  height: 100%;
  max-height: 100vh;
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  z-index: 10;
  transform: translateX(100%);
  visibility: hidden;
  font-size: 1rem;
  transition: transform 0.6s cubic-bezier(0.75, 0, 0.175, 1), visibility 0.6s cubic-bezier(0.75, 0, 0.175, 1);
}

.drawer--large {
  max-width: 600px;
}

.drawer--from-left {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

.drawer[open] {
  transform: translateX(0);
  visibility: visible;
}

/* ### Drawer Overlay
 * ========================================================== */
.drawer__overlay {
  content: "";
  position: fixed;
  top: 0;
  right: 100%;
  height: 100vh;
  width: 100vw;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.drawer--from-left .drawer__overlay {
  left: 100%;
  right: auto;
}

.drawer[open] > .drawer__overlay {
  visibility: visible;
  opacity: 0.3;
}

/* ### Drawer Header
 * ========================================================== */
.drawer__header {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  height: var(--header-height);
  max-height: 80px;
  border-bottom: 1px solid rgb(var(--root-color-border));
  background: rgb(var(--root-color-bg));
  /* Setting an explicit background allow element to go beyond */
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .drawer__header {
    padding-top: 24px;
    padding-bottom: 24px;
    max-height: 90px;
  }
}

/* This variation remove the border and add a shadow on scroll */
.drawer__header--shadowed {
  height: auto;
  border-bottom: none;
  padding-bottom: 6px;
}

.drawer__header--shadowed::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 24px;
  background: linear-gradient(var(--root-color-bg), rgba(var(--root-color-bg), 0));
  z-index: 1;
  pointer-events: none;
}

.drawer__title {
  /* We use flex positioning in case the title contains an icon or extra content */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  max-width: 100%;
}

.drawer__title--stack {
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
}

.drawer__title .icon {
  margin-right: 12px;
}

.drawer__header-action {
  margin-left: 16px;
}
@media screen and (min-width: 1025px) {
  .drawer__header-action {
    margin-left: 24px;
  }
}

.drawer__close-button {
  position: absolute;
  top: var(--container-gutter);
  right: var(--container-gutter);
}

.drawer__header .drawer__close-button {
  top: calc(50% - 7px);
  /* When inside the header its alignment is relative to the header part */
}

.drawer__close-button--block {
  position: relative;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

.drawer__header,
.drawer__content,
.drawer__footer {
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}

/* ### Drawer Content
 * ========================================================== */
.drawer__content {
  overflow-x: hidden;
  overflow-y: auto;
  flex-grow: 1;
  padding-bottom: 24px;
  /* We add a bit of spacing as the drawer footer may add a shadow */
}

.drawer__content--padded-start {
  padding-top: 24px;
}

.drawer__content--center {
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
  padding-bottom: 0;
  flex-grow: 0;
}

/* ### Drawer Footer
 * ========================================================== */
.drawer__footer {
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  /* The footer in drawer has a slightly smaller padding in block direction */
  z-index: 1;
  transform: translateZ(0);
  /* For some reason position: relative cause an issue on Safari so I use this to promote the element */
}
@media screen and (min-width: 1025px) {
  .drawer__footer {
    padding-top: var(--container-gutter);
    padding-bottom: var(--container-gutter);
  }
}

.drawer__footer::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 24px;
  background: linear-gradient(rgba(var(--root-color-bg), 0), rgb(var(--root-color-bg)));
  z-index: 1;
  pointer-events: none;
}

/**
 * =============================================================
 * ## Popover
 * =============================================================
 */
/* ### Popover Button
 * ========================================================== */
.popover-button {
  width: max-content;
}

.popover-button svg {
  position: relative;
  top: -1px;
  /* For pixel perfect */
  margin-left: 10px;
  transition: transform 0.2s ease-in-out;
}

.popover-button[aria-expanded=true] svg {
  transform: rotateZ(180deg);
}

@media screen and (min-width: 1025px) {
  .popover-button + .popover {
    right: -28px;
  }
}

/* ### Popover Container
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .popover-container {
    position: relative;
  }
}

/* ### Popover
 * ========================================================== */
.popover {
  /* Make sure the popover component does not inherit values from the section it is included to */
  --color-text: var(--root-color-text);
  --color-bg: var(--root-color-bg);
  --color-primary-button-bg: var(--root-color-button-primary-bg);
  --color-button-primary-text: var(--root-color-button-primary-text);
  --color-section-bg: var(--root-color-bg);
  display: block;
  position: fixed;
  z-index: 10;
  color: rgb(var(--color-text));
  background: rgb(var(--color-bg));
  visibility: hidden;
  font-size: 1rem;
  transition: visibility 0.25s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .popover {
    display: flex;
    flex-direction: column;
    bottom: 0;
    left: 0;
    /* We must make sure to not use logical property here */
    width: 100vw;
    max-height: 75vh;
    border-radius: 10px 10px 0 0;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.75, 0, 0.175, 1), visibility 0.6s cubic-bezier(0.75, 0, 0.175, 1);
    touch-action: manipulation;
  }
}
@media screen and (min-width: 1025px) {
  .popover {
    position: absolute;
    top: calc(100% + 18px);
    border: 1px solid rgb(var(--root-color-border));
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    border-radius: 4px;
  }
}

.popover[open] {
  visibility: visible;
}
@media screen and (max-width: 1024px) {
  .popover[open] {
    transform: translateY(0);
  }
}
@media screen and (min-width: 1025px) {
  .popover[open] {
    opacity: 1;
  }
}

@media screen and (min-width: 1025px) {
  .popover::after,
.popover::before {
    position: absolute;
    content: "";
    bottom: 100%;
    right: 24px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent rgb(var(--root-color-bg)) transparent;
    border-width: 8px;
  }
}

@media screen and (min-width: 1025px) {
  .popover::before {
    border-color: transparent transparent rgb(var(--root-color-border)) transparent;
    border-width: 9px;
    right: 23px;
  }
}

@media screen and (max-width: 1024px) {
  .drawer:not(.drawer--from-left) .popover {
    left: -11vw;
    /* Popover takes 89vw so we shift by 11vw */
  }
}

@media screen and (min-width: 1025px) {
  .select + .popover {
    right: -15px;
  }
}

/* ### Popover Header and Overlay
 * ========================================================== */
.popover__overlay {
  position: absolute;
  content: "";
  height: 100vh;
  width: 100%;
  bottom: calc(100% - 10px);
  /* There is a border radius on the header on mobile so we slightly move down the overlay */
  left: 0;
  /* We must make sure to not use logical property here */
  background: #000000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.popover[open] > .popover__overlay {
  visibility: visible;
  opacity: 0.3;
}

.popover__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px 24px;
  min-height: 64px;
  border-bottom: 1px solid rgb(var(--root-color-border));
  border-radius: 10px 10px 0 0;
}
@media screen and (max-width: 1024px) {
  .popover__header {
    background: inherit;
  }
}

.popover__header--no-border {
  border-bottom: none;
}

@media screen and (min-width: 1025px) {
  .popover__overlay,
.popover__header {
    display: none;
    /* No overlay nor header on tablet and up for popover */
  }
}

.popover__title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.popover__title svg {
  margin-right: 12px;
}

.popover__close-button {
  right: 24px;
}

.popover__close-button {
  position: absolute;
  top: 24px;
  z-index: 1;
}

/* ### Popover Content
 * ========================================================== */
.popover__content {
  padding: 24px;
  overflow: auto;
}
@media screen and (max-width: 1024px) {
  .popover__content {
    background: inherit;
  }
}
@media screen and (min-width: 1025px) {
  .popover__content {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.popover__content--no-padding {
  padding: 0 !important;
}

@media screen and (min-width: 1025px) {
  .popover__content--restrict {
    max-height: 400px;
  }
}

@supports (padding: 0px) {
  .popover__content {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px);
  }
}
/* ### Popover Small Variation
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .popover--small {
    font-size: calc(var(--base-font-size) - 3px);
    line-height: 1.5;
  }
}

@media screen and (min-width: 1025px) {
  .popover--small .popover__content {
    padding: 14px 20px;
  }
}

/* ### Popover Top Variation
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .popover--top {
    top: auto;
    bottom: calc(100% + 18px);
  }
}

@media screen and (min-width: 1025px) {
  .popover--top::before,
.popover--top::after {
    top: 100%;
    bottom: auto;
    border-color: rgb(var(--root-color-bg)) transparent transparent transparent;
  }
}

@media screen and (min-width: 1025px) {
  .popover--top::before {
    border-color: rgb(var(--root-color-border)) transparent transparent transparent;
  }
}

/* ### Popover Top Variation
 * ========================================================== */
/**
 * This child component is used to create a easily usable list of
 * choices
 */
.popover__choice-list {
  white-space: nowrap;
}

.popover__choice-item {
  display: block;
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 1025px) {
  .popover__choice-item {
    text-align: left;
  }
}

.popover__choice-item:not(:first-child) {
  margin-top: 7px;
}
@media screen and (max-width: 1024px) {
  .popover__choice-item:not(:first-child) {
    margin-top: 16px;
  }
}

.popover__choice-label {
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 1025px) {
  .popover__choice-label {
    margin-right: 22px;
  }
}

input:checked + .popover__choice-label::after,
.popover__choice-label[aria-current]::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 9px;
  top: calc(50% - 4.5px);
  right: -26px;
  background-color: currentColor;
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMy40TDQuNzQ5MzEgN0wxMSAxIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 12px 9px;
  mask-size: 12px 9px;
}
@media screen and (min-width: 1025px) {
  input:checked + .popover__choice-label::after,
.popover__choice-label[aria-current]::after {
    right: -22px;
  }
}

/**
 * =============================================================
 * ## Openable Overlay
 * - Overlay used for mini cart. Can be used on other elements if needed.
 * =============================================================
 */
.openable__overlay {
  position: absolute;
  content: "";
  height: 100vh;
  width: 100%;
  bottom: 100%;
  left: 0;
  /* We must make sure to not use logical property here */
  background: #000000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

[open] > .openable__overlay {
  visibility: visible;
  opacity: 0.2;
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Button related
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## BUTTON
 * =============================================================
 */
.button,
.btn,
.shopify-challenge__button,
#shopify-product-reviews .spr-summary-actions-newreview,
#shopify-product-reviews .spr-button {
  --button-line-height: calc(var(--base-font-size) * var(--base-line-height));
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--button-border-radius);
  background: rgb(var(--button-background));
  color: rgb(var(--button-text-color));
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: var(--button-line-height);
  font-weight: var(--font-weight-body-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: background 0.25s ease;
}
.button--small,
#shopify-product-reviews .spr-summary-actions-newreview {
  padding: 6px 12px;
  font-size: 11px;
}
.button--full {
  width: 100%;
}

.button--primary,
.btn--primary .shopify-challenge__button,
#shopify-product-reviews .spr-summary-actions-newreview,
#shopify-product-reviews .spr-button {
  --button-background: var(--color-button-primary-bg);
  --button-text-color: var(--color-button-primary-text);
}

.button--secondary, .btn--secondary {
  --button-background: var(--color-button-secondary-bg);
  --button-text-color: var(--color-button-secondary-text);
}

.button--outline {
  --button-background: var(--root-color-bg);
  --button-text-color: var(--root-color-text);
  border: 1px solid rgb(var(--color-border));
}

.button--disabled,
.btn--disabled,
.button[disabled],
.btn[disabled] {
  --button-background: var(--root-color-button-disabled-bg);
  --button-text-color: var(--root-color-button-disabled-text);
  cursor: not-allowed;
}

.button:hover {
  background: rgba(var(--button-background), 0.85);
}

/* ### Shopify Dynamic Checkout Button
 * ========================================================== */
/**
 * On non-Product pages, Shopify forces their styling. We use `!important`
 * to override. The below duplicates our general button styling. Even though
 * it's duplicate code, it's best we don't apply the `!important` rule on
 * button styling globally.
 */
.shopify-payment-button {
  min-height: calc(var(--base-line-height) * 16px + 24px);
  /* This prevents a page jump */
}

.shopify-payment-button__button--branded {
  border-radius: var(--button-border-radius) !important;
  overflow: hidden !important;
  min-height: calc(var(--base-line-height) * 16px + 24px) !important;
}

.shopify-payment-button__button--unbranded {
  --button-line-height: calc(var(--base-font-size) * var(--base-line-height));
  --button-background: var(--color-button-primary-bg);
  --button-text-color: var(--color-button-primary-text);
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  display: inline-block !important;
  padding: 12px 30px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: var(--button-border-radius) !important;
  background: rgb(var(--button-background)) !important;
  color: rgb(var(--button-text-color)) !important;
  font-family: var(--font-family-body) !important;
  font-size: 12px !important;
  line-height: var(--button-line-height) !important;
  font-weight: var(--font-weight-body-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}
.shopify-payment-button__more-options[aria-hidden=true] {
  display: none;
}

/**
 * =============================================================
 * ## BUTTON GROUP
 * =============================================================
 */
.button-group {
  font-size: 0;
  /* Collapse margin */
}

@media screen and (max-width: 767px) {
  .button-group__wrapper {
    margin: -12px;
  }
}
@media screen and (min-width: 768px) {
  .button-group__wrapper {
    display: inline-grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .button-group .button {
    margin: 12px;
    padding: 0 18px;
    /* We halve the padding to increase probability to button to fit on same row on mobile */
  }
}

/**
 * =============================================================
 * ## Loader Button
 * - Used on various "loading" type buttons such as add to cart, quick view,
 *   form submissions, etc.
 * =============================================================
 */
.loader-button__text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-button__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
}

/**
 * =============================================================
 * ## Checkout button
 * =============================================================
 */
.checkout-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-button__lock {
  position: absolute;
  left: 18px;
}
@media screen and (min-width: 768px) {
  .checkout-button__lock {
    left: 20px;
  }
}

.checkout-button .square-separator {
  /* This is a micro adjustment but because of the letter spacing we have to compensate with negative margin */
  margin-left: 11px;
  margin-right: 12px;
}

/**
 * =============================================================
 * ## Square Separator
 * =============================================================
 */
.square-separator {
  position: relative;
  display: inline-block;
  height: 4px;
  width: 4px;
  margin: 0 8px;
  flex-shrink: 0;
  /* in case it is a flex children */
  background: currentColor;
  vertical-align: middle;
}

.square-separator--block {
  top: 1px;
  margin-left: 12px;
  margin-right: 12px;
}

.square-separator--subdued {
  opacity: 0.5;
}

/**
 * =============================================================
 * ## Spinner
 * =============================================================
 */
@keyframes spinnerRotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes spinnerColor {
  0% {
    stroke: currentColor;
  }
  40% {
    stroke: currentColor;
  }
  66% {
    stroke: currentColor;
  }
  80%, 90% {
    stroke: currentColor;
  }
}
.spinner svg {
  margin: auto;
  animation: spinnerRotate 2s linear infinite;
  transform-origin: center center;
}

.spinner circle {
  animation: spinnerDash 1.5s ease-in-out infinite, spinnerColor 6s ease-in-out infinite;
}

/**
 * =============================================================
 * ## A full screen loading component. Used on the cart page when changing quantities.
 * =============================================================
 */
.loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.loader:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  opacity: 0.75;
}

.loader .spinner {
  position: relative;
  z-index: 1;
}

.is-loading.loader {
  display: flex;
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Article and Blog related
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Article List
 * =============================================================
 */
.article-list__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(100% / var(--section-items-per-row) - var(--article-list-column-gap) * (var(--section-items-per-row) - 1) / var(--section-items-per-row)));
  grid-gap: var(--article-list-row-gap) var(--article-list-column-gap);
  gap: var(--article-list-row-gap) var(--article-list-column-gap);
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .article-list--stacked .article-list__inner {
    grid-template-columns: repeat(auto-fit, calc(50% - var(--article-list-column-gap) * 0.5));
    justify-content: safe center;
  }
}
@media screen and (min-width: 1025px) {
  .article-list--stacked .article-list__inner {
    grid-template-columns: repeat(auto-fit, calc(33.3333333333% - var(--article-list-column-gap) * 0.6666666667));
    justify-content: safe center;
  }
}

/**
 * =============================================================
 * ## Article Item
 * =============================================================
 */
.article-item {
  width: 100%;
}

.article-item--horizontal {
  display: flex;
  align-items: center;
}

.article-item__content {
  margin-top: 16px;
}

.article-item__meta {
  margin-top: 4px;
}

.article-item__author + .article-item__date {
  margin-left: 8px;
}
.article-item__author + .article-item__date::before {
  content: "•";
  font-size: 10px;
  margin-right: 8px;
}

.article-item__excerpt {
  margin-top: 8px;
}

@media screen and (max-width: 1024px) {
  .modal--events .modal__inner {
    max-width: 600px;
    padding: 40px;
  }
}
@media screen and (min-width: 1025px) {
  .modal--events .modal__inner {
    max-width: 920px;
    padding: 60px;
  }
}

.event__body {
  margin-top: 20px;
}
@media screen and (min-width: 1025px) {
  .event__body {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 40px;
    align-items: center;
  }
}

.event__image-wrapper {
  max-width: 400px;
  margin: 0 auto;
}

.event__details .list--unstyled + .list--unstyled {
  margin-top: 16px;
}

.event__details .button-wrapper {
  margin-top: 16px;
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Collection and Product related
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Price
 * =============================================================
 */
.price-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.price-list--centered {
  justify-content: center;
}

.price-list--stack {
  display: inline-grid;
}

.price-list:not(.price-list--stack) > .price:not(:last-child) {
  margin-right: 10px;
}

.price-list > .price--block {
  flex-basis: 100%;
  margin-left: 0 !important;
}

.price-list + .link {
  margin-left: 16px;
}

.price--highlight {
  color: rgb(var(--color-product-on-sale-accent));
}

.price--compare {
  text-decoration: line-through;
  opacity: 0.7;
}

.unit-price-measurement {
  display: inline-flex;
  /* This allows to remove the space between each elements */
}

/**
 * =============================================================
 * ## Quantity Selector
 * =============================================================
 */
.quantity-selector {
  --quantity-selector-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--button-border-radius);
  vertical-align: middle;
}

.quantity-selector__button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--quantity-selector-height);
  width: var(--quantity-selector-height);
}

.quantity-selector__input {
  padding: 0 10px;
  height: var(--quantity-selector-height);
  line-height: var(--quantity-selector-height);
  text-align: center;
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

.quantity-selector--small {
  --quantity-selector-height: 28px;
}

.quantity-selector--small .quantity-selector__input {
  padding: 0 2px;
}

/**
 * =============================================================
 * ## Price Range
 * =============================================================
 */
.price-range {
  display: block;
  padding-top: 5px;
}

.price-range__input-group {
  display: flex;
  align-items: center;
}

.price-range__input {
  flex: 1 0 0;
  min-width: 0;
  /* Required for Firefox */
}

.price-range__delimiter {
  margin-left: 20px;
  margin-right: 20px;
}

.price-range__range-group {
  position: relative;
  margin-bottom: 15px;
}

.no-js .price-range__range-group {
  display: none !important;
  /* When JS is disabled we only rely on the input field */
}

@media not screen and (pointer: fine) {
  /* On non-touch device the thumb are bigger so we need to adjust the spacing */
  .price-range {
    padding-top: 7px;
  }

  .price-range__range-group {
    margin-bottom: 18px;
  }
}
/**
 * =============================================================
 * ## Tag List
 * - A list of tags, generally used for showing active filters on collection
 *   and search pages.
 * =============================================================
 */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -6px;
}

.tag {
  padding: 7px 14px 8px 13px;
}

.tag {
  display: flex;
  align-items: center;
  margin: 6px;
  background: rgba(var(--color-text), 0.05);
}

.tag__icon {
  margin: 1px 9px 0 0;
}

.tag__icon {
  position: relative;
  /* For pixel perfect precision ! */
  cursor: pointer;
}

.tag-link {
  padding-left: 6px;
}

/**
 * =============================================================
 * ## Product Facet
 * =============================================================
 */
.product-facet {
  display: block;
  margin-top: 24px;
  margin-bottom: 48px;
}
@media screen and (min-width: 768px) {
  .product-facet {
    margin-top: 40px;
    margin-bottom: 80px;
  }
}
@media screen and (min-width: 1025px) {
  .product-facet {
    display: flex;
    justify-content: flex-start;
  }
}

/* ### Product Facet Aside
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .product-facet__aside {
    margin-right: 40px;
    flex: none;
    width: 230px;
  }
}

@media screen and (min-width: 1025px) {
  .product-facet__aside-inner {
    position: -webkit-sticky;
    position: sticky;
    display: block;
    top: calc(0px * var(--enable-sticky-header) + 0px * var(--enable-sticky-announcement-bar) + 24px);
    top: calc(var(--header-height, 0px) * var(--enable-sticky-header) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar) + 24px);
  }
}

/* ### Product Facet Filters
 * ========================================================== */
.product-facet__filters-header {
  padding-bottom: 24px;
  border-bottom: 1px solid rgb(var(--color-border));
}

.product-facet__filters:not(.drawer) {
  display: block;
  padding-bottom: 24px;
  /* Allows to add a bit of spacing if too much links */
}
@media screen and (max-width: 1024px) {
  .product-facet__filters:not(.drawer) {
    display: none;
    /* By default the filters is hidden until dynamically transformed to a modal */
  }
}

@media screen and (min-width: 1025px) {
  .product-facet__filters:not(.drawer) .drawer__content {
    overflow: visible;
    padding: 0;
  }
}

.product-facet__active-list {
  margin-top: -6px;
  margin-bottom: 18px;
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  .product-facet__active-list {
    margin-left: -18px;
    margin-right: -18px;
  }
}
@media screen and (min-width: 768px) {
  .product-facet__active-list {
    margin-top: 18px;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .drawer .product-facet__active-list {
    margin-top: 26px;
    /* Margin is bigger when it is inside the drawer to keep visual rhythm consistency */
  }
}

.product-facet__filter-item + .product-facet__filter-item {
  border-top: 1px solid rgb(var(--color-border));
}

.product-facet__filter-item .collapsible__content {
  padding-left: 8px;
  font-size: 15px;
}

.product-facet__filter-item:not(:last-child) .collapsible__content {
  margin-bottom: 25px;
}

.product-facet__submit {
  margin-top: 40px;
}

.product-facet__active-count {
  margin-left: 8px;
}

.product-facet__sort-by-title {
  padding-right: 7px;
}

.product-facet__product-list {
  margin-top: calc(var(--container-gutter) / 2);
}

/* ### Product Facet Meta Bar
 * ========================================================== */
.product-facet__meta-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .product-facet__meta-bar {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .product-facet__meta-bar {
    justify-content: flex-start;
  }
}

.product-facet__meta-bar-item {
  display: flex;
  align-items: center;
}

@media screen and (min-width: 1025px) {
  .product-facet__meta-bar-item:last-child {
    margin-left: auto;
  }
}

@media screen and (min-width: 768px) {
  .product-facet__meta-bar-item--filter {
    margin-right: 44px;
  }
}

.product-facet__meta-bar-item .icon--filters {
  margin-right: 13px;
}

.product-facet__meta-bar-item--sort .popover-button {
  font-weight: var(--font-weight-body-bold);
}

/* ### Product Facet Main
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .product-facet__main {
    flex: 1 0 0;
  }
}

/* ### Mobile Toolbar
 * ========================================================== */
.mobile-toolbar__item .icon--filters {
  margin-right: 13px;
}

@media screen and (max-width: 767px) {
  .mobile-toolbar__item--filters.has-filters .mobile-toolbar__item-label::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 6px;
  }
}

/**
 * =============================================================
 * ## Label
 * - Used for product labels
 * =============================================================
 */
.label {
  display: inline-block;
  padding: 0 5px;
  vertical-align: top;
  font-weight: var(--font-weight-body-bold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: min(var(--block-border-radius), 2px);
}
@media screen and (min-width: 768px) {
  .label {
    font-size: 12px;
  }
}

.label--highlight {
  background: rgb(var(--color-product-on-sale-accent));
  color: white;
}

.label--subdued {
  background: rgb(var(--color-product-sold-out-accent));
  color: white;
}

.label-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}

.label-list:not(.label-list--horizontal) .label:not(:last-child) {
  margin-bottom: 4px;
}

.label-list--horizontal {
  flex-direction: row;
}

.label-list--horizontal .label:not(:last-child) {
  margin-right: 4px;
}

/**
 * =============================================================
 * ## Product List
 * =============================================================
 */
/**
 * --item-width variable calculated for positioning prev next buttons when using
 * scroller functionality. We want to calculate the buttons to be centred to the
 * product images rather than the entire product card itself.
 *
 * For browsers that support "min" math functions, we can save a variable in
 * vw units rather than px units so the alignment remains responsive.
 */
@media screen and (min-width: 1025px) {
  .product-list {
    /* We calculate the width of one product item cell thanks to power of CSS variables */
    --item-width: calc((var(--container-max-width-minus-gutters) - 56px) / var(--section-items-per-row) - (var(--product-list-column-gap) / var(--section-items-per-row) * (var(--section-items-per-row) - 1)));
  }
}
@supports (width: 2px) {
  .product-list {
    --item-width: calc((min(100vw - var(--container-gutter) * 2, var(--container-max-width-minus-gutters)) - 56px) / var(--section-items-per-row) - (var(--product-list-column-gap) / var(--section-items-per-row) * (var(--section-items-per-row) - 1)));
  }
}

.product-list:not([hidden]) {
  position: relative;
  display: block;
}

/**
 * This calculation appears complex but it's quite simple and flexible.
 * The `--section-items-per-row` variable is set within the component at
 * various breakpoints so this list is responsive by default.
 */
.product-list__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(100% / var(--section-items-per-row) - var(--product-list-column-gap) * (var(--section-items-per-row) - 1) / var(--section-items-per-row)));
  grid-gap: var(--product-list-row-gap) var(--product-list-column-gap);
  gap: var(--product-list-row-gap) var(--product-list-column-gap);
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .product-list__inner:not(.product-list__inner--scroller) {
    margin-left: calc(-1 * var(--container-gutter) / 2);
    margin-right: calc(-1 * var(--container-gutter) / 2);
  }
}

/**
 * 1. Ensure that all items display in a single column
 * 2. Set a backup size for columns
 * 3. Sizing for columns using variables set within a section
 * 4. 
 */
.product-list__inner--scroller {
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .product-list__inner--scroller {
    grid-auto-columns: 52vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .product-list__inner--scroller {
    grid-auto-columns: 35vw;
  }
}
@media screen and (max-width: 1024px) {
  .product-list__inner--scroller {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    grid-auto-flow: column;
    grid-template-columns: none;
    min-width: min-content;
  }
}
@media screen and (min-width: 1025px) {
  .product-list__inner--scroller {
    grid-template-columns: none;
    /* [1] */
    grid-auto-flow: column;
    /* [1] */
    grid-auto-columns: calc(25% - var(--product-list-column-gap) / 4 * 3);
    /* [2] */
    grid-auto-columns: calc(100% / var(--section-items-per-row, 4) - var(--product-list-column-gap) / var(--section-items-per-row, 4) * (var(--section-items-per-row, 4) - 1));
    /* [3] */
    overflow: hidden;
  }
}

/**
 * 
 */
@media screen and (min-width: 1025px) {
  .product-list__prev-next {
    position: absolute;
    pointer-events: none;
    /* [1] */
    display: flex;
    /* [2] */
    justify-content: space-between;
    width: 100%;
    top: calc(var(--item-width) / var(--smallest-image-aspect-ratio) / 2 - 28px);
  }
}

@media screen and (min-width: 1025px) {
  .product-list__prev-next-button {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
  }
}

@media screen and (min-width: 1025px) {
  .product-list__prev-next-button:disabled {
    opacity: 0;
  }
}

.upsell-product-list {
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  .upsell-product-list__inner {
    grid-auto-columns: 52vw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .upsell-product-list__inner {
    grid-auto-columns: 35vw;
  }
}
@media screen and (max-width: 1024px) {
  .upsell-product-list__inner {
    display: grid;
    gap: var(--product-list-row-gap) var(--product-list-column-gap);
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    grid-auto-flow: column;
    grid-template-columns: none;
    min-width: min-content;
    overflow-x: auto;
  }
}

.product-form__upsell + .product-form__upsell {
  margin-top: 16px;
}

/**
 * =============================================================
 * ## Product Item
 * =============================================================
 */
.product-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ### Product Item Image
 * ========================================================== */
.product-item__image-wrapper {
  position: relative;
  display: block;
  margin-bottom: 8px;
  overflow: hidden;
}
@media screen and (min-width: 1025px) {
  .product-item__image-wrapper {
    margin-bottom: 12px;
  }
}

.product-item__image-wrapper--placeholder {
  fill: currentColor;
}

.product-item__image-wrapper--multiple .product-item__primary-image,
.product-item__image-wrapper--multiple .product-item__secondary-image {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.product-item__aspect-ratio {
  isolation: isolate;
}

.product-item__secondary-image {
  position: absolute;
  display: none;
  /* Allows to make sure it does not trigger lazyload */
  visibility: hidden;
  opacity: 0;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

/**
 * On hover screens we show secondary images on hover
 */
@media screen and (pointer: fine) {
  .product-item__secondary-image {
    display: block;
  }

  .product-item__image-wrapper--multiple:hover .product-item__primary-image {
    visibility: hidden;
    opacity: 0;
  }

  .product-item__image-wrapper--multiple:hover .product-item__secondary-image {
    visibility: visible;
    opacity: 1;
  }
}
/* ### Product Item Labels
 * ========================================================== */
.product-item__label-list {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 0;
}

/* ### Product Item Info and Meta
 * ========================================================== */
.product-item__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
  text-align: center;
  padding: 0 12px;
}

.product-item__info--with-button {
  justify-content: space-between;
}

.product-item-meta {
  display: block;
}

.product-item-meta__vendor {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.product-item-meta__title {
  display: block;
  font-weight: var(--font-weight-body-bold);
}

.product-item-meta__price-list-container {
  color: rgba(var(--color-text), 0.75);
}

.product-item-meta__property-list {
  display: grid;
  margin-top: 6px;
  margin-bottom: 4px;
  grid-auto-flow: row;
}
@media screen and (min-width: 768px) {
  .product-item-meta__property-list {
    margin-top: 6px;
    margin-bottom: 6px;
  }
}

/* ### Product Item CTA and Quick Buy
 * ========================================================== */
.product-item__cta {
  margin-top: 16px;
}

.product-item__quick-form {
  position: absolute;
  padding: 10px;
  bottom: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.product-item__link {
  display: inline-block;
  margin: 6px auto 0;
}

/* ### Product Item Upsell
 * ========================================================== */
.product-item--upsell {
  font-size: 14px;
}

.product-item--upsell .select,
.product-item--upsell .product-form__add-button {
  padding: 6px 16px;
}

.product-item--upsell .product-form__add-button {
  font-size: 11px;
}

.product-item--upsell .product-form__add-button {
  margin-top: 12px;
}

.product-item--upsell .preorder-message.banner {
  padding: 0;
  margin-top: 4px;
}

@media screen and (max-width: 1024px) {
  .product-item--upsell .select {
    margin-top: 12px;
  }

  .product-item--upsell .product-item__info {
    padding: 0;
  }
}
@media screen and (min-width: 1025px) {
  .product-item--upsell {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 8px;
  }

  .product-item--upsell .product-item__info {
    text-align: left;
    gap: 8px;
  }

  .product-item--upsell + .product-item--upsell {
    margin-top: 24px;
  }

  .product-item--upsell .product-item__image-wrapper {
    margin-bottom: 0;
  }
}
/**
 * =============================================================
 * ## Quick Buy (popover and drawer)
 * =============================================================
 */
.quick-buy-product {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.quick-buy-product__image {
  width: 65px;
  flex: none;
  align-self: flex-start;
  margin-right: 20px;
}

@media screen and (max-width: 767px) {
  .quick-buy-product {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-right: 32px;
  }

  .popover--quick-buy .product-form {
    padding-left: 24px;
    padding-right: 24px;
  }

  .popover--quick-buy .product-form > :first-child:not(.product-form__buy-buttons) {
    padding-top: 16px;
  }

  .popover--quick-buy .product-form__buy-buttons {
    margin-left: calc(-1 * var(--container-gutter));
    margin-right: calc(-1 * var(--container-gutter));
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px) + 16px);
  }

  .popover--quick-buy .product-form__buy-buttons:not(:only-child) {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    border-top: 1px solid rgb(var(--color-border));
    background: rgb(var(--color-bg));
  }

  .popover--quick-buy .product-form__payment-container {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .quick-buy-product {
    margin: 32px 0 24px;
  }

  .quick-buy-product__image {
    width: 114px;
    margin-right: 32px;
  }
}
/**
 * =============================================================
 * =============================================================
 *
 * # Components / Cart and Account related
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Discount badge
 * - Used on line items and cart items if applicable
 * =============================================================
 */
.discount-badge {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  font-family: var(--font-family-body);
  font-style: var(--font-style-body);
  font-weight: var(--font-weight-body-bold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgb(var(--color-text));
  color: rgb(var(--color-bg));
}

.discount-badge svg {
  position: relative;
  margin-right: 8px;
}

/**
 * =============================================================
 * ## Line Item
 * - Used in account and cart sections
 * =============================================================
 */
.line-item {
  display: flow-root;
}

.line-item--hidden {
  display: none !important;
}

.line-item__content-wrapper {
  position: relative;
  display: flex;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .line-item__content-wrapper {
    margin-top: 24px;
  }
}

.line-item--centered .line-item__content-wrapper {
  align-items: center;
}

.line-item__image-wrapper {
  position: relative;
  display: block;
  margin-right: 24px;
  width: 80px;
  flex: none;
  align-self: flex-start;
}
@media screen and (min-width: 768px) {
  .line-item__image-wrapper {
    width: 92px;
  }
}

.line-item__loader {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  top: calc(50% - 16px);
  left: calc(50% - 16px);
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  border-radius: 32px;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.line-item__loader[hidden] {
  transform: scale(0.4);
  opacity: 0;
  visibility: hidden;
}

/* Used for secondary info such as variant title, subscription plan, attributes... */
.line-item__quantity {
  display: block;
  margin-top: 8px;
}
@media screen and (min-width: 768px) {
  .line-item__quantity {
    vertical-align: top;
    margin-top: 14px;
  }
}

.line-item__discount-list + .line-item__quantity {
  margin-top: 12px;
}

.line-item__remove-button {
  margin-left: 12px;
}

@media screen and (min-width: 768px) {
  .line-item__quantity--block .line-item__remove-button {
    display: block;
    margin-top: 10px;
    margin-left: 0;
  }
}

/* ### Line Item Meta
 * ========================================================== */
.line-item-meta {
  display: block;
}

.line-item-meta__vendor {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.line-item-meta__title {
  display: block;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .line-item-meta__title {
    line-height: 1.5;
  }
}

.line-item-meta__property {
  margin-bottom: 4px;
}

.line-item-meta__property-list {
  display: grid;
  margin-bottom: 4px;
  grid-auto-flow: row;
}
@media screen and (min-width: 768px) {
  .line-item-meta__property-list {
    margin-bottom: 6px;
  }
}

/* ### Line Item Discount
 * ========================================================== */
.line-item__discount-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 8px;
}

.line-item__discount-badge:not(:last-child) {
  margin-bottom: 4px;
}

@media screen and (min-width: 768px) {
  .line-item__price-list-container {
    flex-shrink: 0;
    line-height: 1.5;
    /* Used to simulate the same line-height as the product title */
    /* Gives a minimum spacing for the price */
    text-align: right;
    vertical-align: top;
    margin-left: auto;
    padding-left: 30px;
  }
}

/* ### Line Item Fulfillment
 * ========================================================== */
@media screen and (min-width: 768px) {
  .line-item__fulfillment {
    margin-left: 116px;
  }
}

/* ### Line Item Table
 * ========================================================== */
.line-item-table {
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .line-item-table {
    table-layout: fixed;
  }
}

.line-item-table .line-item {
  display: table-row;
}

.line-item-table .line-item__content-wrapper {
  margin-top: 0;
  /* The spacing is brought by the table */
}

@media screen and (max-width: 767px) {
  .line-item__table:not(.table--bordered) .line-item-table__list .line-item:first-child .line-item__product {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .line-item-table__list .line-item__product {
    width: 100%;
    padding-right: 0;
  }
}

@media screen and (min-width: 768px) {
  .line-item-table__list .line-item__quantity {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .line-item-table__footer {
    display: table-row;
  }
}

@media screen and (max-width: 767px) {
  .line-item-table__footer td:nth-child(2) {
    width: 100%;
    padding-left: 0;
  }
}

line-item-personalisation {
  display: block;
}

.line-item__personalisation {
  background: rgb(var(--color-secondary-bg));
  padding: 24px 24px;
  margin-top: 8px;
}

.pp__actions {
  margin-top: 8px;
}

.line-item-edit__wrapper {
  margin: 8px 0;
}

.line-item-edit {
  display: none;
}

.line-item-edit[open] {
  display: block;
}

/**
 * =============================================================
 * ## Free Shipping Bar
 * =============================================================
 */
.shipping-bar {
  display: block;
  margin-top: 16px;
  margin-bottom: 4px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .shipping-bar {
    margin-bottom: 8px;
  }
}

.shipping-bar__text {
  display: block;
}

.shipping-bar__progress {
  position: relative;
  display: block;
  margin-top: 6px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
@media screen and (min-width: 768px) {
  .shipping-bar__progress {
    margin-top: 8px;
    height: 8px;
  }
}

.shipping-bar__progress::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: currentColor;
  transition: transform 0.2s ease;
  transform: scaleX(var(--progress));
  transform-origin: left;
}

.shipping-bar--large {
  max-width: 392px;
}

@media screen and (min-width: 768px) {
  .shipping-bar--large .shipping-bar__progress {
    margin-top: 16px;
  }
}

/**
 * =============================================================
 * ## Shipping Estimator
 * =============================================================
 */
.shipping-estimator {
  border: 1px solid rgb(var(--color-border));
}

.shipping-estimator__toggle-button,
.shipping-estimator__form {
  padding: 24px;
}
.shipping-estimator__form {
  display: block;
  padding-top: 0 !important;
}

.shipping-estimator__results {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .shipping-estimator__form .input-row .input:nth-child(1),
.shipping-estimator__form .input-row .input:nth-child(2) {
    grid-column: span 2;
    /* The third one is the zip and can be smaller */
  }
}

/**
 * =============================================================
 * ## Cart Notification
 * =============================================================
 */
.cart-notification {
  --color-text: 255, 255, 255;
  --cart-notification-background: rgb(var(--color-success));
  display: block;
  position: absolute;
  top: 100%;
  width: 100%;
  transform: translateY(0px);
  transform: translateY(var(--cart-notification-offset, 0px));
  color: rgb(var(--color-text));
  transition: visibility 0.25s ease-in-out, transform 0.25s ease-in-out;
  visibility: visible;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .cart-notification {
    transform: none !important;
    /* You cannot have any offset on medium screens down */
  }
}

.cart-notification--error {
  --cart-notification-background: rgb(var(--color-error));
}

.cart-notification--drawer {
  --cart-notification-offset: 0;
  top: var(--header-height);
  z-index: 1;
}

.cart-notification--fixed {
  position: fixed;
  top: 0;
}

.cart-notification[hidden] {
  visibility: hidden;
}

.cart-notification__overflow {
  background: var(--cart-notification-background);
  transform: translateY(0);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.cart-notification[hidden] .cart-notification__overflow {
  transform: translateY(-100%);
  opacity: 0;
}

.cart-notification__wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 14px;
}
@media screen and (min-width: 768px) {
  .cart-notification__wrapper {
    padding-top: 19px;
    padding-bottom: 19px;
  }
}

.cart-notification .icon--cart-notification {
  position: relative;
  top: 2px;
}
@media screen and (min-width: 768px) {
  .cart-notification .icon--cart-notification {
    top: 4px;
  }
}

.cart-notification__text-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 12px;
}
@media screen and (max-width: 767px) {
  .cart-notification__text-wrapper {
    flex-grow: 1;
    justify-content: space-between;
  }
}

.cart-notification__heading {
  font-size: 14px;
  margin-right: 12px;
}
@media screen and (min-width: 768px) {
  .cart-notification__heading {
    font-size: 16px;
    margin-right: 16px;
  }
}

.cart-notification__close {
  position: absolute;
  margin-top: -1px;
  right: 0;
}

@media screen and (min-width: 768px) {
  .cart-notification__close svg {
    width: 15px;
    height: 15px;
  }
}

.cart-notification--drawer .cart-notification__text-wrapper {
  flex-grow: 1;
  justify-content: space-between;
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Icon list related
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Payment Methods
 * =============================================================
 */
.payment-methods-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, 38px);
}

.payment-methods-list--center {
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .payment-methods-list--auto {
    grid-auto-flow: column;
  }
}

/**
 * =============================================================
 * ## Social Media
 * =============================================================
 */
.social-media {
  display: flex;
  flex-wrap: wrap;
}

.social-media__item {
  position: relative;
  box-shadow: 1px 0 0 0 rgb(var(--color-border)), 0 1px 0 0 rgb(var(--color-border)), 1px 1px 0 0 rgb(var(--color-border)), 1px 0 0 0 rgb(var(--color-border)) inset, 0 1px 0 0 rgb(var(--color-border)) inset;
  transform: translateZ(0);
  /* allow to promote on its own layer */
}

.no-focus-outline .social-media__item {
  overflow: hidden;
}

.social-media__item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  background: currentColor;
  -webkit-clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
  z-index: 1;
}

.social-media__link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  width: 45px;
  color: currentColor;
  z-index: 1;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media screen and (min-width: 768px) {
  .social-media__link {
    height: 55px;
    width: 55px;
  }
}
@media screen and (pointer: fine) {
  .social-media__item:hover .social-media__link {
    color: rgb(var(--color-bg));
  }

  .social-media__item:hover::before {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform: scaleY(1);
  }
}
/**
 * =============================================================
 * =============================================================
 *
 * # Components / Other
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Loading Bar
 * - Simple loading bar on top of screen that shows for AJAX functionality such
 *   as collection filtering
 * =============================================================
 */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  opacity: 0;
  background: rgb(var(--color-loading-bar-bg));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-in-out;
  z-index: 50;
  pointer-events: none;
}

.loading-bar.is-visible {
  opacity: 1;
}

/**
 * =============================================================
 * ## Cookie Bar
 * =============================================================
 */
.cookie-bar {
  display: block;
  position: fixed;
  width: calc(100% - var(--container-gutter) * 2);
  right: var(--container-gutter);
  bottom: var(--container-gutter);
  padding: 20px;
  max-width: 400px;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-bg));
  z-index: 2;
  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
@media screen and (max-width: 767px) {
  @supports (padding: 0px) {
    .cookie-bar {
      bottom: max(24px, env(safe-area-inset-bottom, 0px) + 24px);
    }
  }
}
@media screen and (min-width: 768px) {
  .cookie-bar {
    padding: 30px;
  }
}

.cookie-bar[hidden] {
  visibility: hidden;
  opacity: 0;
}

.cookie-bar__actions {
  margin-top: 18px;
}

.cookie-bar__actions .button:last-child {
  margin-left: 4px;
}

.newsletter__form {
  margin-top: 32px;
}

.newsletter__form .input-row {
  grid-template-columns: none;
  /* As the newsletter box is small there is not enough space to fit on smaller screens */
}

@media screen and (min-width: 1280px) {
  .newsletter__form .input-row {
    grid-template-columns: 1fr auto;
    /* Small variation for this section */
  }
}
/**
 * =============================================================
 * ## Newsletter Modal
 * =============================================================
 */
.newsletter-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .newsletter-modal {
    max-height: inherit;
  }
}
@media screen and (min-width: 1025px) {
  .newsletter-modal {
    flex-direction: row;
    align-items: stretch;
  }
}

@media screen and (min-width: 1025px) {
  .newsletter-modal--reverse {
    flex-direction: row-reverse;
  }
}

.newsletter-modal__image {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
@media screen and (max-width: 767px) {
  .newsletter-modal__image {
    max-height: 200px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .newsletter-modal__image {
    max-height: 350px;
  }
}
@media screen and (min-width: 1025px) {
  .newsletter-modal__image {
    width: 50%;
  }
}

.newsletter-modal__content {
  padding: 32px 24px 40px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .newsletter-modal__content {
    overflow: auto;
  }
}
@media screen and (min-width: 768px) {
  .newsletter-modal__content {
    padding: 60px;
  }
}
@media screen and (min-width: 1025px) {
  .newsletter-modal__content {
    width: 50%;
    padding: 80px;
    display: flex;
    flex-direction: column;
  }
}

/**
 * =============================================================
 * =============================================================
 *
 * # Components / Shopify specific
 * 
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Shopify Challenge
 * =============================================================
 */
.shopify-challenge__container {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.shopify-challenge__container .shopify-challenge__button {
  margin-top: 30px;
}

/**
 * =============================================================
 * =============================================================
 *
 * # Sections
 * Styling for specific Shopify sections
 * =============================================================
 * =============================================================
 */
/**
 * -------------------------------------------------------------
 * SECTION
 * -------------------------------------------------------------
 */
.section {
  display: block;
}

.section:empty {
  display: none;
}

/**
 * This is appended to section classes that have colour selectors available for the merchant
 */
.section--colors {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
}

/**
 * Sections feature padding top and bottom settings for the merchant
 */
.section--padding {
  padding-top: calc(var(--section-padding-top) * 0.75);
  padding-bottom: calc(var(--section-padding-bottom) * 0.75);
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section--padding {
    padding-top: calc(var(--section-padding-top) * 0.85);
    padding-bottom: calc(var(--section-padding-bottom) * 0.85);
  }
}
@media screen and (min-width: 1025px) {
  .section--padding {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
  }
}

/* ### Section Header
 * ========================================================== */
.section__header {
  max-width: 1000px;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .section__header {
    margin-bottom: 32px;
  }
}
.section__header .subheading + .heading {
  margin-top: 16px;
}
.section__header .heading + .deck-text {
  margin-top: 16px;
}

.section__header .deck-text {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section__header:only-child {
  margin-bottom: 0;
}

/* ### Section Footer
 * ========================================================== */
.section__footer {
  margin-top: 32px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .section__footer {
    margin-top: 40px;
  }
}

/**
 * =============================================================
 * ## Header
 * =============================================================
 */
.announcement-bar {
  display: block;
  padding: 8px 0;
  background-color: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  text-align: center;
  font-size: 13px;
}

.announcement-bar__content {
  display: block;
}

/**
 * =============================================================
 * ## Header
 * =============================================================
 */
header-main {
  display: block;
}

/**
 * 1. Transition included as the header can be set to be transparent for
 *    specific pages. However, it will transition to full colour on scroll or
 *    focus / hover.
 */
.header {
  display: block;
  position: relative;
  top: 0;
  background: rgb(var(--color-header-bg));
  color: rgb(var(--color-header-text));
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
  /* [1] */
}

.header__wrapper {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

/* ### Header Navs
 * ========================================================== */
.header__primary-navigation {
  display: flex;
  align-items: center;
}

.header__primary-navigation,
.header__secondary-navigation {
  flex: 1 1 0;
}

.header__secondary-navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header__secondary-navigation .header__linklist {
  flex-wrap: nowrap;
}

/* ### Header Icons
 * ========================================================== */
.header__icon-wrapper {
  display: block;
}

.header__icon-list {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
}

.header__cart-count {
  margin-left: 8px;
  top: -1px;
  background: rgb(var(--color-header-text));
  color: rgb(var(--color-header-bg));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  height: 21px;
  min-width: 21px;
  line-height: 1;
  border-radius: 21px;
  letter-spacing: 0;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.header__cart-count--floating {
  margin-left: 0;
  position: absolute;
  top: -8px;
  right: -14px;
}
@media screen and (min-width: 768px) {
  .header__cart-count--floating {
    gap: 24px;
  }
}

.js .header--transparent .header__cart-count {
  color: rgb(var(--color-header-transparent-bubble-text));
}

/* ### Header Logo
 * ========================================================== */
.header__logo {
  display: block;
  position: relative;
  margin: 0;
}

.header__logo-link,
.header__logo-image {
  display: block;
  width: max-content;
}

.header__logo-text {
  color: currentColor;
}

/**
 * Transition in case merchant sets a transparent header
 */
.header__logo-image {
  transition: opacity 0.2s ease-in-out;
}

.header__logo-image--transparent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

.js .header--transparent .header__logo-image:not(:last-child) {
  opacity: 0;
}

.js .header--transparent .header__logo-image--transparent {
  opacity: 1;
}

/* ### Header Linklists
 * ========================================================== */
.header__linklist {
  display: flex;
  flex-wrap: wrap;
}

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

.header__linklist-item:not(:last-child) {
  margin-right: 32px;
}

.header__linklist-item.has-dropdown:hover::before {
  content: attr(data-item-title);
  position: absolute;
  margin-left: -32px;
  /* This is a trick to increase the bounding size of the link, and therefore prevent losing hover */
  height: 100%;
  top: 0;
  padding-left: 32px;
  padding-right: 32px;
  opacity: 0;
  /* Allow to visually hide it */
}

.header__linklist-link {
  display: block;
  position: relative;
  /* Add stacking context */
}

.header__linklist-link--main {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: var(--font-weight-body-bold);
  letter-spacing: 0.08em;
}

/* ### Cross Border
 * ========================================================== */
.header__cross-border {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 18px;
  gap: 18px;
  font-size: 14px;
}

.header__cross-border .popover {
  font-size: 14px;
}

.header__secondary-navigation .header__cross-border {
  margin-right: 24px;
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .header__secondary-navigation .header__cross-border {
    margin-right: 30px;
  }
}
/* ### Nav Dropdown
 * ========================================================== */
.nav-dropdown {
  display: block;
  position: absolute;
  top: 100%;
  margin-left: -32px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: rgb(var(--color-header-bg));
  color: rgb(var(--color-header-text));
  border: 1px solid rgba(var(--color-header-text), 0.15);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

.nav-dropdown:not([hidden]),
.focus-outline [focus-within] > .nav-dropdown,
.no-js [focus-within] > .nav-dropdown,
.no-js :hover > .nav-dropdown {
  visibility: visible;
  opacity: 1;
}

.nav-dropdown:not([hidden]),
.focus-outline :focus-within > .nav-dropdown,
.no-js :focus-within > .nav-dropdown,
.no-js :hover > .nav-dropdown {
  visibility: visible;
  opacity: 1;
}

.nav-dropdown--restrict {
  max-height: calc(100vh - var(--header-height) - 20px);
  overflow: auto;
}

.nav-dropdown .nav-dropdown {
  margin-left: 0;
  top: -20px;
  left: 100%;
}

.nav-dropdown__item {
  position: relative;
}

.nav-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 30px;
}

.nav-dropdown__link > svg {
  position: relative;
  margin-left: 16px;
  top: 2px;
  transition: transform 0.25s ease-in-out;
}

.nav-dropdown__link[aria-expanded=true] > svg {
  transform: translateX(8px);
}

/* ### Mega menu
 * ========================================================== */
.mega-menu {
  --mega-menu-column-gap: 24px;
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  background: rgb(var(--color-header-bg));
  color: rgb(var(--color-header-text));
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

.mega-menu[hidden] {
  z-index: -1;
}

.mega-menu::after {
  content: "";
  position: absolute;
  height: calc(100vh - 100% - 0px);
  height: calc(100vh - 100% - var(--header-height, 0px));
  width: 100%;
  left: 0;
  top: 100%;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.mega-menu:not([hidden]),
.focus-outline [focus-within] > .mega-menu,
.no-js [focus-within] > .mega-menu,
.no-js :hover > .mega-menu {
  visibility: visible;
  opacity: 1;
}

.mega-menu:not([hidden]),
.focus-outline :focus-within > .mega-menu,
.no-js :focus-within > .mega-menu,
.no-js :hover > .mega-menu {
  visibility: visible;
  opacity: 1;
}

.mega-menu:not([hidden])::after,
.focus-outline [focus-within] > .mega-menu::after,
.no-js [focus-within] > .mega-menu::after,
.no-js :hover > .mega-menu::after {
  opacity: 0.3;
}

.mega-menu:not([hidden])::after,
.focus-outline :focus-within > .mega-menu::after,
.no-js :focus-within > .mega-menu::after,
.no-js :hover > .mega-menu::after {
  opacity: 0.3;
}

.mega-menu__wrapper {
  padding-top: 28px;
  padding-bottom: 48px;
  max-height: calc(100vh - 0px - 0px - 50px);
  max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 50px);
  overflow: auto;
  z-index: 1;
  position: relative;
}

.mega-menu__inner {
  position: relative;
}

.mega-menu__columns {
  display: grid;
  /* flex-wrap: wrap; */
  /* margin: calc(-1 * var(--mega-menu-column-gap) / 2); */
  grid-template-columns: repeat(var(--mega-menu-columns), 1fr);
  gap: var(--mega-menu-column-gap);
}

.mega-menu__column {
  /* width: calc(20% - var(--mega-menu-column-gap)); */
  /* margin: calc(var(--mega-menu-column-gap) / 2); */
}

.mega-menu__image-column {
  position: relative;
}

.mega-menu__image-column:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(var(--overlay-color) / var(--overlay-opacity));
}

.mega-menu__image-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
}

.mega-menu__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-menu__image-content {
  position: absolute;
  padding: 20px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: rgba(var(--color-text));
  z-index: 1;
}

.mega-menu__image-title {
  margin-bottom: 8px;
  font-size: 18px;
}

.mega-menu__image-link {
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: var(--font-weight-body-bold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.mega-menu__image-absolute-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}


.mega-menu__title {
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-body-bold);
}

.mega-menu__linklist-link {
  display: block;
  padding: 4px 0;
  font-size: 14px;
}

a.mega-menu__title,
.mega-menu__linklist-link {
  transition: color 0.2s ease-in-out;
}
a.mega-menu__title:hover,
.mega-menu__linklist-link:hover {
  color: rgba(var(--color-mega-menu-hover-text));
}

/**
 * =============================================================
 * ## Footer
 * =============================================================
 */
.footer {
  padding: 48px 0 24px;
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  margin-top: 60px;
}
@media screen and (min-width: 1025px) {
  .footer {
    padding-top: 72px;
    padding-bottom: 40px;
    margin-top: 80px;
  }
}

/* ### Footer Items
 * ========================================================== */
.footer__item-list {
  display: grid;
  grid-gap: 40px;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__item-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1025px) {
  .footer__item-list {
    grid-auto-flow: column;
    grid-template-columns: none;
  }
}

.footer__item {
  max-width: 325px;
  /* Ensure a given item does not grow too big */
  word-break: break-word;
}

.footer__item-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: var(--font-weight-body-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media screen and (min-width: 1025px) {
  .footer__item-title {
    margin-bottom: 20px;
  }
}

.footer__item--links {
  font-size: 14px;
}

.footer__item--social-media .footer__item-content {
  margin-top: 20px;
}

.footer__item--newsletter {
  max-width: 400px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__item--newsletter {
    grid-column: span 2;
  }
}

@media screen and (max-width: 767px) {
  .footer__item--newsletter,
.footer__item--newsletter + .footer__item--social-media:last-child {
    grid-column: span 2;
  }
}

.footer__newsletter-form {
  margin-top: 16px;
}

.footer__item--newsletter .klaviyo-form {
  padding: 0 !important;
  margin-top: -10px !important;
  font-family: var(--font-family-body) !important;
}

.footer__item--newsletter .ql-editor p {
  margin-top: 12px !important;
}

.footer__item--newsletter h2 span {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-heading) !important;
  font-size: 20px !important;
}

.ql-font-helvetica {
  font-family: var(--font-family-body) !important;
}

.footer__item--newsletter div[role=option] {
  color: rgb(var(--color-bg)) !important;
}

/* ### Footer Aside
 * ========================================================== */
.footer__aside {
  margin-top: 42px;
}
@media screen and (min-width: 1025px) {
  .footer__aside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    row-gap: 24px;
    margin-top: 50px;
  }
}

.footer__cross-border {
  display: flex;
  margin-top: 24px;
}
@media screen and (min-width: 1025px) {
  .footer__cross-border {
    gap: 32px;
    justify-content: flex-end;
  }
}
.footer__cross-border .popover-container + .popover-container {
  margin-left: -1px;
  /* Allows to collapse the border */
}

.footer__copyright,
.footer__payment-methods {
  display: block;
  color: rgba(var(--color-text), 0.7);
}

.footer__copyright {
  font-size: 12px;
  border-top: 1px solid rgba(var(--color-text), 0.2);
}
@media screen and (max-width: 1024px) {
  .footer__copyright {
    margin-top: 24px;
    padding-top: 12px;
  }
}
@media screen and (min-width: 1025px) {
  .footer__copyright {
    margin-top: 40px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 12px;
  }
}

.footer__copyright-image {
  margin-right: 12px;
}
@media screen and (max-width: 1024px) {
  .footer__copyright-image {
    margin-bottom: 12px;
  }
}

.footer__payment-methods {
  margin-top: 24px;
}
@media screen and (min-width: 1025px) {
  .footer__payment-methods {
    margin-top: 0;
  }
}

.footer__payment-methods-label {
  display: inline-block;
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  .footer__payment-methods-label {
    margin-bottom: 0;
    margin-right: 14px;
  }
}

/**
 * =============================================================
 * ## SLIDESHOW
 * =============================================================
 */
.slideshow__container {
  display: block;
  position: relative;
}

/**
 * We are creating a horizontal carousel using scroll snap and flexbox.
 *
 * 1. Relative positioning context as a failsafe as a lot of child elements depend on parent positioning context
 * 2. Flexbox, nowrap, and overflow x allows us to create a horizontal scroll without scrollbars
 * 3. CSS scroll snap declared
 * 4. Browser specific properties to hide or style scroll bars
 */
.slideshow {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Hide scrollbars on Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbars on IE & Edge */
}

/**
 * Hide scrollbars on Webkit
 */
.slideshow::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion) {
  .slideshow {
    scroll-behavior: auto;
  }
}
/* ### Slideshow Height Variations
 * ========================================================== */
@media screen and (max-width: 1024px) {
  .slideshow--mobile-height--natural::before {
    content: "";
    display: block;
    padding-bottom: calc(100 / var(--mobile-image-aspect-ratio) * 1%);
  }

  .slideshow--mobile-height--small {
    height: 250px;
  }

  .slideshow--mobile-height--medium {
    height: 300px;
  }

  .slideshow--mobile-height--large {
    height: 400px;
  }

  .slideshow--mobile-height--x-large {
    height: 500px;
  }

  .slideshow--mobile-height--fit {
    height: calc(var(--window-height) - var(--header-height, 0px) * -1 * (var(--enable-transparent-header) - 1) - var(--announcement-bar-height, 0px));
  }
}
@media screen and (min-width: 1025px) {
  .slideshow--height--natural::before {
    content: "";
    display: block;
    padding-bottom: calc(100 / var(--image-aspect-ratio) * 1%);
  }

  .slideshow--height--small {
    height: 450px;
  }

  .slideshow--height--medium {
    height: 550px;
  }

  .slideshow--height--large {
    height: 650px;
  }

  .slideshow--height--x-large {
    height: 750px;
  }

  .slideshow--height--fit {
    height: calc(var(--window-height) - var(--header-height, 0px) * -1 * (var(--enable-transparent-header) - 1) - var(--announcement-bar-height, 0px));
  }
}
/* ### Slideshow Slide
 * ========================================================== */
/**
 * 1. Set sizing variables to ensure only one slide shows at a time.
 */
.slideshow__slide {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  scroll-snap-align: center;
}

/**
 * 1. Set a relative positioning context as we will be absolutely positioning the child image and slide text content elements
 * 2. Ensure the element takes up 100% of the parent element
 */
.slideshow__slide-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**
 * Absolutely position our wrapper and image elements. This gives flexibility to match the height declared on the slideshow.
 */
.slideshow__image-wrapper,
.slideshow__image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/**
 * Default object fit and positioning for our elements. Cover is set as we can have variable slideshow heights. Positioning can be overridden in section settings for merchant.
 */
.slideshow__image {
  object-fit: cover;
  object-position: center center;
}

.slideshow__image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--section-blocks-overlay-color), var(--section-blocks-overlay-opacity));
  pointer-events: none;
  z-index: 1;
}

/* ### Slideshow Slide Content
 * ========================================================== */
/**
 * Our content wrapper is a flex-child. It is not absolutely positionied. This 
 * means that if there is a lot of content it will increase the height of the 
 * image in spite of the height settings. This is to ensure no text clipping.
 */
.slideshow__content-wrapper {
  padding: 40px;
  position: relative;
  z-index: 1;
}

.slideshow--has-dots .slideshow__content-wrapper {
  padding-bottom: 60px;
}

.slideshow--has-arrows .slideshow__content-wrapper {
  padding-left: 64px;
  padding-right: 64px;
}
@media screen and (min-width: 1025px) {
  .slideshow--has-arrows .slideshow__content-wrapper {
    padding-left: 100px;
    padding-right: 100px;
  }
}

.slideshow__content {
  width: fit-content;
  max-width: 600px;
  color: rgb(var(--color-text));
}

@media screen and (max-width: 1024px) {
  .slideshow__slide-inner--mobile-content--top-left,
.slideshow__slide-inner--mobile-content--top-center,
.slideshow__slide-inner--mobile-content--top-right {
    justify-content: flex-start;
  }

  .slideshow__slide-inner--mobile-content--middle-left,
.slideshow__slide-inner--mobile-content--middle-center,
.slideshow__slide-inner--mobile-content--middle-right {
    justify-content: center;
  }

  .slideshow__slide-inner--mobile-content--bottom-left,
.slideshow__slide-inner--mobile-content--bottom-center,
.slideshow__slide-inner--mobile-content--bottom-right {
    justify-content: flex-end;
  }

  .slideshow__slide-inner--mobile-content--bottom-left .slideshow__content,
.slideshow__slide-inner--mobile-content--middle-left .slideshow__content,
.slideshow__slide-inner--mobile-content--top-left .slideshow__content {
    margin-left: 0;
    margin-right: auto;
  }

  .slideshow__slide-inner--mobile-content--bottom-center .slideshow__content,
.slideshow__slide-inner--mobile-content--middle-center .slideshow__content,
.slideshow__slide-inner--mobile-content--top-center .slideshow__content {
    margin-left: auto;
    margin-right: auto;
  }

  .slideshow__slide-inner--mobile-content--bottom-right .slideshow__content,
.slideshow__slide-inner--mobile-content--middle-right .slideshow__content,
.slideshow__slide-inner--mobile-content--top-right .slideshow__content {
    margin-left: auto;
    margin-right: 0;
  }

  .slideshow__slide-inner--mobile-text--left {
    text-align: left;
  }

  .slideshow__slide-inner--mobile-text--center {
    text-align: center;
  }

  .slideshow__slide-inner--mobile-text--right {
    text-align: right;
  }
}
@media screen and (min-width: 1025px) {
  .slideshow__slide-inner--content--top-left,
.slideshow__slide-inner--content--top-center,
.slideshow__slide-inner--content--top-right {
    justify-content: flex-start;
  }

  .slideshow__slide-inner--content--middle-left,
.slideshow__slide-inner--content--middle-center,
.slideshow__slide-inner--content--middle-right {
    justify-content: center;
  }

  .slideshow__slide-inner--content--bottom-left,
.slideshow__slide-inner--content--bottom-center,
.slideshow__slide-inner--content--bottom-right {
    justify-content: flex-end;
  }

  .slideshow__slide-inner--content--bottom-left .slideshow__content,
.slideshow__slide-inner--content--middle-left .slideshow__content,
.slideshow__slide-inner--content--top-left .slideshow__content {
    margin-left: 0;
    margin-right: auto;
  }

  .slideshow__slide-inner--content--bottom-center .slideshow__content,
.slideshow__slide-inner--content--middle-center .slideshow__content,
.slideshow__slide-inner--content--top-center .slideshow__content {
    margin-left: auto;
    margin-right: auto;
  }

  .slideshow__slide-inner--content--bottom-right .slideshow__content,
.slideshow__slide-inner--content--middle-right .slideshow__content,
.slideshow__slide-inner--content--top-right .slideshow__content {
    margin-left: auto;
    margin-right: 0;
  }

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

  .slideshow__slide-inner--text--center {
    text-align: center;
  }

  .slideshow__slide-inner--text--right {
    text-align: right;
  }
}
/* ### Slideshow Slide Text
 * ========================================================== */
.slideshow__subheading--top + .slideshow__heading {
  margin-top: 16px;
}

.slideshow__heading + .slideshow__subheading--bottom {
  margin-top: 16px;
}

.slideshow__button-wrapper {
  margin-top: 32px;
}

/* ### Slideshow Arrows
 * ========================================================== */
.slideshow__prev-next-container {
  position: absolute;
  top: calc(50% - 24px);
  left: 0;
  right: 0;
  z-index: 1;
}

.slideshow__prev-next {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.slideshow__prev-next-button {
  color: rgb(var(--color-arrows));
}

/* ### Slideshow Dots
 * ========================================================== */
.slideshow__dots-nav-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
}

/**
 * =============================================================
 * ## HERO
 * =============================================================
 */
.hero__container {
  display: block;
  position: relative;
}

.hero {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

/* ### hero Height Variations
 * ========================================================== */
@media screen and (max-width: 1024px) {
  .hero--mobile-height--natural::before {
    content: "";
    display: block;
    padding-bottom: calc(100 / var(--mobile-media-aspect-ratio) * 1%);
  }

  .hero--mobile-height--x-small {
    height: 150px;
  }

  .hero--mobile-height--small {
    height: 250px;
  }

  .hero--mobile-height--medium {
    height: 300px;
  }

  .hero--mobile-height--large {
    height: 400px;
  }

  .hero--mobile-height--x-large {
    height: 500px;
  }

  .hero--mobile-height--fit {
    height: calc(var(--window-height) - var(--header-height, 0px) * -1 * (var(--enable-transparent-header) - 1) - var(--announcement-bar-height, 0px));
  }
}
@media screen and (min-width: 1025px) {
  .hero--height--natural::before {
    content: "";
    display: block;
    padding-bottom: calc(100 / var(--media-aspect-ratio) * 1%);
  }

  .hero--height--x-small {
    height: 200px;
  }

  .hero--height--small {
    height: 450px;
  }

  .hero--height--medium {
    height: 550px;
  }

  .hero--height--large {
    height: 650px;
  }

  .hero--height--x-large {
    height: 750px;
  }

  .hero--height--fit {
    height: calc(var(--window-height) - var(--header-height, 0px) * -1 * (var(--enable-transparent-header) - 1) - var(--announcement-bar-height, 0px));
  }
}
/* ### Hero Outer
 * ========================================================== */
.hero__outer {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
}

/**
 * 1. Set a relative positioning context as we will be absolutely positioning the child image and slide text content elements
 * 2. Ensure the element takes up 100% of the parent element
 */
.hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**
 * Absolutely position our wrapper and media elements. This gives flexibility to match the height declared on the hero.
 */
.hero__media-wrapper,
.hero__media-wrapper,
.hero__image,
.hero__video,
.hero__media-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/**
 * For natural sized video sections with iFrame, we're using a 16:9 aspect ratio
 * to display the video.
 *
 * However, when using fixed height sections for an iFrame, we can't use object
 * fit or position properties to ensure the iframe covers the whole parent
 * element space.
 *
 * We use the below properties to extend the size of the iframe and attempt to
 * center it. This will lead to large amounts of the video being cropped but
 * this is the only solution we currently have available.
 */
@media screen and (max-width: 767px) {
  .hero:not(.hero--height--mobile--natural) .hero__media-wrapper iframe {
    width: 300%;
    height: 160%;
    left: -100%;
    top: -40%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hero:not(.hero--height--mobile--natural) .hero__media-wrapper iframe {
    width: 300%;
    height: 160%;
    left: -100%;
    top: -40%;
  }
}

@media screen and (min-width: 1025px) {
  .hero:not(.hero--height--natural) .hero__media-wrapper iframe {
    width: 100%;
    height: 300%;
    left: 0;
    top: -100%;
  }
}

/**
 * Default object fit and positioning for our elements. Cover is set as we can have variable hero heights. Positioning can be overridden in section settings for merchant.
 */
.hero__image,
.hero__video {
  object-fit: cover;
  object-position: center center;
}

.hero__media-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--section-overlay-color), var(--section-overlay-opacity));
  pointer-events: none;
  z-index: 1;
}

/**
 * Useful for hero and background videos
 */
.hero__media-wrapper--inert .hero__video,
.hero__media-wrapper--inert iframe {
  pointer-events: none;
}

/* ### hero Slide Content
 * ========================================================== */
.hero__content-wrapper {
  padding: 40px;
  position: relative;
  z-index: 1;
}

.hero__content {
  width: fit-content;
  max-width: 600px;
  color: rgb(var(--color-text));
}

@media screen and (max-width: 1024px) {
  .hero__inner--mobile-content--top-left,
.hero__inner--mobile-content--top-center,
.hero__inner--mobile-content--top-right {
    justify-content: flex-start;
  }

  .hero__inner--mobile-content--middle-left,
.hero__inner--mobile-content--middle-center,
.hero__inner--mobile-content--middle-right {
    justify-content: center;
  }

  .hero__inner--mobile-content--bottom-left,
.hero__inner--mobile-content--bottom-center,
.hero__inner--mobile-content--bottom-right {
    justify-content: flex-end;
  }

  .hero__inner--mobile-content--bottom-left .hero__content,
.hero__inner--mobile-content--middle-left .hero__content,
.hero__inner--mobile-content--top-left .hero__content {
    margin-left: 0;
    margin-right: auto;
  }

  .hero__inner--mobile-content--bottom-center .hero__content,
.hero__inner--mobile-content--middle-center .hero__content,
.hero__inner--mobile-content--top-center .hero__content {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__inner--mobile-content--bottom-right .hero__content,
.hero__inner--mobile-content--middle-right .hero__content,
.hero__inner--mobile-content--top-right .hero__content {
    margin-left: auto;
    margin-right: 0;
  }

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

  .hero__inner--mobile-text--center {
    text-align: center;
  }

  .hero__inner--mobile-text--right {
    text-align: right;
  }
}
@media screen and (min-width: 1025px) {
  .hero__inner--content--top-left,
.hero__inner--content--top-center,
.hero__inner--content--top-right {
    justify-content: flex-start;
  }

  .hero__inner--content--middle-left,
.hero__inner--content--middle-center,
.hero__inner--content--middle-right {
    justify-content: center;
  }

  .hero__inner--content--bottom-left,
.hero__inner--content--bottom-center,
.hero__inner--content--bottom-right {
    justify-content: flex-end;
  }

  .hero__inner--content--bottom-left .hero__content,
.hero__inner--content--middle-left .hero__content,
.hero__inner--content--top-left .hero__content {
    margin-left: 0;
    margin-right: auto;
  }

  .hero__inner--content--bottom-center .hero__content,
.hero__inner--content--middle-center .hero__content,
.hero__inner--content--top-center .hero__content {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__inner--content--bottom-right .hero__content,
.hero__inner--content--middle-right .hero__content,
.hero__inner--content--top-right .hero__content {
    margin-left: auto;
    margin-right: 0;
  }

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

  .hero__inner--text--center {
    text-align: center;
  }

  .hero__inner--text--right {
    text-align: right;
  }
}
/* ### Hero Text
 * ========================================================== */
.hero__subheading--top + .hero__heading {
  margin-top: 16px;
}

.hero__heading + .hero__subheading--bottom {
  margin-top: 16px;
}

.hero__button-wrapper {
  margin-top: 32px;
}

.shopify-section--hero-image-with-text-box .hero__content,
.shopify-section--hero-video-with-text-box .hero__content {
  background: rgb(var(--color-box-bg));
  padding: 24px;
}
@media screen and (max-width: 1024px) {
  .shopify-section--hero-image-with-text-box .hero__content,
.shopify-section--hero-video-with-text-box .hero__content {
    width: 100%;
    max-width: initial;
  }
}
@media screen and (min-width: 1025px) {
  .shopify-section--hero-image-with-text-box .hero__content,
.shopify-section--hero-video-with-text-box .hero__content {
    width: 380px;
    padding: 32px;
  }
}

.hero__text-box--mobile {
  margin-top: -60px;
}

.hero__text-box--mobile .hero__content-wrapper {
  padding: 0;
}

/**
 * =============================================================
 * ## Collection List
 * - Used for Collection List section and List Collections template
 * =============================================================
 */
.collection-list__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(100% / var(--section-items-per-row) - var(--collection-list-column-gap) * (var(--section-items-per-row) - 1) / var(--section-items-per-row)));
  grid-gap: var(--collection-list-row-gap) var(--collection-list-column-gap);
  gap: var(--collection-list-row-gap) var(--collection-list-column-gap);
  overflow: hidden;
}

.collection-list__item {
  display: block;
  position: relative;
}

.collection-list__item-image-wrapper {
  display: block;
  margin-bottom: 16px;
  overflow: hidden;
}
@media screen and (min-width: 1025px) {
  .collection-list__item-image-wrapper {
    margin-bottom: 24px;
  }
}

.collection-list__item-aspect-ratio {
  isolation: isolate;
}

.collection-list__item-info {
  text-align: center;
}

.collection-list__item-link {
  margin-top: 12px;
  font-size: 14px;
}

/**
 * =============================================================
 * ## Subcollections
 * =============================================================
 */
.subcollections__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(100% / var(--section-items-per-row) - var(--collection-list-column-gap) * (var(--section-items-per-row) - 1) / var(--section-items-per-row)));
  grid-gap: var(--collection-list-row-gap) var(--collection-list-column-gap);
  gap: var(--collection-list-row-gap) var(--collection-list-column-gap);
  overflow: hidden;
}

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

.subcollections__item-image-wrapper {
  display: block;
  margin-bottom: 16px;
  overflow: hidden;
}
@media screen and (min-width: 1025px) {
  .subcollections__item-image-wrapper {
    margin-bottom: 24px;
  }
}

.subcollections__item-image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--section-blocks-overlay-color), var(--section-blocks-overlay-opacity));
  pointer-events: none;
  z-index: 1;
}

.subcollections__item-aspect-ratio {
  isolation: isolate;
}

.subcollections__item-info {
  position: absolute;
  top: 50%;
  left: 16px;
  right: 16px;
  transform: translateY(-50%);
  padding: 8px 16px;
  text-align: center;
  background: rgb(var(--color-button-primary-bg));
}

.subcollections__item-heading {
  color: rgb(var(--color-button-primary-text));
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
  .subcollections__item-heading {
    font-size: 10px;
  }
}

/**
 * =============================================================
 * ## MULTI COLUMN
 * =============================================================
 */
.multi-column {
  --multi-column-row-gap: 32px;
  --multi-column-column-gap: 24px;
  --section-items-per-row: 1;
  --item-width: calc(var(--container-inner-width) / var(--section-items-per-row) - (var(--multi-column-column-gap) / var(--section-items-per-row) * (var(--section-items-per-row) - 1)));
  position: relative;
  display: block;
}
@media screen and (min-width: 768px) {
  .multi-column {
    --section-items-per-row: 2;
  }
}
@media screen and (min-width: 1025px) {
  .multi-column {
    --section-items-per-row: 3;
  }
}

@media screen and (min-width: 1025px) {
  .multi-column--total-blocks--1,
.multi-column--total-blocks--2,
.multi-column--total-blocks--4 {
    --section-items-per-row: 2;
  }
}

.multi-column__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(100% / var(--section-items-per-row) - var(--multi-column-column-gap) * (var(--section-items-per-row) - 1) / var(--section-items-per-row)));
  grid-gap: var(--multi-column-row-gap) var(--multi-column-column-gap);
  gap: var(--multi-column-row-gap) var(--multi-column-column-gap);
  justify-content: safe center;
  padding-bottom: 2px;
  /* This allows to allocate extra space and make sure that link border are not hidden */
}

.multi-column__image-wrapper {
  display: block;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.multi-column__image-wrapper:only-child {
  margin-bottom: 0;
}

.multi-column__image {
  width: 100%;
}

.multi-column__text-html {
  margin-top: 16px;
}

/**
 * =============================================================
 * ## PROMO GRID
 * Complex promotional blocks system largely copied from Impulse theme
 * =============================================================
 */
/* ### Promo Grid Item
 * ========================================================== */
.promo-grid-item {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
}

.promo-grid-item__container {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  height: 100%;
}

.promo-grid-item__container.horizontal-left {
  justify-content: flex-start;
  text-align: left;
}
.promo-grid-item__container.horizontal-center {
  justify-content: center;
  text-align: center;
}
.promo-grid-item__container.horizontal-right {
  justify-content: flex-end;
  text-align: right;
}
.promo-grid-item__container.vertical-top {
  align-items: flex-start;
}
.promo-grid-item__container.vertical-center {
  align-items: center;
}
.promo-grid-item__container.vertical-bottom {
  align-items: flex-end;
}

.promo-grid-item__container--framed:not(.promo-grid-item__container--boxed)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: auto;
  border: 7px solid transparent;
  box-shadow: inset 0 0 0 2px rgb(var(--color-text));
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .promo-grid-item__container--framed:not(.promo-grid-item__container--boxed)::after {
    border-width: 10px;
  }
}

/* ### Promo Grid Item Link Expander
 * ========================================================== */
.promo-grid-item__link-expander {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.promo-grid-item__link-wrapper {
  display: block;
}

/* ### Promo Grid Item BG
 * ========================================================== */
/**
 * Used on Advanced and Simple blocks which have section height settings. These
 * classes allow the images to fill the full space.
 */
.promo-grid-item__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
}

.promo-grid-item__bg-image-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.promo-grid-item__bg-image {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
}

.promo-grid-item__bg-image-wrapper::after,
.promo-grid-item__image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--section-blocks-overlay-color), var(--section-blocks-overlay-opacity));
  pointer-events: none;
  z-index: 1;
}

/* ### Promo Grid Item Content
 * ========================================================== */
.promo-grid-item__content {
  position: relative;
  z-index: 3;
  flex: 0 1 auto;
  padding: 2em 2.5em;
  margin: 1.5em;
  min-width: 200px;
}

.promo-grid-item__content--boxed {
  background: rgb(var(--color-box-bg));
  color: rgb(var(--color-text));
  margin: 20px;
}
@media screen and (max-width: 767px) {
  .promo-grid-item__content--boxed {
    margin: 12px;
  }
}

.promo-grid-item__content--framed.promo-grid-item__content--boxed {
  border: 7px solid;
  border-color: rgb(var(--color-box-bg));
  box-shadow: inset 0 0 0 2px rgb(var(--color-text));
}
@media screen and (min-width: 768px) {
  .promo-grid-item__content--framed.promo-grid-item__content--boxed {
    border-width: 10px;
  }
}

/* ### Promo Grid Item Text
 * ========================================================== */
.promo-grid-item__text-wrapper {
  font-size: 1em;
}

.promo-grid-item .subheading {
  font-size: 0.9375em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.promo-grid-item .heading {
  font-size: 2.125em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.promo-grid-item .deck-text {
  font-size: 1em;
  margin-bottom: 12px;
}

/* ### Promo Grid Block: Advanced
 * ========================================================== */
.promo-grid-item--advanced .promo-grid-item__content {
  padding: 2em;
}

/* ### Promo Grid Block: Banner
 * ========================================================== */
.promo-grid-item--banner {
  flex: 1 0 100%;
}

.promo-grid-item__banner-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
}

.promo-grid-item__banner-image-wrapper {
  flex: 0 0 45%;
}
@media screen and (min-width: 768px) {
  .promo-grid-item__banner-image-wrapper {
    flex: 0 0 200px;
  }
}

.promo-grid-item__banner-text-wrapper {
  position: relative;
  flex: 0 1 auto;
  z-index: 3;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.promo-grid-item__banner-text-wrapper .heading {
  margin: 5px 10px;
}

.promo-grid-item__banner-text-wrapper .deck-text {
  margin: 10px 10px 5px;
}

.promo-grid-item__banner-text-wrapper .button-wrapper {
  margin: 5px 10px;
}

/* ### Promo Grid Block: Sale Collection
 * ========================================================== */
.promo-grid-item--sale {
  flex-grow: 1;
  max-height: 600px;
}

.promo-grid-item--sale .promo-grid-item__container {
  background: rgb(var(--color-bg));
  align-items: center;
}

.promo-grid-item--sale .promo-grid-item__content {
  padding: 2em;
  flex: 0 1 auto;
  min-width: 0;
}
@media screen and (max-width: 767px) {
  .promo-grid-item--sale .promo-grid-item__content {
    padding: 1em;
    font-size: 0.9em;
  }
}
@media screen and (min-width: 768px) {
  .promo-grid-item--sale .promo-grid-item__content {
    font-size: 1.5em;
  }
}

.promo-grid-item--sale .subheading--top,
.promo-grid-item--sale .heading {
  margin-bottom: 8px;
}

.promo-grid-item--sale .heading {
  position: relative;
  display: block;
  font-size: 3.375em;
  line-height: 1;
  white-space: nowrap;
}

.promo-grid-item--sale small {
  display: inline;
  font-size: 0.25em;
  margin-left: -2.9em;
  letter-spacing: 0;
}

.promo-grid-item__sale-images {
  flex: 1 1 50%;
}

.type-sale-images svg {
  display: block;
  width: 50%;
  float: left;
}

.promo-grid-item__sale-images-crop {
  overflow: hidden;
  width: 100%;
}

.promo-grid-item__sale-images .promo-grid-item__image {
  width: 50%;
  float: left;
}

/* ### Promo Grid Block: Product
 * ========================================================== */
.promo-grid-item--product {
  flex: 1 1 100%;
  align-self: center;
  position: relative;
  padding: 2em 0;
  z-index: 3;
}

.promo-grid-item--product .promo-grid-item__container--framed {
  padding: 2em;
}

@media screen and (max-width: 767px) {
  .promo-grid-item--product .promo-grid-item__content {
    margin-top: 15px;
  }
}

.promo-grid-item__product-images {
  position: relative;
  width: 100%;
  margin: 10px 0 10px 10px;
}

.promo-grid-item__product-images-wrapper {
  position: relative;
}

.promo-grid-item__product-images-wrapper:first-child {
  width: 100%;
  max-width: 75%;
}

.promo-grid-item__product-images-wrapper:nth-child(2) {
  position: absolute;
  bottom: 40px;
  right: 0;
  width: 100%;
  max-width: 30%;
}

.promo-grid-item__product-labels {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 3;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .promo-grid-item__product-labels .flex-grid__item--33,
.promo-grid-item__product-labels .flex-grid__item--50 {
    font-size: 0.9em;
  }
}

.promo-grid-item__product-label {
  padding: 4px 12px;
  background-color: rgb(var(--color-button-primary-bg));
  color: rgb(var(--color-button-primary-text));
  float: right;
  clear: both;
}

.promo-grid-item__product-label--secondary {
  background-color: rgb(var(--color-bg));
  color: rgb(var(--color-text));
}

/**
 * =============================================================
 * ## RICH TEXT SECTION
 * =============================================================
 */
.rich-text__content {
  margin-left: auto;
  margin-right: auto;
}

.rich-text__content--small {
  max-width: 680px;
}
.rich-text__content--small.rich-text__content--enlarge {
  max-width: 720px;
}

.rich-text__content--medium {
  max-width: 800px;
}
.rich-text__content--medium.rich-text__content--enlarge {
  max-width: 920px;
}

.rich-text__content--large {
  max-width: 1000px;
}
.rich-text__content--large.rich-text__content--enlarge {
  max-width: 1160px;
}

.rich-text__content--enlarge .deck-text {
  font-size: 18px;
}
@media screen and (min-width: 768px) {
  .rich-text__content--enlarge .deck-text {
    font-size: 20px;
  }
}

.rich-text__content .subheading + .heading {
  margin-top: 24px;
}
.rich-text__content .heading + .deck-text,
.rich-text__content .heading + .button-wrapper,
.rich-text__content .deck-text + .button-wrapper {
  margin-top: 24px;
}

/**
 * =============================================================
 * ## Text with Icons
 * =============================================================
 */
.text-with-icons {
  display: block;
  padding: 16px 0;
}

.text-with-icons__list {
  display: flex;
  scroll-snap-type: x mandatory;
  margin-left: calc(-1 * var(--container-gutter));
  margin-right: calc(-1 * var(--container-gutter));
}
@media screen and (min-width: 768px) {
  .text-with-icons__list {
    display: grid;
    grid-gap: 20px;
    gap: 20px;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (min-width: 1025px) {
  .text-with-icons__list {
    grid-gap: 48px;
    gap: 48px;
    grid-auto-columns: minmax(200px, 400px);
  }
}

.text-with-icons__item {
  display: block;
  text-align: center;
  padding: 0 48px;
  width: 100%;
  flex: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
@media screen and (min-width: 768px) {
  .text-with-icons__item {
    padding: 0;
    /* Spacing is already added by the grid */
  }
}

.text-with-icons__icon-wrapper {
  margin-bottom: 8px;
}

.text-with-icons__custom-icon {
  display: block;
  max-width: 24px;
}

.text-with-icons__icon-wrapper > * {
  margin: 0 auto;
}

.text-with-icons__title {
  font-size: 13px;
  font-weight: var(--font-weight-body-bold);
}

.text-with-icons__text {
  font-size: 14px;
}

.text-with-icons__title + .text-with-icons__text {
  margin-top: 4px;
}

.text-with-icons__dots {
  --color-dots: var(--color-text);
  margin-top: 16px;
}

/**
 * On small screens we use a carousel with optional autoplay. The JavaScript 
 * watches for an "animationend" event on our `dots-nav` element.
 * This will trigger a change of the active carousel item. We have to declare
 * a keyframes (even an empty one) to help trigger the autoplay.
 */
@keyframes hiddenAutoplayAnimation {}
/**
 * We look for the autoplay animation here:
 */
.text-with-icons__dots .dots-nav__item::after {
  position: absolute;
  content: "";
}

/**
 * The active dot element will host the empty animation and CSS variables 
 * needed to run the autoplay. This only occurs on mobile.
 */
@media screen and (max-width: 767px) {
  .text-with-icons__dots .dots-nav__item[aria-current=true]::after {
    animation: hiddenAutoplayAnimation var(--section-autoplay-duration) linear;
    animation-play-state: paused;
    animation-play-state: var(--section-animation-play-state, paused);
    animation-fill-mode: forwards;
  }
}

/**
 * =============================================================
 * ## USP Text with Icons
 * =============================================================
 */
.usp-text-with-icons {
  display: block;
  padding: 16px 0;
}

.usp-text-with-icons__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}
@media screen and (min-width: 768px) {
  .usp-text-with-icons__list {
    grid-gap: 20px;
    gap: 20px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: center;
  }
}
@media screen and (min-width: 1025px) {
  .usp-text-with-icons__list {
    grid-gap: 48px;
    gap: 48px;
    grid-auto-columns: minmax(200px, 400px);
  }
}

.usp-text-with-icons__item {
  display: block;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .usp-text-with-icons__item {
    padding: 0;
    /* Spacing is already added by the grid */
  }
}

.usp-text-with-icons__icon-wrapper {
  margin-bottom: 8px;
}

.usp-text-with-icons__custom-icon {
  display: block;
  max-width: 24px;
}

.usp-text-with-icons__icon-wrapper > * {
  margin: 0 auto;
}

.usp-text-with-icons__title {
  font-size: 13px;
  font-weight: var(--font-weight-body-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.usp-text-with-icons__text {
  font-size: 14px;
}

.usp-text-with-icons__title + .usp-text-with-icons__text {
  margin-top: 4px;
}

/**
 * =============================================================
 * ## MEDIA WITH TEXT
 * - Used for Image with Text and Video with Text sections
 * =============================================================
 */
@media screen and (min-width: 1025px) {
  .media-with-text__content {
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 1025px) {
  .media-with-text__content--reverse .media-with-text__image-wrapper {
    order: 1;
  }
}

@media screen and (min-width: 1025px) {
  .media-with-text__image-wrapper,
.media-with-text__video-wrapper {
    width: 50%;
    padding-right: 60px;
  }
}

@media screen and (min-width: 1025px) {
  .media-with-text__content--reverse .media-with-text__image-wrapper,
.media-with-text__content--reverse .media-with-text__video-wrapper {
    padding-right: 0;
    padding-left: 60px;
  }
}

.media-with-text__image {
  display: block;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .media-with-text__text-wrapper {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .media-with-text__text-wrapper {
    width: 50%;
  }
}

.media-with-text__text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}
@media screen and (max-width: 1024px) {
  .media-with-text__text-container {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 1024px) {
  .media-with-text__text-container .subheading + .heading,
.media-with-text__text-container .heading + .deck-text,
.media-with-text__text-container .heading + .button-wrapper,
.media-with-text__text-container .deck-text + .button-wrapper,
.media-with-text__text-container .subheading + .deck-text,
.media-with-text__text-container .subheading + .text-html,
.media-with-text__text-container .heading + .text-html,
.media-with-text__text-container .deck-text + .text-html,
.media-with-text__text-container .button-wrapper + .text-html {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1025px) {
  .media-with-text__text-container .subheading + .heading,
.media-with-text__text-container .heading + .deck-text,
.media-with-text__text-container .heading + .button-wrapper,
.media-with-text__text-container .deck-text + .button-wrapper,
.media-with-text__text-container .subheading + .deck-text,
.media-with-text__text-container .subheading + .text-html,
.media-with-text__text-container .heading + .text-html,
.media-with-text__text-container .deck-text + .text-html,
.media-with-text__text-container .button-wrapper + .text-html {
    margin-top: 20px;
  }
}

.media-with-text__content--reverse .media-with-text__text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
}

@media screen and (min-width: 1025px) {
  .media-with-text__text-container.text--left {
    margin-left: 60px;
  }
}

@media screen and (min-width: 1025px) {
  .media-with-text__content--reverse .media-with-text__text-container.text--left {
    margin-right: 60px;
    margin-left: auto;
  }
}

.contact__form {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 768px) {
  .team__blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--grid-gap);
  }
}

.team__block {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
}

@media screen and (max-width: 767px) {
  .team__block + .team__block {
    margin-top: 40px;
  }
}

.team__block-text {
  padding: 24px;
  text-align: center;
}

.team__block-name {
  font-size: var(--base-font-size);
  font-weight: var(--font-weight-body-bold);
}

.team__block-position {
  font-size: var(--base-font-size);
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(var(--color-border));
}

.team__block-info {
  margin-top: 20px;
}

.team__block-info-item--inline {
  display: flex;
  justify-content: center;
}

.team__block-info-item--inline + .team__block-info-item--inline {
  margin-top: 8px;
}

.team__block-info-item--inline .team__block-info-title {
  margin-right: 4px;
}

.team__block-info-title {
  font-weight: var(--font-weight-body-bold);
}

/**
 * =============================================================
 * =============================================================
 *
 * # Templates
 * These largely adhere to Shopify templates
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Page
 * =============================================================
 */
.page-header--secondary {
  background: rgb(var(--color-secondary-bg));
}

.page-header::before {
  content: "";
  display: table;
  clear: left;
}

.page-header__text-wrapper {
  max-width: 850px;
  margin: 32px auto;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .page-header__text-wrapper {
    margin: 40px auto;
  }
}
@media screen and (min-width: 1025px) {
  .page-header__text-wrapper {
    margin: 48px auto;
  }
}

.page-content,
.shopify-policy__body {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

.page-content--small {
  max-width: calc(460px + var(--container-gutter) * 2);
}

.page-content--medium {
  max-width: calc(640px + var(--container-gutter) * 2);
}

.page-content--large {
  max-width: calc(900px + var(--container-gutter) * 2);
}

/**
 * =============================================================
 * ## Collection
 * =============================================================
 */
@media screen and (min-width: 1025px) {
  .page-header--collection .page-header__text-wrapper {
    margin: 48px auto;
  }
}

.page-header--collection .deck-text {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
}

.collection__size-picker {
  margin-bottom: 32px;
  min-height: 46px;
}
.collection__size-picker .ks-calculator-container.ks-calculator-inject {
  text-align: center !important;
}
.collection__size-picker .btn.ks-calculator-modal-button, .collection__size-picker span.ks-calculator-modal-link {
  margin-bottom: 0 !important;
}

.collection__size-picker .ks-calculator-container.sizing-calculator-container.ks-calculator-inject {
  display: none !important;
}

.collection__size-picker {
  text-align: center;
  background: rgb(var(--color-secondary-bg));
  padding: 24px;
}

.collection__size-picker-content {
  margin-top: 16px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .collection__size-picker-content {
    flex-wrap: wrap;
  }
}

.collection__size-picker-content > div {
  margin: 0 12px 12px 0;
}

.collection__size-picker .ks-chart-container.ks-container-with-modal {
  --button-background: var(--color-button-primary-bg);
  --button-text-color: var(--color-button-primary-text);
  padding: 6px 12px !important;
  border-radius: var(--button-border-radius) !important;
  background: rgb(var(--button-background)) !important;
  color: rgb(var(--button-text-color)) !important;
  font-family: var(--font-family-body) !important;
  font-size: 11px !important;
  line-height: var(--button-line-height) !important;
  font-weight: var(--font-weight-body-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

.collection__size-picker .ks-chart-container.ks-container-with-modal:hover {
  background: rgba(var(--button-background), 0.85) !important;
}

.collection__size-picker .btn.ks-chart-modal-button > span,
.collection__size-picker span.ks-chart-modal-link {
  --button-background: var(--color-button-primary-bg);
  --button-text-color: var(--color-button-primary-text);
  color: rgb(var(--button-text-color)) !important;
  font-family: var(--font-family-body) !important;
  font-size: 11px !important;
  line-height: var(--button-line-height) !important;
  font-weight: var(--font-weight-body-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

.collection__size-picker .btn.ks-chart-modal-button > span svg,
.collection__size-picker .btn.ks-chart-modal-button > span svg path,
.collection__size-picker span.ks-chart-modal-link svg,
.collection__size-picker span.ks-chart-modal-link svg path {
  --button-background: var(--color-button-primary-bg);
  --button-text-color: var(--color-button-primary-text);
  fill: rgb(var(--button-text-color)) !important;
}

.collection__size-picker .ks-calculator-modal-button:hover,
.collection__size-picker .ks-calculator-modal-link:hover,
.collection__size-picker .ks-chart-modal-button:hover,
.collection__size-picker span.ks-chart-modal-link:hover {
  opacity: 1;
}

/**
 * =============================================================
 * ## Product
 * =============================================================
 */
/* ### Main Layout
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .product__content {
    --product-grid-gap: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.product__media {
  display: block;
}
@media screen and (min-width: 1025px) {
  .product__media {
    --product-media-width: calc(var(--grid-column-width) * 12 + var(--grid-gap) * 12);
    width: var(--product-media-width);
    position: sticky;
    top: var(--header-height);
  }
}

.product__info {
  display: block;
}
@media screen and (max-width: 1024px) {
  .product__info {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .product__info {
    --product-info-width: calc(var(--grid-column-width) * 10 + var(--grid-gap) * 10);
    width: var(--product-info-width);
    align-self: stretch;
  }
}

@media screen and (min-width: 1025px) {
  .product__info-inner {
    position: -webkit-sticky;
    position: sticky;
    display: block;
    top: 0;
  }
}

@media screen and (min-width: 1280px) {
  .product__content--thumbnails-left .product__media {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
  }
}

/* ### Product Media
 * ========================================================== */
.product-carousel {
  display: block;
}

.product__media-list-wrapper {
  width: 100%;
}

.product__media-list {
  width: 100%;
  position: relative;
  scrollbar-width: none;
  /* Hide scrollbars on Firefox */
  -ms-overflow-style: none;
  /* Hide scrollbars on IE & Edge */
}
@media screen and (max-width: 1024px) {
  .product__media-list {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
}

/**
 * Hide scrollbars on Webkit
 */
.product__media-list::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion) {
  .product__media-list {
    scroll-behavior: auto;
  }
}
.product__media-item {
  width: 100%;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .product__media-item {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

.product__media-item .video-wrapper,
.product__media-item .model-wrapper {
  width: 100%;
}

@media screen and (min-width: 1025px) {
  .product__content--desktop-media-layout-carousel_thumbnails_left .product__media-item:not(.is-selected),
  .product__content--desktop-media-layout-carousel_thumbnails_bottom .product__media-item:not(.is-selected) {
    display: none;
  }
}

.product__content--desktop-media-layout-grid_highlight .product__media-item {
  display: block;
}

@media screen and (min-width: 1025px) {
  .product__content--desktop-media-layout-grid_highlight .product__media {
    position: static;
    top: auto;
  }

  .product__content--desktop-media-layout-grid_highlight .product__media-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .product__content--desktop-media-layout-grid_highlight .product__media-item {
    order: 0;
  }

  .product__content--desktop-media-layout-grid_highlight .product__media-item.is-selected {
    order: -1;
    grid-column: 1 / -1;
  }

  .product__content--desktop-media-layout-grid_highlight .product__media-nav {
    display: none;
  }
}

.modal--product-zoom .product__media-item:not(.is-selected) {
  display: none;
}

.product__media-image-wrapper {
  overflow: hidden;
  background: rgb(var(--color-secondary-bg));
  /* Act as a placeholder until image is loaded */
  width: 100%;
}

/* ### Product Thumbnails
 * ========================================================== */
.product__media-nav {
  --color-dots: var(--color-text);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

@media screen and (min-width: 1280px) {
  .product__content--thumbnails-left .product__media-nav {
    margin-top: 0;
    align-items: flex-start;
  }
}

.product__thumbnail-scroll-shadow {
  max-width: 100%;
}
@media screen and (min-width: 1280px) {
  .product__thumbnail-scroll-shadow {
    --scroll-shadow-size: 65px;
    --scroll-shadow-right: linear-gradient(to left, rgb(var(--color-bg)), rgba(var(--color-bg), 0));
    --scroll-shadow-left: linear-gradient(to right, rgb(var(--color-bg)), rgba(var(--color-bg), 0));
    --scroll-shadow-bottom: linear-gradient(to top, rgb(var(--color-bg)), rgba(var(--color-bg), 0));
    --scroll-shadow-top: linear-gradient(to bottom, rgb(var(--color-bg)), rgba(var(--color-bg), 0));
  }
}

.product__thumbnail-list {
  position: relative;
}
.product__thumbnail-list.hide-scrollbar {
  overflow-y: auto;
}

@media screen and (min-width: 1280px) {
  .product__content--thumbnails-left .product__thumbnail-list {
    margin-right: 32px;
    max-height: calc((var(--product-media-width) - 136px) / var(--largest-image-aspect-ratio));
  }
}

.product__thumbnail-list-inner {
  display: grid;
  grid-auto-flow: column;
  align-items: start;
}
@media screen and (min-width: 1280px) {
  .product__thumbnail-list-inner {
    grid-gap: 8px;
    gap: 8px;
  }
}

@media screen and (min-width: 1280px) {
  .product__content--thumbnails-left .product__thumbnail-list-inner {
    grid-auto-flow: row;
  }
}

.product__thumbnail-item {
  position: relative;
  display: inline-block;
  padding: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.product__thumbnail {
  position: relative;
  width: 64px;
  min-width: 64px;
  padding: 2px;
}

@media screen and (min-width: 1280px) {
  .product__content--thumbnails-left .product__thumbnail {
    width: 60px;
    min-width: 60px;
  }
}

.product__thumbnail .placeholder-background {
  display: block;
}

.product__thumbnail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 2px rgb(var(--color-text));
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product__thumbnail-item[aria-current] .product__thumbnail::after {
  opacity: 1;
  transform: scale(1);
}

.product__thumbnail-badge {
  position: absolute;
  top: 4px;
  right: 4px;
}

/* ### Product AR View in Space
 * ========================================================== */
.product__view-in-space {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.product__view-in-space svg {
  margin-right: 12px;
}

.product__view-in-space[data-shopify-xr-hidden] {
  visibility: hidden;
}

/* ### Product Zoom
 * ========================================================== */
.product__zoom-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  right: 16px;
  bottom: 16px;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out, transform 0.25s ease-in-out, color 0.25s ease-in-out;
  z-index: 1;
}

.product__zoom-button[hidden] {
  opacity: 0;
  transform: scale(0.4);
  visibility: hidden;
}

/* ### Prev Next Buttons
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .product__content--thumbnails-left .product__media-prev-next {
    transform: rotate(90deg);
  }
}

/* ### Product Meta
 * ========================================================== */
.product-meta {
  display: block;
}

.product-meta__header {
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(var(--color-border));
}

.product-meta__price-list-container {
  margin-top: 8px;
}

.price--compare {
  text-decoration: line-through;
  margin-left: 4px;
}

.product-meta__header .trustpilot-widget {
  margin-top: 8px;
  min-height: 24px;
}

/* ### Product Form
 * ========================================================== */
.product-form {
  display: grid;
  grid-row-gap: 16px;
  row-gap: 16px;
  margin-top: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media screen and (min-width: 1025px) {
  .product-form {
    grid-row-gap: 24px;
    row-gap: 24px;
    margin-top: 24px;
  }
}

/* ### Product Color Swatches
 * ========================================================== */
/* ### Product Cross Sell
 * ========================================================== */
.product-form__cross-sell {
  background: rgb(var(--color-secondary-bg));
  padding: 16px 20px;
}

/* ### Product Personalisation
 * ========================================================== */
.product-form__personalisation {
  background: rgb(var(--color-secondary-bg));
  padding: 16px 20px;
}

.pp__checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid rgb(var(--color-text));
  background: transparent;
}

.pp__checkbox-label {
  position: relative;
  top: -6px;
}

.pp__copy {
  margin-top: 8px;
  font-style: italic;
}

.pp__details {
  display: none;
  margin-top: 16px;
}

.pp__details[open] {
  display: block;
}

.pp__form-characters {
  margin-top: 8px;
  font-style: italic;
}

/* ### Product Form Variants
 * ========================================================== */
.product-form__variants {
  display: block;
}

.product-form__option-info,
.product-form__quantity-label {
  display: flex;
  margin-bottom: 4px;
}

.product-form__option-info {
  justify-content: space-between;
}

.product-form__option-size-guide .btn.ks-chart-modal-button > span,
.product-form__option-size-guide span.ks-chart-modal-link {
  font-family: var(--font-family-body) !important;
  font-weight: var(--font-weight-body-bold) !important;
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
  line-height: var(--base-line-height) !important;
  margin: 0 !important;
}

.product-form__option-size-guide .ks-chart-modal-link.with-icon .kiwi-svg {
  top: 0px !important;
}

.product-form__option-value {
  margin-left: 8px;
}

.product-form__option-link {
  margin-left: auto;
}

.no-js .product-form__option-selector {
  display: none;
}

.product-form__option-selector + .product-form__option-selector {
  margin-top: 16px;
}

/* ### Product Form Payment
 * ========================================================== */
.product-form__payment-container {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

/* ### Product Form Description
 * ========================================================== */
.product-form__description {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* ### Color Swatch
 * ========================================================== */
.color-swatch-list {
  display: grid;
  justify-content: flex-start;
  grid-template-columns: repeat(auto-fit, 40px);
  grid-gap: 8px;
  gap: 8px;
}

.color-swatch__item {
  position: relative;
  display: block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 3px solid rgb(var(--color-bg));
  border-radius: var(--swatch-color-border-radius);
  background-size: cover;
  background-position: center;
  -webkit-tap-highlight-color: transparent;
}

.color-swatch__item::before,
.color-swatch__item::after {
  position: absolute;
  content: "";
  border: 2px solid rgb(var(--color-bg));
  pointer-events: none;
  border-radius: inherit;
}

.color-swatch__item::before {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

.color-swatch__item::after {
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-color: rgb(var(--color-text));
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.color-swatch--white .color-swatch__item::before {
  box-shadow: 0 0 0 1px rgba(var(--color-text), 0.3) inset;
}

.color-swatch__radio:checked + .color-swatch__item::after,
.color-swatch--active .color-swatch__item::after {
  opacity: 1;
  transform: scale(1);
}

/* Disabled state */
.color-swatch.is-disabled .color-swatch__item::before {
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--color-bg)) calc(50% - 1px), rgb(var(--color-bg)) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat;
}

/**
 * --------------------------------------------------------------------
 * BLOCK SWATCH
 * --------------------------------------------------------------------
 */
.block-swatch-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -4px;
}

.block-swatch__item {
  display: block;
  position: relative;
  min-width: 56px;
  padding: 11px 18px 13px 18px;
  margin: 4px;
  border: 1px solid rgb(var(--color-border));
  border-radius: var(--swatch-block-border-radius);
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.block-swatch__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgb(var(--color-text)) inset, 0 0 0 1px rgb(var(--color-text));
  border-radius: var(--swatch-block-border-radius);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.block-swatch-list--small .block-swatch__item {
  min-width: 44px;
  padding: 4px 12px;
  margin: 4px;
}

.block-swatch__radio:checked + .block-swatch__item::after {
  opacity: 1;
  transform: scale(1);
}

/* Disabled state */
.block-swatch.is-disabled .block-swatch__item {
  color: rgba(var(--color-text), 0.5);
  background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--color-border)) 50%, transparent calc(50% + 1px)) no-repeat;
}

/**
 * --------------------------------------------------------------------
 * ACCESSIBILITY
 * --------------------------------------------------------------------
 */
.color-swatch__radio.focus-visible + label,
.block-swatch__radio.focus-visible + label {
  outline: auto 5px -webkit-focus-ring-color;
}

.color-swatch__radio:focus-visible + label,
.block-swatch__radio:focus-visible + label {
  outline: auto 5px -webkit-focus-ring-color;
}

/* ### Product Tabs
 * ========================================================== */
.product-tabs-content .tabs-nav__item-list {
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .product-tabs__item {
    display: block;
    border-top: 1px solid rgb(var(--color-border));
  }
}

@media screen and (max-width: 1024px) {
  .product-tabs__item:last-child {
    border-bottom: 1px solid rgb(var(--color-border));
  }
}

.product-tabs__item:not([hidden]) {
  display: block;
}

@media screen and (min-width: 1025px) {
  .product-tabs__item .collapsible {
    height: auto;
    overflow: auto;
    visibility: visible;
  }
}

@media screen and (max-width: 1024px) {
  .product-tabs__tab-content {
    padding-bottom: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .product-tabs__tab-content {
    margin: 0 auto;
    max-width: 800px;
  }
}

@media screen and (min-width: 1025px) {
  .product-tabs__tab-content--columns {
    max-width: initial;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px;
  }
}

@media screen and (max-width: 1024px) {
  .product-tabs__tab-content-column + .product-tabs__tab-content-column {
    margin-top: 40px;
  }
}

.product-tabs__tab-content-usp-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.product-tabs__usp-icon-content-wrapper {
  margin-bottom: 20px;
  padding: 0 12px;
  width: 33%;
  text-align: center;
}
@media screen and (min-width: 1280px) {
  .product-tabs__usp-icon-content-wrapper {
    width: 25%;
  }
}

.product-tabs__usp-icon-wrapper svg {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .product-tabs__usp-icon-wrapper svg {
    width: 60px;
    height: 60px;
  }
}

.product-tabs__usp-icon-image {
  width: 48px;
  height: auto;
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .product-tabs__usp-icon-image {
    width: 60px;
  }
}

.product-tabs__usp-icon-title {
  margin-top: 4px;
}

.product-tabs__tab-content-column-item + .product-tabs__tab-content-column-item {
  margin-top: 40px;
}

.product-tabs__tab-content-heading {
  font-size: 20px;
}

.product-tabs__tab-content-heading + .product-tabs__tab-content-image-wrapper,
.product-tabs__tab-content-heading + .product-tabs__tab-content-image-wrapper--small,
.product-tabs__tab-content-heading + .product-tabs__tab-content-text,
.product-tabs__tab-content-heading + .product-tabs__tab-content-video-wrapper,
.product-tabs__tab-content-heading + .product-tabs__tab-content-import {
  margin-top: 16px;
}

.product-tabs__tab-content-image-wrapper + .product-tabs__tab-content-text,
.product-tabs__tab-content-video-wrapper + .product-tabs__tab-content-text {
  margin-top: 16px;
}

.product-tabs__tab-content-text + .product-tabs__tab-content-image-wrapper--small {
  margin-top: 16px;
}

.product-tabs__tab-content-image-wrapper--small {
  max-width: 200px;
}

.product-tabs__tab-content-import h2 {
  font-size: 20px;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

.product-tabs__tab-content-import h2 + p {
  margin-top: 16px;
}

.product-tabs__tab-content-import h3 {
  font-size: var(--base-font-size);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

.product-tabs__tab-content-import h3 + p {
  margin-top: 8px;
}

.product-reviews__container .trustpilot-widget {
  min-height: 700px;
}

@media screen and (max-width: 767px) {
  #trustpilot-widget-trustbox-3-wrapper {
    padding: 0 var(--container-gutter);
  }
}

.product-form__custom-button .button {
  cursor: default;
}

.product-form__upsell .rte {
  margin-top: 12px;
}


/**
 * Product calculator
 */
 .product-calculator {
  background: rgb(var(--color-secondary-bg));
  padding: 16px 20px;
}

.product-calculator .input__field + p {
  margin-top: 4px;
}

.product-calculator__inputs {
  margin-top: 16px;
}

.product-calculator__price-container {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Chrome, Safari, Edge, Opera */
.product-calculator input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.product-calculator input[type=number] {
  -moz-appearance: textfield;
}

/**
 * =============================================================
 * ## Cart
 * =============================================================
 */
@media screen and (min-width: 1025px) {
  .cart {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-gap: 40px;
    gap: 40px;
  }
}
@media screen and (min-width: 1280px) {
  .cart {
    grid-template-columns: 1fr 390px;
    gap: 70px;
  }
}

.cart__delivery-options {
  background: rgb(var(--color-secondary-bg));
  padding: 32px;
  margin: 20px 0;
  font-size: 14px;
}
@media screen and (min-width: 1025px) {
  .cart__delivery-options {
    margin-bottom: 40px;
  }
}

.cart__delivery-content {
  margin-top: 16px;
}

.cart__delivery-content ul {
  list-style-position: inside;
}

/* ### Cart Aside
 * ========================================================== */
@media screen and (max-width: 1024px) {
  .cart__aside {
    margin-top: 24px;
  }
}

@media screen and (min-width: 1025px) {
  .cart__aside-inner {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: calc(0px * var(--enable-sticky-header) + 0px * var(--enable-sticky-announcement-bar) + 24px);
    top: calc(var(--header-height, 0px) * var(--enable-sticky-header) + var(--announcement-bar-height, 0px) * var(--enable-sticky-announcement-bar) + 24px);
  }
}

.cart__recap {
  padding: var(--container-gutter);
  background: rgb(var(--color-secondary-bg));
}

.cart__recap-block {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 10px;
}

.cart__recap-block > * {
  margin-top: 0;
  margin-bottom: 0;
}

.cart__recap-note {
  margin-bottom: 24px;
}

.cart__recap-note--hidden {
  display: none;
}

.cart__total-container,
.cart__discount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cart__discount-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.cart__discount-badge {
  align-self: stretch;
}

.cart__order-note {
  padding-top: 14px;
}

.cart__checkout-button:not(:only-child) {
  margin-top: 24px;
}

.cart__payment-methods {
  margin-top: 24px;
  text-align: center;
}

.cart__payment-methods-label {
  display: block;
  margin-bottom: 16px;
}

/**
 * =============================================================
 * ## Mini Cart
 * =============================================================
 */
/* Mini-cart specificities */
.mini-cart__discount-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 8px;
}

.mini-cart__discount {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (min-width: 768px) {
  .mini-cart__discount {
    justify-content: flex-end;
  }
}

.mini-cart__discount-badge {
  margin-right: 14px;
}

.mini-cart__actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
@media screen and (max-width: 767px) {
  .mini-cart__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (min-width: 768px) {
  .mini-cart__actions {
    margin-bottom: 26px;
  }
}

@media screen and (max-width: 767px) {
  .mini-cart__actions > :first-child:not(:only-child) {
    margin-bottom: 7px;
  }
}

@media screen and (min-width: 768px) {
  .mini-cart__drawer-footer {
    padding-bottom: var(--container-gutter);
  }
}

/**
 * =============================================================
 * ## Blog
 * =============================================================
 */
/**
 * =============================================================
 * ## Article
 * =============================================================
 */
/* ### Article Header
 * ========================================================== */
@media screen and (min-width: 1025px) {
  .article__header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
}

.article__header-text-wrapper {
  padding: 40px var(--container-gutter);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1024px) {
  .article__header-text-wrapper {
    text-align: center;
  }
}
@media screen and (min-width: 1025px) {
  .article__header-text-wrapper {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
@media screen and (min-width: 1280px) {
  .article__header-text-wrapper {
    padding-left: calc(var(--container-outer-margin) + var(--grid-column-width) + var(--grid-gap));
    padding-right: 70px;
  }
}

@media screen and (min-width: 1025px) {
  .article__header-text-wrapper:only-child {
    padding-left: 0;
    padding-right: 0;
    max-width: 680px;
    text-align: center;
  }
}

.article__meta {
  margin-top: 12px;
}

.article__author + .article__date {
  margin-left: 8px;
}
.article__author + .article__date::before {
  content: "•";
  font-size: 10px;
  margin-right: 8px;
}

.article__comments-count {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article__comments-count svg {
  position: relative;
  top: 1px;
  /* Micro alignment required by designer */
  margin-right: 8px;
}

.article__image-wrapper {
  overflow: hidden;
}
@media screen and (min-width: 1025px) {
  .article__image-wrapper {
    flex: none;
    align-self: stretch;
  }
}

@media screen and (min-width: 1025px) {
  .article__image-wrapper--tall {
    width: 37.5%;
  }
}

@media screen and (min-width: 1025px) {
  .article__image-wrapper--square {
    width: 50%;
  }
}

@media screen and (min-width: 1025px) {
  .article__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media screen and (min-width: 1025px) {
  .article__image-wrapper--tall + .article__header-text-wrapper {
    padding-right: 100px;
  }
}
@media screen and (min-width: 1280px) {
  .article__image-wrapper--tall + .article__header-text-wrapper {
    padding-right: 160px;
  }
}

/* ### Article Content
 * ========================================================== */
.article {
  margin: 40px 0;
}
@media screen and (min-width: 1025px) {
  .article {
    margin: 60px 0;
  }
}

.article__content {
  max-width: calc(640px + var(--container-gutter) * 2);
  margin: 0 auto;
}

/* ### Article Footer
 * ========================================================== */
.article__footer {
  max-width: calc(640px + var(--container-gutter) * 2);
  margin: 40px auto;
}

.article__share {
  border-top: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
  padding-top: 20px;
  padding-bottom: 20px;
}

.article__share-button-list {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  grid-gap: 26px;
  gap: 26px;
  list-style: none;
  padding: 0;
}

/* ### Article Comments
 * ========================================================== */
.article__comments {
  max-width: calc(640px + var(--container-gutter) * 2);
  margin: 40px auto 80px;
}

.article__comment-list-heading {
  margin-bottom: 30px;
}

.article-comment {
  padding: 24px;
  background: rgb(var(--color-secondary-bg));
}

.article-comment + .article-comment {
  margin-top: 16px;
}

.article-comment__meta {
  display: flex;
  align-items: center;
}

.article-comment__gravatar {
  border-radius: 100%;
  width: 40px;
  margin-right: 16px;
}

.article-comment__author {
  margin-bottom: 0;
}

.article-comment__date {
  display: block;
  margin-top: 2px;
  margin-bottom: 4px;
}

.article-comment__content {
  margin-top: 15px;
}

.article__comment-list + .article__comment-form {
  margin-top: 48px;
}

.article__comment-form-title {
  margin-top: 0;
}

/**
 * =============================================================
 * ## Account
 * =============================================================
 */
/* ### Account header
 * ========================================================== */
/* General. The back button has a very specific positioning that is used only here so it has special style */
.account__block-list {
  display: grid;
  grid-row-gap: 24px;
  row-gap: 24px;
}
@media screen and (min-width: 768px) {
  .account__block-list {
    row-gap: 32px;
  }
}

.account__block-item:empty {
  display: none;
}

.account__back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .account__back-button {
    position: absolute;
    left: var(--container-outer-width);
    margin-top: 48px;
  }
}

.account__back-button svg {
  margin-right: 14px;
}

/* ### Account Main
 * ========================================================== */
.account__order-list-item + .account__order-list-item {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgb(var(--color-border));
}

.account__order-item-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px 64px;
  gap: 24px 64px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.account__order-item-block .heading {
  margin-bottom: 8px;
}

/* ### Order details
 * ========================================================== */
.account__order-date {
  display: block;
}

/* ### Addresses
 * ========================================================== */
.account__order-addresses .account__addresses-list {
  margin-top: 16px;
}
@media screen and (min-width: 768px) {
  .account__order-addresses .account__addresses-list {
    margin-top: 24px;
  }
}

.account__addresses-list {
  display: grid;
  border: 1px solid rgb(var(--color-border));
}
@media screen and (min-width: 768px) {
  .account__addresses-list {
    border: none;
    grid-template-columns: repeat(auto-fit, 50%);
    justify-content: center;
  }
}

@media screen and (min-width: 1025px) {
  .account__addresses-list:not(.account__addresses-list--wide) {
    grid-template-columns: repeat(auto-fit, 33.33333%);
  }
}

.account__address {
  display: flex;
  flex-direction: column;
  padding: 24px;
  min-height: 200px;
}
@media screen and (min-width: 768px) {
  .account__address {
    border-top: 1px solid rgb(var(--color-border));
    border-bottom: 1px solid rgb(var(--color-border));
    border-right: 1px solid rgb(var(--color-border));
  }
}

.account__address--auto {
  min-height: 0 !important;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .account__address:nth-child(2n) ~ .account__address {
    border-top: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .account__address:nth-child(2n+1) {
    border-left: 1px solid rgb(var(--color-border));
  }
}

@media screen and (min-width: 1025px) {
  .account__address:nth-child(3n) ~ .account__address {
    border-top: none;
  }
}

@media screen and (min-width: 1025px) {
  .account__address:nth-child(3n+1) {
    border-left: 1px solid rgb(var(--color-border));
  }
}

.account__address:not(:first-child) {
  border-top: 1px solid rgb(var(--color-border));
}

.account__address--empty {
  justify-content: center;
  align-items: center;
  background: rgb(var(--color-secondary-bg));
}

.account__address--empty svg {
  margin-bottom: 16px;
}

.account__address-details {
  margin-top: 10px;
}

.account__address-actions {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  grid-gap: 20px;
  gap: 20px;
  margin-top: auto;
  padding-top: 10px;
}

.main-search__form {
  --form-input-field-height: 60px;
  position: relative;
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
}

.main-search__input {
  padding-right: 55px;
}

.main-search__submit {
  position: absolute;
  top: calc(50% - 10px);
  right: 20px;
}

.main-search__empty-text {
  margin-top: 40px;
}

.main-search__results {
  display: block;
}

.main-search__form + .tabs-nav {
  margin-top: 38px;
}

@media screen and (min-width: 768px) {
  .main-search__form {
    --form-input-field-height: 80px;
  }

  .main-search__submit {
    right: 32px;
  }

  .main-search__input {
    padding-left: 30px;
    padding-right: 80px;
  }

  .main-search__form + .tabs-nav {
    margin-top: 68px;
  }
}
.predictive-search__form {
  display: flex;
  align-items: center;
}

.predictive-search__input {
  padding: 0;
  margin-left: 8px;
  min-width: 300px;
  background: transparent;
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

.predictive-search__input::placeholder {
  color: rgba(var(--color-text), 0.7);
  transition: color 0.2s ease-in-out;
}

.header__search-bar .predictive-search__input::placeholder {
  color: rgba(var(--color-text), 0.8);
}

.predictive-search .tabs-nav,
.predictive-search__menu-list {
  padding-top: 24px;
}

.predictive-search__menu + .predictive-search__menu {
  padding-top: 40px;
}

.predictive-search__menu-title {
  margin-bottom: 16px;
}

/* Product */
.predictive-search__product-item:first-child .line-item__content-wrapper {
  margin-top: 0;
}

.predictive-search__product-item {
  position: relative;
}

.predictive-search__product-item svg {
  position: absolute;
  top: calc(50% - 7px);
  right: 0;
  opacity: 0;
  transform: translateX(min(var(--container-gutter), 30px));
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

@media screen and (pointer: fine) {
  .predictive-search__product-item:hover svg {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Linklist */
.predictive-search__linklist {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.predictive-search__linklist--narrow {
  max-width: 390px;
}

.predictive-search__linklist--bordered {
  border-top: 1px solid rgb(var(--color-border));
  border-bottom: 1px solid rgb(var(--color-border));
}

.predictive-search__linklist-item {
  border-top: 1px solid rgb(var(--color-border));
}

.predictive-search__linklist-item:first-child {
  border-top: none;
}

.predictive-search__linklist-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;
}

.predictive-search__linklist-link svg {
  opacity: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform: translateX(min(var(--container-gutter), 30px));
}

@media screen and (pointer: fine) {
  .predictive-search__linklist-link:hover svg {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Blog post */
.predictive-search__article-item + .predictive-search__article-item {
  margin-top: 24px;
}

.predictive-search__article-image-wrapper {
  margin-right: 18px;
}

.predictive-search__article-image-wrapper {
  position: relative;
  display: block;
  flex: none;
  width: 100px;
}

.predictive-search__article-category {
  margin-bottom: 8px;
}

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 767px) {
    /* On iOS, when the keyboard is visible it does not contribute to the size of the viewport, so do not center on iOS */
    .predictive-search .drawer__content--center {
      margin-top: 150px;
    }
  }
}
@media screen and (min-width: 768px) {
  .predictive-search__input {
    margin-left: 12px;
  }

  .predictive-search .tabs-nav,
.predictive-search__menu-list {
    padding-top: 32px;
  }

  .predictive-search__article-image-wrapper {
    width: 140px;
  }
}
/**
 * =============================================================
 * ## Gift Card
 * =============================================================
 */
.gift-card {
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  /* Make sure it prints using the same background */
  background: rgb(var(--color-bg));
  min-height: 100vh;
  min-height: var(--window-height, 100vh);
  text-align: center;
  padding: 60px 0;
}

.gift-card__wrapper {
  max-width: 530px;
  margin-left: auto;
  margin-right: auto;
}

.gift-card__logo {
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .gift-card__logo {
    margin-bottom: 56px;
  }
}

.gift-card__logo-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gift-card__image-wrapper {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -65px;
}
@media screen and (min-width: 768px) {
  .gift-card__image-wrapper {
    margin-bottom: -95px;
    max-width: 360px;
  }
}

.gift-card__image {
  border-radius: 18px;
}

.gift-card__card {
  padding: 32px;
  background: rgb(var(--color-section-card-bg));
  color: rgb(var(--color-text));
}
@media screen and (min-width: 768px) {
  .gift-card__card {
    padding: 40px;
  }
}

.gift-card__card + .gift-card__card {
  margin-top: 16px;
}

.gift-card__main {
  padding-top: 97px;
  /* 65px is the offset of the image */
}
@media screen and (min-width: 768px) {
  .gift-card__main {
    padding-top: 135px;
    /* 95px is the offset of the image */
  }
}

.gift-card__code-container {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .gift-card__code-container {
    grid-template-columns: 1fr auto;
    gap: 16px;
  }
}

.gift-card__code {
  -webkit-appearance: none;
  appearance: none;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0;
  background: transparent;
}

.gift-card__expires-on {
  margin-top: 16px;
}

.gift-card__aside {
  display: grid;
  grid-gap: 24px;
  gap: 24px;
}
@media screen and (min-width: 768px) {
  .gift-card__aside {
    grid-auto-flow: column;
    gap: 32px;
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .gift-card__aside .heading {
    text-align: left;
  }
}

.gift-card__qr {
  display: block;
}

.gift-card__qr img,
.gift-card__wallet {
  margin-left: auto;
  margin-right: auto;
  width: 132px;
}

@media screen and (min-width: 768px) {
  .gift-card__qr img {
    width: 68px;
  }
}

@media screen and (min-width: 768px) {
  .gift-card__wallet {
    width: 145px;
  }
}

.gift-card__button-wrapper {
  margin-top: 24px;
}
@media screen and (min-width: 768px) {
  .gift-card__button-wrapper {
    margin-top: 40px;
  }
}

/**
 * =============================================================
 * ## Password
 * =============================================================
 */
.password {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-text));
}
@media screen and (min-width: 1025px) {
  .password {
    display: grid;
    grid-auto-columns: 50%;
    grid-auto-flow: column;
    justify-content: center;
  }
}

.password__logo {
  margin-bottom: 0;
}

.password__logo-image {
  display: block;
}

.password__main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
  z-index: 1;
}

@supports (--css: variables) {
  .password__main {
    min-height: 100vh;
    min-height: var(--window-height, 100vh);
  }
}
.password__content {
  max-width: 390px;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
}

.password__message {
  margin-top: 12px;
}

/* ### Password Newsletter
 * ========================================================== */
.password__newsletter {
  margin-top: 24px;
}
@media screen and (min-width: 768px) {
  .password__newsletter {
    margin-top: 32px;
  }
}

@media screen and (max-width: 1024px) {
  .password__newsletter-form .input__label {
    background: transparent;
  }
}

@media screen and (max-width: 1024px) {
  .password__newsletter-form [focus-within] ~ .input__label,
.password__newsletter-form .is-filled ~ .input__label {
    background: rgb(var(--color-bg));
  }
}

@media screen and (max-width: 1024px) {
  .password__newsletter-form :focus-within ~ .input__label,
.password__newsletter-form .is-filled ~ .input__label {
    background: rgb(var(--color-bg));
  }
}

/* ### Password Storefront Login
 * ========================================================== */
.password__storefront-login {
  display: block;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .password__storefront-login {
    margin-top: 28px;
  }
}

.password__storefront-login svg {
  vertical-align: sub;
  margin-right: 12px;
}

.password__storefront-form {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1024px) {
  .password__storefront-form {
    position: relative;
    padding: 62px 48px 48px 48px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    background: inherit;
    border-radius: 10px 10px 0 0;
  }
}

/* ### Password Footer
 * ========================================================== */
@media screen and (max-width: 1024px) {
  .password__admin-link {
    padding-top: 8px;
  }
}
@media screen and (min-width: 768px) {
  .password__admin-link {
    padding-left: 18px;
  }
}

.password__copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .password__copyright {
    flex-direction: row;
  }
}

.password__powered-by {
  display: flex;
  align-items: center;
}

/* ### Password Image
 * ========================================================== */
@media screen and (max-width: 1024px) {
  .password__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    opacity: 0.1;
    filter: grayscale(1);
  }
}
@media screen and (min-width: 1025px) {
  .password__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    max-height: 100vh;
    height: 100%;
  }
}

/**
 * =============================================================
 * =============================================================
 *
 * # Utilities
 * Utility and helper classes
 * =============================================================
 * =============================================================
 */
/**
 * =============================================================
 * ## Breakpoint Utilities
 * =============================================================
 */
/* ### Breakpoint display helpers
 * ========================================================== */
.show {
  display: block !important;
}

.hide {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .small--show {
    display: block !important;
  }

  .small--hide {
    display: none !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .medium--show {
    display: block !important;
  }

  .medium--hide {
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .medium-up--show {
    display: block !important;
  }

  .medium-up--hide {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .medium-down--show {
    display: block !important;
  }

  .medium-down--hide {
    display: none !important;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
  .large--show {
    display: block !important;
  }

  .large--hide {
    display: none !important;
  }
}
@media screen and (min-width: 1025px) {
  .large-up--show {
    display: block !important;
  }

  .large-up--hide {
    display: none !important;
  }
}
@media screen and (max-width: 1279px) {
  .large-down--show {
    display: block !important;
  }

  .large-down--hide {
    display: none !important;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .desk--show {
    display: block !important;
  }

  .desk--hide {
    display: none !important;
  }
}
@media screen and (min-width: 1280px) {
  .desk-up--show {
    display: block !important;
  }

  .desk-up--hide {
    display: none !important;
  }
}
@media screen and (max-width: 1439px) {
  .desk-down--show {
    display: block !important;
  }

  .desk-down--hide {
    display: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .widescreen--show {
    display: block !important;
  }

  .widescreen--hide {
    display: none !important;
  }
}
@media screen and (pointer: fine) {
  .pointer-device--hide {
    display: none !important;
  }
}
@media not screen and (pointer: fine) {
  .touch-device--hide {
    display: none !important;
  }
}
@media print {
  .print--hide {
    display: none !important;
  }
}
/* ### Breakpoint text display helpers
 * ========================================================== */
.text-left {
  text-align: left !important;
}

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

.text-center {
  text-align: center !important;
}

@media screen and (max-width: 767px) {
  .small--text-left {
    text-align: left !important;
  }

  .small--text-right {
    text-align: right !important;
  }

  .small--text-center {
    text-align: center !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .medium--text-left {
    text-align: left !important;
  }

  .medium--text-right {
    text-align: right !important;
  }

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

  .medium-up--text-right {
    text-align: right !important;
  }

  .medium-up--text-center {
    text-align: center !important;
  }
}
@media screen and (max-width: 1024px) {
  .medium-down--text-left {
    text-align: left !important;
  }

  .medium-down--text-right {
    text-align: right !important;
  }

  .medium-down--text-center {
    text-align: center !important;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
  .large--text-left {
    text-align: left !important;
  }

  .large--text-right {
    text-align: right !important;
  }

  .large--text-center {
    text-align: center !important;
  }
}
@media screen and (min-width: 1025px) {
  .large-up--text-left {
    text-align: left !important;
  }

  .large-up--text-right {
    text-align: right !important;
  }

  .large-up--text-center {
    text-align: center !important;
  }
}
@media screen and (max-width: 1279px) {
  .large-down--text-left {
    text-align: left !important;
  }

  .large-down--text-right {
    text-align: right !important;
  }

  .large-down--text-center {
    text-align: center !important;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .desk--text-left {
    text-align: left !important;
  }

  .desk--text-right {
    text-align: right !important;
  }

  .desk--text-center {
    text-align: center !important;
  }
}
@media screen and (min-width: 1280px) {
  .desk-up--text-left {
    text-align: left !important;
  }

  .desk-up--text-right {
    text-align: right !important;
  }

  .desk-up--text-center {
    text-align: center !important;
  }
}
@media screen and (max-width: 1439px) {
  .desk-down--text-left {
    text-align: left !important;
  }

  .desk-down--text-right {
    text-align: right !important;
  }

  .desk-down--text-center {
    text-align: center !important;
  }
}
@media screen and (min-width: 1440px) {
  .widescreen--text-left {
    text-align: left !important;
  }

  .widescreen--text-right {
    text-align: right !important;
  }

  .widescreen--text-center {
    text-align: center !important;
  }
}
/**
 * =============================================================
 * ## Utility & Helper Classes
 * =============================================================
 */
/* ### Lock Utilities
 * ========================================================== */
.lock-all {
  overflow: hidden;
  touch-action: none;
}

@media screen and (max-width: 767px) {
  .lock-mobile {
    overflow: hidden;
    touch-action: none;
  }
}
/* ### Text utilities
 * ========================================================== */
.text--left {
  text-align: left !important;
}

.text--center {
  text-align: center !important;
}

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

.text--strong {
  font-weight: var(--font-weight-body-bold);
}

.text--left .ks-chart-container.ks-container-with-modal {
  text-align: left !important;
}

.text--center .ks-chart-container.ks-container-with-modal {
  text-align: center !important;
}

.text--right .ks-chart-container.ks-container-with-modal {
  text-align: right !important;
}
/* Old Adobe Fonts Archived
/* Apply Adobe Font to the whole store */
body, p, span, a {
  font-family: "calluna-sans", sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "aria-text-g2", serif !important;
}
*/

}/* Apply Gill Sans Nova globally across the whole store */
:root {
  --font-heading-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif !important;
  --font-body-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif !important;
}

html, body, div, span, p, a, em, img, strong, b, u, i, ol, ul, li, form, label, article, footer, header, nav, section, button, input, select, textarea {
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif !important;
}/* --- Typography Fine-Tuning --- */

/* 1. Main Headings (H1 & H2 usually look great crisp and bold, or elegant and light) */
h1, h2 {
  line-height: 1.2 !important;          /* Keeps multi-line titles tight but readable */
  letter-spacing: 0.01em !important;    /* Slightly pulls letters apart for a modern look */
  font-weight: 600 !important;          /* Change to 300 for a sleek 'light' look, or 700 for bold */
  font-size: 23px !important
}

/* 2a. Main Section Headers (e.g., THE DOG BLOG) */
h3, h4 {
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;          /* Adjust this weight for main section titles */
  font-size: 27px !important
}

/* 2b. Blog Post Card Titles under images (Explicitly Isolated) */
.article-item__heading, 
.article-item__heading a,
h3.article-item__heading {
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  font-weight: 600 !important;          /* Adjust this weight to make the titles under images thinner/thicker */
  font-size: 15px !important
}

/* 3. Body Text, Paragraphs, and Lists */
p, li, span, body {
  line-height: 1.4 !important;          /* Gives body paragraphs room to breathe */
  letter-spacing: 0.01em !important;    /* Clean, legible spacing for reading long text */
  font-weight: 400 !important;          /* Standard regular weight for readability */
  font-size: 15px !important
}

/* 4. Main Navigation Links (Header Menu) */
.header__menu-item, .header__active-menu-item, nav a, .navigation a {
  letter-spacing: 0.06em !important;    /* Elegant tracking for menu items */
  font-weight: 500 !important;          /* Medium/Clean weight */
  text-transform: uppercase !important; /* Forces uppercase for navigation if desired (delete line if not) */
}

/* 5. Buttons (Add to Cart, Checkout, etc.) */
button, .button, .btn, input[type="submit"] {
  letter-spacing: 0.03em !important;    /* Tighter spacing for action buttons */
  font-weight: 700 !important;          /* Strong, clear bold weight */
  text-transform: none !important;      /* Keeps button text exactly how you type it */
  
  /* --- Added Padding --- */
  padding-left: 40px !important;        /* Adds generous breathing room to the left */
  padding-right: 40px !important;       /* Adds generous breathing room to the right */
}

/* --- Footer Custom Typography --- */
/* 1. Universal Footer Header Enforcement (Safe & Isolated) */
.footer-block__heading, 
.footer-block h2, .footer-block h3, .footer-block h4,
.footer h2, .footer h3, .footer h4,
[class*="footer"] h2, [class*="footer"] h3, [class*="footer"] h4,
[class*="footer"] [class*="heading"], [class*="footer"] [class*="title"],
.footer-block__heading *, .footer__blocks-wrapper *,
.footer-block__details-content:first-child,
.footer-block__menu li:first-child,
.footer p strong, .footer strong {
  font-weight: 600 !important;          /* Enforces absolute thickest bold weight */
  letter-spacing: 0.02em !important;    /* Forces visible tracking */
  font-size: 14px !important;
}

/* 2. Footer Menu Links (My Account, Our Story, etc.) */
.footer-block__details-content a, .footer__menu-item a, .footer a {
  font-weight: 400 !important;          /* Clean, legible regular weight for list links */
  letter-spacing: 0.02em !important; 
  line-height: 1.2 !important;          /* Gives the vertical link list nice breathing room */
  font-size: 12px !important;

}

/* --- Crunch the 40px Gap Beneath Footer Titles --- */
p.footer__item-title.heading,
.p.footer__item-title.heading,
[class*="footer__item-title"] {
  margin-bottom: 7px !important; /* Drops the huge 40px margin down to an elegant 10px */
}

/* Force the link container directly under it to drop its top spacing */
.footer__star-links,
[class*="footer_star-list"],
div[class*="links"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. Absolute Universal Newsletter Text Override */
div[id*="newsletter"] *, 
section[id*="newsletter"] *, 
div[class*="newsletter"] *, 
section[class*="newsletter"] *,
.footer__newsletter *,
#shopify-section-footer * {
  font-family: 'gill-sans-nova', 'Gill Sans Nova', sans-serif !important;
}

/* --- Force Section Titles to 22px on Mobile --- */
@media screen and (max-width: 767px) {
  h2.section-heading, 
  .title-wrapper h2,
  .heading:not(.tabs-nav__item),
  [class*="heading"]:not(.tabs-nav__item) h2,
  [class*="title"]:not(footer *, [class*="footer"] *, [class*="product"] *) {
    font-size: 22px !important;
  }

  /* --- FORCE TABS BUTTON NAVIGATION BACK DOWN --- */
  .tabs-nav__item.heading,
  .tabs-nav__item,
  [class*="tabs-nav__item"] {
    font-size: 15px !important; /* Forces the tab selectors back to normal size */
    letter-spacing: 0.05em !important;
  }

  /* --- FORCE FOOTER HEADINGS BACK DOWN --- */
  footer h2,
  footer h3,
  footer h4,
  [class*="footer"] h2,
  [class*="footer"] h3,
  [class*="footer"] [class*="title"],
  .footer-block__heading {
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
  }
}

/* --- Force Klarna Banner and Footer to Lock Together --- */
#shopify-section-footer, 
.shopify-section-footer,
footer {
  margin-top: 0 !important;
  padding-top: 0 !important; 
}

/* Force the text blocks inside the green section to push down away from Klarna */
footer .footer-block__heading,
footer h2,
footer .heading,
footer [class*="title"],
.footer__blocks-wrapper {
  margin-top: 45px !important; /* This pushes the text down, beautifully expanding the green space above them */
}

/* Target Shopify's wrapper for the Klarna App section */
[id*="klarna"], 
[class*="klarna"],
div[id*="Klarna"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Force-pull the footer container up to meet the banner */
.shopify-section-footer {
  position: relative !important;
  top: -2px !important; 
}

/* --- Force Product Names Globally to Lora (Grid + Actual Product Pages) --- */
.product-item-meta__title, 
[class*="product-item-meta__title"],
.product-card__title,
[class*="product-title"],
h1.heading.heading--h3.product-meta__title,
h1.product-meta__title,
.product-meta__title {
  font-family: 'Lora', Georgia, serif !important;
  text-transform: none !important; /* Elegant classic title case layout */
  font-weight: 500 !important;    /* Sleek editorial weight */
}
/* ==========================================================================
   Custom Header & Typography Overrides
   ========================================================================== */

/* --- 1. Site-Wide Hover Effects --- */
a:hover,
.header__menu-item:hover,
.mega-menu__linklist-link:hover,
.footer__list-spaces a:hover,
[class*="klaviyo"] a:hover,
[class*="klaviyo"] button:hover,
[class*="klaviyo"] [class*="btn"]:hover,
[class*="klaviyo"] [class*="button"]:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  cursor: pointer !important;
}

/* Force turn off hover underline and pointer finger on non-clickable column headers */
.mega-menu__title:hover,
a.mega-menu__title:hover {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
  cursor: default !important;
}

/* --- 2. Typography & Fonts --- */
h1.heading,
.heading-h1,
.page-header__text-wrapper h1,
[class*="page-header"] h1,
.header__menu-item,
.header__linklist-link--main,
.mega-menu__title {
  font-family: "gill-sans-nova", "Gill Sans", sans-serif !important;
}

.header__menu-item,
.header__linklist-link--main,
.mega-menu__title {
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.mega-menu__linklist-link {
  font: 500 13px "Lora", Georgia, serif !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
}

/* --- 3. Desktop Mega Menu Layout --- */
.mega-menu__columns {
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
  gap: 30px !important; /* Slightly reduced gap from 40px to give 7 columns perfect breathing room on desktop */
}

/* ==========================================================================
   Responsive Mobile Header Centering
   ========================================================================== */
@media screen and (max-width: 999px) {
  /* 1. Force the wrapper container to behave as a row grid on mobile */
  .header__wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 10px !important;
    min-height: 70px !important;
  }

  /* 2. Tighten up the left icons and smash gaps */
  .header__primary-navigation,
  .header__icon-list {
    display: flex !important;
    width: auto !important;
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header__icon-list .header__icon-wrapper {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    margin: 0 !important;
  }

  /* 3. The Ultimate Mobile Centering Override for the Text Logo */
  #shopify-section-header .header__logo {
    grid-column: 2 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    z-index: 10 !important;
  }

  #shopify-section-header .header__logo a,
  #shopify-section-header .header__logo-link {
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: max-content !important;
  }

  /* 4. Push right-side navigation completely to the edge */
  .header__secondary-navigation {
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
  }
}
/* ==========================================================================
   1. Responsive Mobile Header Centering (Your Original Working Code)
   ========================================================================== */
@media screen and (max-width: 999px) {
  /* 1. Force the wrapper container to behave as a row grid on mobile */
  .header__wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 10px !important;
    min-height: 70px !important;
  }

  /* 2. Tighten up the left icons and smash gaps */
  .header__primary-navigation,
  .header__icon-list {
    display: flex !important;
    width: auto !important;
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header__icon-list .header__icon-wrapper {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    margin: 0 !important;
  }

  /* 3. The Ultimate Mobile Centering Override for the Text Logo */
  #shopify-section-header .header__logo {
    grid-column: 2 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    z-index: 10 !important;
  }

  #shopify-section-header .header__logo a,
  #shopify-section-header .header__logo-link {
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: max-content !important;
  }

  /* 4. Push right-side navigation completely to the edge */
  .header__secondary-navigation {
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   Mobile & Tablet Navigation Typography & Alignment Sync (All Breakpoints)
   ========================================================================== */

/* 1. Target the Mobile/Tablet Drawer Container Layout (Excluding Header Bar) */
[id*="menu"], 
[class*="drawer"]:not([class*="header"]), 
[class*="mobile-menu"], 
.drawer__content,
.sidebar-navigation {
  text-align: left !important;
}

/* Force the close button header container to align left, and snap the X button left */
.drawer__header,
.drawer__header--shadowed {
  display: flex !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
  min-height: 40px !important;
}

/* Align the X button perfectly flush with the 'S' of SHOP */
.drawer__close-button,
.drawer__close-button--block,
button[data-action="close"] {
  position: absolute !important;
  left: 20px !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

/* Top-Level Elements & Level 2 Headers (SHOP, COMPETITIONS, DOG DRYING, DOG BEDS) */
li[data-level="1"] > .mobile-nav__link,
li[data-level="1"] > button,
li[data-level="2"] > .mobile-nav__link,
li[data-level="2"] > button,
.collapsible-toggle,
.drawer__menu-item,
.mobile-nav__link {
  font-family: "gill-sans-nova", "Gill Sans", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-align: left !important;
  display: flex !important;
  justify-content: space-between !important; /* Keeps "+" on the right side */
  align-items: center !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* Deep Nested Links (Level 3: Dog Drying Coats, Crate Mats, etc.) - FORCE LORA */
li[data-level="3"] .mobile-nav__link,
li[data-level="3"] a,
.drawer__sub-menu-item,
.mobile-nav__sub-link {
  font-family: "Lora", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  display: inline-block !important;
  width: auto !important;
  padding-left: 15px !important;
}

/* Force Underline Hovers */
.mobile-nav__link:hover,
.drawer__menu-item:hover,
.collapsible-toggle:hover,
[class*="mobile-menu"] a:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  cursor: pointer !important;
  text-transform: inherit !important; /* Prevents text shifting on hover */
}
/* ==========================================================================
   Desktop Header Alignment - Strict 3-Column Grid Fix & Gap Control
   ========================================================================= */
@media screen and (min-width: 1000px) {
  /* 1. Force the master desktop header into 3 strict, unbreakable columns */
  .header__wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* 2. Anchor the left menu items to Column 1 */
  .header__primary-navigation {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  /* 3. Anchor the logo dead center in Column 2 */
  #shopify-section-header .header__logo {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }

  /* 4. Anchor Currency + Icons to Column 3 and force them into one row */
  .header__secondary-navigation {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important; /* THIS now perfectly controls the space between currency and search */
    width: auto !important;
    margin: 0 !important;
  }

  /* 5. Kill the rogue theme margins pushing the elements apart */
  .header__secondary-navigation form,
  #header-localization-form {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .header__icon-list {
    margin-left: 0 !important; /* Strips the invisible barrier */
    padding-left: 0 !important;
  }
}