/** Shopify CDN: Minification failed

Line 27:2 Unexpected "{"
Line 28:4 Unexpected "{"
Line 29:12 Expected ":"
Line 33:2 Unexpected "{"
Line 34:4 Unexpected "{"
Line 35:12 Expected ":"
Line 39:2 Unexpected "{"
Line 40:2 Expected identifier but found "%"
Line 43:2 Unexpected "{"
Line 44:2 Expected identifier but found "%"
... and 1941 more hidden warnings

**/
/**
 * ----------------------------------------------------------------------------
 * COLORS
 * ----------------------------------------------------------------------------
 */
/* Designer wants a slightly different border... :D */
/**
 * ----------------------------------------------------------------------------
 * TYPOGRAPHY
 * ----------------------------------------------------------------------------
 */
  {
    {
    settings.heading_font | font_face: font_display: 'fallback'
  }
}

  {
    {
    settings.text_font | font_face: font_display: 'fallback'
  }
}

  {
  %- assign text_font_medium=settings.text_font | font_modify: 'weight', '500' -%
}

  {
  %- assign text_font_semibold=settings.text_font | font_modify: 'weight', '600' -%
}

  {
  %- assign text_font_bold=settings.text_font | font_modify: 'weight', 'bolder' -%
}

  {
  %- assign text_font_italic=settings.text_font | font_modify: 'style', 'italic' -%
}

  {
  %- assign text_font_bold_italic=text_font_bold | font_modify: 'style', 'italic' -%
}

  {
  %- if text_font_semibold -%
}

  {
    {
    text_font_semibold | font_face: font_display: 'fallback'
  }
}

  {
  %- elsif text_font_medium -%
}

  {
    {
    text_font_medium | font_face: font_display: 'fallback'
  }
}

  {
  %- endif -%
}

  {
    {
    text_font_bold | font_face: font_display: 'fallback'
  }
}

  {
    {
    text_font_italic | font_face: font_display: 'fallback'
  }
}

  {
    {
    text_font_bold_italic | font_face: font_display: 'fallback'
  }
}

/**
 * ----------------------------------------------------------------------------
 * ANIMATION
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * SPACING
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * OTHER
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------------------------
 * This is a variation of Normalize.css (http://necolas.github.io/normalize.css/)
 * ----------------------------------------------------------------------------------------------
 */
/**
 * Base
 */
*,
*:before,
*:after {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/**
 * HTML5 display definitions
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Text-level semantic
 */
:active {
  outline: none;
}

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

a:active,
a:hover {
  outline: 0;
}

b,
strong {
  font-weight: bold;
}

small {
  font-size: 80%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-size: inherit;
  font-weight: inherit;
}

p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-bottom: 0;
}

/**
 * Embedded content
 */
img {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: top;
}

/**
 * Grouping content
 */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

pre {
  overflow: auto;
}

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

/**
 * Forms
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button,
input[type=submit] {
  padding: 0;
  overflow: visible;
  background: none;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
  -moz-appearance: none;
  border-radius: 0;
}

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

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

input[type=search] {
  -webkit-appearance: none;
  box-sizing: content-box;
}

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

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

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: inherit;
}

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

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

input::placeholder,
textarea::placeholder {
  color: inherit;
}

.is-tabbing input[type=radio]:focus+label {
  /* Helps improving accessibility */
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 6px 10px 12px;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

/**
 * Tables
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.flickity-enabled {
  position: relative;
  overflow: visible !important;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* page dots */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  padding: 0;
  bottom: 0;
  list-style: none;
  text-align: center;
  line-height: 0;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.8);
border-radius: 100%;
cursor: pointer;
-webkit-transform: scale(1);
transform: scale(1);
will-change: transform;
transition: background 0.2s ease-in-out,
-webkit-transform 0.2s ease-in-out;
transition: background 0.2s ease-in-out,
transform 0.2s ease-in-out;
transition: background 0.2s ease-in-out,
transform 0.2s ease-in-out,
-webkit-transform 0.2s ease-in-out;
}

.flickity-page-dots .dot::before {
  position: absolute;
  content: "";
  top: -4px;
  right: -4px;
  left: -4px;
  bottom: -4px;
}

.flickity-page-dots .dot.is-selected {
  -webkit-transform: scale(1.35);
  transform: scale(1.35);

  background: {
      {
      settings.heading_color
    }
  }

  ;
}

/* prev/next buttons */
.flickity-prev-next-button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  top: calc(50% - 25px);
  border-radius: 100%;
  visibility: visible;

  background: color-mix(in srgb, {
      {
      settings.border_color
    }
  }

  80%, black 20%);
opacity: 0;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.7);
transform: scale(0.7);
z-index: 1;
}

.flickity-prev-next-button:hover {
  background: {
      {
      settings.accent_color
    }
  }

  ;
}

.flickity-prev-next-button svg {
  position: relative;
  width: 15px;
  height: 15px;

  fill: {
      {
      settings.secondary_background
    }
  }

  ;
  vertical-align: middle;
}

.flickity-prev-next-button[disabled] {
  opacity: 0;
  visibility: hidden;
}

.flickity-prev-next-button.previous {
  left: -25px;
}

.flickity-prev-next-button.previous svg {
  left: 1px;
}

.flickity-prev-next-button.next {
  right: -25px;
}

.flickity-prev-next-button.next svg {
  left: -1px;
}

.flickity-enabled:hover .flickity-prev-next-button:not([disabled]) {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/*
   flickity-fade

   NOTE: there is currently a bug in Flickity-fade when there are only 2 slides (https://github.com/metafizzy/flickity-fade/issues/1),
         which requires currently those ugly !important rules to fix the issue
 */
.flickity-enabled.is-fade .flickity-slider>* {
  pointer-events: none;
  z-index: 0;
  visibility: hidden;
  transition: opacity 0.3s linear, visibility 0.3s linear !important;
  opacity: 0 !important;
}

.flickity-enabled.is-fade .flickity-slider>.is-selected {
  pointer-events: auto;
  z-index: 1;
  visibility: visible;
  opacity: 1 !important;
}

/* Make sure that if Flickity is embedded within a modal, the slideshow are not with auto pointer events */
.modal[aria-hidden=true] .flickity-slider>* {
  pointer-events: none !important;
}

/* Temporary fix for slideshow, should be fixed once Flickity is fixed */
.product-gallery__carousel.is-fade .flickity-slider>* {
  transition: opacity 0.3s linear !important;
}

@-webkit-keyframes drift-fadeZoomIn {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes drift-fadeZoomIn {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes drift-fadeZoomOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
}

@keyframes drift-fadeZoomOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
}

@-webkit-keyframes drift-loader-rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }

  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
  }

  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes drift-loader-rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0);
  }

  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
  }

  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@-webkit-keyframes drift-loader-before {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.2) translateX(6px);
    transform: scale(1.2) translateX(6px);
  }

  25% {
    -webkit-transform: scale(1.3) translateX(8px);
    transform: scale(1.3) translateX(8px);
  }

  40% {
    -webkit-transform: scale(1.2) translateX(6px);
    transform: scale(1.2) translateX(6px);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.8) translateX(6px);
    transform: scale(0.8) translateX(6px);
  }

  75% {
    -webkit-transform: scale(0.7) translateX(8px);
    transform: scale(0.7) translateX(8px);
  }

  90% {
    -webkit-transform: scale(0.8) translateX(6px);
    transform: scale(0.8) translateX(6px);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes drift-loader-before {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.2) translateX(6px);
    transform: scale(1.2) translateX(6px);
  }

  25% {
    -webkit-transform: scale(1.3) translateX(8px);
    transform: scale(1.3) translateX(8px);
  }

  40% {
    -webkit-transform: scale(1.2) translateX(6px);
    transform: scale(1.2) translateX(6px);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.8) translateX(6px);
    transform: scale(0.8) translateX(6px);
  }

  75% {
    -webkit-transform: scale(0.7) translateX(8px);
    transform: scale(0.7) translateX(8px);
  }

  90% {
    -webkit-transform: scale(0.8) translateX(6px);
    transform: scale(0.8) translateX(6px);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes drift-loader-after {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.2) translateX(-6px);
    transform: scale(1.2) translateX(-6px);
  }

  25% {
    -webkit-transform: scale(1.3) translateX(-8px);
    transform: scale(1.3) translateX(-8px);
  }

  40% {
    -webkit-transform: scale(1.2) translateX(-6px);
    transform: scale(1.2) translateX(-6px);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.8) translateX(-6px);
    transform: scale(0.8) translateX(-6px);
  }

  75% {
    -webkit-transform: scale(0.7) translateX(-8px);
    transform: scale(0.7) translateX(-8px);
  }

  90% {
    -webkit-transform: scale(0.8) translateX(-6px);
    transform: scale(0.8) translateX(-6px);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes drift-loader-after {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.2) translateX(-6px);
    transform: scale(1.2) translateX(-6px);
  }

  25% {
    -webkit-transform: scale(1.3) translateX(-8px);
    transform: scale(1.3) translateX(-8px);
  }

  40% {
    -webkit-transform: scale(1.2) translateX(-6px);
    transform: scale(1.2) translateX(-6px);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.8) translateX(-6px);
    transform: scale(0.8) translateX(-6px);
  }

  75% {
    -webkit-transform: scale(0.7) translateX(-8px);
    transform: scale(0.7) translateX(-8px);
  }

  90% {
    -webkit-transform: scale(0.8) translateX(-6px);
    transform: scale(0.8) translateX(-6px);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.drift-zoom-pane {
  position: absolute;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  top: 0;
  left: 0;
  height: 520px;
  width: 100%;
  max-width: 520px;
  z-index: 2;

  border: 1px solid {
      {
      settings.accent_color
    }
  }

  ;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  /* This is required because of a bug that causes border-radius to not work with child elements in certain cases. */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.drift-zoom-pane.drift-opening {
  -webkit-animation: drift-fadeZoomIn 180ms ease-out;
  animation: drift-fadeZoomIn 180ms ease-out;
}

.drift-zoom-pane.drift-closing {
  -webkit-animation: drift-fadeZoomOut 210ms ease-in;
  animation: drift-fadeZoomOut 210ms ease-in;
}

.drift-zoom-pane.drift-inline {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.drift-loading .drift-zoom-pane-loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 66px;
  height: 20px;
  -webkit-animation: drift-loader-rotate 1800ms infinite linear;
  animation: drift-loader-rotate 1800ms infinite linear;
}

.drift-zoom-pane-loader:before,
.drift-zoom-pane-loader:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  border-radius: 20px;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.4);
}

.drift-zoom-pane-loader:before {
  left: 0;
  -webkit-animation: drift-loader-before 1800ms infinite linear;
  animation: drift-loader-before 1800ms infinite linear;
}

.drift-zoom-pane-loader:after {
  right: 0;
  -webkit-animation: drift-loader-after 1800ms infinite linear;
  animation: drift-loader-after 1800ms infinite linear;
  -webkit-animation-delay: -900ms;
  animation-delay: -900ms;
}

.drift-bounding-box {
  background-color: rgba({
      {
      settings.accent_color
    }
  }

  , 0.05);

border: 1px solid {
    {
    settings.accent_color
  }
}

;
border-radius: 3px;
}

@media screen and (min-width: 641px) {
  .drift-zoom-pane.drift-inline {
    width: 240px;
    height: 240px;
  }
}

/**
 * In our theme, we express all font sizes in PX. The reason is that our designer is very picky and want each font size to be exactly as on designed files
 * (which is good :p), but as a consequence, sometimes some font sizes scales across devices (smaller on mobile, bigger on desktop), but sometimes it's the
 * same, which make it super hard to use relative units like REM.
 */
/* This is a pure CSS solution (albeit a bit hacky) that allows to add code specific to IE11 without UE sniffing */
/**
 * ----------------------------------------------------------------------------
 * GENERAL
 * ----------------------------------------------------------------------------
 */
html {
  font-family: {
      {
      settings.text_font.family
    }
  }

  ;

  font-weight: {
      {
      settings.text_font.weight
    }
  }

  ;

  font-style: {
      {
      settings.text_font.style
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  line-height: 1.87;

  color: {
      {
      settings.text_color
    }
  }

  ;

  background: {
      {
      settings.background
    }
  }

  ;
}

@media screen and (min-width: 641px) {
  html {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px;
  }
}

/**
 * ----------------------------------------------------------------------------
 * HEADINGS
 * ----------------------------------------------------------------------------
 */
.heading {
  font-family: {
      {
      settings.heading_font.family
    }
  }

  ;

  font-weight: {
      {
      settings.heading_font.weight
    }
  }

  ;

  font-style: {
      {
      settings.heading_font.style
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.h1,
.rte h1 {
  margin-bottom: 20px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--9px;
  line-height: 1.45;
}

.h2,
.rte h2 {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--7px;
  line-height: 1.55;
}

.h3,
.rte h3 {
  margin-bottom: 14px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--5px;
  line-height: 1.6;
}

.h4,
.rte h4 {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
  line-height: 1.75;
}

.h5,
.rte h5 {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  line-height: 1.85;
  text-transform: uppercase;
}

.h6,
.rte h6 {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
  line-height: 1.85;
  text-transform: uppercase;
}

@media screen and (min-width: 641px) {

  .h1,
  .rte h1 {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--13px;
    line-height: 1.43;
  }

  .h2,
  .rte h2 {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--10px;
    line-height: 1.5;
  }

  .h3,
  .rte h3 {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--6px;
    line-height: 1.5;
  }

  .h4,
  .rte h4 {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--3px;
    line-height: 1.7;
  }

  .h5,
  .rte h5 {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--1px;
    line-height: 1.75;
  }

  .h6,
  .rte h6 {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
    line-height: 1.7;
  }
}

/**
 * --------------------------------------------------------------------
 * TEXT HEADING
 * --------------------------------------------------------------------
 */
.text--strong,
.highlight {
  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.text--pull {
  margin-top: -0.435em;
  /* This can be applied to pull up the text and remove the effect of line-height to preserve better spacing */
}

/**
 * --------------------------------------------------------------------
 * LINKS
 * --------------------------------------------------------------------
 */
.link {
  transition: color 0.2s ease-in-out;
}

.link:hover,
.link:focus {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.link--secondary:hover,
.link--secondary:focus {
  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.link--strong {
  font-weight: {
      {
      settings.heading_font.weight
    }
  }

  ;
}

.link--accented {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.link--accented:hover {
  text-decoration: underline;
  /*text-underline-position: under;*/
}

.link--underline {
  text-decoration: underline;
  /*text-underline-position: under;*/
}

/**
 * --------------------------------------------------------------------
 * ICON
 * --------------------------------------------------------------------
 */
@-webkit-keyframes spinnerRotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinnerRotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  fill: currentColor;
  vertical-align: middle;
  background: none;
  pointer-events: none;
  overflow: visible;
}

.icon--search-loader {
  -webkit-animation: spinnerRotation 0.7s infinite linear;
  animation: spinnerRotation 0.7s infinite linear;
}

@media (-moz-touch-enabled: 1),
(hover: none) {
  .touch-area {
    position: relative;
    background: transparent;
    /* This is used to increase the clickable area */
  }

  .touch-area::before {
    position: absolute;
    content: "";
    top: -8px;
    right: -8px;
    left: -8px;
    bottom: -8px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Needed to avoid a glitch on iOS */
  }
}

/**
 * --------------------------------------------------------------------
 * TABLE
 * --------------------------------------------------------------------
 */
.table-wrapper {
  overflow: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.table,
.rte table {
  width: 100%;
  text-align: left;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.table th,
.rte table th {
  font-weight: normal;
}

.table th,
.rte table th,
.table td,
.rte table td {
  padding: 16px 20px;
}

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

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

.table tbody tr,
.rte table tbody tr {
  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.table .table__cell--right,
.rte table .table__cell--right {
  text-align: right;
}

.table .table__cell--center,
.rte table .table__cell--center {
  text-align: center;
}

.table--loose tbody td {
  padding-top: 26px;
  padding-bottom: 26px;
}

@media screen and (max-width: 640px) {

  /* When a table is within a card, on mobile, we need to change the margin and padding to respect the funny iOS-style border */
  .card .table,
  .card .rte table,
  .rte .card table {
    margin-left: 20px;
  }

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

@media screen and (min-width: 641px) {

  .table th,
  .rte table th,
  .table td,
  .rte table td {
    padding: 15px 30px;
  }

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

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

@media screen and (min-width: 1000px) {
  .table-wrapper {
    white-space: normal;
    overflow: visible;
  }
}

html {
  overflow-x: hidden;
}

body:not(.is-tabbing) [tabindex]:focus,
body:not(.is-tabbing) label:focus,
body:not(.is-tabbing) button:focus,
body:not(.is-tabbing) input:focus,
body:not(.is-tabbing) select:focus,
body:not(.is-tabbing) textarea:focus {
  outline: none;
}

.is-locked {
  overflow-y: hidden;
}

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

.container {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.container--medium {
  max-width: 1150px;
}

.container--narrow {
  max-width: 800px;
}

.container--extra-narrow {
  max-width: 630px;
}

.container--giga-narrow {
  max-width: 520px;
}

.anchor {
  display: block;
  position: relative;
  top: -75px;
  visibility: hidden;
}

@supports (--css: variables) {
  .anchor {
    top: calc(-1 * var(--header-height));
  }
}

.js .no-js {
  display: none !important;
}

@media screen and (max-width: 640px) {
  .container--flush {
    padding: 0;
  }

  .container--unflush {
    padding: 0 20px;
  }
}

@media screen and (min-width: 641px) {
  .container {
    padding: 0 40px;
  }
}

/**
 * --------------------------------------------------------------------
 * ASPECT RATIO
 * --------------------------------------------------------------------
 */
.aspect-ratio {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

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

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

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

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

.aspect-ratio--square img,
.aspect-ratio--short img,
.aspect-ratio--tall img {
  position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@supports (-o-object-fit: contain) or (object-fit: contain) {

  .aspect-ratio--square img,
  .aspect-ratio--short img,
  .aspect-ratio--tall img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
}

/**
 * --------------------------------------------------------------------
 * LAZY LOADING
 * --------------------------------------------------------------------
 */
@-webkit-keyframes lazyLoader {

  0%,
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  50% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

@keyframes lazyLoader {

  0%,
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  50% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

img.lazyload[data-sizes=auto] {
  width: 100%;
  /* this is needed to help LazySizes calculate the correct size */
}

.image--fade-in {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.image--blur-up {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.lazyloaded.image--fade-in,
.no-js [data-bgset],
.no-js [data-bg] {
  opacity: 1;
}

.lazyloaded.image--blur-up {
  -webkit-filter: none;
  filter: none;
}

.lazyload__loader {
  position: absolute;
  display: block;
  height: 2px;
  width: 40px;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  margin: auto;
  pointer-events: none;

  background-color: {
      {
      settings.border_color
    }
  }

  ;
  z-index: -1;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.lazyload__loader::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 200%;

  background-color: {
      {
      settings.text_color
    }
  }

  ;
}

.lazyloading~.lazyload__loader {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.lazyloading~.lazyload__loader::after {
  -webkit-animation: lazyLoader 3s infinite;
  animation: lazyLoader 3s infinite;
  -webkit-animation-timing-function: cubic-bezier(0.43, 0.43, 0.25, 0.99);
  animation-timing-function: cubic-bezier(0.43, 0.43, 0.25, 0.99);
}

/**
 * --------------------------------------------------------------------
 * PLACEHOLDER SVG
 * --------------------------------------------------------------------
 */
.placeholder-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.placeholder-svg {
  display: block;

  fill: {
      {
      settings.text_color
    }
  }

  ;

  background-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.1);
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}

.placeholder-svg--inverted {
  fill: {
      {
      settings.background
    }
  }

  ;

  background-color: {
      {
      settings.text_color
    }
  }

  ;
  fill-opacity: 0.5;
}

/* This is just a foundation for an ultra simplistic grid */
.grid {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0 0 -18px -18px;
  font-size: 0;
}

.grid__cell {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding: 0 0 18px 18px;
  margin: 0;
  vertical-align: top;
  font-size: 1rem;
}

@media screen and (min-width: 641px) {
  .grid {
    margin: 0 0 -30px -30px;
  }

  .grid__cell {
    padding: 0 0 30px 30px;
  }
}

.\31 \/1 {
  width: 100%;
}

.\31 \/2 {
  width: 50%;
}

.\31 \/3 {
  width: 33.333333%;
}

.\31 \/4 {
  width: 25%;
}

.\31 \/5 {
  width: 20%;
}

.\31 \/6 {
  width: 16.666667%;
}

@media screen and (max-width: 640px) {
  .hidden-phone {
    display: none !important;
  }

  .\31 \/1--phone {
    width: 100%;
  }

  .\31 \/2--phone {
    width: 50%;
  }

  .\31 \/3--phone {
    width: 33.333333%;
  }

  .\31 \/4--phone {
    width: 25%;
  }

  .\31 \/5--phone {
    width: 20%;
  }

  .\31 \/6--phone {
    width: 16.666667%;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .hidden-tablet {
    display: none !important;
  }

  .\31 \/1--tablet {
    width: 100%;
  }

  .\31 \/2--tablet {
    width: 50%;
  }

  .\31 \/3--tablet {
    width: 33.333333%;
  }

  .\31 \/4--tablet {
    width: 25%;
  }

  .\31 \/5--tablet {
    width: 20%;
  }

  .\31 \/6--tablet {
    width: 16.666667%;
  }
}

@media screen and (min-width: 641px) {
  .hidden-tablet-and-up {
    display: none !important;
  }

  .\31 \/1--tablet-and-up {
    width: 100%;
  }

  .\31 \/2--tablet-and-up {
    width: 50%;
  }

  .\31 \/3--tablet-and-up {
    width: 33.333333%;
  }

  .\31 \/4--tablet-and-up {
    width: 25%;
  }

  .\31 \/5--tablet-and-up {
    width: 20%;
  }

  .\31 \/6--tablet-and-up {
    width: 16.666667%;
  }
}

@media screen and (max-width: 999px) {
  .hidden-pocket {
    display: none !important;
  }

  .\31 \/1--pocket {
    width: 100%;
  }

  .\31 \/2--pocket {
    width: 50%;
  }

  .\31 \/3--pocket {
    width: 33.333333%;
  }

  .\31 \/4--pocket {
    width: 25%;
  }

  .\31 \/5--pocket {
    width: 20%;
  }

  .\31 \/6--pocket {
    width: 16.666667%;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1279px) {
  .hidden-lap {
    display: none !important;
  }

  .\31 \/1--lap {
    width: 100%;
  }

  .\31 \/2--lap {
    width: 50%;
  }

  .\31 \/3--lap {
    width: 33.333333%;
  }

  .\31 \/4--lap {
    width: 25%;
  }

  .\31 \/5--lap {
    width: 20%;
  }

  .\31 \/6--lap {
    width: 16.666667%;
  }
}

@media screen and (min-width: 1000px) {
  .hidden-lap-and-up {
    display: none !important;
  }

  .\31 \/1--lap-and-up {
    width: 100%;
  }

  .\31 \/2--lap-and-up {
    width: 50%;
  }

  .\31 \/3--lap-and-up {
    width: 33.333333%;
  }

  .\31 \/4--lap-and-up {
    width: 25%;
  }

  .\31 \/5--lap-and-up {
    width: 20%;
  }

  .\31 \/6--lap-and-up {
    width: 16.666667%;
  }
}

@media screen and (min-width: 1280px) {
  .hidden-desk {
    display: none !important;
  }

  .\31 \/1--desk {
    width: 100%;
  }

  .\31 \/2--desk {
    width: 50%;
  }

  .\31 \/3--desk {
    width: 33.333333%;
  }

  .\31 \/4--desk {
    width: 25%;
  }

  .\31 \/5--desk {
    width: 20%;
  }

  .\31 \/6--desk {
    width: 16.666667%;
  }
}

@media screen and (min-width: 1440px) {
  .hidden-wide {
    display: none !important;
  }

  .\31 \/1--wide {
    width: 100%;
  }

  .\31 \/2--wide {
    width: 50%;
  }

  .\31 \/3--wide {
    width: 33.333333%;
  }

  .\31 \/4--wide {
    width: 25%;
  }

  .\31 \/5--wide {
    width: 20%;
  }

  .\31 \/6--wide {
    width: 16.666667%;
  }
}

/**
 * --------------------------------------------------------------------
 * BLOCK LIST
 *
 * This component is used by various elements on mobile to allow items
 * to becomes scrollable on mobile and small tablets
 * --------------------------------------------------------------------
 */
.block-list {
  display: flex;
  flex-flow: column nowrap;
  margin: 0 -7px -20px -7px;
}

.block-list--no-flush.block-list--no-flush {
  margin-bottom: 0;
  /* The double class is to increase specifity and avoid to set it at each breakpoint */
}

.block-list__item {
  display: flex;
  /* Allow to stretch the content if different block items have different height */
}

/* Unfortunately IE11 does not like nested flex items, so for IE11, we revert to display: block */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .block-list__item {
    display: block;
  }
}

.block-list__item> :first-child {
  margin: 0 7px 20px 7px;
  flex: 1 0 0%;
}

@media screen and (max-width: 999px) {
  .scroller .block-list {
    white-space: nowrap;
    flex-flow: row nowrap;
  }

  .scroller .block-list::before {
    content: "";
    flex: 0 0 20px;
  }

  .scroller .block-list::after {
    content: "";
    flex: 0 0 13px;
  }

  .scroller .block-list__item {
    flex: 0 0 auto;
    white-space: normal;
    scroll-snap-align: center;
  }
}

@media screen and (max-width: 640px) {
  .scroller .block-list__item {
    width: 81%;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .scroller .block-list__item {
    width: 56%;
  }

  .scroller .block-list::before {
    flex: 0 0 40px;
  }

  .scroller .block-list::after {
    flex: 0 0 25px;
  }
}

@media screen and (min-width: 641px) {
  .block-list {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -15px -30px -15px;
  }

  .block-list__item> :first-child {
    margin: 0 15px 30px 15px;
  }
}

@media screen and (min-width: 1000px) {
  .block-list {
    white-space: normal;
  }

  .block-list::before,
  .block-list::after {
    display: none;
  }

  .block-list__item--grow {
    flex-grow: 1;
  }
}

/**
 * VARIATIONS
 */
.block-list--loose {
  margin-bottom: -45px;
}

.block-list--loose .block-list__item> :first-child {
  margin-bottom: 45px;
}

@media screen and (min-width: 641px) {
  .block-list--loose {
    margin-bottom: -60px;
  }

  .block-list--loose .block-list__item> :first-child {
    margin-bottom: 60px;
  }
}

/**
 * --------------------------------------------------------------------
 * ARTICLE ITEM
 * --------------------------------------------------------------------
 */
.article-item__image-container {
  display: block;
  margin-bottom: 15px;
  border-radius: 3px;
  overflow: hidden;
}

.article-item__image-container--placeholder {
  height: 200px;
}

.article-item__image {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  font-family: "object-fit: cover; object-position: center";
  /* IE11 polyfill */
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  /* The 1.01 is necessary to avoid some rounding issues on Chrome */
  transition: opacity 0.2s ease-in-out, -webkit-transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .article-item:hover .article-item__image {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }

  .article-item:hover .article-item__title {
    color: {
        {
        settings.accent_color
      }
    }

    ;
  }
}

.article-item__meta {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
}

.article-item__meta-item:not(:last-child)::after {
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  margin: -1px 10px 0 10px;
  border-radius: 100%;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.4);
vertical-align: middle;
}

.article-item__title {
  margin-bottom: 4px;
}

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

@media screen and (max-width: 999px) {
  .article-item:not(:last-child) {
    padding-bottom: 20px;
  }

  .scroller .article-item:not(:last-child) {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 641px) {
  .article-item__meta {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
  }
}

@media screen and (min-width: 1000px) {
  .blog-container--without-sidebar .article-item--featured .aspect-ratio {
    padding-bottom: 40% !important;
    /* We have a small exception to make image smaller in case there is no sidebar on the featured item */
  }
}

@media screen and (min-width: 1280px) {
  .article-item__meta-item+.article-item__meta-item::before {
    margin: 0 14px;
  }
}

/**
 * --------------------------------------------------------------------
 * ARTICLE DETAILS
 * --------------------------------------------------------------------
 */
.article__image-wrapper {
  position: relative;
  width: calc(100% + 20px * 2);
  left: -20px;
  margin-top: 4px;
  z-index: 1;
}

.article__toolbar,
.article__toolbar-item {
  display: flex;
  align-items: center;
}

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

.article__toolbar-item .icon--bi-comment {
  width: 24px;
  height: 23px;
  margin-right: 15px;
}

.article__share-label {
  margin-right: 20px;
}

.article__comments-count {
  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.article__inner {
  max-width: 680px;
  margin: 40px auto 100px auto;
}

.article__content {
  margin-bottom: 2.8em;
}

.article__aside {
  margin-bottom: 50px;
}

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

.article__aside-item+.article__aside-item {
  margin-top: 20px;
}

.article__navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 41px 0;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.article__navigation svg {
  width: 8px;
  height: 12px;
  vertical-align: -1px;
}

.article__navigation--align-right {
  justify-content: flex-end;
}

.article__navigation-item--prev svg {
  margin-right: 12px;
}

.article__navigation-item--next svg {
  margin-left: 12px;
}

.article__comment-list {
  margin-top: 50px;
}

.article__comment-list-heading {
  margin-bottom: 30px;
}

.article-comment {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

.article-comment:first-child {
  margin-top: 30px;
}

.article-comment:last-child {
  margin-bottom: 0;
}

.article-comment__gravatar {
  border-radius: 100%;
  max-width: 50px;
  margin: 5px 22px 0 0;
}

.article-comment__author {
  margin-bottom: 0;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.article-comment__date {
  display: block;
  margin-bottom: 12px;
  font-style: italic;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.article__comment-form {
  margin-top: 50px;
}

.article__comment-list+.article__comment-form {
  margin-top: 70px;
}

.article__comment-form-title {
  margin-bottom: 12px;
}

.article__moderated-note {
  font-style: italic;
}

.article__comment-form-wrapper {
  margin-top: 32px;
}

@media screen and (min-width: 641px) {
  .article__image-wrapper {
    position: relative;
    width: 100%;
    left: 0;
    border-radius: 3px 3px 0 0;
    margin: 0 0 -1px 0;
    /* This -1 allows to cover the border of the card */
    overflow: hidden;
  }

  .article__image-wrapper+.card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .article__inner {
    margin-top: 60px;
  }

  .article__content {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--1px;
  }

  .article-comment {
    margin-bottom: 42px;
  }

  .article-comment__author {
    margin-bottom: 2px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--1px;
  }

  .article-comment__date {
    margin-bottom: 12px;
  }
}

/**
 * --------------------------------------------------------------------
 * BLOG
 * --------------------------------------------------------------------
 */
.shopify-section__article {
  max-width: 980px;
}

.blog-sidebar__item {
  margin-bottom: 45px;
}

.blog-sidebar__item--products,
.blog-sidebar__item--newsletter {
  margin-bottom: 50px;
  /* we add a bit of additional spacing to those two are the content is not made of text that brings its own spacing due to line-height */
}

.blog-sidebar__item:first-child:not(.blog-sidebar__item--newsletter) {
  margin-top: -0.435em;
}

.blog-sidebar__block-title {
  margin-bottom: 20px;
}

@media screen and (min-width: 1000px) {

  /* From tablet and up the sidebar is on the right */
  .blog-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .shopify-section__blog-posts,
  .shopify-section__article {
    /* IE11 has issue with the shorthand form */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
  }

  .blog-sidebar {
    width: 300px;
    margin-left: 60px;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .blog-sidebar {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1280px) {
  .blog-sidebar {
    width: 350px;
    margin-left: 70px;
  }
}

/* Newsletter */
.blog-sidebar__item--newsletter {
  padding: 30px 20px 30px 20px;
  border-radius: 3px;
  text-align: center;
}

.blog-sidebar__item--newsletter .heading {
  color: inherit;
}

@media screen and (max-width: 640px) {

  /* On mobile it goes to the edge */
  .blog-sidebar__item--newsletter {
    border-radius: 0;
    margin-left: -20px;
    margin-right: -20px;
  }
}

/* Featured blog posts */
.blog-sidebar__post-list {
  list-style: none;
}

.blog-sidebar__post-item {
  display: flex;
  align-items: flex-start;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.blog-sidebar__post-item:hover .blog-sidebar__post-image {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.blog-sidebar__post-item:hover .blog-sidebar__post-title {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.blog-sidebar__post-item+.blog-sidebar__post-item {
  margin-top: 30px;
}

.blog-sidebar__post-image-wrapper {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 100px;
  margin-right: 20px;
}

.blog-sidebar__post-image,
.blog-sidebar__post-placeholder {
  min-height: 80px;
  transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-sidebar__post-image-overflow {
  overflow: hidden;
  border-radius: 3px;
}

.blog-sidebar__post-title {
  position: relative;
  display: block;
  display: -webkit-box;
  margin-top: 2px;
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

.blog-sidebar__post-meta {
  margin-top: 4px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.blog-sidebar__post-meta-item:not(:last-child)::after {
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 10px;
  border-radius: 100%;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.4);
vertical-align: middle;
}

.blog-sidebar__post-list--ranked {
  counter-reset: post-ranking 0;
}

.blog-sidebar__post-list--ranked .blog-sidebar__post-image-wrapper::before {
  position: absolute;
  content: counter(post-ranking);
  top: calc(50% - 16px);
  left: -16px;

  border: 2px solid {
      {
      settings.background
    }
  }

  ;
  height: 32px;
  width: 32px;
  line-height: 28px;
  /* 32px minus 4px of border */
  text-align: center;
  border-radius: 100%;

  background: {
      {
      settings.accent_color
    }
  }

  ;

  color: {
      {
      settings.secondary_background
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  counter-increment: post-ranking;
  z-index: 1;
}

/* Products */
.blog-sidebar__item--products .product-item {
  width: 100%;
}

.blog-sidebar__item--products .product-item__image-wrapper {
  width: 75px !important;
}

.blog-sidebar__item--products .product-item__price-list>.price {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
}

@media screen and (max-width: 640px) {

  /* For the sidebar the products display slightly differently as they do not goes edge to edge */
  .blog-sidebar__item--products .product-list--horizontal {
    border: 1px solid {
        {
        settings.border_color
      }
    }

    ;
    border-radius: 3px;
  }
}

/* Linklists */
.blog-sidebar__linklist {
  list-style: none;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.blog-sidebar__link-item {
  padding: 14px 0;

  border-bottom: 1px solid {
      {
      settings.border_color | color_darken: 5
    }
  }

  ;
  line-height: 1.5;
}

.blog-sidebar__link-item:first-child {
  padding-top: 5px;
}

.blog-sidebar__link-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-sidebar__link-item>a {
  display: block;
}

/**
 * IMPLEMENTATION NOTE: we are using Sass 3.2 placeholder extend here as button are often extended for things like Shopify Reviews
 * or Shopify smart buttons. Placeholders allows to extend the button only, and not all the other rules that may inherit from them (like
 * button stack)
 */
#shopify-product-reviews .spr-summary-actions-newreview,
#shopify-product-reviews .spr-button,
.shopify-payment-button__button--unbranded,
.button {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  line-height: 48px;
  border-radius: 2px;
  text-align: center;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px;
  cursor: pointer;
  transition: background 0.25s ease-in-out,
  color 0.25s ease-in-out,
  box-shadow 0.25s ease-in-out;
}

#shopify-product-reviews [disabled].spr-summary-actions-newreview,
#shopify-product-reviews [disabled].spr-button,
[disabled].shopify-payment-button__button--unbranded,
[disabled].button {
  cursor: not-allowed;
}

.button--extra-small {
  padding: 0 15px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  line-height: 34px;
}

.button--small {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  line-height: 42px;
}

.button--large {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
  line-height: 55px;
}

.button--extra-large {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--3px;
  line-height: 60px;
}

#shopify-product-reviews .spr-summary-actions-newreview,
#shopify-product-reviews .spr-button,
.button--primary {
  background: {
      {
      settings.primary_button_background
    }
  }

  ;

  color: {
      {
      settings.primary_button_text_color
    }
  }

  ;
}

#shopify-product-reviews .spr-summary-actions-newreview:hover,
#shopify-product-reviews .spr-button:hover,
.button--primary:hover {
  background: rgba({
      {
      settings.primary_button_background
    }
  }

  , 0.8);
}

.button--secondary {
  background: {
      {
      settings.secondary_button_background
    }
  }

  ;

  color: {
      {
      settings.secondary_button_text_color
    }
  }

  ;
}

.button--secondary:hover {
  background: rgba({
      {
      settings.secondary_button_background
    }
  }

  , 0.8);
}

.button--ternary {
  color: {
      {
      settings.accent_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.border_color
    }
  }

  inset;
  /* use box-shadow instead of border to not create additional space */
}

.button--ternary:hover {
  background: rgba({
      {
      settings.border_color
    }
  }

  , 0.5);

color: {
    {
    settings.text_color
  }
}

;
}

.button--transparent {
  color: {
      {
      settings.text_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.border_color
    }
  }

  inset;
  /* use box-shadow instead of border to not create additional space */
}

.button--transparent:hover {
  background: {
      {
      settings.primary_button_background
    }
  }

  ;

  color: {
      {
      settings.primary_button_text_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.primary_button_background
    }
  }

  inset;
}

/* The color scheme is a bit hacky here, but basically this button is only used for the sold out button, so we re-use the
   sold out label to create some consistence */
.button--disabled {
  background: {
      {
      settings.product_sold_out_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.product_sold_out_color
    }
  }

  inset;

  /* use box-shadow instead of border to not create additional space */
  color: {
      {
      settings.secondary_background
    }
  }

  ;

  color: {
    % if settings.product_sold_out_color | color_brightness>165 %
  }

  #000000 {
    % else %
  }

  #ffffff {
    % endif %
  }

  ;
}

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

.button--min-width {
  min-width: 200px;
}

.button--floating {
  transition: box-shadow 0.2s ease-in-out;
}

.button--floating:hover {
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.06);
}

/**
 * --------------------------------------------------------------------
 * BUTTON WRAPPER
 * --------------------------------------------------------------------
 */
.button-wrapper {
  text-align: center;
}

/**
 * --------------------------------------------------------------------
 * BUTTON STACK
 * --------------------------------------------------------------------
 */
.button-stack {
  display: flex;
  flex-direction: column;
}

.button-stack>.button+.button {
  margin-top: 10px;
}

/**
 * --------------------------------------------------------------------
 * BUTTON GROUP
 * --------------------------------------------------------------------
 */
.button-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -5px;
}

.button-group>* {
  margin: 5px;
}

.button-group--fit>* {
  flex: 1 0 0;
  padding-left: 15px;
  padding-right: 15px;
}

.button-group--loose {
  margin: -10px;
}

.button-group--loose>* {
  margin: 10px;
}

/**
 * --------------------------------------------------------------------
 * Standard card
 * --------------------------------------------------------------------
 */
.card {
  position: relative;
  margin-bottom: 18px;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.card__header {
  position: relative;
  padding: 20px 20px 0 20px;
}

.card__header--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__title {
  margin-bottom: 0;
}

.card__subtitle {
  margin-bottom: 14px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
}

.card__subtitle:first-child {
  margin-top: -0.435em;
}

.card__title--small {
  margin-bottom: 10px;
  margin-top: -2px;

  /* Those kind of micro-adjustments rules are not really beautiful, but it's here to satisfy need of pixel perfect... */
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--5px;
}

.card__section,
.card__collapsible-button {
  position: relative;
  padding: 20px;
}

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

.card__collapsible-button .plus-button {
  margin-left: 10px;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.card__section+.card__section::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - 20px);
  top: 0;
  right: 0;
  height: 1px;

  background: {
      {
      settings.border_color
    }
  }

  ;
}

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

.card__collapsible {
  height: 0;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

.card__collapsible-content {
  padding: 0 20px 20px 20px;
}

.card__separator {
  width: calc(100% + 20px);
  margin: 20px 0;
  border: none;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.card__navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: -3px;

  /* Yeah, designers like making things simple complicated :D */
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.card__navigation-breadcrumb svg {
  margin-right: 12px;
  width: 8px;
  height: 12px;
  vertical-align: -1px;
}

.card__linklist {
  list-style: none;
}

.card__linklist-item {
  display: block;
  padding: 2px 0;
  text-align: left;
}

@media screen and (max-width: 640px) {
  .card {
    border-radius: 0;
    /* cards expand full-width on mobile */
  }

  .card__section--flex .button {
    margin-top: 20px;
    width: 100%;
  }
}

@media screen and (max-width: 999px) {
  .card--collapsed {
    margin-top: -18px !important;
    border-top: none !important;

    box-shadow: 0 -1px {
        {
        settings.secondary_background
      }
    }

    ;
    /* allows to anihilate the border of the previous card */
  }

  .card--collapsed .card__header,
  .card--collapsed .card__section {
    padding-top: 0;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .card--collapsed {
    margin-top: -30px !important;
    border-radius: 0 0 3px 3px;
  }
}

@media screen and (min-width: 641px) {
  .card {
    margin-bottom: 30px;
    border-radius: 3px;

    border: 1px solid {
        {
        settings.border_color
      }
    }

    ;
  }

  .card__header {
    padding: 30px 30px 0 30px;
  }

  .card__section,
  .card__collapsible-button {
    padding: 30px;
  }

  .card__section+.card__section::before {
    width: 100%;
  }

  .card__section--flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card__subtitle {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
  }

  .card__collapsible-content {
    padding: 0 30px 30px 30px;
  }

  .card__separator {
    width: 100%;
    margin: 24px 0;
  }

  .card__header--tight {
    padding-top: 20px;
  }

  .card__section--tight {
    padding: 20px 25px;
  }

  .card__section--tight .card__separator {
    margin: 20px 0;
  }

  .card__navigation {
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 1000px) {
  .card--sticky {
    position: relative !important;
    top: auto !important;
    margin-bottom: 30px !important;
  }
}

/* Some ugly styles that I don't know how to fix properly */
.card__section .rte .button:last-child {
  margin-bottom: 15px;
}

/**
 * --------------------------------------------------------------------
 * Mini-cart
 * --------------------------------------------------------------------
 */
.mini-cart {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 100%;
  max-height: 0;

  /* This is needed to fix a bug on iOS, DO NOT REMOVE */
  background: {
      {
      settings.secondary_background
    }
  }

  ;

  color: {
      {
      settings.text_color
    }
  }

  ;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  transition: opacity 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  max-height 0s linear 0.25s,
  -webkit-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out,
  transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  max-height 0s linear 0.25s;
  transition: opacity 0.25s ease-in-out,
  transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  max-height 0s linear 0.25s,
  -webkit-transform 0.25s ease-in-out;
  will-change: transform;
}

.mini-cart[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
}

.mini-cart .icon--nav-triangle-borderless {
  position: absolute;
  width: 18px;
  height: 8px;
  right: 6px;
  bottom: 100%;
  z-index: 2;
  -webkit-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.12));
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.12));
}

.mini-cart__alert-wrapper {
  padding-top: 20px;
}

.mini-cart .alert {
  margin-bottom: 0;
  flex-shrink: 0;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.mini-cart__content:not(.mini-cart__content--empty)>* {
  padding-left: 20px;
  padding-right: 20px;
}

.mini-cart__content--empty {
  padding: 20px 25px 25px 25px;
}

.mini-cart__empty-state {
  padding: 70px 0 60px 0;
  text-align: center;
}

.mini-cart__empty-state svg {
  margin-bottom: 10px;
}

.mini-cart__line-item-list {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
}

.mini-cart__line-item {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
}

.mini-cart__line-item+.mini-cart__line-item {
  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.mini-cart__image-wrapper {
  min-width: 80px;
  width: 80px;
  margin-right: 20px;
}

.mini-cart__product-info {
  margin-bottom: 12px;
}

.mini-cart__product-vendor {
  display: block;
  margin-bottom: 7px;
  line-height: 1.55;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
  text-transform: uppercase;
}

.mini-cart__product-title {
  display: block;
  margin-bottom: 4px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  line-height: 1.5;
}

.mini-cart__property-list {
  line-height: 1.5;
  margin: 6px 0;
}

.mini-cart__price-list>.price {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.mini-cart__price-info {
  margin-top: -2px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.mini-cart__discount-list {
  list-style: none;
  margin-top: 2px;
}

.mini-cart__discount {
  display: inline-block;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;

  background: rgba({
      {
      settings.product_on_sale_accent
    }
  }

  , 0.08);

color: {
    {
    settings.product_on_sale_accent
  }
}

;
border-radius: 2px;
padding: 0 11px;
}

.mini-cart__discount svg {
  margin-right: 6px;
  vertical-align: text-bottom;
}

.mini-cart__discount+.mini-cart__discount {
  margin-top: 5px;
}

.mini-cart__quantity-remove {
  display: inline-block;
  margin-left: 10px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
  line-height: 1;
}

.mini-cart__recap {
  padding: 15px 20px 20px 20px;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.mini-cart__recap-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.mini-cart__recap-price-line--highlight {
  color: {
      {
      settings.product_on_sale_accent
    }
  }

  ;
}

.mini-cart__recap-price-line+.mini-cart__recap-price-line {
  margin-top: 4px;
}

.mini-cart__amount-saved {
  color: {
      {
      settings.product_on_sale_accent
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.mini-cart__button-container {
  margin-top: 16px;
}

@media screen and (max-width: 640px) {
  .mini-cart .icon--nav-triangle-borderless {
    right: 24px;
  }

  .mini-cart__content {
    display: flex;
    flex-direction: column;
  }

  .mini-cart__inner,
  .mini-cart__content--empty {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 20px);
    /* We remove a bit of space to fix the double click issue on iOS */
  }
}

@media screen and (min-width: 641px) {
  .mini-cart {
    left: auto;
    right: 0;
    top: calc(100% + 14px);
    max-height: none;
    width: 470px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.1);
  }

  .mini-cart__content>* {
    padding-left: 25px;
    padding-right: 25px;
  }

  .mini-cart__content--empty {
    padding-bottom: 25px;
  }

  .mini-cart__line-item-list {
    max-height: 300px;
    /*&.is-scrollable::after {
      content: '';
      display: block;
      position: sticky;
      width: calc(100% + 40px);
      height: 4px;
      margin-left: -20px;
      bottom: 0;
      background: linear-gradient(to bottom, rgba($border-color, 0), rgba($border-color, 0.4));
    }*/
  }

  .mini-cart__item-wrapper {
    display: flex;
    flex-grow: 1;
    align-items: flex-start;
    justify-content: space-between;
  }

  .mini-cart__quantity-remove {
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 10px auto 0 auto;
  }

  .mini-cart__product-info {
    margin: 0 20px 0 0;
  }

  .mini-cart__recap {
    padding: 15px 25px 25px 25px;
  }
}

@media screen and (min-height: 700px) and (min-width: 641px) {
  .mini-cart__line-item-list {
    max-height: 330px;
  }
}

@media screen and (min-width: 1280px) {
  .mini-cart .icon--nav-triangle-borderless {
    right: 58px;
  }
}

/**
 * --------------------------------------------------------------------
 * Main cart general layout
 *
 * On desktop, the recap is moved to the right, while the main content
 * has a restricted width
 * --------------------------------------------------------------------
 */
.cart-recap__secure-payment-list {
  max-width: 300px;
  margin: -4px auto !important;
}

@media screen and (max-width: 999px) {
  .cart-wrapper {
    min-height: 0 !important;
  }
}

@media screen and (min-width: 1000px) {
  .cart-wrapper {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
  }

  .cart-wrapper__inner {
    position: relative;
  }

  .cart-wrapper__inner-inner {
    width: calc(100% - 380px);
  }

  .cart-recap {
    position: absolute;
    right: 40px;
    top: 0;
    width: 350px;
    height: 100%;
  }

  .cart-recap__scroller {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  @supports (--css: variables) {
    .cart-recap__scroller {
      top: calc(var(--header-height) + 30px);
    }
  }
}

@media screen and (min-width: 1280px) {
  .cart-wrapper__inner-inner {
    width: calc(100% - 430px);
  }

  .cart-recap {
    width: 400px;
  }
}

/**
 * --------------------------------------------------------------------
 * Gift wrap
 * --------------------------------------------------------------------
 */
.gift-wrap {
  padding: 20px 10px 20px 20px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.gift-wrap__left {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.gift-wrap__icon svg {
  display: block;
  margin-top: -4px;
  margin-right: 25px;
  width: 24px;
  height: 24px;
}

.gift-wrap__text>span:first-child {
  margin-right: 10px;
}

@media screen and (min-width: 641px) {
  .gift-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 30px;
  }

  .gift-wrap__left {
    margin-bottom: 0;
  }
}

/**
 * --------------------------------------------------------------------
 * Estimate shipping (this is quite similar to the gift wrap code, and
 * may be good to find a good block abstraction to make the code re-usable
 * --------------------------------------------------------------------
 */
.estimate-shipping {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.estimate-shipping__toggle {
  display: flex;
  align-items: center;
  padding: 20px;
  width: 100%;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.estimate-shipping__icon svg {
  display: block;
  margin-right: 25px;
  width: 24px;
  height: 24px;
}

.estimate-shipping__arrow {
  margin-left: auto;
}

.estimate-shipping__arrow svg {
  width: 12px;
  height: 8px;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.estimate-shipping__toggle[aria-expanded=true] .estimate-shipping__arrow svg {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.estimate-shipping__collapsible .shipping-estimator {
  padding: 0 20px 20px 20px;
}

@media screen and (min-width: 641px) {
  .estimate-shipping__toggle {
    padding: 20px 30px;
  }

  .estimate-shipping__collapsible .shipping-estimator {
    padding-right: 30px;
    padding-left: 30px;
  }
}

/**
 * --------------------------------------------------------------------
 * Cart recap
 * --------------------------------------------------------------------
 */
.cart-recap__price-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.cart-recap__price-line+.cart-recap__price-line {
  margin-top: 4px;
}

.cart-recap__price-line--highlight {
  color: {
      {
      settings.product_on_sale_accent
    }
  }

  ;
}

.cart-recap__amount-saved {
  color: {
      {
      settings.product_on_sale_accent
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;
}

.cart-recap__note {
  margin-top: 14px;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.cart-recap__note-inner {
  padding-bottom: 20px;
}

.cart-recap__note-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  width: 100%;
}

.cart-recap__note-button svg {
  width: 12px;
  height: 8px;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

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

.cart-recap__note-edit {
  margin-right: 14px;

  color: {
      {
      settings.accent_color
    }
  }

  ;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.cart-recap__note-edit.is-visible {
  opacity: 1;
}

.cart-recap__notices {
  margin: 24px 0;
}

.cart-recap__secure-payment-title {
  margin-bottom: 10px;
  text-align: center;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.cart-recap__secure-payment-title svg {
  margin-right: 8px;
  vertical-align: text-top;
}

@media screen and (min-width: 641px) {
  .cart-recap__price-line {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--3px;
  }

  .cart-recap__amount-saved {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--1px;
  }

  .cart-recap__note {
    margin-top: 20px;
  }
}

/**
 * --------------------------------------------------------------------
 * MAIN COLLECTION
 * --------------------------------------------------------------------
 */
.collection__image-wrapper {
  position: relative;
  height: 180px;
  margin-bottom: -1px;
  z-index: 1;
  overflow: hidden;
}

.collection__image-wrapper--small {
  height: 140px;
}

.collection__image-wrapper--large {
  height: 230px;
}

.collection__image-wrapper--preserve-ratio {
  height: auto !important;
  /* Height depends on the ratio of the original image */
}

.collection__image-wrapper+.card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.collection__image {
  height: 100%;
  background-size: cover;
  background-position: center;
}

.collection__title {
  margin-bottom: 5px;
}

.collection__meta {
  margin-bottom: 12px;
}

.collection__description {
  margin-top: 20px;
}

.collection__brand-logo-wrapper {
  margin-right: 20px;
  padding: 10px;
  width: 70px;
  height: 70px;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  border-radius: 3px;
}

.collection__brand-logo-image {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.collection__products-count {
  margin-bottom: 18px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.collection__toolbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding: 0 20px;

  box-shadow: 0 1px {
      {
      settings.border_color
    }
  }

  ,
  0 -1px {
      {
      settings.border_color
    }
  }

  ;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  z-index: 3;
}

.collection__toolbar-item {
  display: flex;
  align-items: center;
  height: 48px;
}

.collection__toolbar-item--filter svg {
  margin-right: 12px;
  width: 19px;
  height: 20px;
}

.collection__layout-label {
  margin-right: 20px;
}

.collection__layout-button {
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
}

.collection__layout-button:last-child {
  margin-left: 15px;
}

.collection__layout-button:hover {
  opacity: 1;
}

.collection__layout-button.is-selected {
  opacity: 1;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.collection__layout-button svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Adjustment when the expanded description is enabled */
.collection__header .expandable-content--expandable {
  margin-bottom: -22px;
}

/* Brand variant */
.collection__header--brand .collection__meta {
  display: flex;
  align-items: center;
}

.collection__header--brand .collection__description {
  margin-top: 0;
}

@media screen and (max-width: 999px) {
  .collection__toolbar {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--header-height) * var(--header-is-sticky, 0));
  }
}

@media screen and (min-width: 641px) {
  .collection__image-wrapper {
    height: 230px;
    border-radius: 3px 3px 0 0;
  }

  .collection__image-wrapper--small {
    height: 200px;
  }

  .collection__image-wrapper--large {
    height: 310px;
  }

  .collection__brand-logo-wrapper {
    width: 90px;
    height: 90px;
    margin-right: 30px;
  }

  .collection__products-count {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
  }

  .collection__toolbar {
    padding: 0 30px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
  }

  .collection__toolbar--bordered {
    margin-top: 30px;

    box-shadow: 0 1px {
        {
        settings.border_color
      }
    }

    ,
    0 -1px {
        {
        settings.border_color
      }
    }

    ;
  }

  .card__header--tight+.collection__toolbar--bordered {
    margin-top: 25px;
  }

  .collection__toolbar-item {
    height: 58px;
  }

  .collection__toolbar-item .value-picker-button {
    margin-left: 4px;
  }
}

@media screen and (max-width: 640px) {
  .collection__toolbar-item--count+.collection__toolbar-item--layout {
    margin-left: auto;
  }
}

@media screen and (min-width: 1000px) {
  .collection__toolbar:not(.collection__toolbar--bordered) {
    margin-top: -12px;

    box-shadow: 0 1px {
        {
        settings.border_color
      }
    }

    ;
  }

  .collection__brand-logo-wrapper {
    width: 110px;
    height: 110px;
    flex: none;
  }

  /* Brand variation */
  .collection__header--brand {
    display: flex;
    align-items: flex-start;
  }

  .collection__header--brand .collection__meta {
    display: block;
  }
}

@media screen and (min-width: 1280px) {
  .collection__title {
    margin-bottom: 12px;
  }

  .collection__description {
    margin-top: 10px;
  }

  .collection__showing-count,
  .collection__toolbar-item--sort {
    margin-right: 45px;
  }

  .collection__toolbar-item--sort {
    margin-left: auto;
  }

  /* Brand variation */
  .collection__header--brand .collection__meta {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1440px) {

  .collection__showing-count,
  .collection__toolbar-item--sort {
    margin-right: 80px;
  }
}

/**
 * --------------------------------------------------------------------
 * MAIN COLLECTION (FILTER BAR)
 * --------------------------------------------------------------------
 */
.collection__filter-group-list--ordered {
  display: flex;
  flex-direction: column;
}

.collection__filter-group {
  padding: 13px 20px 14px 20px;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.collection__filter-group-name {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.collection__filter-group-name svg {
  width: 12px;
  height: 8px;
  margin-left: 10px;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}

.collection__filter-group-name[aria-expanded=true] svg {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.collection__filter-collapsible {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: 0.2s ease-in-out;
}

.collection__filter-collapsible[aria-hidden=false] {
  visibility: visible;
}

.collection__filter-item-active {
  display: block;
  margin-top: -5px;

  color: {
      {
      settings.accent_color
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
}

/* Linklist */
.collection__filter-linklist {
  list-style: none;
  padding: 4px 0 8px 0;
}

.collection__filter-link {
  display: block;
  width: 100%;
  padding: 3px 0 4px 0;
  text-align: left;
}

.collection__filter-link svg {
  width: 12px;
  height: 8px;
  margin-left: 8px;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}

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

.collection__filter-link.is-active {
  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.collection__filter-linklist .collection__filter-linklist {
  padding: 0 0 0 10px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

/* Colors */
.collection__filter-color-list {
  padding: 7px 0 5px 6px;
}

/* Checkbox */
.collection__filter-checkbox-list {
  list-style: none;
}

.collection__filter-collapsible .collection__filter-checkbox-list {
  padding: 8px 0 7px 10px;
  /* When embedded into a collapsible it get more padding */
}

.collection__filter-checkbox {
  display: flex;
  align-items: center;
  padding: 2px 0 3px 0;
}

.collection__filter-checkbox label {
  margin-left: 4px;
  /* This is micro-alignment to respect the design due to the usage of flexbox here */
  line-height: 1.5;
}

/* Active filters */
.collection__filter-icon--active {
  position: relative;
}

.collection__filter-icon--active::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 13px;
  width: 8px;
  height: 8px;
  border-radius: 100%;

  background: {
      {
      settings.accent_color
    }
  }

  ;
}

.collection__active-filters {
  margin: -5px 0 16px 0;
}

.collection__active-filters:empty {
  display: none;
}

.collection__active-filter-item {
  display: flex;
  width: 100%;
  padding: 4px 0;
  align-items: center;
  line-height: 1.5;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.collection__active-filter-cross {
  position: relative;
  display: inline-block;
  margin-right: 12px;

  background: {
      {
      settings.accent_color
    }
  }

  ;

  color: {
      {
      settings.secondary_background
    }
  }

  ;
  height: 20px;
  width: 20px;
  border-radius: 3px;

  box-shadow: 0 1px rgba({
      {
      settings.border_color
    }
  }

  , 0.4);
}

.collection__active-filter-cross svg {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  stroke-width: 2px;
  stroke: white;
}

.collection__clear-filter {
  margin: 13px 0 9px 0;
}

@media screen and (min-width: 1000px) {
  .collection__filter-group {
    padding: 6px 0;
    border-bottom: 0;
  }

  .collection__filter-group-name {
    justify-content: flex-start;
  }

  /* Linklist */
  .collection__filter-linklist {
    padding: 0 0 9px 0;
  }

  .collection__filter-linklist .collection__filter-linklist {
    padding-left: 15px;
  }

  .collection__filter-link {
    padding: 2px 0;
  }

  /* Color */
  .collection__filter-color-list {
    padding: 12px 0 10px 0;
  }

  /* Checkbox */
  .collection__filter-collapsible .collection__filter-checkbox-list {
    padding-bottom: 12px;
  }

  .collection__filter-group:last-child .collection__filter-checkbox-list {
    padding-bottom: 0;
    /* Last one must have its padding removed */
  }

  .collection__filter-checkbox {
    padding: 0;
  }

  .collection__filter-checkbox .checkbox-wrapper {
    margin: 8px 0;
  }
}

@media screen and (min-width: 1280px) {
  .collection__sidebar {
    flex-basis: 290px;
  }
}

/**
 * --------------------------------------------------------------------
 * MAIN COLLECTION (FILTER BAR MOBILE)
 * --------------------------------------------------------------------
 */
.collection__mobile-filters-recap {
  background: {
      {
      settings.background
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.collection__mobile-active-filters {
  margin: -5px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
}

.collection__mobile-active-filter-item {
  padding: 4px 12px;

  background: {
      {
      settings.accent_color
    }
  }

  ;
  border-radius: 3px;

  box-shadow: 0 1px rgba({
      {
      settings.accent_color
    }
  }

  , 0.15);

color: {
    {
    settings.secondary_background
  }
}

;

font-weight: {
    {
    text_font_medium.weight
  }
}

;
}

.collection__mobile-active-filter-item,
.collection__mobile-active-clear {
  margin: 5px;
}

.collection__mobile-active-filter-cross {
  margin-right: 7px;
}

.collection__mobile-active-filter-cross svg {
  width: 7px;
  height: 7px;
  stroke: currentColor;
  stroke-width: 3px;
}

.collection__mobile-active-clear {
  position: relative;
  margin-left: 15px;
}

.collection__mobile-active-clear::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.collection__mobile-active-filters-results {
  display: block;
  margin-top: 25px;
  margin-bottom: -5px;
}

/**
 * --------------------------------------------------------------------
 * COLLECTION FILTER DRAWER (MOBILE)
 * --------------------------------------------------------------------
 */
.collection-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.collection-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 auto;
  max-height: 64px;
  padding: 15px 15px 15px 25px;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  z-index: 1;
}

.collection-drawer__header>div {
  display: flex;
  align-items: center;
}

.collection-drawer__close {
  margin-right: 16px;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.collection-drawer__close svg {
  display: block;
  width: 19px;
  height: 19px;
  margin-top: -1px;
}

.collection-drawer__title {
  margin-bottom: 0;
}

.collection-drawer__inner {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;
}

.collection-drawer__section-title {
  margin: 0;
  padding: 4px 15px;
  text-transform: uppercase;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  background: {
      {
      settings.background
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.collection-drawer__footer {
  padding: 15px;

  box-shadow: 0 -2px 2px rgba({
      {
      settings.border_color
    }
  }

  , 0.65);
}

.collection-drawer__footer .button {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

/**
 * --------------------------------------------------------------------
 * PRODUCT LIST
 * --------------------------------------------------------------------
 */
.product-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  z-index: 1;
  /* This is needed to create a new stacking context to improve performance on iOS */
}

.product-list .flickity-viewport {
  border-radius: 3px;
}

.product-list--scrollable {
  flex-wrap: nowrap;
}

.product-list--collection::before {
  display: none;
}

/* This allows to push the content in case when the product item has a quick form button (like on cart page) */
.product-item--vertical,
.product-item--vertical .product-item__info {
  display: flex;
  flex-direction: column;
}

.product-item--vertical .product-item__info {
  justify-content: space-between;
  flex: 1 0 auto;
}

.product-list__column {
  width: 100%;
}

@media screen and (max-width: 640px) {

  .product-list--scrollable::before,
  .product-list--scrollable::after {
    content: "";
    flex: 0 0 20px;
  }

  .product-list--scrollable .product-item {
    width: 62%;
  }

  .product-list--collage {
    border-width: 1px 0;
  }

  .product-list--collection .product-item--vertical {
    width: 50%;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {

  .product-list--scrollable::before,
  .product-list--scrollable::after {
    content: "";
    flex: 0 0 40px;
  }

  .product-list--scrollable .product-item {
    width: 36%;
  }
}

@media screen and (min-width: 641px) {
  .product-list {
    background: {
        {
        settings.secondary_background
      }
    }

    ;
    border-radius: 3px;
    border: none;
  }

  .product-list--collage {
    /* This needs to be done instead of applying a border to the product-list to fix a z-index issue with the product labels */
  }

  .product-list--collage::before {
    position: absolute;
    content: "";
    width: 100%;
    height: calc(100% + 0px);

    /* This solves an issue on Safari, where 100% does not always work - likely a pixel rounding issue - */
    border: 1px solid {
        {
        settings.border_color
      }
    }

    ;
    z-index: 1;
    pointer-events: none;
    border-radius: 3px;
  }

  .product-list__column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 33.333333%;
  }

  .product-list__column>.product-item {
    flex: 1 0 auto;
  }

  .product-list__column--highlight .product-item__title {
    font-size: 1rem;
  }

  @supports (display: grid) {
    .product-list--collage {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
    }

    .product-list__column {
      display: grid;
      grid-auto-rows: 1fr;
    }

    .product-list__column--shrink {
      grid-template-rows: minmax(50%, -webkit-min-content);
      grid-template-rows: minmax(50%, min-content);
    }
  }
}

@media screen and (max-width: 999px) {
  .product-list--scrollable {
    overflow: visible;
    border: none;
    background: transparent;
  }

  .product-list--scrollable .product-item {
    border: 1px solid {
        {
        settings.border_color
      }
    }

    ;
  }

  .product-list--scrollable .product-item+.product-item {
    border-left: none;
  }

  .product-list--scrollable .product-item:first-child {
    border-radius: 3px 0 0 3px;
  }

  .product-list--scrollable .product-item:last-child {
    border-radius: 0 3px 3px 0;
  }

  .product-list--collection {
    border: none;
  }
}

@media screen and (min-width: 1000px) {
  .product-list {
    /* This needs to be done instead of applying a border to the product-list to fix a z-index issue with the product labels */
  }

  .product-list::before {
    position: absolute;
    content: "";
    width: 100%;
    height: calc(100% + 0px);

    /* This solves an issue on Safari, where 100% does not always work - likely a pixel rounding issue - */
    border: 1px solid {
        {
        settings.border_color
      }
    }

    ;
    z-index: 1;
    pointer-events: none;
    border-radius: 3px;
  }

  .product-list--scrollable::after {
    content: "flickity";
    display: none;
  }

  .product-list--scrollable {
    /*
    this allows to take into account rounding errors to hide box-shadow, but it seems to cause more issues so we're commenting now
    .flickity-slider {
      width: calc(100% + 1px);
      margin-left: -1px;
    }*/
  }

  .product-list--scrollable .product-item {
    min-height: 100%;
  }

  .product-list--stackable {
    flex-wrap: wrap;
  }

  .product-list__column {
    flex-basis: 25%;
  }
}

@media screen and (min-width: 1440px) {
  @supports (display: grid) {
    .product-list--collage {
      grid-template-columns: repeat(2, 1fr 1.05fr);
    }
  }
}

/**
 * --------------------------------------------------------------------
 * FEATURED COLLECTION (HOME PAGE)
 * --------------------------------------------------------------------
 */
.featured-collection {
  padding-top: 25px;
  background-repeat: no-repeat;
  background-position: bottom 0 left -15px;
  background-size: 500px auto;
}

.featured-collection__header {
  padding: 0 20px 40px 20px;
}

.featured-collection__title {
  margin-bottom: 8px;
  color: inherit;
}

.featured-collection__cta {
  margin-top: 8px;
}

.featured-collection__image-wrapper {
  margin-top: 25px;
}

.featured-collection .product-list {
  margin-bottom: 20px;
  border-radius: 2px;
}

.featured-collection .product-item {
  border: none;

  border-right: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.featured-collection .product-item::after {
  display: none;
}

.featured-collection .product-item:last-child {
  border-right: 0;
}

@media screen and (max-width: 640px) {

  .featured-collection,
  .featured-collection__header {
    background-image: none !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .featured-collection {
    margin: 0 -40px;
    background-image: none !important;
  }

  .featured-collection__header {
    padding-left: 40px;
    padding-right: 40px;
    background-repeat: no-repeat;
    background-position: bottom 0 right -15px;
    background-size: 430px auto;
  }

  .featured-collection__image-wrapper {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .featured-collection .product-list {
    margin-bottom: 40px;
  }
}

@media screen and (min-width: 1000px) {
  .featured-collection {
    display: table;
    /* using Flexbox here didn't work well, so let's use old school and reliable stuff */
    table-layout: fixed;
    width: 100%;
    padding: 6px 6px 6px 0;
    border-radius: 3px;
  }

  .featured-collection__header,
  .featured-collection__content {
    display: table-cell;
    vertical-align: top;
  }

  .featured-collection__header {
    width: 455px;
    padding: 20px 30px;
    background-image: none !important;
  }

  .featured-collection .product-list {
    margin-bottom: 0;
  }

  .featured-collection .product-list::before {
    display: none;
  }

  /* This code is absolutely ugly and hacky, but due to rounding errors on Chrome, sometimes everything is shifted by 1px,
     and designer couldn't tolerate it. I've found this hack which basically adds a box-shadow to "cover" artificially
     the border of last element in the list. No better fix were found so far */
  .featured-collection .flickity-viewport::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;

    background: {
        {
        settings.secondary_background
      }
    }

    ;
    right: 0;
  }
}

/**
 * --------------------------------------------------------------------
 * COLLECTION ITEM
 * --------------------------------------------------------------------
 */
.collection-item {
  display: inline-block;
  width: 36vw;
  margin: 0 14px;
  vertical-align: top;
  white-space: normal;
}

.collection-item:first-child {
  margin-left: 20px;
}

.collection-item:last-child {
  margin-right: 20px;
}

.collection-item__image-wrapper {
  margin-bottom: 15px;
  overflow: hidden;
}

.collection-item__image-wrapper--rounded {
  /* adding a stacking context (position: relative; z-index: 0;) is necessary due to a bug in Safari. More info here: https://bugs.webkit.org/show_bug.cgi?id=98538 */
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 100%;
}

.collection-item__image-wrapper img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  /* The 1.01 is necessary to avoid some rounding issues on Chrome */
  font-family: "object-fit: cover; object-position: center;";
  /* IE11 polyfill */
  transition: opacity 0.2s ease-in-out, -webkit-transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.collection-item__title {
  display: block;
  line-height: 1.4;
  text-align: center;
  transition: color 0.2s ease-in-out;
}

.collection-item__title svg {
  display: none;
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .collection-item {
    width: 190px;
  }

  .collection-item:first-child {
    margin-left: 40px;
  }

  .collection-item:last-child {
    margin-right: 40px;
  }
}

@media screen and (min-width: 641px) {
  .collection-item__title {
    -webkit-transform: translateX(14px);
    transform: translateX(14px);
    transition: -webkit-transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .collection-item__title svg {
    /*
    Note: for some strange reasons, on Safari (even last version), if we use a transform it cause a delay of up to 1 second on heavy home page before the
    animation starts. I couldn't find any explanation, but maybe the nested transforms (on both the link and SVG) does not work correctly on Safari. As a
    consequence, I've used a animation on right property (which is much slower but should be ok on this small piece of content)
    */
    position: relative;
    display: inline-block;
    height: 14px;
    width: 14px;
    vertical-align: -2px;
    margin-left: 8px;
    right: -5px;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}

@media screen and (min-width: 1000px) {
  .collection-list {
    margin: 30px -14px 0 -14px;
    white-space: nowrap;
    overflow: hidden;
  }

  .collection-list::after {
    display: none;
    content: "flickity";
    /* enable Flickity slideshow */
  }

  .collection-item {
    width: 20%;
    margin: 0 !important;
    padding: 0 14px;
  }

  .collection-list .flickity-prev-next-button {
    top: calc(50% - 25px - 12px - 0.5em);
    /* 12px is the margin bottom below the image and 0.5em is half a line of text */
  }

  .collection-list .flickity-prev-next-button.previous {
    left: -10px;
  }

  .collection-list .flickity-prev-next-button.next {
    right: -10px;
  }
}

@media screen and (min-width: 1280px) {
  .collection-item {
    width: 16.6666667%;
  }
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .collection-item:hover .collection-item__title {
    color: {
        {
        settings.accent_color
      }
    }

    ;
  }

  .collection-item:hover img {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }

  .collection-item:hover .collection-item__title {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .collection-item:hover .collection-item__title svg {
    opacity: 1;
    right: 0;
  }
}

/* General */
.collection-list__section {
  margin-bottom: 40px;
}

@media screen and (min-width: 641px) {
  .collection-list__section {
    margin-bottom: 60px;
  }
}

/* List of item */
.collection-list__item-wrapper {
  display: block;
  position: relative;
  border-radius: 3px;
  margin-bottom: 20px;
  overflow: hidden;
}

.collection-list__item-wrapper--overlay::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.collection-list__item-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s ease-in-out, -webkit-transform 8s linear !important;
  transition: transform 8s linear, opacity 0.3s ease-in-out !important;
  transition: transform 8s linear, opacity 0.3s ease-in-out, -webkit-transform 8s linear !important;
}

.collection-list__item-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 0 20px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  z-index: 1;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 641px) {
  .collection-list__item-list {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
  }

  .collection-list__item-wrapper {
    width: calc(50% - 30px);
    margin: 15px;
  }
}

@media screen and (min-width: 1280px) {
  .collection-list__item-wrapper {
    width: calc(33.333333% - 30px);
  }
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .collection-list__item-wrapper:hover .collection-list__item-image {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }
}

/**
 * --------------------------------------------------------------------
 * FIELD
 * --------------------------------------------------------------------
 */
.form__field {
  display: block;
  padding: 12px 12px;
  border-radius: 2px;

  border: 1px solid {
      {
      settings.border_color | color_darken: 5
    }
  }

  ;
  width: 100%;
  line-height: normal;
  height: 48px;

  color: {
      {
      settings.heading_color
    }
  }

  ;
  -webkit-appearance: none;
  resize: none;
  font-size: 1rem;

  box-shadow: 0 1px rgba({
      {
      settings.border_color | color_darken: 5
    }
  }

  , 0.25) inset;
transition: border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out,
color 0.2s ease-in-out;
}

.form__field::-webkit-input-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.form__field::-moz-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.form__field:-ms-input-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.form__field::-ms-input-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.form__field::placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.form__field:focus {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.accent_color
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;
  outline: none;
}

.form__field--small {
  height: 44px;
}

.form__field--large {
  height: 60px;
  padding: 20px 18px;
}

.form__field--textarea {
  height: auto;
  line-height: inherit;
  min-height: 48px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.form__field--borderless {
  border: none;
}

.form__field--borderless:focus {
  box-shadow: none;
}

.form__label {
  display: block;
  margin-bottom: 6px;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.form__label--light {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.form__submit {
  display: block;
  margin-top: 20px;
}

.form__submit--tight {
  margin-top: 12px;
}

@media screen and (min-width: 641px) {
  .form__submit--centered {
    margin-left: auto;
    margin-right: auto;
  }
}

/**
 * --------------------------------------------------------------------
 * INPUT WRAPPER
 * This is used to create list of fields, optionally with a label
 * --------------------------------------------------------------------
 */
.form__input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.form__floating-label {
  position: absolute;
  left: 13px;
  top: 0;
  line-height: 48px;
  /* allows to center the field */
  font-size: 1rem;

  color: {
      {
      settings.text_color
    }
  }

  ;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out,
  -webkit-transform 0.2s ease-in-out;
  pointer-events: none;
}

.form__field:focus+.form__floating-label,
.form__field.is-filled+.form__floating-label,
.select-wrapper.is-filled+.form__floating-label {
  -webkit-transform: translateY(-6px) scale(0.8);
  transform: translateY(-6px) scale(0.8);
}

.form__input-wrapper--labelled .form__field {
  padding-top: 20px;
  padding-bottom: 3px;
}

.form__field--large+.form__floating-label {
  left: 18px;
  line-height: 60px;
}

.form__input-wrapper--labelled .form__field--large {
  padding-top: 20px;
  padding-bottom: 3px;
}

/**
 * --------------------------------------------------------------------
 * INPUT ROW
 * --------------------------------------------------------------------
 */
.form__input-row {
  display: flex;
  flex-direction: column;
}

.form__input-row .form__submit {
  margin-top: 0;
}

@media screen and (min-width: 641px) {
  .form__input-row {
    flex-direction: row;
    align-items: flex-end;
    margin: 0 -6px;
  }

  .form__input-row:not(:last-child) {
    margin-bottom: 12px;
  }

  .form__input-row>.form__input-wrapper {
    margin-bottom: 0;
  }

  .form__input-row>* {
    margin-left: 6px;
    margin-right: 6px;
  }

  .form__input-row>.form__submit {
    margin-top: 0;
  }

  .form__input-row>.form__submit {
    flex: 1 0 auto;
    /* we let the submit button grow freely */
  }
}

/**
 * --------------------------------------------------------------------
 * CONNECTED INPUT
 * --------------------------------------------------------------------
 */
.form__connected-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.form__connected-item .form__input-wrapper {
  margin-bottom: 0;
}

.form__connected-item .form__field {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  /* When connected with the icon, the box-shadow must be set inside */
}

.form__connected-item .form__field:focus {
  box-shadow: 0 0 0 1px {
      {
      settings.accent_color
    }
  }

  inset;
}

.form__connected-item .form__connection {
  padding-left: 14px;
  padding-right: 14px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.form__connected-item .form__connection svg {
  width: 23px;
  height: 23px;
}

/**
 * --------------------------------------------------------------------
 * FORM MAIN VARIATION (used when the form is the main element)
 * --------------------------------------------------------------------
 */
.form--main {
  max-width: 350px;
  margin: 60px auto;
  text-align: center;
}

.form__header,
.form__legend {
  margin-bottom: 30px;
}

.form__title {
  margin-bottom: 15px;
}

.form__secondary-action {
  margin-top: 32px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.form__secondary-action>* {
  margin-bottom: 0;
}

@media screen and (min-width: 641px) {
  .form--main {
    margin-top: 110px;
    margin-bottom: 150px;
  }
}

/**
 * --------------------------------------------------------------------
 * SELECT
 * --------------------------------------------------------------------
 */
select::-ms-expand {
  display: none;
}

.select-wrapper {
  position: relative;
  color: currentColor;
  line-height: inherit;
  vertical-align: middle;
}

.select-wrapper svg {
  position: absolute;
  pointer-events: none;
  vertical-align: baseline;
  fill: currentColor;
}

.select-wrapper select {
  /* Disable built-in styles */
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  color: inherit;
  cursor: pointer;
  border-radius: 0;
  /* Remove the ugly blue background on IE when a value is selected */
}

.select-wrapper select:focus::-ms-value {
  background: transparent;

  color: {
      {
      settings.text_color
    }
  }

  ;
}

/* Make sure to have something easy to read... */
.select-wrapper option {
  background: white;
  color: black;
}

.select-wrapper--transparent select {
  padding-right: 22px;
  background: transparent;
  border: none;
  font-size: inherit;
}

.select-wrapper--transparent svg {
  top: calc(50% - 4px);
  right: 4px;
  width: 12px;
  height: 8px;
}

.select-wrapper--primary {
  position: relative;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
}

.select-wrapper--primary select {
  width: 100%;
  padding: 0 36px 0 12px;
  height: 48px;

  border: 1px solid {
      {
      settings.border_color | color_darken: 5
    }
  }

  ;
  border-radius: 2px;
  background: transparent;

  box-shadow: 0 -1px 1px rgba({
      {
      settings.border_color | color_darken: 5
    }
  }

  , 0.3) inset;
font-size: 1rem;
transition: border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}

.select-wrapper--primary select:focus {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.accent_color
    }
  }

  ;
  outline: none;
}

.select-wrapper--primary select:valid {
  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.select-wrapper--primary svg {
  width: 12px;
  height: 14px;
  top: calc(50% - 7px);
  right: 16px;
  opacity: 0.7;
}

.select-wrapper--primary.select-wrapper--small select {
  height: 44px;
  padding-left: 12px;
  padding-bottom: 1px;
  /* just for some pixel perfect alignment... but not sure if it's really good idea for cross-browser! */
}

.form__input-wrapper--labelled .select-wrapper--primary.is-filled select {
  padding-top: 16px;
}

/* Abstraction to just have a select button (without the actual select) */
.select-button {
  position: relative;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  color: currentColor;
  line-height: inherit;
  vertical-align: middle;
  width: 100%;
  padding: 0 36px 0 12px;
  height: 48px;

  border: 1px solid {
      {
      settings.border_color | color_darken: 5
    }
  }

  ;
  border-radius: 2px;

  box-shadow: 0 -1px 1px rgba({
      {
      settings.border_color | color_darken: 5
    }
  }

  , 0.3) inset;
font-size: 1rem;
text-align: left;
transition: border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}

.select-button:focus {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.accent_color
    }
  }

  ;
  outline: none;
}

.select-button svg {
  position: absolute;
  pointer-events: none;
  width: 12px;
  height: 14px;
  top: calc(50% - 7px);
  right: 16px;
  opacity: 0.7;
  vertical-align: baseline;
  fill: currentColor;
}

.select-button--mini {
  height: 32px;
  padding: 0 44px 0 10px;
  font-size: 0.85rem;
}

.select-button--mini svg {
  right: 11px;
}

/**
 * --------------------------------------------------------------------
 * CUSTOM CHECKBOX
 * --------------------------------------------------------------------
 */
.checkbox-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 8px 0;
}

.checkbox-wrapper svg {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 2px;
  top: calc(50% - 6px);
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;

  color: {
      {
      settings.secondary_background
    }
  }

  ;
}

.checkbox-wrapper~label {
  vertical-align: middle;
  cursor: pointer;
}

.checkbox {
  display: block;
  margin-right: 10px;
  width: 16px;
  height: 16px;

  border: 1px solid {
      {
      settings.border_color | color_darken: 5
    }
  }

  ;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  box-shadow: 0 1px rgba({
      {
      settings.border_color | color_darken: 5
    }
  }

  , 0.4);
border-radius: 2px;
-webkit-appearance: none;
transition: border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out,
background 0.2s ease-in-out;
}

.checkbox:focus {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.accent_color
    }
  }

  ;
  outline: none;
}

.checkbox:checked {
  background: {
      {
      settings.accent_color
    }
  }

  ;

  border-color: {
      {
      settings.accent_color
    }
  }

  ;
  box-shadow: none;
}

.checkbox:checked+svg {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.checkbox.is-selected~label {
  color: {
      {
      settings.accent_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.checkbox,
.checkbox~label {
  vertical-align: middle;
  cursor: pointer;
}

@media screen and (min-width: 1000px) {
  .checkbox-wrapper {
    margin: 12px 0;
  }
}

.gift-card__inner {
  padding: 30px 0;
}

.gift-card__main {
  position: relative;
  padding-top: 85px;
  text-align: center;
}

.gift-card__image {
  position: relative;
  width: 170px;
  height: 170px;
  top: -105px;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 auto -75px auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gift-card__title {
  margin-bottom: 0;
}

.gift-card__amount {
  margin-bottom: 18px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--7px;
}

.gift-card__alert {
  margin-top: 20px;
}

.gift-card__code-container {
  max-width: 255px;
  margin: 0 auto 28px auto;
}

.gift-card__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px;
  width: 100%;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  text-transform: uppercase;
  margin-bottom: 15px;
  border-radius: 3px;
  text-align: center;
}

.gift-card__expires-on {
  display: block;

  color: {
      {
      settings.product_in_stock_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;
}

.gift-card__expires-on::before {
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 0.7em;
  border-radius: 100%;
  background: currentColor;
  vertical-align: baseline;
}

.gift-card__share {
  padding-top: 15px;
  padding-bottom: 20px;
}

.gift-card__wallet {
  display: block;
  margin-bottom: 30px;
  text-align: center;
}

.gift-card__qr img {
  margin: 0 auto;
}

.gift-card__shop {
  margin-top: 15px;
  min-width: 300px;
}

@media screen and (max-width: 640px) {
  .gift-card__print {
    width: 100%;
  }

  .gift-card__qr img {
    max-width: 120px;
  }
}

@media screen and (min-width: 641px) {

  /* On gift card there is no search bar so we increase the header */
  .template-gift-card .header {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .gift-card__inner {
    display: flex;
    max-width: 920px;
    margin: 0 auto;
    padding: 70px 0 90px 0;
  }

  .gift-card__main {
    flex: 1 0 auto;
  }

  .gift-card__aside {
    flex: 0 0 255px;
    margin-top: 85px;
    margin-left: 30px;
  }

  .gift-card__image {
    width: 210px;
    height: 210px;
    top: -135px;
    margin-bottom: -80px;
  }

  .gift-card__amount {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--9px;
  }

  .gift-card__code-container {
    display: flex;
    justify-content: center;
    max-width: none;
  }

  .gift-card__code {
    margin-bottom: 0;
    margin-right: 15px;
    max-width: 250px;
  }

  .gift-card__print {
    flex-basis: 150px;
  }
}

@media print {
  .gift-card__aside {
    display: none;
  }
}

.footer {
  padding: 10px 0 30px 0;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.footer__block-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.footer__title {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 0.85em;
  text-align: left;
}

.footer__title[disabled] {
  cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.footer__linklist {
  margin-top: -8px;
  margin-bottom: -5px;
  line-height: 1.4;
}

.footer__link-item {
  display: block;
  padding: 5px 0;
}

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

.footer__aside {
  display: flex;
  flex-direction: column;
  margin-top: 10px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
}

.footer__aside-item {
  margin-top: 34px;
}

.footer__aside-item--localization,
.footer__aside-item--copyright {
  margin-top: 45px;
}

.footer__aside-title {
  margin-bottom: 0.8em;
}

.footer__localization-form {
  display: flex;
}

.footer__localization-form .select-button {
  width: auto;
}

.footer__localization-form-item:not(:last-child) {
  margin-right: 10px;
}

@media screen and (max-width: 640px) {
  .footer__block-item {
    margin-right: -20px;
    padding-right: 20px;

    border-bottom: 1px solid {
        {
        settings.border_color
      }
    }

    ;
  }

  .footer__block-item--newsletter {
    border-bottom: none;
    order: 1;
  }

  .footer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 19px 0;
  }

  .footer__collapsible {
    height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
  }

  .footer__collapsible-content {
    padding: 0 20px 25px 0;
  }

  .footer__block-item .rte {
    margin-top: -0.425em;
  }
}

@media screen and (min-width: 641px) {
  .footer {
    padding: 0;
    border-top: none;
  }

  .footer__wrapper {
    padding: 50px 0;

    border-top: 1px solid {
        {
        settings.border_color
      }
    }

    ;
  }

  .footer__block-list {
    flex-direction: row;
    margin: -20px -35px;
  }

  .footer__block-item {
    flex: 0 0 50%;
    padding: 20px 35px;
  }

  .footer__block-item--newsletter {
    max-width: 350px;
  }

  .footer__block-item .plus-button {
    display: none;
  }

  .footer__localization-form {
    margin-bottom: 20px;
  }

  .footer__linklist {
    margin-top: -2px;
    margin-bottom: 0;
  }

  .footer__aside {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 60px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
  }

  .footer__aside-item {
    margin-top: 0;
  }

  .footer__aside-item--localization,
  .footer__aside-item--copyright {
    width: 100%;
  }

  .footer__aside-item--copyright:not(:only-child) {
    margin-top: 34px;
  }
}

@media screen and (min-width: 1000px) {
  .footer__block-item {
    flex: 1 0 auto;
  }

  .footer__block-item--text {
    flex-basis: 300px;
  }

  .footer__block-item--newsletter {
    flex-basis: 350px;
  }

  .footer__block-item--links {
    max-width: 300px;
  }

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

  .footer__aside-item--copyright {
    align-self: flex-end;
    margin-top: 0 !important;
    margin-bottom: -8px;
    text-align: left;
  }

  .footer__aside-item--localization,
  .footer__aside-item--copyright {
    width: auto;
  }
}

/* This is a bit hacky, but it allows to have a clearfix when the search bar on mobile is expanded */
#shopify-section-header::after {
  content: "";
  display: table;
  clear: both;
}

/**
 * --------------------------------------------------------------------
 * HEADER
 * --------------------------------------------------------------------
 */
.header {
  position: relative;
  padding: 13px 0;

  background: {
      {
      settings.header_background
    }
  }

  ;

  color: {
      {
      settings.header_text_color
    }
  }

  ;
  transition: margin-bottom 0.25s ease-in-out;
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

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

.header__logo-link {
  display: block;
}

.header__logo {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}

.header__logo-image {
  display: block;
  vertical-align: middle;
  max-height: 130px;
}

.header__mobile-nav {
  display: inline-block;
  margin-right: 20px;
}

.header__desktop-nav {
  position: relative;
  margin-right: 22px;
}

.header__mobile-nav-toggle {
  top: -1px;
  /* Slight alignment for pixel perfect :D */
}

.header__desktop-nav-toggle {
  height: 44px;
  padding: 0 15px;

  border: 1px solid rgba({
      {
      settings.header_light_text_color
    }
  }

  , 0.3);
border-radius: 3px;

font-weight: {
    {
    text_font_medium.weight
  }
}

;
/* Safari 10 does not allow using flexbox on button... so we have to use an additional wrapper */
}

.header__desktop-nav-toggle>span {
  display: flex;
  align-items: center;
}

.header__desktop-nav-text {
  position: relative;
  top: 1px;
  /* Slight alignment for the pixel perfect */
}

.header__search-bar-wrapper {
  flex: 1 0 auto;
}

.header {
  /* This is not super beautiful, but it allows to make sure the icon wrapper have consistent height as inline-block are pain in the ass */
}

.header .icon--account,
.header .icon--hamburger,
.header .icon--hamburger-mobile,
.header .icon--search,
.header .icon--cart,
.header .icon--close {
  display: block;
}

.header .icon--account {
  width: 20px;
  height: 22px;
}

.header .icon--hamburger {
  width: 20px;
  height: 14px;
}

.header .icon--hamburger-mobile {
  width: 20px;
  height: 16px;
}

.header .icon--cart {
  width: 27px;
  height: 24px;
}

.header .icon--search {
  width: 22px;
  height: 22px;
  margin: 0 auto;
}

.header .icon--close {
  width: 19px;
  height: 19px;
}

@media screen and (max-width: 640px) {

  /* This trick allows to enforce a minimum height for header on mobile */
  .header {
    display: flex;
    align-items: center;
    min-height: 64px;
  }

  .header>.container {
    width: 100%;
  }

  /* On mobile, if the search is expanded by default, we must add extra margin to the header element to prevent the search to
     overlap the rest of the content */
  .header--search-expanded {
    margin-bottom: 59px;
    /* 15px is the padding below the search */
  }
}

@media screen and (min-width: 641px) {
  .header {
    padding: 20px 0;
  }

  .header__inner {
    flex-wrap: nowrap;
  }

  .header__logo {
    margin-right: 35px;
  }
}

@media screen and (min-width: 1000px) {

  /* This allows to reduce the padding if header background is the same as secondary background to avoid space that is too big */
  .icon--hamburger {
    margin-right: 15px;
  }
}

@media screen and (min-width: 1280px) {
  .header__logo {
    margin-right: 40px;
  }

  .header__desktop-nav {
    margin-right: 30px;
  }

  .header__desktop-nav-toggle {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--1px;
  }
}

/**
 * --------------------------------------------------------------------
 * HEADER ACTION LIST
 * --------------------------------------------------------------------
 */
.header__action-list {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.header__action-item {
  padding: 0 9px;
}

.header__action-item:last-child {
  padding-right: 4px;
  /* Last item is the cart, and we use a small padding to accommodate the presence of the cart item count */
}

.header__action-item-link {
  display: block;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
}

.header__action-item-link--small {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
  font-weight: normal;
}

.header__action-item-title {
  display: block;
  margin-bottom: -6px;

  color: {
      {
      settings.header_light_text_color
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  font-weight: normal;
}

.header__action-item--currency,
.header__action-item--locale {
  margin-right: 25px;
  padding: 0 24px;
}

.header__currency-selector {
  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
}

.header__action-item .icon--arrow-bottom {
  width: 12px;
  height: 8px;
  margin-left: 4px;
}

.header__action-item .icon--lock-2 {
  width: 12px;
  height: 15px;
}

.header__action-item .icon--lock-2+span {
  margin-left: 14px;
}

.header__cart-icon {
  margin-left: -2px;
}

.header__cart-count {
  display: inline-flex;
  position: absolute;
  right: -14px;
  top: -7px;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 4px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
  text-align: center;

  background: {
      {
      settings.header_accent_color
    }
  }

  ;

  color: {
      {
      settings.secondary_background
    }
  }

  ;
  border-radius: 1.75em;
  transition: -webkit-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out,
  -webkit-transform 0.35s ease-in-out;
  will-change: transform;
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  z-index: 1;
}

.header__cart-toggle[aria-expanded=true] .header__cart-count,
.header__cart-toggle:hover .header__cart-count {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

@media screen and (max-width: 640px) {

  /* This code is not optimal but the cart icon has a specific positioning so we override it this way */
  .header__cart-icon .icon-state__secondary.icon-state__secondary {
    left: 8px;
  }

  .header__action-item .icon--lock-2 {
    display: block;
  }

  /*
    IMPLEMENTATION NOTE:
    I am using a transition on margin-bottom instead of doing a simpler and more efficient transform. However the issue is that we are doing
    another transition on margin-bottom for the header. If I would apply a transform here, due to the fact the transform is hardware accelerated,
    they will move at a slightly different speed, which is not desirable. It's therefore either all HW-accelerated or not.
   */
  .header__search-bar-wrapper {
    visibility: hidden;
    position: absolute;
    /* We move it outside of the document for easier positioning for other elements */
    padding: 0 20px 0 20px;
    width: 100%;
    bottom: 0;
    left: 0;

    background: {
        {
        settings.header_background
      }
    }

    ;
    z-index: -1;
    /* because the position is absolutely positioned it get a higher z-index, but we need to revert it to avoid any trouble */
    transition: visibility 0.25s ease-in-out,
    margin-bottom 0.25s ease-in-out;
  }

  .header__search-bar-wrapper.is-visible {
    visibility: visible;
    margin-bottom: -59px;
  }

  /* When the user focus it, it becomes a fixed element */
  .header__search-bar-wrapper.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 10;
  }
}

@media screen and (min-width: 641px) {
  .header__action-list {
    padding-left: 28px;
  }

  .header__action-item,
  .header__action-item-content {
    position: relative;
  }

  .header__action-item-content {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }

  .header__action-item .icon--lock-2 {
    vertical-align: text-top;
  }
}

@media screen and (min-width: 1000px) {
  .header__action-list {
    padding-left: 5px;
  }

  .header__action-item:not(:last-child)::after {
    position: absolute;
    content: "";
    right: 0;
    top: calc(50% - 17px);

    background: rgba({
        {
        settings.header_light_text_color
      }
    }

    , 0.3);
  height: 34px;
  width: 1px;
}

.header__action-item--currency {
  margin-right: 20px;
}
}

@media screen and (min-width: 1000px) and (max-width: 1279px) {
  .header__action-item:not(.header__action-item--currency):not(.header__action-item--locale)::after {
    display: none;
  }

  .header__action-item--currency+.header__action-item--locale {
    padding-left: 9px;
  }

  /* Not really beautiful but coulnd't find a better way */
  .header__action-item.hidden-tablet-and-up:first-child+.header__action-item {
    padding-left: 35px;
  }
}

@media screen and (min-width: 1280px) {
  .header__action-item {
    padding: 0 35px;
  }

  .header__action-item:last-child {
    padding-right: 0;
  }

  .header__action-item--currency,
  .header__action-item--locale {
    margin-right: 0;
  }

  .header__cart-icon {
    display: inline-block;
    margin-right: 22px;
    top: -1px;
    /* Slight adjustment for the pixel perfect muahah */
  }
}

/**
 * --------------------------------------------------------------------
 * SEARCH
 * --------------------------------------------------------------------
 */
.search-bar {
  position: relative;
  min-width: 100%;
  padding-bottom: 15px;
  z-index: 1;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;
}

/* Top part */
.search-bar__top {
  position: relative;
  display: flex;
  height: 44px;
  align-items: center;
  border-radius: 3px;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  color: {
      {
      settings.text_color
    }
  }

  ;
  z-index: 1;
}

.search-bar__input-wrapper {
  position: relative;
  flex: 1 0 auto;
  height: 100%;
}

.search-bar__input {
  height: 100%;
  width: 100%;
  padding: 0 15px 1px 15px;
  border: none;
  background: transparent;
  line-height: normal;

  color: {
      {
      settings.heading_color
    }
  }

  ;
  -webkit-appearance: none;
}

.search-bar__input::-webkit-input-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
  opacity: 1;
}

.search-bar__input::-moz-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
  opacity: 1;
}

.search-bar__input:-ms-input-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
  opacity: 1;
}

.search-bar__input::-ms-input-placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
  opacity: 1;
}

.search-bar__input::placeholder {
  color: {
      {
      settings.text_color
    }
  }

  ;
  opacity: 1;
}

.search-bar__input::-ms-clear {
  display: none;
}

.search-bar__input:focus {
  outline: none;
}

.search-bar__input-clear {
  position: absolute;
  right: 15px;
  top: calc(50% - 9px);
  display: none;
  opacity: 0.5;
}

.search-bar__input-clear svg {
  display: block;
  width: 17px;
  height: 17px;
}

.search-bar__input.is-filled+.search-bar__input-clear {
  display: block;
}

.search-bar__filter {
  display: none;

  border-left: 1px solid rgba({
      {
      settings.header_light_text_color
    }
  }

  , 0.3);
}

.search-bar__filter-label {
  display: block;
  height: 44px;
  padding: 0 30px 0 25px;
  line-height: 43px;
  /* The -1px allows to account for rounding errors */
}

.search-bar__filter-label svg {
  margin-left: 11px;
  width: 12px;
  height: 8px;
}

.search-bar__submit {
  flex: none;
  width: 50px;
  height: 100%;

  color: {
      {
      settings.secondary_background
    }
  }

  ;

  background: {
      {
      settings.header_accent_color
    }
  }

  ;
  border-radius: 0 3px 3px 0;
}

.search-bar__submit svg {
  position: relative;
}

.search-bar__submit .icon--search {
  width: 21px;
  height: 21px;
}

.search-bar__submit .icon--search-loader {
  display: none;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}

/* Inner */
.search-bar__inner {
  position: absolute;
  visibility: hidden;
  left: -20px;
  top: calc(100% + 8px);
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  color: {
      {
      settings.text_color
    }
  }

  ;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
}

@supports (--css: variables) {
  .search-bar__inner {
    height: calc(100vh - var(--header-height) - 25px);
  }
}

/*
Implementation note: by default the theme featured a small animation from top to bottom when opening the search. However,
we realized that on Safari (and only on Safari desktop) this caused some subtle bug where the links were not clickable. I
have literally spent hours on this issue and, despite Safari showing everything correctly visually, and even showing the
link when you hover with the mouse, it seems that an issue at browser level prevents this to work. I have therefore decided
to turn off this for now...
 */
.search-bar__inner-animation {
  height: 100%;
  /*transform: translateY(-100%);
  transition: transform 0.15s ease-in-out, visibility 0.15s ease-in-out;
  will-change: transform;*/
}

.search-bar__results,
.search-bar__menu-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  transition: visibility 0.1s ease-in-out;
}

.search-bar__results[aria-hidden=false],
.search-bar__menu-wrapper[aria-hidden=false] {
  visibility: visible;
}

.search-bar.is-expanded .search-bar__inner-animation {
  /*transform: translateY(0%);*/
  visibility: visible;
}

.search-bar__empty-state {
  text-align: center;
  padding: 50px 0;
}

/* To reduce the complexity of JavaScript and use Liquid as much as possible, the live search will output both
   the result for products and/or pages and blogs. We therefore then hide possible duplicate status in CSS */
.search-bar__result-products~.search-bar__empty-state {
  display: none;
}

/* Quick links */
.search-bar__menu-title {
  margin-bottom: 4px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
}

.search-bar__menu-wrapper {
  padding: 18px 0 12px 0;
  height: 100%;
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
}

.search-bar__menu-title,
.search-bar__menu-link {
  padding-left: 20px;
  padding-right: 20px;
}

.search-bar__menu-link {
  display: block;
  padding-top: 6px;
  padding-bottom: 6px;
  transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
}

.search-bar__menu-link:hover,
.search-bar__menu-link:focus {
  background: rgba({
      {
      settings.accent_color
    }
  }

  , 0.08);

color: {
    {
    settings.accent_color
  }
}

;
outline: none;
}

/* Results */
.search-bar__results .skeleton-container {
  display: none;
}

.search-bar__results {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  height: 100%;
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
}

.search-bar__result-category {
  margin: 0;
  padding: 4px 20px;
  text-transform: uppercase;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  background: {
      {
      settings.background
    }
  }

  ;

  box-shadow: 0 1px {
      {
      settings.border_color
    }
  }

  ,
  0 -1px {
      {
      settings.border_color
    }
  }

  ;
}

.search-bar__result-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  transition: background 0.2s ease-in-out;
}

.search-bar__result-item:not(.search-bar__result-item--skeleton):hover,
.search-bar__result-item:not(.search-bar__result-item--skeleton):focus {
  background: rgba({
      {
      settings.accent_color
    }
  }

  , 0.08);
outline: none;
}

.search-bar__result-item--skeleton {
  max-width: 300px;
}

.search-bar__image-container {
  flex: none;
  width: 60px;
  margin-right: 20px;
}

.search-bar__image-container img {
  color: transparent;
  /* allows to remove the alt on Firefox during image loading */
}

.search-bar__item-info {
  flex: 1 0 0;
}

.search-bar__item-title {
  margin-bottom: 0;
  line-height: 1.4;
}

.search-bar__item-price {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.search-bar__result-link {
  display: block;
  padding: 5px 20px;
  transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.search-bar__result-link:hover,
.search-bar__result-link:focus {
  color: {
      {
      settings.accent_color
    }
  }

  ;

  background: rgba({
      {
      settings.accent_color
    }
  }

  , 0.08);
outline: none;
}

.search-bar__view-all {
  display: block;
  padding: 10px;
  text-align: center;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  color: {
      {
      settings.accent_color
    }
  }

  ;
  transition: background 0.2s ease-in-out;
}

.search-bar__view-all:hover,
.search-bar__view-all:focus {
  background: rgba({
      {
      settings.accent_color
    }
  }

  , 0.08);
outline: none;
}

.search-bar__view-all svg {
  width: 6px;
  height: 10px;
  margin-left: 12px;
}

.search-bar__view-all path {
  stroke-width: 2.5px;
}

/* Loading state */
.search-bar.is-loading .search-bar__results-inner,
.search-bar.is-loading .search-bar__submit .icon--search {
  display: none;
}

.search-bar.is-loading .skeleton-container {
  display: block;
}

.search-bar.is-loading .search-bar__submit .icon--search-loader {
  display: block;
}

/* This is not really mobile-first for this specific part, but the mobile styles are way too specific so I prefer to have them here rather than having complex overwritings */
@media screen and (max-width: 640px) {
  .search-bar {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  .search-bar__inner {
    max-height: 0;
    /* This is needed to fix a bug on iOS, DO NOT REMOVE */
    height: calc(100vh - 44px - 18px);
    /* 18px is padding around input element */
    top: 100%;
  }

  .search-bar__top-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .search-bar__top {
    flex-grow: 1;
  }

  .search-bar__close-button {
    width: 0;
    overflow: hidden;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--1px;
    opacity: 0;
    transition: width 0.25s ease-in-out,
    opacity 0.25s ease-in-out;
  }

  .search-bar__close-text {
    padding-left: 22px;
  }

  .header__search-bar-wrapper.is-visible .search-bar {
    opacity: 1;
    transition-delay: 0.15s;
  }

  .header__search-bar-wrapper.is-fixed .search-bar {
    padding: 9px 0;
  }

  .header__search-bar-wrapper.is-fixed .search-bar__inner {
    max-height: none;
    visibility: visible;
  }

  .header__search-bar-wrapper.is-fixed .search-bar__inner-animation {
    transition: none;
  }

  .header__search-bar-wrapper.is-fixed .search-bar__close-button {
    opacity: 1;
  }
}

@media screen and (min-width: 641px) {
  .search-bar {
    margin-top: 0;
    padding-bottom: 0;
    min-width: 0;
  }

  .search-bar__inner {
    width: calc(100% - 40px);
    /* we do a little trick here to being able to use overflow hidden while still displaying box-shadow */
    top: 100%;
    left: -5px;
  }

  @supports (--css: variables) {
    .search-bar__inner {
      height: calc(100vh - var(--header-height) - 40px);
    }
  }

  .search-bar__submit .icon--search {
    top: 1px;
    /* Fix a small inconsistency in alignment I can't understand (seems to be due to half-pixel issue) */
  }

  .search-bar__result-category {
    padding-left: 15px;
  }

  .search-bar__results {
    max-height: 310px;
    height: auto;
  }

  @supports (--css: variables) {
    .search-bar__results {
      max-height: calc(100vh - var(--header-height) - 40px);
    }
  }

  .search-bar__menu-wrapper {
    max-height: 310px;
    height: auto;
  }

  .search-bar__results,
  .search-bar__menu-wrapper {
    left: 5px;
    width: calc(100% - 10px);
    border-radius: 0 0 3px 3px;
  }

  .search-bar__menu-title,
  .search-bar__menu-link {
    padding-left: 25px;
    padding-right: 25px;
  }

  /* Expanded state */
  .search-bar.is-expanded .search-bar__top {
    border-bottom-left-radius: 0;

    box-shadow: 0 -1px {
        {
        settings.border_color
      }
    }

    inset;
  }
}

@media screen and (min-width: 1280px) {
  .search-bar__filter {
    position: relative;
    display: block;
    height: 100%;
  }

  .search-bar__filter select {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-appearance: none;
  }
}

.map {
  padding: 0 20px;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  border-radius: 3px;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.map__store-item:not(:last-child) {
  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.map__store-name {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}

.map__store-name svg {
  width: 12px;
  height: 8px;
}

.map__icon-container {
  -webkit-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.map__store-name[aria-expanded=true] .map__icon-container {
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.map__store-collapsible {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease-in-out;
}

.map__store-inner {
  margin-top: -0.425em;
}

.map__store-address {
  margin-bottom: 15px;
}

.map__store-address>p {
  margin-bottom: 0 !important;
}

.map__store-hours {
  margin-bottom: 22px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.map__direction-link,
.map__map-container {
  margin-bottom: 30px;
}

.map__map-container {
  position: relative;
  height: 160px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.map__gmap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

@media screen and (min-width: 641px) {
  .map__map-container {
    height: 300px;
  }
}

@media screen and (min-width: 1000px) {
  .map {
    display: flex;
    height: 405px;
    padding: 0;
  }

  .map__store-list {
    width: 50%;
    max-width: 580px;

    border-right: 1px solid {
        {
        settings.border_color
      }
    }

    ;
  }

  .map__map-container {
    height: 100%;
    flex: 1 0 auto;
    margin: 0;
  }

  .map__store-list {
    padding: 0 40px 0 30px;
    overflow: auto;
  }

  .map__store-name {
    padding: 20px 0;
  }

  .map__store-address {
    margin-bottom: 22px;
  }
}

/**
 * --------------------------------------------------------------------
 * MEDIA API
 *
 * All those colors have been defined by Shopify and standardized by them
 * --------------------------------------------------------------------
 */
.plyr.plyr--full-ui.plyr--video {
  color: {
      {
      settings.text_color
    }
  }

  ;
  background-color: transparent;
}

.plyr.plyr--full-ui.plyr--video .plyr__video-wrapper {
  background-color: transparent;
}

.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video {
  /* stylelint-disable-next-line */
}

.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video {
  /* stylelint-disable-next-line */
}

.plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video {
  /* stylelint-disable-next-line */
}

.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster {
  background-color: #000;
}

.plyr.plyr--full-ui.plyr--video .plyr__controls {
  background-color: {
      {
      settings.secondary_background
    }
  }

  ;

  border-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.05);
}

.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid {
  background-color: {
      {
      settings.secondary_background
    }
  }

  ;

  border-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.05);
}

.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid.plyr__tab-focus,
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid:hover {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.55);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-moz-range-thumb {
  box-shadow: 2px 0 0 0 {
      {
      settings.secondary_background
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-thumb {
  box-shadow: 2px 0 0 0 {
      {
      settings.secondary_background
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 0 0 0 {
      {
      settings.secondary_background
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba({
        {
        settings.text_color
      }
    }

    , 0.6) var(--value, 0));
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-moz-range-track {
  background-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-fill-upper {
  background-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 4px rgba({
      {
      settings.text_color
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range].plyr__tab-focus::-moz-range-track {
  box-shadow: 0 0 0 4px rgba({
      {
      settings.text_color
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range].plyr__tab-focus::-ms-track {
  box-shadow: 0 0 0 4px rgba({
      {
      settings.text_color
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba({
      {
      settings.text_color
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-ms-thumb {
  box-shadow: 0 0 0 3px rgba({
      {
      settings.text_color
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba({
      {
      settings.text_color
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip {
  background-color: {
      {
      settings.text_color
    }
  }

  ;

  color: {
      {
      settings.secondary_background
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip::before {
  border-top-color: {
      {
      settings.text_color
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer {
  background-image: linear-gradient(-45deg, rgba({
        {
        settings.text_color
      }
    }

    , 0.6) 25%, transparent 25%, transparent 50%, rgba({
      {
      settings.text_color
    }
  }

  , 0.6) 50%, rgba({
    {
    settings.text_color
  }
}

, 0.6) 75%, transparent 75%, transparent);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range] {
  color: {
      {
      settings.secondary_background
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-moz-range-thumb {
  box-shadow: 2px 0 0 0 {
      {
      settings.text_color
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-ms-thumb {
  box-shadow: 2px 0 0 0 {
      {
      settings.text_color
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 0 0 0 {
      {
      settings.text_color
    }
  }

  ;
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba({
        {
        settings.secondary_background
      }
    }

    , 0.6) var(--value, 0));
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-moz-range-track,
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-ms-fill-upper {
  background-color: rgba({
      {
      settings.secondary_background
    }
  }

  , 0.6);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 4px rgba({
      {
      settings.secondary_background
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range].plyr__tab-focus::-moz-range-track {
  box-shadow: 0 0 0 4px rgba({
      {
      settings.secondary_background
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range].plyr__tab-focus::-ms-track {
  box-shadow: 0 0 0 4px rgba({
      {
      settings.secondary_background
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba({
      {
      settings.secondary_background
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-ms-thumb {
  box-shadow: 0 0 0 3px rgba({
      {
      settings.secondary_background
    }
  }

  , 0.25);
}

.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba({
      {
      settings.secondary_background
    }
  }

  , 0.25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
  background: {
      {
      settings.secondary_background
    }
  }

  ;

  border-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.05);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 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({
      {
      settings.text_color
    }
  }

  , 0.55);

background: rgba({
    {
    settings.text_color
  }
}

, 0.05);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
  border-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.05);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
  background: {
      {
      settings.secondary_background
    }
  }

  ;

  border-color: rgba({
      {
      settings.text_color
    }
  }

  , 0.05);
}

.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({
      {
      settings.text_color
    }
  }

  , 0.55);
}

/**
 * --------------------------------------------------------------------
 * VIDEO WRAPPER
 * --------------------------------------------------------------------
 */
.video-wrapper {
  position: relative;
  cursor: pointer;
}

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

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

/* For native one we use a different thing */
.video-wrapper--native::after {
  display: none;
}

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

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

.video-wrapper__image-wrapper {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

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

.video-wrapper__image {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  font-family: "object-fit: cover; object-position: center";
  /* IE 11 polyfill */
}

.icon--play {
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.4));
}

.video-wrapper .icon--play {
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  height: 80px;
  width: 80px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .video-wrapper:hover .icon--play {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

/**
 * --------------------------------------------------------------------
 * VIDEO LIST
 * --------------------------------------------------------------------
 */
.video-list {
  margin: 20px 0;
}

.video-list__item {
  max-width: 855px;
  margin: 0 auto;
}

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

.video-list__item .video-wrapper iframe {
  visibility: hidden;
  height: 0;
  width: 0;
  /* setting dimensions to zero allows to fix a bug in Safari iOS on which the iframe will capture all the clicks */
}

.video-list__item.is-playing .video-wrapper__image-wrapper {
  visibility: hidden;
  opacity: 0;
}

.video-list__item.is-playing iframe {
  visibility: visible;
  height: 100%;
  width: 100%;
}

/**
 * --------------------------------------------------------------------
 * VIDEO LIST
 * --------------------------------------------------------------------
 */
.video-preview-list {
  padding: 5px 0;
}

.video-preview-list .icon--play {
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  height: 40px;
  width: 40px;
}

.video-preview-list__item {
  display: inline-block;
  position: relative;
  width: 120px;
  vertical-align: top;
  cursor: pointer;
  margin: 0 10px;
}

.video-preview-list__item:first-child {
  margin-left: 20px;
}

.video-preview-list__item:last-child {
  margin-right: 20px;
}

.video-preview-list__item .video-wrapper {
  margin: 0;
}

.video-preview-list__item::after {
  position: absolute;
  content: "";
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  border-radius: 3px;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border 0.2s ease-in-out;
}

.video-preview-list__item.is-selected::after {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;
}

.video-preview-list__item.is-selected .icon--play {
  opacity: 0;
}

@media screen and (min-width: 641px) {
  .video-preview-list__item:first-child {
    margin-left: 40px;
  }

  .video-preview-list__item:last-child {
    margin-right: 40px;
  }
}

@media screen and (min-width: 1000px) {
  .video-preview-list__item {
    width: 165px;
  }
}

/**
 * --------------------------------------------------------------------
 * 3D MODEL WRAPPER
 * --------------------------------------------------------------------
 */
.model-wrapper {
  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%;
}

.mosaic {
  margin: 0 -10px -20px -10px;
}

.mosaic__item {
  padding: 0 10px 20px 10px;
}

.mosaic__item> :first-child {
  min-height: 240px;
}

.mosaic--large .mosaic__item> :first-child {
  min-height: 280px;
}

@media screen and (max-width: 999px) {

  /* On mobile we increase the height of some elements (so that elements that appear bigger on desktop also appear bigger on mobile */
  .mosaic--two-columns .mosaic__column:first-child .mosaic__item> :first-child,
  .mosaic--three-columns .mosaic__column:nth-child(2) .mosaic__item> :first-child {
    min-height: 340px;
  }
}

@media screen and (min-width: 641px) {
  .mosaic {
    margin: 0 -15px -30px -15px;
  }

  .mosaic__item {
    padding: 0 15px 30px 15px;
  }
}

@media screen and (min-width: 1000px) {
  .mosaic {
    display: flex;
  }

  .mosaic__column {
    display: flex;
    flex-direction: column;
    flex: 1 0 0%;
  }

  .mosaic__item {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .mosaic__item> :first-child {
    flex: 1 0 auto;
    height: 100%;
    min-height: 260px;
  }

  .mosaic--small .mosaic__item> :first-child {
    min-height: 225px;
  }

  .mosaic--large .mosaic__item> :first-child {
    min-height: 300px;
  }

  .mosaic--two-columns {
    /* In this configuration the first column is larger */
  }

  .mosaic--two-columns .mosaic__column:first-child {
    flex-grow: 1.38;
  }

  .mosaic--three-columns {
    /* In this configuration the second column is twice as large as others */
  }

  .mosaic--three-columns .mosaic__column:nth-child(2) {
    flex-grow: 1.38;
  }
}

/**
 * --------------------------------------------------------------------
 * DROPDOWN MENU
 * --------------------------------------------------------------------
 */
.nav-dropdown {
  position: absolute;
  top: 100%;
  padding: 16px 0;
  list-style: none;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  color: {
      {
      settings.text_color
    }
  }

  ;
  border-radius: 0 0 3px 3px;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s ease-in-out,
  visibility 0.2s ease-in-out;
}

.nav-dropdown:not(.nav-dropdown--floating) {
  left: -15px;
}

.nav-dropdown--floating {
  margin-top: 7px;
  border: none;
  border-radius: 3px;
}

.nav-dropdown--floating::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.1), 5px 0 5px -2px rgba(0, 0, 0, 0.1), 0 -5px 5px -2px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.nav-dropdown--glued:not(.nav-dropdown--inverse) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.nav-dropdown--glued.nav-dropdown--inverse {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.nav-dropdown--fixed {
  min-height: 420px;
}

.nav-dropdown--restrict {
  max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 40px);
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

/* We have a way to set a max height for browsers supporting CSS variables */
@supports (--css: variables) {
  .nav-bar .nav-dropdown .nav-dropdown {
    max-height: calc(100vh - var(--distance-to-top, 0px) - 40px);
    overflow: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
  }
}

.nav-dropdown[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
}

.nav-dropdown .icon--nav-triangle-borderless {
  position: absolute;
  bottom: 100%;
  left: 16px;
  width: 20px;
  height: 9px;
  z-index: 1;
}

.nav-dropdown .icon--nav-triangle-left {
  position: absolute;
  top: 23px;
  right: 100%;
  height: 20px;
  width: 9px;
  z-index: 1;
}

.nav-dropdown__item:not(.has-mega-menu) {
  position: relative;
}

.nav-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 60px 2px 20px;
  cursor: pointer;
}

.nav-dropdown__link svg {
  position: relative;
  width: 8px;
  height: 12px;
  top: 1px;
  margin: 0 -40px 0 65px;
}

.nav-dropdown__link[aria-expanded=true] {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

/* Handle sub-levels */
.nav-dropdown .nav-dropdown {
  left: 100%;
  top: -17px;
  /* 16px + 1px of border */
  margin-top: 0;
  min-width: 0;
  border-radius: 0 3px 3px 0;
}

.nav-dropdown--inverse .nav-dropdown {
  right: 100%;
  left: auto;
  border-radius: 3px 0 0 3px;
}

.nav-dropdown--inverse .nav-dropdown .icon--nav-triangle-left {
  right: auto;
  left: 100%;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.nav-dropdown .nav-dropdown--floating {
  top: -16px;

  /* floating dropdown do not have border so there is one less pixel */
  border-left: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

/**
 * --------------------------------------------------------------------
 * MEGA MENU
 * --------------------------------------------------------------------
 */
.mega-menu {
  position: absolute;
  width: 100vw;
  left: 0;
  top: 100%;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  border-radius: 0 0 3px 3px;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out,
  visibility 0.2s ease-in-out;
}

.mega-menu--floating {
  max-width: 0;
}

.mega-menu[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
}

.mega-menu__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 25px 0 0 0;
  max-height: 100%;
  min-height: 100%;
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
}

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

.mega-menu__promo {
  display: block;
  flex: 0 1 230px;
  width: 230px;
  min-width: 200px;
  margin: 0 0 30px 50px;
  white-space: normal;
  text-align: center;
}

.mega-menu__promo+.mega-menu__promo {
  margin-left: 20px;
}

.mega-menu__column-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  margin: 0 -40px;
  min-width: 0;
}

@supports (display: grid) {
  .mega-menu__column-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

.mega-menu__column {
  display: block;
  flex: 0 1 auto;
  margin: 0 30px 30px 30px;
}

.mega-menu:not(.mega-menu--floating) .mega-menu__column:first-child {
  margin-left: 0 !important;
}

.mega-menu:not(.mega-menu--floating) .mega-menu__column:last-child {
  margin-right: 0 !important;
}

.mega-menu__title {
  display: block;
  margin-bottom: 10px;
}

.mega-menu__linklist {
  list-style: none;
}

.mega-menu__link {
  display: block;
  padding: 5px 0 6px 0;
  line-height: 1.4;
}

.mega-menu__image-wrapper {
  margin: 5px 0 22px 0;
  border-radius: 3px;
  overflow: hidden;
}

.mega-menu__promo .aspect-ratio {
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  /* This is necessary to fix an issue with rounding pixels on Chrome */
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.mega-menu__promo:hover .aspect-ratio {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

.mega-menu__promo:hover .mega-menu__image-heading {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.mega-menu__image-heading {
  display: block;
  margin-bottom: 7px;
  transition: color 0.2s ease-in-out;
}

.mega-menu__image-text {
  line-height: 1.5;
}

/* When inside a nav-bar (inline navigation) we have to restrict the height, so that in case it contains way too many links
   it can become scrollable. The 40px is just a way to give a bit more space below */
.nav-bar .mega-menu {
  max-height: calc(100vh - var(--header-height, 0px) - var(--announcement-bar-height, 0px) - 40px);
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

@media screen and (min-width: 1280px) {
  .mega-menu__column {
    margin-left: 40px;
    margin-right: 40px;
  }

  .mega-menu__inner--large .mega-menu__column {
    margin-left: 50px;
    margin-right: 50px;
  }

  .mega-menu__promo {
    flex-basis: 290px;
    width: 290px;
  }
}

@media screen and (min-width: 1440px) {
  .mega-menu__inner--center .mega-menu__column {
    margin-left: 45px;
    margin-right: 45px;
  }

  .mega-menu__inner--large .mega-menu__column {
    margin-left: 60px;
    margin-right: 60px;
  }

  .mega-menu__promo {
    min-width: 240px;
  }
}

/* Floating mega-menu variation */
.mega-menu--floating {
  width: 100vw;
  height: 100%;
  left: 100%;
  top: 0;
  border: none;
  border-radius: 0 3px 3px 0;

  border-left: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.mega-menu--floating::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.1), 5px 0 5px -2px rgba(0, 0, 0, 0.1), 0 -5px 5px -2px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.mega-menu--floating .mega-menu__inner {
  margin: 0;
  padding-right: 30px;
  padding-left: 25px;
  /*max-width: 0;*/
  /* We do that to prevent overflow as the real size is dynamically calculated based on available space */
}

.mega-menu--floating .mega-menu__title {
  margin-bottom: 5px;
}

.mega-menu--floating .mega-menu__column {
  display: block;
  flex: 0 0 170px;
  margin-right: 30px;
  margin-left: 30px;
  white-space: normal;
}

.mega-menu--floating .mega-menu__column-list {
  margin: 0 -30px;
}

/**
 * --------------------------------------------------------------------
 * NAV BAR (this one is the inline navigation used on desktop)
 * --------------------------------------------------------------------
 */
.nav-bar {
  display: none;
}

@media screen and (min-width: 1000px) {
  .nav-bar {
    display: block;
    position: relative;
    left: 0;
    width: 100%;

    border-bottom: 1px solid {
        {
        settings.border_color
      }
    }

    ;

    background: {
        {
        settings.secondary_background
      }
    }

    ;
  }

  .nav-bar::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 40px;
    right: 0;
    top: 0;

    background: linear-gradient(to right, rgba({
          {
          settings.secondary_background
        }
      }

      , 0.1), rgba({
        {
        settings.secondary_background
      }
    }

    , 0.6) 35%, {
    {
    settings.secondary_background
  }
});
}

.nav-bar__item {
  position: relative;
  display: inline-block;
  margin-right: 35px;
  padding: 17px 0;
}

.nav-bar__item--static {
  position: static;
}

.nav-bar__item>.nav-dropdown {
  min-width: calc(100% + 20px);
}

.nav-bar__link {
  display: block;
  cursor: pointer;
}

.nav-bar__link .icon--arrow-bottom {
  width: 12px;
  height: 8px;
  margin-left: 10px;
}

.nav-bar__link .icon--nav-triangle {
  opacity: 0;
  position: absolute;
  bottom: -1px;
  width: 20px;
  height: 9px;
  margin-left: -16px;
  z-index: 2;
  transition: 0.2s ease-in-out;
}

.nav-bar__link[aria-expanded=true] {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.nav-bar__link[aria-expanded=true] .icon--nav-triangle {
  opacity: 1;
}
}

/**
 * --------------------------------------------------------------------
 * MOBILE MENU
 * --------------------------------------------------------------------
 */
.mobile-menu {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 100%;
  visibility: hidden;
  max-height: 0;
  /* This is needed to fix a bug on iOS, DO NOT REMOVE */
  z-index: 1;
  opacity: 0;

  color: {
      {
      settings.text_color
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  transition: opacity 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  max-height 0s linear 0.25s,
  -webkit-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out,
  transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  max-height 0s linear 0.25s;
  transition: opacity 0.25s ease-in-out,
  transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  max-height 0s linear 0.25s,
  -webkit-transform 0.25s ease-in-out;
  will-change: transform;
}

.mobile-menu .icon--arrow-right,
.mobile-menu .icon--arrow-left {
  width: 8px;
  height: 12px;
}

.mobile-menu[aria-hidden=false] {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
}

.mobile-menu__inner {
  position: relative;
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
}

.mobile-menu .icon--nav-triangle-borderless {
  position: absolute;
  bottom: 100%;
  left: 20px;
  width: 18px;
  height: 8px;
  z-index: 1;
}

.mobile-menu__panel {
  position: relative;
  height: 100%;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  transition: visibility 500ms cubic-bezier(0.23, 1, 0.32, 1),
  -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1),
  visibility 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1),
  visibility 500ms cubic-bezier(0.23, 1, 0.32, 1),
  -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-menu__panel.is-nested {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: 1;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.mobile-menu__section {
  padding: 16px 20px;
}

.mobile-menu__section--loose {
  padding-top: 18px;
  padding-bottom: 18px;
}

.mobile-menu__section:not(:last-child) {
  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.mobile-menu__section.is-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  z-index: 1;
}

.mobile-menu__nav {
  list-style: none;
}

.mobile-menu__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0 7px 0;
}

.mobile-menu__back-button {
  display: block;
  width: 100%;
  text-align: left;
}

.mobile-menu__back-button svg {
  margin-right: 8px;
  vertical-align: -1px;
}

.mobile-menu__nav-list {
  margin-top: 2px;
}

.mobile-menu__nav-list-toggle {
  width: 100%;
  text-align: left;
  padding: 4px 0;
  /* allows to increase touch area a bit */
}

.mobile-menu__nav-list-toggle svg {
  width: 12px;
  height: 8px;
  margin-left: 12px;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

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

.mobile-menu__nav-list-item {
  margin-bottom: 22px;
}

.mobile-menu__nav-collapsible {
  height: 0;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

.mobile-menu__nav-collapsible-content {
  margin-top: 4px;
}

.mobile-menu__promo {
  display: block;
  padding: 20px 0 25px 0;
  text-align: center;
}

.mobile-menu__image-wrapper {
  margin-bottom: 22px;
  border-radius: 3px;
  overflow: hidden;
}

.mobile-menu__image-heading {
  display: block;
  margin-bottom: 0;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--3px;
}

.mobile-menu__image-text {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;
}

.mobile-menu__promo-list {
  display: flex;
  flex-flow: row nowrap;
  margin-left: -10px;
  margin-right: -10px;
}

.mobile-menu__promo-list .mobile-menu__promo-item {
  flex: 0 0 auto;
  width: 81%;
  white-space: normal;
  scroll-snap-align: center;
}

.mobile-menu__promo-list .mobile-menu__promo {
  margin-left: 10px;
  margin-right: 10px;
}

.scroller .mobile-menu__promo-list::before {
  content: "";
  flex: 0 0 20px;
}

.scroller .mobile-menu__promo-list::after {
  content: "";
  flex: 0 0 13px;
}

@media screen and (min-width: 641px) {
  .mobile-menu .icon--nav-triangle-borderless {
    left: 40px;
  }
}

/* States */
.mobile-menu[aria-hidden=false] .mobile-menu__panel.is-open {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  visibility: visible;
}

/* Help icons */
.mobile-menu__help-wrapper {
  display: flex;
  align-items: center;
}

.mobile-menu__help-wrapper .icon--bi-phone {
  margin-right: 16px;
  width: 24px;
  height: 24px;
}

.mobile-menu__help-wrapper .icon--bi-email {
  margin-right: 18px;
  width: 22px;
  height: 22px;
}

.mobile-menu__help-wrapper+.mobile-menu__help-wrapper {
  margin-top: 18px;
}

/**
 * --------------------------------------------------------------------
 * LINE ITEM
 * --------------------------------------------------------------------
 */
.line-item__product-info-wrapper {
  display: flex;
  align-items: flex-start;
}

.line-item__image-wrapper {
  width: 60px;
  min-width: 60px;
  margin-right: 20px;
}

.line-item__meta {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.line-item__vendor {
  display: block;
  margin-bottom: 7px;
  line-height: 1.55;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
  text-transform: uppercase;
}

.line-item__title {
  display: block;
  margin-bottom: 4px;
  line-height: 1.5;
}

.line-item__property-list {
  line-height: 1.5;
  margin: 6px 0;
}

.line-item__price {
  display: inline-block;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.line-item__price--compare {
  color: {
      {
      settings.text_color
    }
  }

  ;
}

.line-item__price--highlight {
  color: {
      {
      settings.product_on_sale_accent
    }
  }

  ;
}

.line-item__price--compare {
  position: relative;
  margin-left: 20px;
}

.line-item__price--compare::before {
  position: absolute;
  content: "";
  top: 50%;
  left: -5px;
  width: calc(100% + 10px);
  height: 1px;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.7);
}

.line-item__price-info {
  margin-top: -2px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.line-item__discount-list {
  list-style: none;
  margin-top: 2px;
}

.line-item__discount {
  display: inline-block;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;

  background: rgba({
      {
      settings.product_on_sale_accent
    }
  }

  , 0.08);

color: {
    {
    settings.product_on_sale_accent
  }
}

;
border-radius: 2px;
padding: 0 11px;
}

.line-item__discount svg {
  margin-right: 6px;
  vertical-align: text-bottom;
}

.line-item__quantity-remove {
  display: inline-block;
  margin-left: 10px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
  line-height: 1;
}

@media screen and (max-width: 640px) {

  /* On mobile the line items are displayed differently on cart page */
  .line-item-table,
  .line-item-table tbody {
    display: block;
    width: 100%;
  }

  .line-item--stack {
    display: block;
    white-space: normal;
  }

  .line-item--stack:first-child {
    border-top: none !important;
  }

  .line-item--stack .line-item__image-wrapper {
    width: 80px;
    min-width: 80px;
  }

  .line-item--stack .line-item__product-info {
    display: block;
    /* Allows to disable the table layout */
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .line-item--stack .line-item__title {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
  }

  .line-item--stack .line-item__price {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
  }

  .line-item--stack .line-item__quantity {
    margin-top: 12px;
  }
}

@media screen and (min-width: 641px) {
  .line-item__product-info-wrapper {
    align-items: center;
  }

  .line-item__title {
    white-space: normal;
  }

  .line-item__image-wrapper {
    width: 90px;
    min-width: 90px;
  }

  .line-item__quantity-remove {
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 10px auto 0 auto;
  }
}

/**
 * --------------------------------------------------------------------
 * FULFILLMENT ITEM (included in order details only)
 * --------------------------------------------------------------------
 */
/* Bit hacky and ugly, sorry! */
.fulfillment-item {
  border-top: none !important;
}

.fulfillment-item td {
  padding-top: 0 !important;
}

/**
 * --------------------------------------------------------------------
 * ORDER FOOT (used in order details in customer account)
 * --------------------------------------------------------------------
 */
.order-foot {
  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.order-foot__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 16px 0;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.order-foot__item+.order-foot__item {
  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.order-foot__item--highlight,
.order-foot__item--strong {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.order-foot__item--highlight {
  color: {
      {
      settings.product_on_sale_accent
    }
  }

  ;
}

.order-foot__item--strong {
  color: {
      {
      settings.heading_color
    }
  }

  ;
}

@media screen and (max-width: 640px) {
  .card .order-foot {
    margin-left: 20px;
  }
}

@media screen and (min-width: 641px) {
  .order-foot__inner {
    max-width: 470px;
    margin-left: auto;
  }

  .order-foot__item {
    padding-right: 30px;
    padding-left: 20px;
  }
}

/**
 * --------------------------------------------------------------------
 * ORDER SUMMARY (used on account pages)
 * --------------------------------------------------------------------
 */
.order-summary__alert {
  margin: 21px 0 5px 0;
}

@media screen and (min-width: 641px) {
  .order-summary__alert {
    margin: 24px 0 12px 0;
  }
}

/**
 * --------------------------------------------------------------------
 * ADDRESS LIST (used on account pages)
 * --------------------------------------------------------------------
 */
.address-list,
.address-list__item+.address-list__item {
  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.address-list__item {
  padding: 24px 20px;
}

.address-list__action-list {
  margin-top: 14px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.address-list__action-list> :last-child {
  margin-left: 18px;
}

@media screen and (max-width: 640px) {

  .address-list,
  .address-list__item+.address-list__item {
    display: block;
    position: relative;
    border-top: none;
  }

  .address-list::before,
  .address-list__item+.address-list__item::before {
    position: absolute;
    content: "";
    height: 1px;
    width: calc(100% - 20px);
    top: 0;
    left: 20px;

    background: {
        {
        settings.border_color
      }
    }

    ;
  }
}

@media screen and (min-width: 641px) {

  /* There is a slightly different adjustment on the design files just for this element, for no real reason, but well... let's respect the design with an ugly exception */
  .template-addresses .card__section--tight {
    padding-right: 20px;
  }

  .address-list {
    display: flex;
    flex-wrap: wrap;
  }

  .address-list__item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex: 0 0 50%;
    padding-left: 30px;
    padding-right: 30px;

    box-shadow: 0 1px {
        {
        settings.border_color
      }
    }

    ,
    1px 0 {
        {
        settings.border_color
      }
    }

    ;
    border-top: none !important;
  }
}

@media screen and (min-width: 1280px) {
  .address-list__item {
    flex-basis: 33.333333%;
  }
}

.page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 28px 0;
}

.page__header--stack {
  flex-direction: column;
  align-items: flex-start;
}

.page__header--centered {
  justify-content: center;
  text-align: center;
}

.page__header--stack.page__header--centered {
  align-items: center;
}

.page__header--image {
  position: relative;
  justify-content: center;
  background-size: cover;
  background-position: center;
  min-height: 250px;
  padding: 25px;
  border-radius: 3px;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.page__header--image.page__header--overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

.page__header--image.page__header--overlay>* {
  z-index: 1;
}

.page__header--edge2edge {
  border-radius: 0;
  margin-top: 0 !important;
}

.page__title {
  margin-bottom: 0;
}

/* Page sub-header is a small text container that is typically used to hold breadcrumbs and other secondary info (only on tablet and up) */
.page__sub-header {
  display: none;
  margin: 23px 0;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

/* Page description must be contained within a page__header, and has less spacing than page__content */
.page__description {
  margin: 10px 0 0 0;
}

.page__button-action {
  margin-top: 20px;
}

.page__tag-list {
  margin: 12px -20px -10px -20px;
  list-style: none;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.page__tag-item {
  position: relative;
  display: inline-block;
  margin: 0 20px 10px 20px;
}

.page__tag-item.is-selected {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.page__tag-item.is-selected::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.page__meta {
  margin-top: 8px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
}

.page__meta-item:not(:last-child)::after {
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 10px;
  border-radius: 100%;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.4);
vertical-align: middle;
}

.page__navigation-item svg {
  width: 6px;
  height: 9px;
}

.page__navigation-item svg path {
  stroke-width: 1.5px;
}

.page__navigation-item--prev svg {
  margin-right: 9px;
}

.page__navigation-item--next svg {
  margin-left: 9px;
}

.page__navigation-item--prev+.page__navigation-item--next::before {
  display: inline-block;
  content: "";
  width: 1px;
  height: 12px;
  margin: 0 15px;

  background: {
      {
      settings.text_color
    }
  }

  ;
  vertical-align: -2px;
}

.page__content {
  margin-bottom: 40px;
}

@media screen and (min-width: 641px) {
  .page__header {
    margin: 35px 0;
  }

  .page__header--image {
    min-height: 430px;
  }

  .page__sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .page__sub-header+.page__header {
    margin-top: 20px;
  }

  .page__meta {
    margin-top: 10px;
    font-size: 1rem;
  }

  .page__meta-item:not(:last-child)::after {
    margin: 0 16px;
  }

  .page__content {
    margin-bottom: 90px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--1px;
  }
}

@media screen and (min-width: 1000px) {
  .page__header {
    flex-direction: column;
    align-items: flex-start;
  }

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

.popover {
  position: absolute;
  width: 100vw;
  left: 0;
  top: 100%;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  color: {
      {
      settings.text_color
    }
  }

  ;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  transition: opacity 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  -webkit-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out,
  transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out,
  transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  -webkit-transform 0.25s ease-in-out;
  will-change: transform;
}

.popover .icon--nav-triangle-borderless {
  right: 67px;
}

.popover--large {
  text-align: center;
}

.popover[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1.001);
  transform: scale(1.001);
  /* Using 1.001 force browsers like Chrome to not perform some optimizations that may result in small visual glitch */
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
  transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
}

.popover__inner {
  padding: 15px 20px 20px 20px;
}

.popover__inner--no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.popover .icon--nav-triangle-borderless {
  position: absolute;
  bottom: 100%;
  width: 18px;
  height: 8px;
  z-index: 2;
  -webkit-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.12));
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.12));
}

.popover__header {
  padding: 12px 0 30px 0;
}

.popover__title {
  margin-bottom: 4px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--5px;
}

.popover__legend {
  margin-bottom: 16px;
}

.popover__secondary-action {
  margin-top: 16px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.popover__secondary-action>p {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {

  .popover__panel-list,
  .popover__panel {
    height: 100% !important;
  }

  .popover__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (min-width: 641px) {
  .popover {
    width: auto;
    min-width: 160px;
    right: -2px;
    top: calc(100% + 15px);
    left: auto;
    border-radius: 3px;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.1);
  }

  .popover .icon--nav-triangle-borderless {
    right: 27px;
  }

  .popover--large {
    min-width: 320px;
  }

  .popover__inner {
    padding: 15px 25px 15px 25px;
  }

  .popover__header {
    padding-bottom: 15px;
  }

  .popover__title {
    margin-bottom: 8px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--3px;
  }
}

@media screen and (min-width: 1280px) {
  .popover {
    top: calc(100% + 4px);
  }
}

/* Linklist */
.popover__linklist {
  white-space: nowrap;
  list-style: none;
}

.popover__link-item {
  display: block;
  padding: 2px 25px;
  cursor: pointer;
  width: 100%;
  transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
}

.popover__link-item:hover {
  background: rgba({
      {
      settings.accent_color
    }
  }

  , 0.08);

color: {
    {
    settings.accent_color
  }
}

;
}

/* Panel */
.popover__panel-list {
  position: relative;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
}

.popover__panel {
  width: 100%;
  visibility: hidden;
  transition: visibility 500ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), visibility 500ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), visibility 500ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.popover__panel--default {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.popover__panel--sliding {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.popover[aria-hidden=false] .popover__panel.is-selected {
  visibility: visible;
}

.popover__panel.is-selected {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/**
 * We have some specific positioning (like arrows...) for each popover, so we summarize specific code here
 */
.popover--password .icon--nav-triangle-borderless {
  right: 21px;
}

.popover--currency,
.popover--locale {
  min-width: 0;
}

@media screen and (min-width: 641px) {
  .popover--password .popover__inner {
    padding-bottom: 25px;
  }

  .popover--password .icon--nav-triangle-borderless {
    right: calc(50% - 13px);
  }

  .popover--currency {
    top: calc(100% + 3px);
    right: auto;
    left: -2px;
  }

  .popover--currency .icon--nav-triangle-borderless {
    right: 23px;
  }

  .popover--locale {
    top: calc(100% + 3px);
    right: -26px;
  }

  .popover--locale .icon--nav-triangle-borderless {
    right: 23px;
  }

  .popover--logged {
    right: -47px;
  }

  .popover--logged .icon--nav-triangle-borderless {
    right: 50px;
  }

  .popover--unlogged {
    right: -5px;
  }

  .popover--unlogged .icon--nav-triangle-borderless {
    right: 6px;
  }
}

@media screen and (min-width: 1280px) {
  .popover--password {
    top: calc(100% + 15px);
    right: -2px;
  }

  .popover--logged {
    right: -32px;
  }

  .popover--logged .icon--nav-triangle-borderless {
    right: 29px;
  }

  .popover--unlogged {
    right: 0;
    -webkit-transform: scale(0.9) translateX(calc(50% - 7px));
    transform: scale(0.9) translateX(calc(50% - 7px));
  }

  .popover--unlogged .icon--nav-triangle-borderless {
    left: calc(50% - 8px);
  }

  .popover--unlogged[aria-hidden=false] {
    -webkit-transform: scale(1) translateX(calc(50% - 7px));
    transform: scale(1) translateX(calc(50% - 7px));
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT GALLERY
 * --------------------------------------------------------------------
 */
.product-gallery {
  position: relative;
  margin-bottom: 12px;
}

.product-gallery__carousel-wrapper {
  position: relative;
  margin-bottom: 25px;
}

.product-gallery__carousel .flickity-viewport {
  transition: height 0.2s ease-in-out;
}

.product-gallery__carousel:not(.flickity-enabled) .product-gallery__carousel-item:not(.is-selected) {
  display: none;
}

.product-gallery__carousel-item {
  width: 100%;
  padding: 0 20px;
}

.product-gallery__carousel-item--hidden {
  visibility: hidden;
}

.product-gallery__carousel-item[aria-hidden=true] .plyr__control {
  /* This is a quick fix to prevent the controls to gain focus until if the slide is not visible */
  visibility: hidden;
}

.product-gallery__carousel-item.is-filtered {
  display: none;
}

.product-gallery__size-limiter {
  margin: 0 auto;
}

.product-gallery__view-in-space {
  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.08);
/* This color is defined by Shopify spec */
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.product-gallery__view-in-space[data-shopify-xr-hidden] {
  visibility: hidden;
}

@media screen and (min-width: 1000px) {
  .product-gallery__view-in-space[data-shopify-xr-hidden] {
    display: none;
  }
}

.product-gallery__view-in-space svg {
  margin: -1px 8px 0 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.product-gallery__zoom-notice {
  display: none;
}

@media screen and (max-width: 640px) {
  .product-gallery__carousel {
    margin-left: -20px;
    margin-right: -20px;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery__carousel {
    margin: -4px;
  }

  .product-gallery__carousel-item {
    padding: 4px;
  }

  .product-gallery--with-thumbnails {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    width: 100%;
  }

  .product-gallery--with-thumbnails .product-gallery__carousel-wrapper {
    flex: 1 0 auto;
    margin: 10px 5px 0 42px;
  }
}

@media screen and (min-width: 1000px) and (-moz-touch-enabled: 0),
screen and (min-width: 1000px) and (hover: hover) {

  /* Implementation note: starting from version 1.8, the theme now supports media type in Shopify (including 3D models
     and video. As a consequence, the "zoom" now only makes sense for "images", for which the slideshow becomes draggable.
     We therefore scope this so that the notice is only shown for images */
  .product-gallery__carousel--zoomable~.product-gallery__zoom-notice {
    display: block;
    margin: 26px 0 6px 0;
    width: 100%;
    text-align: center;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
  }

  .product-gallery__carousel--zoomable~.product-gallery__zoom-notice svg {
    width: 10px;
    height: 10px;
    margin-right: 14px;
    vertical-align: baseline;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery {
    margin-bottom: 0;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT THUMBNAILS
 * --------------------------------------------------------------------
 */
.product-gallery__thumbnail {
  position: relative;
  display: block;
  width: 60px;
  padding: 2px;
  margin: 0 4px;
  border: 2px solid transparent;
  border-radius: 3px;
  transition: border 0.2s ease-in-out;
  cursor: pointer;
}

.product-gallery__thumbnail.is-nav-selected {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;
}

.product-gallery__thumbnail.is-filtered {
  display: none;
}

.product-gallery__thumbnail-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  z-index: 1;
}

@media screen and (max-width: 999px) {

  .product-gallery__thumbnail-list::after,
  .product-gallery__thumbnail-list::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
  }

  .product-gallery__thumbnail {
    display: inline-block;
    vertical-align: top;
    /* This is done to comply with the media API that requires thumbnails to be aligned to the top */
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .product-gallery .scroller {
    margin: 0 -15px;
  }
}

@media screen and (min-width: 641px) {
  .product-gallery__thumbnail {
    width: 72px;
  }
}

@media screen and (min-width: 1000px) {
  .product-gallery__thumbnail-list {
    position: relative;
    z-index: 1;
    margin: -2px 0 -2px -3px;
    /* negative to align the top edge to the featured image */
    max-height: 450px;
    width: 96px;
    /* Width + margin */
    overflow: auto;
    -ms-overflow-style: none;
    /* IE 11 */
    scrollbar-width: none;
    /* Firefox 64 */
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
  }

  .product-gallery__thumbnail-list::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  .product-gallery__thumbnail {
    margin: 8px 4px;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT META
 * --------------------------------------------------------------------
 */
.product-meta {
  position: relative;
  margin: -11px 0 5px 0;
  /* Negative margin is to take into account for the padding */
}

.product-meta__title {
  margin-bottom: 14px;
}

/* When within a modal, we have to add an extra margin to prevent the title to overlap the close button */
.modal .product-meta__title {
  margin-right: 45px;
}

.product-meta__label-list {
  margin-bottom: 17px;
  font-size: 0;
}

.product-meta__label-list .product-label+.product-label {
  margin-left: 5px;
}

.product-meta__reference {
  margin-bottom: 3px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

.product-meta__reviews-badge {
  display: block;
}

.product-meta__reviews-badge .spr-badge {
  line-height: inherit;
}

.product-meta__reviews-badge .spr-badge .spr-badge-caption {
  margin-left: 12px;
}

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

.product-meta__vendor+.product-meta__sku::before {
  display: inline-block;
  position: relative;
  content: "";
  margin: 0 14px;
  height: 13px;
  width: 1px;
  top: -1px;

  background: {
      {
      settings.border_color
    }
  }

  ;
  vertical-align: middle;
}

.product-meta__share-buttons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}

.product-meta__share-buttons .social-media__item svg {
  opacity: 0.35;
}

.card__separator+.product-meta__share-buttons {
  margin-top: 0;
}

.product-meta__description {
  margin-bottom: 25px;
}

/* On featured product section it can be configured to be shown after the form */
.product-form+.product-meta__description {
  margin-top: 25px;
  margin-bottom: 0;
}

@media screen and (min-width: 641px) {

  /*
  IMPLEMENTATION NOTE: there are a lot of manual adjustments here with negative margins, depending on which elements are here or not. This is not
                       really something I'm really happy with as it makes editing more complex. However designer absolutely wanted a pixel-perfect
                       adjustment for all conditions... which result in more complex code :)
  */
  .product-meta__share-buttons {
    margin-top: 0;
  }

  .product-meta__label-list+.product-meta__share-buttons {
    margin-top: 22px;
  }

  .product-meta__reference,
  .product-meta__reviews-badge {
    margin-bottom: -2px;
  }

  .product-meta__reviews-badge {
    margin-top: -4px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .product-meta__reference~.product-meta__share-buttons,
  .product-meta__reviews-badge~.product-meta__share-buttons {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .product-meta__reference+.product-meta__reviews-badge {
    margin-top: 5px;
  }

  .product-meta__reviews-badge .spr-badge .spr-badge-caption {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT FORM
 * --------------------------------------------------------------------
 */
.product-form__variants {
  margin-bottom: 24px;
}

.product-form__option {
  margin-bottom: 23px;
}

.product-form__option-name {
  display: block;
  margin-bottom: 2px;
}

.product-form__selected-value {
  padding-left: 2px;

  color: {
      {
      settings.text_color
    }
  }

  ;
}

.product-form__info-list {
  display: table;
  width: 100%;
  margin: -22px 0 6px 0;
  border-spacing: 0 22px;
}

.product-form__info-item {
  display: table-row;
}

.product-form__info-title {
  display: table-cell;
  padding-right: 12px;
  vertical-align: baseline;
  white-space: nowrap;
  /* Fix for Japanese kanji */
}

.product-form__info-item--quantity>* {
  padding-top: 6px;
  vertical-align: middle;
}

.product-form__info-content {
  display: table-cell;
  width: 100%;
}

.product-form__price-info {
  margin-top: 5px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.product-form__price-info+.product-form__price-info {
  margin-top: 0;
}

.product-form .select-wrapper {
  display: inline-block;
  vertical-align: middle;
}

.product-form__quantity {
  display: inline-block;
  width: 65px;
  vertical-align: middle;
}

.product-form__inventory.inventory::before {
  margin-right: 14px;
}

.product-form__payment-container {
  display: flex;
  flex-direction: column;
}

.product-form__error {
  margin-top: 18px;
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease-in-out;
}

.product-form .price--compare {
  top: -2px;
}

@media screen and (max-width: 640px) {
  .product-form__payment-container .shopify-payment-button {
    margin-top: 16px;
  }
}

@media screen and (min-width: 641px) {
  .product-form {
    margin-top: -8px;
    /* for pixel perfect alignment... */
  }

  .product-form__option-name {
    margin-bottom: 7px;
  }

  .product-form__variants {
    margin-bottom: 26px;
  }

  .product-form__payment-container {
    flex-direction: row;
    align-items: flex-start;
    margin: 0 -9px;
  }

  .product-form__payment-container>* {
    flex: none;
    width: calc(50% - 18px);
    margin: 0 9px;
  }
}

/**
 * --------------------------------------------------------------------
 * SHOPIFY QUICK PAYMENT
 * --------------------------------------------------------------------
 */
.shopify-payment-button__button--unbranded {
  /* Unfortunately, on collection pages, Shopify overrides the style by using inline styles. It looks to me like an issue on Shopify to override
     the styles of the theme, but as for now their recommendation to me were to use !important. I could use !important rules on the base %button
     rule but I prefer to explicitly override there here so the hack is contained here */
  padding: 0 30px !important;
  line-height: 48px !important;
  border-radius: 2px !important;

  background: {
      {
      settings.secondary_button_background
    }
  }

  !important;

  color: {
      {
      settings.secondary_button_text_color
    }
  }

  !important;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  !important;
}

.shopify-payment-button__button--unbranded:hover {
  background: rgba({
      {
      settings.secondary_button_background
    }
  }

  , 0.8) !important;
}

.shopify-payment-button__button--branded {
  border-radius: 3px;
  overflow: hidden;
  min-height: 48px;
}

.shopify-payment-button__more-options {
  margin-top: 8px;

  color: {
      {
      settings.accent_color
    }
  }

  ;
  transition: color 0.2s ease-in-out;
}

.shopify-payment-button__more-options:not([disabled]):hover {
  text-decoration: none;

  color: color-mix(in srgb, {
      {
      settings.accent_color
    }
  }

  85%, black 15%);
}

.shopify-payment-button__more-options[aria-hidden=true] {
  display: none;
}

/**
 * --------------------------------------------------------------------
 * BLOCK LIST
 * --------------------------------------------------------------------
 */
.product-block-list__item--trust .icon--lock {
  width: 18px;
  height: 24px;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

/* This code is not super clean, but it's due to the wish of the designer to have some pixel perfect alignment that
   are specific JUST for this element and break the generic abstractions... thanks dude :D */
.product-block-list__item--shipping .shipping-estimator {
  margin-bottom: 10px;
  margin-top: -0.435em;
}

.product-block-list__item--shipping .shipping-estimator__results {
  margin-top: 26px;
  margin-bottom: -10px;
}

.product__refund-policy-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.product__refund-policy-link svg {
  width: 8px;
  height: 12px;
}

@media screen and (max-width: 640px) {
  .product-block-list__item:first-child .card {
    border-top: none;
  }
}

@media screen and (max-width: 999px) {

  /* we have a logic on desktop with overflow scroller and we must force it to disabled on mobile */
  .product-block-list__wrapper {
    min-height: 0 !important;
  }

  .product-block-list__item--info>.card {
    top: 0 !important;
  }
}

@media screen and (min-width: 1000px) {
  .product-block-list {
    position: relative;
  }

  .product-block-list__wrapper {
    width: calc(50% - 15px);
    margin-left: 0;
  }

  .product-block-list__item--info {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 15px);
    height: 100%;
  }
}

@media screen and (min-width: 1280px) {
  .product-block-list--medium .product-block-list__wrapper {
    width: calc(55% - 15px);
  }

  .product-block-list--medium .product-block-list__item--info {
    width: calc(45% - 15px);
  }

  .product-block-list--large .product-block-list__wrapper {
    width: calc(60% - 15px);
  }

  .product-block-list--large .product-block-list__item--info {
    width: calc(40% - 15px);
  }
}

/**
 * --------------------------------------------------------------------
 * FEATURED PRODUCT (HOMEPAGE)
 * --------------------------------------------------------------------
 */
/* When within the modal we need to remove the border */
.modal .featured-product .card {
  border: none;
}

.modal .featured-product .card:first-child {
  border-right: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

@media screen and (min-width: 1000px) {
  .featured-product {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .featured-product>* {
    display: table-cell;
    vertical-align: top;
    width: 50%;
  }

  .featured-product> :first-child {
    border-radius: 3px 0 0 3px;
  }

  .featured-product> :last-child {
    border-radius: 0 3px 3px 0;
    border-left: none;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT LABEL
 * --------------------------------------------------------------------
 */
.product-label {
  display: inline-block;
  padding: 4px 10px;
  color: #ffffff;
  border-radius: 3px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
  line-height: 1;
  vertical-align: top;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.product-label--on-sale {
  background: {
      {
      settings.product_on_sale_accent
    }
  }

  ;

  color: {
    % if settings.product_on_sale_accent | color_brightness < 165 %
  }

  #ffffff {
    % else %
  }

  #000000 {
    % endif %
  }

  ;
}

.product-label--custom1 {
  background: {
      {
      settings.product_label_1_background
    }
  }

  ;

  color: {
    % if settings.product_label_1_background | color_brightness < 165 %
  }

  #ffffff {
    % else %
  }

  #000000 {
    % endif %
  }

  ;
}

.product-label--custom2 {
  background: {
      {
      settings.product_label_2_background
    }
  }

  ;

  color: {
    % if settings.product_label_2_background | color_brightness < 165 %
  }

  #ffffff {
    % else %
  }

  #000000 {
    % endif %
  }

  ;
}

/**
 * --------------------------------------------------------------------
 * PRODUCT PRICE
 * --------------------------------------------------------------------
 */
.price-list {
  line-height: 1;
}

.price {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--9px;

  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.price--highlight {
  margin-right: 0.7em;

  color: {
      {
      settings.product_on_sale_accent
    }
  }

  ;
}

.price--compare {
  position: relative;

  color: {
      {
      settings.text_color
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
}

.price--compare::before {
  position: absolute;
  content: "";
  top: 50%;
  left: -3px;
  width: calc(100% + 6px);
  height: 1px;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.7);
}

/**
 * --------------------------------------------------------------------
 * INVENTORY AND BAR
 * --------------------------------------------------------------------
 */
.inventory {
  position: relative;
  display: block;
  padding-left: 1.4em;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  line-height: 1.2;
}

.inventory::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  left: 0;
  top: 0.45em;
  border-radius: 100%;
  background: currentColor;
}

.inventory--high {
  color: {
      {
      settings.product_in_stock_color
    }
  }

  ;
}

.inventory--low {
  color: {
      {
      settings.product_low_stock_color
    }
  }

  ;
}

.inventory-bar {
  position: relative;
  display: block;
  margin: 16px 0 10px 0;
  width: 100%;
  height: 4px;
  border-radius: 3px;

  background: {
      {
      settings.border_color
    }
  }

  ;
  overflow: hidden;
}

.inventory-bar--hidden {
  display: none;
}

.inventory-bar__progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  display: block;
  transition: width 1.15s ease-in-out;
}

.inventory--high+.inventory-bar>.inventory-bar__progress {
  background: {
      {
      settings.product_in_stock_color
    }
  }

  ;
}

.inventory--low+.inventory-bar>.inventory-bar__progress {
  background: {
      {
      settings.product_low_stock_color
    }
  }

  ;
}

@media screen and (min-width: 641px) {
  .inventory {
    font-size: 1rem;
  }

  .inventory-bar {
    margin-top: 23px;
  }
}

/**
 * --------------------------------------------------------------------
 * COLOR SWATCH
 * --------------------------------------------------------------------
 */
.color-swatch-list {
  margin: -2px -6px 0 -6px;
  /* We have to take into account the box-shadow and inner spacing added when an element is active */
  padding-left: 4px;
}

.color-swatch {
  position: relative;
  display: inline-block;
  margin: 6px;
  vertical-align: middle;
}

.color-swatch__radio {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

.color-swatch__item {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  cursor: pointer;
  background-size: cover;
}

.color-swatch__item svg {
  display: none;
}

.color-swatch__item-link {
  display: none;
  position: relative;
  padding-left: 8px;
  padding-right: 8px;
  height: 18px;

  background-color: {
      {
      settings.secondary_background
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.border_color | color_darken: 5
    }
  }

  inset;
  border-radius: 10px;
  width: auto;
  line-height: 18px;
  font-size: 12px;
}

.color-swatch__button {
  vertical-align: middle;
}

.color-swatch__button--labelled {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.color-swatch__label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 14px;
}

.color-swatch__radio:checked+.color-swatch__item::after,
.color-swatch__button.is-selected .color-swatch__item::after {
  position: absolute;
  content: "";
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  border-radius: 3px;

  border: 2px solid {
      {
      settings.accent_color
    }
  }

  ;
}

.color-swatch__button.is-selected .color-swatch__label {
  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.color-swatch--white .color-swatch__item {
  box-shadow: 0 0 0 1px {
      {
      settings.border_color | color_darken: 5
    }
  }

  inset;
}

/* The view more is used on listing, to restrict the number of displayed swatches */
.color-swatch--view-more {
  /* Next ones are hidden */
}

.color-swatch--view-more~.color-swatch {
  display: none;
}

.color-swatch--view-more .color-swatch__item {
  display: none;
}

.color-swatch--view-more .color-swatch__item-link {
  display: block;
}

/** Large list variation **/
.color-swatch-list--large {
  margin: -4px -8px 0 -8px;
  /* We have to take into account the box-shadow and inner spacing added when an element is active */
}

.color-swatch-list--large .color-swatch {
  margin: 8px;
}

.color-swatch-list--large .color-swatch__item {
  width: 36px;
  height: 36px;
}

/** Stack list variation **/
.color-swatch-list--stack {
  margin: -3px -7px 0 -7px;
  /* We have to take into account the box-shadow and inner spacing added when an element is active */
}

.color-swatch-list--stack .color-swatch__item {
  width: 16px;
  height: 16px;
}

.color-swatch-list--stack .color-swatch {
  display: block;
  margin: 7px;
}

/* Disabled variation */
.color-swatch--disabled .color-swatch__item::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;

  background: rgba({
      {
      settings.secondary_background
    }
  }

  , 0.5);
}

.color-swatch--disabled svg {
  display: block;
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
  color: #4a4a4a;
}

/**
 * --------------------------------------------------------------------
 * BLOCK SWATCH
 * --------------------------------------------------------------------
 */
.block-swatch-list {
  margin: -3px -4px 0 -4px;
  /* We need to take into account the box-shadow height when element is active */
  padding-left: 2px;
}

.block-swatch {
  display: inline-block;
  margin: 4px;
}

.block-swatch__radio {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

.block-swatch__item {
  display: block;
  padding: 6px 16px 7px 16px;
  text-align: center;

  border: 1px solid {
      {
      settings.border_color | color_darken: 5
    }
  }

  ;
  border-radius: 3px;
  vertical-align: middle;
  cursor: pointer;

  box-shadow: 0 1px 1px rgba({
      {
      settings.border_color | color_darken: 5
    }
  }

  , 0.25);
}

.block-swatch__radio:checked+.block-swatch__item {
  box-shadow: 0 0 0 1px {
      {
      settings.accent_color
    }
  }

  ;

  border-color: {
      {
      settings.accent_color
    }
  }

  ;

  background: rgba({
      {
      settings.accent_color
    }
  }

  , 0.06);

color: {
    {
    settings.accent_color
  }
}

;
}

.block-swatch--disabled .block-swatch__item-text {
  position: relative;
  opacity: 0.5;
}

.block-swatch--disabled .block-swatch__item-text::after {
  position: absolute;
  content: "";
  width: calc(100% + 6px);
  height: 1px;
  top: calc(50% + 1px);
  left: -3px;
  background: currentColor;
}

/**
 * --------------------------------------------------------------------
 * VARIANT SWATCH
 * --------------------------------------------------------------------
 */
.variant-swatch-list {
  margin: -5px -5px -2px -4px;
}

.variant-swatch {
  display: inline-block;
  margin: 5px;
  vertical-align: middle;
}

.variant-swatch__radio {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

.variant-swatch__item {
  position: relative;
  display: block;
  width: 64px;
  padding: 2px;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
}

.variant-swatch__item svg {
  display: none;
}

.variant-swatch__radio:checked+.variant-swatch__item {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;
  border-radius: 3px;
}

/* Disabled variation */
.variant-swatch--disabled img {
  opacity: 0.5;
}

.variant-swatch--disabled svg {
  display: block;
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
  color: #4a4a4a;
}

/**
 * --------------------------------------------------------------------
 * PRODUCT ITEM
 * --------------------------------------------------------------------
 */
.product-item {
  position: relative;
  padding: 20px;
  min-width: 0;
  flex-shrink: 0;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  white-space: normal;
}

.product-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  box-shadow: 1px 0 {
      {
      settings.border_color
    }
  }

  ,
  0 1px {
      {
      settings.border_color
    }
  }

  ;
  z-index: 2;
  /* needed to overlap the labels (if any) */
  pointer-events: none;
}

.product-item__image-wrapper {
  display: block;
  margin-bottom: 20px;
}

.product-item__image-wrapper .placeholder-svg {
  height: auto;
}

.product-item__secondary-image {
  display: none;
}

.product-item__label-list {
  position: absolute;
  top: 11px;
  left: -1px;
  z-index: 2;
  font-size: 0;
}

.product-item__label-list>.product-label {
  display: block;
  margin-bottom: 5px;
  border-radius: 0 3px 3px 0;
}

.product-item__info {
  min-width: 0;
}

.product-item__price-list:first-child {
  margin-bottom: 10px;
}

/* This trick is done to add some spacing in case the prices fall into two lines */
.product-item__price-list {
  margin-top: -5px;
  margin-bottom: -5px;
}

.product-item__price-list .price {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.product-item__vendor {
  display: block;
  margin-bottom: 6px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
  text-transform: uppercase;
}

.product-item__vendor,
.product-item__title {
  display: block;
  line-height: 1.55;
}

.product-item__title {
  margin-bottom: 12px;
}

.product-item__title+.product-item__vendor {
  margin-bottom: 12px;
  margin-top: -4px;
}

.product-item__swatch-list {
  margin: -2px 0 12px 0;
  /* On the collection page, we do not show more than one line */
  white-space: nowrap;
  overflow: hidden;
}

.product-item__price-info {
  margin-top: 10px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
  line-height: 1;
}

.product-item .price {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--3px;
}

.product-item .price--compare {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

.product-item__reviews-badge {
  display: block;
  margin: 17px 0;
}

.product-item__inventory {
  margin-top: 14px;
}

.product-item__inventory::before {
  top: 0.3em;
}

.product-item__inventory {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

@media (-moz-touch-enabled: 0),
(hover: hover) {

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

  .product-item__image-wrapper--with-secondary .product-item__secondary-image {
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    visibility: hidden;
    opacity: 0;
  }

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

  .product-item__image-wrapper--with-secondary:hover .product-item__secondary-image {
    visibility: visible;
  }

  .product-item__image-wrapper--with-secondary:hover .product-item__secondary-image.lazyloaded {
    opacity: 1;
  }
}

@media screen and (min-width: 641px) {
  .product-item__title {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
  }

  .product-item--vertical .price:not(.price--compare),
  .product-item--list .price:not(.price--compare) {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--5px;
  }
}

@media screen and (min-width: 1000px) {
  .product-item__label-list {
    left: 0;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT ITEM (VERTICAL AND HORIZONTAL VARIATION)
 * --------------------------------------------------------------------
 */
.product-item--vertical .product-item__action-list,
.product-item--horizontal .product-item__action-list {
  margin: 20px 0 5px 0;
}

.product-item--vertical .product-item__action-button,
.product-item--horizontal .product-item__action-button {
  padding-left: 10px;
  padding-right: 10px;
}

.product-item--vertical .product-item__action-list--list-view-only,
.product-item--vertical .product-item__action-button--list-view-only,
.product-item--horizontal .product-item__action-list--list-view-only,
.product-item--horizontal .product-item__action-button--list-view-only {
  display: none;
}

.product-item--vertical .product-item__action-button--list-view-only+.product-item__action-button,
.product-item--horizontal .product-item__action-button--list-view-only+.product-item__action-button {
  margin-top: 0;
}

@media screen and (min-width: 1000px) {
  .product-item--vertical .product-item__action-list {
    margin: 15px -5px -5px -5px;
  }

  .product-item--vertical .product-item__action-button {
    flex: 1 0 auto;
    margin: 5px !important;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT ITEM (HORIZONTAL AND LIST VARIATION)
 * --------------------------------------------------------------------
 */
.product-item--horizontal,
.product-item--list {
  display: flex;
}

.product-item--horizontal .product-item__info,
.product-item--list .product-item__info {
  padding: 4px 0;
  flex: 1 0 0;
}

.product-item--horizontal .product-item__image-wrapper,
.product-item--list .product-item__image-wrapper {
  flex: none;
  width: 120px;
  margin: 0 20px 0 0;
}

.product-item--horizontal .product-item__action-list,
.product-item--list .product-item__action-list {
  align-self: center;
}

.product-item--horizontal .spr-starrating .spr-icon.spr-icon {
  font-size: 11px;
  width: 11px;
  height: 11px;
}

@media screen and (max-width: 640px) {

  .product-item--horizontal,
  .product-item--list {
    width: 100% !important;
  }

  .product-list--collection .product-item__label-list {
    left: 0;
  }

  .product-list--collection .spr-starrating .spr-icon.spr-icon {
    font-size: 11px;
    width: 11px;
    height: 11px;
  }
}

@media screen and (min-width: 641px) {
  .product-item--horizontal .product-item__image-wrapper {
    width: 110px;
    margin-right: 20px;
  }

  .product-item--horizontal .product-item__info {
    flex: 1 0 0;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT ITEM (LIST VARIATION)
 * --------------------------------------------------------------------
 */
@media screen and (max-width: 640px) {
  .product-item__action-list {
    margin-top: 20px;
  }
}

@media screen and (min-width: 641px) {
  .product-item--list {
    width: 100% !important;
    align-items: center;
    padding-right: 25px;
  }

  .product-item--list .product-item__title {
    font-size: 1rem;
  }

  .product-item--list .product-item__image-wrapper {
    width: 180px;
    margin-right: 30px;
  }

  .product-item--list .product-item__info {
    display: flex;
    justify-content: space-between;
    flex: 1 0 0;
    margin: 15px 0 15px 0;
  }

  .product-item--list .product-item__action-list {
    display: flex;
    margin-left: 30px;
    min-width: 180px;
  }
}

/**
 * --------------------------------------------------------------------
 * PRODUCT ITEM (COMPACT VARIATION)
 * --------------------------------------------------------------------
 */
.product-item--compact .product-item__info {
  padding-top: 0;
}

.product-item--compact .product-item__price-list:first-child {
  margin-bottom: 8px;
}

.product-item--compact .product-item__reviews-badge {
  margin: 15px 0;
}

.promo-block {
  position: relative;
  display: flex;
  min-height: 240px;
  padding: 20px 24px;
  border-radius: 3px;
  overflow: hidden;
}

.promo-block--small {
  min-height: 220px;
}

.promo-block--large {
  min-height: 260px;
}

.promo-block--top-left,
.promo-block--top-center,
.promo-block--top-right {
  align-items: flex-start;
}

.promo-block--middle-left,
.promo-block--middle-center,
.promo-block--middle-right {
  align-items: center;
}

.promo-block--bottom-left,
.promo-block--bottom-center,
.promo-block--bottom-right {
  align-items: flex-end;
}

.promo-block--top-right,
.promo-block--middle-right,
.promo-block--bottom-right {
  text-align: right;
  justify-content: flex-end;
}

.promo-block--top-center,
.promo-block--middle-center,
.promo-block--bottom-center {
  text-align: center;
  justify-content: center;
}

.promo-block--top-left,
.promo-block--middle-left,
.promo-block--bottom-left {
  text-align: left;
  justify-content: flex-start;
}

.promo-block__image-clip,
.promo-block__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.promo-block__image-clip {
  overflow: hidden;
}

.promo-block__image-wrapper {
  background-repeat: no-repeat;
  background-position: right calc(100% + 15px);
  background-size: auto 185px;
  transition: opacity 0.2s ease-in-out, background-position 0.35s ease-in-out;
}

.promo-block__image-wrapper--cover {
  background-size: cover !important;
  background-position: center !important;
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  /* The 1.01 is necessary to avoid some rounding issues on Chrome */
  transition: opacity 0.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
  transition: opacity 0.2s ease-in-out, transform 1.2s ease-in-out;
  transition: opacity 0.2s ease-in-out, transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}

.promo-block__inner {
  position: relative;
  z-index: 1;
}

.promo-block__heading {
  margin-bottom: 3px;
  color: inherit;
}

.promo-block__cta {
  margin-top: 3px;
}

.promo-block--small .promo-block__image-wrapper {
  background-size: auto 155px;
}

/** Overlay variation **/
.promo-block--overlay::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.5));
  z-index: 1;
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .promo-block__image-wrapper {
    background-position: right calc(100% + 35px);
  }

  .promo-block:hover .promo-block__image-wrapper {
    background-position: right calc(100% + 15px);
  }

  .promo-block:hover .promo-block__image-wrapper--cover {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
  }
}

@media screen and (min-width: 641px) {
  .promo-block {
    min-height: 270px;
    padding: 26px 30px;
  }

  .promo-block--small {
    min-height: 240px;
  }

  .promo-block--large {
    min-height: 300px;
  }
}

@media screen and (min-width: 1000px) {
  .promo-block {
    min-height: 310px;
  }

  .promo-block--small {
    min-height: 280px;
  }

  .promo-block--large {
    min-height: 360px;
  }

  .promo-block__image-wrapper {
    background-size: auto 260px;
  }

  .promo-block--small .promo-block__image-wrapper {
    background-size: auto 220px;
  }

  .promo-block__heading {
    margin-bottom: 8px;
  }

  .promo-block__cta {
    margin-top: 8px;
  }
}

/**
 * --------------------------------------------------------------------
 * GENERAL
 *
 * IMPLEMENTATION NOTE: Shopify Reviews CSS overrides our own CSS, as a consequence
 *                      to increase the CSS specificity, I had to add a wrapping class
 *                      or using the "double class" (eg: .spr-icon.spr-icon) to take precedence
 * --------------------------------------------------------------------
 */
@font-face {
  font-family: "font-theme-star";
  src: url(//jcebqy-8p.myshopify.com/cdn/shop/t/2/assets/font-theme-star.eot?v=178649971611478077551788616786);
  src: url(//jcebqy-8p.myshopify.com/cdn/shop/t/2/assets/font-theme-star.eot?%23iefix&v=178649971611478077551788616786) format("embedded-opentype"),
  url(//jcebqy-8p.myshopify.com/cdn/shop/t/2/assets/font-theme-star.woff2?v=176977276741202493121788616786) format("woff2"),
  url(//jcebqy-8p.myshopify.com/cdn/shop/t/2/assets/font-theme-star.ttf?v=17527569363257290761788616786) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

.spr-starrating.spr-starrating,
.spr-starratings.spr-starratings {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  height: 14px;
}

.spr-starrating .spr-icon.spr-icon,
.spr-starratings .spr-icon.spr-icon {
  display: inline-block;
  top: 0;
  height: 13px;
  width: 13px;
  font-size: 13px;
  opacity: 1;
}

.spr-icon.spr-icon::before {
  content: "A" !important;
  display: inline-block;
  font-family: "font-theme-star";
  font-size: inherit;
  font-style: normal;
  font-weight: normal;
  vertical-align: top;
  line-height: 1em;
}

.spr-icon {
  color: {
      {
      settings.product_star_color
    }
  }

  ;
}

.spr-icon-star-empty.spr-icon-star-empty {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.4) !important;
}

.spr-icon+.spr-icon {
  margin-left: 4px;
}

@media screen and (min-width: 641px) {

  .spr-summary-starrating .spr-icon.spr-icon,
  .spr-form-input .spr-icon.spr-icon {
    width: 17px;
    height: 17px;
    font-size: 17px;
  }
}

/**
 * --------------------------------------------------------------------
 * BADGE
 * --------------------------------------------------------------------
 */
.spr-badge {
  display: flex !important;
  align-items: center;
  line-height: 1;
}

.spr-badge .spr-badge-caption {
  margin-left: 7px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

/**
 * --------------------------------------------------------------------
 * MAIN REVIEW
 * --------------------------------------------------------------------
 */
#shopify-product-reviews {
  margin: 0 !important;
  overflow: visible !important;
}

#shopify-product-reviews .spr-container {
  padding: 0;
  border: none;
}

#shopify-product-reviews {
  /* HEADER */
}

#shopify-product-reviews .spr-header {
  position: relative;
}

#shopify-product-reviews .spr-header-title {
  font-family: {
      {
      settings.heading_font.family
    }
  }

  ;

  font-weight: {
      {
      settings.heading_font.weight
    }
  }

  ;

  font-style: {
      {
      settings.heading_font.style
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--5px;
  line-height: 1.6;
  margin-bottom: 7px;
  text-align: left;
}

#shopify-product-reviews .spr-summary {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  align-items: center;
}

#shopify-product-reviews .spr-summary-caption {
  line-height: 1;
}

#shopify-product-reviews .spr-summary-actions {
  display: block;
  width: 100%;
}

#shopify-product-reviews .spr-summary-starrating {
  margin-right: 10px;
}

#shopify-product-reviews .spr-summary-actions-newreview,
#shopify-product-reviews .spr-button {
  float: none;
}

#shopify-product-reviews {
  /* CONTENT */
}

#shopify-product-reviews .spr-form,
#shopify-product-reviews .spr-reviews {
  margin-top: 44px;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

#shopify-product-reviews .spr-form-submitted+.spr-reviews {
  margin-top: 0;
  border-top: none;
}

#shopify-product-reviews {
  /* REVIEW */
}

#shopify-product-reviews .spr-review {
  position: relative;
  border-top: none;
  margin: 28px 0 0 0;
  padding: 0;
}

#shopify-product-reviews .spr-review+.spr-review {
  margin-top: 32px;
}

#shopify-product-reviews .spr-review-header-starratings {
  margin-bottom: 12px;
}

#shopify-product-reviews .spr-review-header-title {
  margin-bottom: 14px;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
  font-size: 1rem;
  line-height: 1.75;
}

#shopify-product-reviews .spr-review-header-byline {
  position: absolute;
  margin: 0;
  bottom: calc(1em + 12px);
  left: 0;
  opacity: 1;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
}

#shopify-product-reviews .spr-review-header-byline strong {
  font-weight: normal;
}

#shopify-product-reviews .spr-review-content,
#shopify-product-reviews .spr-review-reply {
  margin-bottom: calc(1em + 22px);
}

#shopify-product-reviews .spr-review-reply {
  margin-top: -1.4em;
  padding: 0 0 0 12px;
  background: none;

  border-left: 2px solid {
      {
      settings.border_color
    }
  }

  ;
}

#shopify-product-reviews .spr-review-reply-shop {
  float: none;
}

#shopify-product-reviews .spr-review-content-body {
  line-height: 1.75;
  font-size: 1rem;
}

#shopify-product-reviews .spr-review-reportreview {
  color: {
      {
      settings.accent_color
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
  float: none;
  transition: color 0.2s ease-in-out;
}

#shopify-product-reviews .spr-review-reportreview:hover {
  text-decoration: underline;
  /*text-underline-position: under;*/
}

#shopify-product-reviews {
  /* FORM */
}

#shopify-product-reviews .spr-form {
  padding: 0;
}

#shopify-product-reviews .spr-form>form {
  padding-top: 22px;
}

#shopify-product-reviews .spr-form-title {
  display: none !important;
}

#shopify-product-reviews .spr-form-label {
  display: block;
  margin-bottom: 8px;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
  font-size: 1rem;
}

#shopify-product-reviews .spr-form-input-text,
#shopify-product-reviews .spr-form-input-textarea,
#shopify-product-reviews .spr-form-input-email {
  display: block;
  padding: 9px 14px;
  border-radius: 3px;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;
  width: 100%;
  min-height: 48px;
  line-height: normal;
  -webkit-appearance: none;
  resize: none;

  box-shadow: 0 2px 1px rgba({
      {
      settings.border_color
    }
  }

  , 0.2) inset;
transition: border-color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out,
color 0.2s ease-in-out;
}

#shopify-product-reviews .spr-form-input-textarea {
  line-height: 1.87;
  max-height: 180px;
}

#shopify-product-reviews .spr-form-input-text:focus,
#shopify-product-reviews .spr-form-input-textarea:focus,
#shopify-product-reviews .spr-form-input-email:focus {
  border-color: {
      {
      settings.accent_color
    }
  }

  ;

  box-shadow: 0 0 0 1px {
      {
      settings.accent_color
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;
  outline: none;
}

#shopify-product-reviews .spr-form-input::-webkit-input-placeholder {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
}

#shopify-product-reviews .spr-form-input::-moz-placeholder {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
}

#shopify-product-reviews .spr-form-input:-ms-input-placeholder {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
}

#shopify-product-reviews .spr-form-input::-ms-input-placeholder {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
}

#shopify-product-reviews .spr-form-input::placeholder {
  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
}

#shopify-product-reviews .spr-form-input.spr-starrating {
  display: block;
}

#shopify-product-reviews .spr-form-contact-name,
#shopify-product-reviews .spr-form-contact-email,
#shopify-product-reviews .spr-form-contact-location,
#shopify-product-reviews .spr-form-review-rating,
#shopify-product-reviews .spr-form-review-title,
#shopify-product-reviews .spr-form-review-body {
  margin-bottom: 25px;
}

#shopify-product-reviews .spr-form-message {
  display: block;
  margin-top: 6px;
  padding: 10px 15px;
  white-space: normal;
  font-size: 1rem;
  word-break: break-all;
  word-break: break-word;
}

#shopify-product-reviews .spr-form-message-success {
  background: {
      {
      settings.success_color | color_modify: 'alpha', 0.11
    }
  }

  ;

  color: {
      {
      settings.success_color
    }
  }

  ;
}

#shopify-product-reviews .spr-form-message-error {
  background: {
      {
      settings.error_color | color_modify: 'alpha', 0.07
    }
  }

  ;

  color: {
      {
      settings.error_color
    }
  }

  ;
}

#shopify-product-reviews {
  /* PAGINATION */
}

#shopify-product-reviews .spr-pagination {
  margin-top: 16px;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
  border-top: none;
}

#shopify-product-reviews .spr-pagination a {
  transition: color 0.2s ease-in-out;
}

#shopify-product-reviews .spr-pagination a:hover {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

#shopify-product-reviews .spr-pagination-page {
  display: inline-block;
}

#shopify-product-reviews .spr-pagination-page a,
#shopify-product-reviews .spr-pagination-page.is-active {
  display: block;
  margin: 0 2px;
  padding: 8px 11px;
  line-height: 1;
}

#shopify-product-reviews .spr-pagination-page.is-active {
  display: inline-block;

  background: {
      {
      settings.accent_color
    }
  }

  ;

  color: {
      {
      settings.secondary_background
    }
  }

  ;
  border-radius: 3px;
}

#shopify-product-reviews .spr-pagination-next a,
#shopify-product-reviews .spr-pagination-prev a {
  display: flex;
  align-items: center;
}

#shopify-product-reviews .spr-pagination-next svg,
#shopify-product-reviews .spr-pagination-prev svg {
  position: relative;
  width: 8px;
  height: 12px;
}

#shopify-product-reviews .spr-pagination-prev svg {
  margin-right: 14px;
}

#shopify-product-reviews .spr-pagination-next svg {
  margin-left: 14px;
}

@media screen and (max-width: 640px) {
  #shopify-product-reviews {
    /* CONTENT */
  }

  #shopify-product-reviews .spr-form,
  #shopify-product-reviews .spr-reviews {
    margin-top: 24px;
    border-top: none;
    padding: 0;
  }

  #shopify-product-reviews .spr-form-submitted {
    margin-top: 0;
  }

  #shopify-product-reviews .spr-form::before,
  #shopify-product-reviews .spr-form:not(.spr-form-submitted)+.spr-reviews::before,
  #shopify-product-reviews .spr-pagination::before {
    position: relative;
    content: "";
    display: block;
    width: calc(100% + 20px);
    height: 1px;

    background: {
        {
        settings.border_color
      }
    }

    ;
  }

  #shopify-product-reviews .spr-pagination>div {
    padding-top: 20px;
  }

  #shopify-product-reviews .spr-summary-actions {
    margin-top: 20px;
  }
}

@media screen and (min-width: 641px) {
  #shopify-product-reviews {
    /* HEADER */
  }

  #shopify-product-reviews .spr-header-title {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--6px;
    line-height: 1.5;
    margin-bottom: 15px;
  }

  #shopify-product-reviews {
    /* CONTENT */
  }

  #shopify-product-reviews.spr-reviews--has-reviews .spr-summary {
    margin-bottom: -13px;
  }

  #shopify-product-reviews .spr-summary-actions {
    position: absolute;
    right: 0;
    top: 0.5em;
    width: auto;
  }

  #shopify-product-reviews {
    /* REVIEW */
  }

  #shopify-product-reviews .spr-review+.spr-review {
    margin-top: 41px;
  }

  #shopify-product-reviews .spr-review:first-child {
    margin-top: 35px;
  }

  #shopify-product-reviews .spr-review-header-title {
    margin-bottom: 12px;
  }

  #shopify-product-reviews .spr-review-content,
  #shopify-product-reviews .spr-review-reply {
    margin: 0 0 17px 0;
  }

  #shopify-product-reviews .spr-review-footer {
    text-align: right;
  }

  #shopify-product-reviews .spr-review-reportreview {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
  }

  #shopify-product-reviews .spr-review-header-byline {
    bottom: 0;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
  }

  #shopify-product-reviews {
    /* PAGINATION */
  }

  #shopify-product-reviews .spr-pagination {
    margin-top: 30px;
    padding-top: 30px;

    border-top: 1px solid {
        {
        settings.border_color
      }
    }

    ;
  }
}

.rte {
  word-break: break-word;
  /* Prevent long words to go outside the container */
  /* Simple, minimum clearfix added to every RTE text to avoid issue with float */
}

.rte::after {
  content: "";
  display: block;
  clear: both;
}

.rte h1,
.rte h2,
.rte h3,
.rte h4,
.rte h5,
.rte h6 {
  margin: 1em 0;

  font-family: {
      {
      settings.heading_font.family
    }
  }

  ;

  font-weight: {
      {
      settings.heading_font.weight
    }
  }

  ;

  font-style: {
      {
      settings.heading_font.style
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

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

.rte h1 {
  margin: 1.4em 0 0.7em 0;
}

.rte h2 {
  margin: 1.55em 0 0.6em 0;
}

.rte h3 {
  margin: 1.8em 0 0.8em 0;
}

.rte h4 {
  margin: 1.9em 0 0.6em 0;
}

.rte h5 {
  margin: 2.2em 0 0.7em 0;
}

.rte h6 {
  margin: 2.5em 0 0.6em 0;
}

.rte img {
  display: block;
}

.rte p:not(:last-child),
.rte ul:not(:last-child),
.rte ol:not(:last-child) {
  margin-bottom: 0.7em;
}

.rte a:not(.button) {
  color: {
      {
      settings.link_color
    }
  }

  ;
  transition: color 0.2s ease-in-out;
  text-decoration: underline;
  text-underline-position: under;
}

.rte a:not(.button):hover {
  color: color-mix(in srgb, {
      {
      settings.link_color
    }
  }

  85%, black 15%);
}

.rte p+.button {
  margin-top: 1em;
}

.rte ul,
.rte ol {
  margin-left: 18px;
}

.rte ul li,
.rte ol li {
  position: relative;
}

.rte ul li:not(:last-child),
.rte ol li:not(:last-child) {
  margin-bottom: 5px;
}

.rte ul {
  list-style: none;
}

.rte ul li::before {
  position: absolute;
  content: "";
  left: -18px;
  top: 0.8em;
  height: 5px;
  width: 5px;
  border-radius: 100%;

  background: rgba({
      {
      settings.text_color
    }
  }

  , 0.4);
}

.rte ol {
  list-style-position: outside;
}

.rte img,
.rte .video-wrapper {
  margin: 2.7em 0;
}

.rte blockquote {
  margin: 3em 0 3em 10px;
  padding-left: 20px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;

  border-left: 5px solid rgba({
      {
      settings.text_color
    }
  }

  , 0.4);
}

.rte table {
  margin-top: 2em;
}

@media screen and (min-width: 641px) {
  .rte blockquote {
    padding-left: 30px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--3px;
  }

  .rte img,
  .rte .video-wrapper {
    margin: 3em 0;
  }
}

.section {
  margin: 20px 0;
}

.section--tight {
  margin: 15px 0;
}

/* When isolated, sections use padding instead of margin (useful for sections that has plain background) */
.section--isolated {
  margin: 0 !important;
  padding: 20px 0;
}

.section--isolated.section--tight {
  padding: 15px 0;
}

.section--text-centered {
  text-align: center;
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  overflow: hidden;
}

.section__title {
  margin-bottom: 0;
}

.section__action-link {
  margin-left: 20px;
  flex-shrink: 0;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.section__action-link svg {
  display: none;
}

/* The header stack is used when we display more info like a countdown timer */
.section__header-stack {
  display: flex;
  flex-direction: column;
}

/* Isolated sections are isolated due to their usage of different background/color, so here we must inherit the heading color */
.section--isolated .heading {
  color: inherit;
}

@media screen and (max-width: 640px) {
  .section__header-stack>.section__title+* {
    margin-top: 10px;
  }
}

@media screen and (min-width: 641px) {
  .section {
    margin: 30px 0;
  }

  .section--tight {
    margin: 20px 0;
  }

  .section--isolated {
    padding: 30px 0;
  }

  .section__header {
    overflow: visible;
    margin-bottom: 12px;
  }

  .section__header--tight {
    margin-bottom: 8px;
  }

  .section__header-stack {
    flex-direction: row;
    align-items: center;
  }

  .section__action-link {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
    transition: -webkit-transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .section__action-link svg {
    /*
    Note: for some strange reasons, on Safari (even last version), if we use a transform it cause a delay of up to 1 second on heavy home page before the
    animation starts. I couldn't find any explanation, but maybe the nested transforms (on both the link and SVG) does not work correctly on Safari. As a
    consequence, I've used a animation on right property (which is much slower but should be ok on this small piece of content)
    */
    position: relative;
    display: inline-block;
    height: 14px;
    width: 14px;
    vertical-align: -2px;
    margin-left: 8px;
    right: -5px;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .section__header-stack>.section__title {
    margin: 0 16px 0 0;
  }
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .section__action-link:hover {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .section__action-link:hover svg {
    opacity: 1;
    right: 0;
  }
}

.slideshow {
  height: 500px;
  overflow: hidden;
}

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

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

.slideshow__slide {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.slideshow__slide-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.slideshow:not(.flickity-enabled) .slideshow__slide:not(.is-selected) {
  display: none;
}

.slideshow__placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

.slideshow__image-placeholder {
  height: 100%;
  fill: dimgrey;
  background: darkgrey;
}

.slideshow__title {
  margin-bottom: 7px;
  color: inherit;
}

.slideshow__content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 25px;
}

.slideshow__content {
  max-width: 650px;
  margin: 0 auto 22px auto;
}

.slideshow .flickity-page-dots {
  bottom: 30px;
}

.slideshow .flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  margin: 0 8px;
  background: #ffffff;
  border: 3px solid #ffffff;
  -webkit-transform: none !important;
  transform: none !important;
  transition: background 0.25s ease-in-out;
}

.slideshow .flickity-page-dots .dot::before {
  top: -10px;
  right: -10px;
  left: -10px;
  bottom: -10px;
}

.slideshow .flickity-page-dots .dot.is-selected {
  background: transparent;
}

/** Overlay variation **/
.slideshow__slide--overlay::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  z-index: 1;
}

/** Preserve ratio variation

 IMPLEMENTATION NOTE: I am using two different ways to center the content. If the slideshow is a fixed height, the theme uses a flexbox
                      based approach, while if the slideshow is not fixed (ie. respecting the image aspect ratio), I use a transform based
                      approach. I could have keep it simpler and use the transform based everywhere (which would have removed a lot of code),
                      but the transform based is proved to reduce sometimes the quality of the text and make it a bit blurry. This is why
                      there is another, more optimized way to position when it is possible
 **/
.slideshow--preserve-ratio {
  height: auto !important;
}

.slideshow--preserve-ratio .slideshow__slide {
  height: auto;
}

.slideshow--preserve-ratio .slideshow__slide-inner {
  position: relative;
  display: block;
  width: auto;
  height: auto;
}

.slideshow--preserve-ratio .slideshow__content-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 641px) {
  .slideshow:not(.slideshow--edge2edge) {
    margin: 40px 0;
  }

  .slideshow:not(.slideshow--edge2edge) .flickity-viewport {
    border-radius: 3px;
  }

  .slideshow__image-placeholder {
    height: auto;
    width: 100%;
  }

  /* Positioning for fixed height carousel */
  .slideshow__slide-inner--top-left,
  .slideshow__slide-inner--top-center,
  .slideshow__slide-inner--top-right {
    justify-content: flex-start;
  }

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

  .slideshow__slide-inner--bottom-left .slideshow__content-wrapper,
  .slideshow__slide-inner--bottom-center .slideshow__content-wrapper,
  .slideshow__slide-inner--bottom-right .slideshow__content-wrapper {
    padding-bottom: 75px;
    padding-top: 25px;
  }

  .slideshow__slide-inner--top-left,
  .slideshow__slide-inner--middle-left,
  .slideshow__slide-inner--bottom-left {
    text-align: left;
  }

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

  .slideshow__slide-inner--top-right,
  .slideshow__slide-inner--middle-right,
  .slideshow__slide-inner--bottom-right {
    text-align: right;
  }

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

  /* Positioning for non-fixed height carousel */
  .slideshow--preserve-ratio .slideshow__slide-inner--top-left .slideshow__content-wrapper,
  .slideshow--preserve-ratio .slideshow__slide-inner--top-center .slideshow__content-wrapper,
  .slideshow--preserve-ratio .slideshow__slide-inner--top-right .slideshow__content-wrapper {
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .slideshow--preserve-ratio .slideshow__slide-inner--bottom-left .slideshow__content-wrapper,
  .slideshow--preserve-ratio .slideshow__slide-inner--bottom-center .slideshow__content-wrapper,
  .slideshow--preserve-ratio .slideshow__slide-inner--bottom-right .slideshow__content-wrapper {
    top: auto;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 1000px) {
  .slideshow {
    height: 560px;
  }

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

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

.team {
  margin-top: 45px;
  margin-bottom: 62px;
  text-align: center;
}

.team__block-list {
  margin-bottom: 45px;
}

.team__block-item {
  margin-bottom: 20px;
}

@media screen and (min-width: 641px) {
  .team {
    margin-top: 62px;
    margin-bottom: 80px;
  }

  .team__block-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: -15px -15px 47px -15px;
  }

  .team__block-item {
    margin: 15px;
    flex: none;
    width: calc(50% - 30px);
  }
}

@media screen and (min-width: 1000px) {
  .team__block-item {
    width: calc(33.33333% - 30px);
  }
}

@media screen and (min-width: 1280px) {
  .team__block-item {
    width: calc(25% - 30px);
  }
}

/* Separator */
.team__section-title {
  margin-bottom: 25px;
}

@media screen and (min-width: 641px) {
  .team__section-title {
    margin-bottom: 40px;
  }
}

/* Member */
.team__member {
  padding: 30px 20px 20px 20px;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  border-radius: 3px;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
}

.team__member-pic {
  width: 144px;
  margin-bottom: 20px;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  padding: 8px;

  background: {
      {
      settings.background
    }
  }

  ;
}

.team__member-pic--rounded {
  border-radius: 50%;
}

.team__member-title,
.team__member-subheading {
  margin-bottom: 0;
  line-height: 1.4;
}

.team__member-title {
  margin-bottom: 6px;
}

.team__member-link {
  display: inline-block;
  margin-top: 6px;
}

/* Promotion */
.team__promotion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  padding: 30px;
}

.team__promotion .heading {
  color: inherit;
  margin-bottom: 8px;
}

.team__promotion .button {
  min-width: 105px;
  margin-top: 22px;
}

.text-with-icons__item {
  width: 100%;
  line-height: 1.6;
}

.text-with-icons__title {
  margin-bottom: 4px;
}

.text-with-icons__icon-wrapper {
  margin-bottom: 15px;
}

.text-with-icons__icon-wrapper svg {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.text-with-icons__icon-wrapper img {
  max-width: 30px;
}

.text-with-icons__content>p {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .text-with-icons {
    padding-bottom: 28px;
    text-align: center;
  }

  .text-with-icons::after {
    content: "flickity";
    display: none;
  }

  .text-with-icons--stacked {
    padding-bottom: 0;
  }

  .text-with-icons--stacked .text-with-icons__item:not(:last-child) {
    margin-bottom: 34px;
  }

  .text-with-icons--stacked::after {
    content: "";
    /* Disable Flickity */
  }
}

@media screen and (min-width: 641px) {
  .text-with-icons {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -40px -45px -40px;
  }

  .text-with-icons__item {
    display: flex;
    flex-basis: calc(50% - 90px);
    margin: 0 40px 45px 40px;
  }

  .text-with-icons__icon-wrapper {
    margin: 0.5em 18px 0 0;
  }
}

@media screen and (min-width: 1000px) {
  .text-with-icons {
    padding: 0 100px;
    justify-content: center;
  }

  .text-with-icons__item {
    display: flex;
    flex-basis: calc(50% - 140px);
  }
}

@media screen and (min-width: 1280px) {
  .text-with-icons {
    padding: 0;
    margin: 0 -35px;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  .text-with-icons__item {
    flex-basis: calc(25% - 70px);
    margin: 0 35px;
  }
}

/* Boxed variation */
.text-with-icons--boxed {
  display: block;
  text-align: center;
  padding-bottom: 0;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  border-radius: 3px;
}

.text-with-icons--boxed .text-with-icons__item {
  display: block;
  text-align: center;
  padding: 28px 35px;
}

.text-with-icons--boxed .text-with-icons__item:not(:first-child) {
  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.text-with-icons--boxed .text-with-icons__icon-wrapper {
  margin: 0 0 1em 0;
}

@media screen and (min-width: 641px) {
  .text-with-icons--boxed {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }

  .text-with-icons--boxed .text-with-icons__item {
    margin: 0;
    flex: 1 0 0;
  }

  .text-with-icons--boxed .text-with-icons__item:not(:first-child) {
    border-top: none;

    border-left: 1px solid {
        {
        settings.border_color
      }
    }

    ;
  }
}

/**
 * This file contains several blocks that are too small to have their own file
 */
/**
 * --------------------------------------------------------------------
 * CLEARFIX
 * --------------------------------------------------------------------
 */
.clearfix::before,
.clearfix::after {
  display: table;
  content: "";
}

/**
 * --------------------------------------------------------------------
 * LIST
 * --------------------------------------------------------------------
 */
.list--unstyled {
  list-style: none;
}

/**
 * --------------------------------------------------------------------
 * COLLAPSIBLE
 * --------------------------------------------------------------------
 */
.collapsible {
  overflow: hidden;
  height: 0;
  transition: height 0.2s ease-in-out;
}

/**
 * --------------------------------------------------------------------
 * SOCIAL MEDIA
 * --------------------------------------------------------------------
 */
.social-media__item-list {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}

.social-media__item {
  display: inline-block;
  margin: 5px;
}

.social-media__item>a {
  display: block;
}

.social-media__item svg {
  width: 28px;
  height: 28px;
  opacity: 0.4;
  transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out;
  will-change: opacity;
}

/* Stacked variation */
.social-media__item-list--stack {
  display: block;
  margin: -10px 0;
}

.social-media__item-list--stack .social-media__item {
  display: block;
  margin: 0;
  padding: 7px 0;
}

.social-media__item-list--stack svg {
  vertical-align: top;
  margin-right: 12px;
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .social-media__item:hover svg {
    opacity: 1;
  }

  .social-media__item--facebook:hover svg {
    color: #3b5998;
  }

  .social-media__item--twitter:hover svg {
    color: #1da1f2;
  }

  .social-media__item--pinterest:hover svg {
    color: #bd081c;
  }

  .social-media__item--instagram:hover svg {
    color: #d83776;
  }

  .social-media__item--youtube:hover svg {
    color: #ff0000;
  }

  .social-media__item--vimeo:hover svg {
    color: #1ab7ea;
  }

  .social-media__item--linkedin:hover svg {
    color: #0077b5;
  }

  .social-media__item--snapchat:hover svg {
    color: #f5dc30;
  }

  .social-media__item--tumblr:hover svg {
    color: #35465c;
  }

  .social-media__item--fancy:hover svg {
    color: #494e58;
  }

  .social-media__item--rss:hover svg {
    color: #f26522;
  }
}

/**
 * --------------------------------------------------------------------
 * ALERT
 * --------------------------------------------------------------------
 */
.alert {
  display: block;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-radius: 2px;
  white-space: normal;
  font-size: 1rem;
  word-break: break-all;
  word-break: break-word;

  background: {
      {
      settings.background
    }
  }

  ;

  color: {
      {
      settings.heading_color
    }
  }

  ;
  text-align: left;
}

.alert:last-child {
  margin-bottom: 0;
}

.alert--block {
  display: block;
}

.alert--center {
  text-align: center;
}

.alert--tight {
  padding: 6px 14px;
}

.alert--error {
  background: {
      {
      settings.error_color | color_modify: 'alpha', 0.07
    }
  }

  ;

  color: {
      {
      settings.error_color
    }
  }

  ;
}

.alert--error a:hover {
  color: color-mix(in srgb, {
      {
      settings.error_color
    }
  }

  90%, black 10%);
}

.alert--success {
  background: {
      {
      settings.success_color | color_modify: 'alpha', 0.11
    }
  }

  ;

  color: {
      {
      settings.success_color
    }
  }

  ;
}

.alert--success a:hover {
  color: color-mix(in srgb, {
      {
      settings.success_color
    }
  }

  90%, black 10%);
}

.alert__ribbon {
  margin-left: 5px;
  margin-right: 25px;
  align-self: center;
}

.alert__ribbon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.alert__error-list {
  list-style: none;
}

.alert a {
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

/**
 * --------------------------------------------------------------------
 * PAGINATION
 * --------------------------------------------------------------------
 */
.pagination {
  padding: 40px 0;

  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.pagination__inner {
  position: relative;
}

.pagination__prev,
.pagination__next {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  height: 100%;
}

.pagination__prev svg,
.pagination__next svg {
  position: relative;
  width: 8px;
  height: 12px;
}

.pagination__prev {
  left: 0;
}

.pagination__prev svg {
  margin-right: 14px;
}

.pagination__next {
  right: 0;
}

.pagination__next svg {
  margin-left: 14px;
}

.pagination__nav,
.pagination__page-count {
  display: block;
  text-align: center;
}

.pagination__nav {
  display: none;
}

.pagination__nav-item {
  display: inline-block;
  margin: 0 2px;
  padding: 8px 11px;
  line-height: 1;
}

.pagination__nav-item.is-active {
  background: {
      {
      settings.primary_button_background
    }
  }

  ;

  color: {
      {
      settings.primary_button_text_color
    }
  }

  ;
  border-radius: 3px;
}

/* If pagination is inside a card, we adapt the spacing */
.card .pagination {
  padding: 20px;
}

@media screen and (min-width: 641px) {
  .pagination__nav {
    display: block;
  }

  .pagination__page-count {
    display: none;
  }

  .card .pagination {
    padding: 20px 30px;
  }
}

/**
 * --------------------------------------------------------------------
 * SCROLLER
 * --------------------------------------------------------------------
 */
@media screen and (max-width: 999px) {
  .scroller {
    overflow: hidden;
    margin: 0 -20px;
    /* On mobile we remove the container gutter to make sure the scroll is edge to edge */
  }

  .scroller--flush {
    margin: 0 !important;
  }

  .scroller__inner {
    padding-bottom: 20px;
    margin-bottom: -20px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    white-space: nowrap;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .scroller {
    margin: 0 -40px;
  }

  .scroller__inner {
    scroll-padding-left: 40px;
  }

  .scroller--mobile-only {
    margin: 0;
    overflow: visible;
  }

  .scroller--mobile-only>.scroller__inner {
    padding-bottom: 0;
    margin-bottom: 0;
    overflow: visible;
  }
}

/**
 * --------------------------------------------------------------------
 * SKELETON
 * --------------------------------------------------------------------
 */
@-webkit-keyframes skeletonShimmerAnimation {
  0% {
    opacity: 0.45;
  }

  100% {
    opacity: 0.9;
  }
}

@keyframes skeletonShimmerAnimation {
  0% {
    opacity: 0.45;
  }

  100% {
    opacity: 0.9;
  }
}

.skeleton-container {
  -webkit-animation: skeletonShimmerAnimation 1s linear infinite alternate;
  animation: skeletonShimmerAnimation 1s linear infinite alternate;
  will-change: opacity;
}

.skeleton-text {
  height: 10px;
  width: 100%;

  background: {
      {
      settings.border_color
    }
  }

  ;
}

.skeleton-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  background: {
      {
      settings.border_color
    }
  }

  ;
}

.skeleton-paragraph .skeleton-text {
  margin-bottom: 8px;
}

.skeleton-paragraph .skeleton-text:last-child {
  width: 38%;
  margin-bottom: 0;
}

/**
 * --------------------------------------------------------------------
 * PLUS BUTTON
 * --------------------------------------------------------------------
 */
.plus-button {
  display: block;
  position: relative;
  right: 0;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
}

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

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

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

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

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

@media screen and (min-width: 641px) {
  .plus-button--large {
    width: 14px;
    height: 14px;
  }

  .plus-button--large::before {
    width: 14px;
  }

  .plus-button--large::after {
    height: 14px;
  }
}

/**
 * --------------------------------------------------------------------
 * SHOPIFY CHALLENGE
 * --------------------------------------------------------------------
 */
.shopify-challenge__container {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

.shopify-challenge__button.shopify-challenge__button {
  position: relative;
  display: inline-block;
  padding: 9px 30px;
  min-height: 48px;
  line-height: normal;

  border-color: {
      {
      settings.primary_button_background
    }
  }

  ;
  border-radius: 2px;
  text-align: center;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px;
  cursor: pointer;
  transition: background 0.25s ease-in-out,
  color 0.25s ease-in-out,
  border 0.25s ease-in-out;

  background: {
      {
      settings.primary_button_background
    }
  }

  ;

  color: {
      {
      settings.primary_button_text_color
    }
  }

  ;
}

.shopify-challenge__button.shopify-challenge__button:hover {
  background: color-mix(in srgb, {
      {
      settings.primary_button_background
    }
  }

  88%, black 12%);

border-color: color-mix(in srgb, {
    {
    settings.primary_button_background
  }
}

88%, black 12%);
}

@media screen and (min-width: 641px) {
  .shopify-challenge__container {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}

/**
 * --------------------------------------------------------------------
 * SHOPIFY POLICY CONTAINER
 * --------------------------------------------------------------------
 */
.shopify-policy__container {
  max-width: 800px;
}

.shopify-policy__title {
  margin: 30px 0;
}

.shopify-policy__title h1 {
  margin-bottom: 0;

  font-family: {
      {
      settings.heading_font.family
    }
  }

  ;

  font-weight: {
      {
      settings.heading_font.weight
    }
  }

  ;

  font-style: {
      {
      settings.heading_font.style
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--9px;
  line-height: 1.45;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

@media screen and (min-width: 641px) {
  .shopify-policy__title {
    margin: 30px 0;
  }

  .shopify-policy__title h1 {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--13px;
    line-height: 1.45;
  }
}

/**
 * --------------------------------------------------------------------
 * ANNOUNCEMENT BAR
 * --------------------------------------------------------------------
 */
.announcement-bar {
  position: relative;
  display: block;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;

  border-bottom: 1px solid rgba({
      {
      settings.header_light_text_color
    }
  }

  , 0.3);
}

.announcement-bar__content {
  display: block;
  padding: 4px 0;
  margin-bottom: 0;
}

.announcement-bar__content--center {
  text-align: center;
}

@media screen and (max-width: 640px) {
  .announcement-bar__inner {
    text-align: center;
    /* Always centered on mobile no matter the setting */
  }
}

@media screen and (min-width: 641px) {
  .announcement-bar {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-1px;
    text-align: left;
  }

  .announcement-bar__inner {
    display: flex;
    align-items: center;
  }

  .announcement-bar__content {
    padding: 7px 0;
    margin-right: auto;
  }

  .announcement-bar__content--center {
    margin-left: auto;
    padding-left: var(--announcement-bar-button-width, 0px);
    /* We have to shift by the button width to center visually */
  }

  .announcement-bar__button {
    padding: 7px 18px 7px 15px;

    background: {
        {
        settings.header_accent_color
      }
    }

    ;

    color: {
        {
        settings.secondary_background
      }
    }

    ;

    box-shadow: 0 1px {
        {
        settings.header_accent_color
      }
    }

    ;
  }

  .announcement-bar__button svg {
    display: inline-block;
    width: 20px;
    height: 17px;
    margin-right: 12px;
    vertical-align: text-bottom;
  }

  .announcement-bar__close-container {
    position: relative;
  }

  .announcement-bar__close {
    position: absolute;
    top: 25px;
    right: 0;

    color: {
        {
        settings.heading_color
      }
    }

    ;
    transition: color 0.2s ease-in-out;
  }

  .announcement-bar__close:hover {
    color: {
        {
        settings.accent_color
      }
    }

    ;
  }

  .announcement-bar__close svg {
    width: 19px;
    height: 19px;
  }

  .announcement-bar__newsletter {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    text-align: center;
    transition: height 0.5s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  }

  .announcement-bar__newsletter[aria-hidden=false] {
    visibility: visible;
  }

  .announcement-bar__newsletter-inner {
    margin: 50px 0;
  }
}

/**
 * --------------------------------------------------------------------
 * OFFER ITEM
 * --------------------------------------------------------------------
 */
.offer-item {
  padding: 20px;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  border-radius: 3px;
}

.offer-item__image-wrapper {
  min-width: 70px;
  max-width: 70px;
  margin-bottom: 14px;
}

.offer-item__title {
  margin-bottom: 6px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--2px;
}

.offer-item__content {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-1px;
}

@media screen and (min-width: 641px) {
  .offer-item {
    padding: 28px 30px;
  }

  .offer-item__image-wrapper {
    min-width: 110px;
    max-width: 110px;
  }
}

@media screen and (min-width: 1280px) {
  .offer-item--inline {
    display: flex;
    align-items: center;
  }

  .offer-item--inline .offer-item__image-wrapper {
    margin: 0 30px 0 0;
  }
}

/**
 * --------------------------------------------------------------------
 * IMAGE WITH TEXT
 * --------------------------------------------------------------------
 */
.image-with-text {
  display: flex;
  flex-direction: column;
}

.image-with-text__image-container {
  margin-bottom: 25px;
}

@media screen and (max-width: 999px) {
  .image-with-text__image-container {
    width: 100% !important;
    order: -1;
    /* Make sure the image is always coming first on small screens */
  }
}

@media screen and (min-width: 1000px) {
  .image-with-text {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .image-with-text__image-container {
    max-width: 50%;
    /* Make sure that we constraint a maximum and minimum width no matter what the merchant choose to keep the text readable */
    min-width: 30%;
  }

  .image-with-text__image-container,
  .image-with-text__text-container {
    width: 50%;
    margin: 0;
  }

  .image-with-text__text-container:last-child {
    padding-left: 60px;
  }

  .image-with-text__text-container:first-child {
    text-align: right;
    padding-right: 60px;
  }

  .image-with-text__text-container:first-child .image-with-text__text-aligner {
    display: inline-block;
    text-align: left;
  }
}

@media screen and (min-width: 1000px) {
  .image-with-text__image-container {
    max-width: none;
    min-width: 0;
  }
}

@media screen and (min-width: 1280px) {
  .image-with-text__text-container:last-child {
    padding-left: 75px;
  }

  .image-with-text__text-container:first-child {
    padding-right: 75px;
  }
}

/**
 * --------------------------------------------------------------------
 * NEWSLETTER
 * --------------------------------------------------------------------
 */
.newsletter {
  margin-top: 30px;
}

.newsletter__form {
  padding-bottom: 10px;
}

.newsletter__text {
  margin-top: 16px;
}

/* Compact variation */
.newsletter--compact .newsletter__form {
  padding-bottom: 0;
}

.newsletter--compact .newsletter__text {
  margin-top: 16px;
}

/**
 * --------------------------------------------------------------------
 * QUICK LINKS
 * --------------------------------------------------------------------
 */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  border-radius: 3px;
  list-style: none;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  font-size: 16px;
}

.quick-links__link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 50%;

  /* we cannot use flex-basis due to a bug in IE11 as flex-basis does not take into account padding in this browser */
  box-shadow: 1px 0 {
      {
      settings.border_color
    }
  }

  ,
  0 1px {
      {
      settings.border_color
    }
  }

  ;
  padding: 20px 10px;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-transform: none;
  transition: color 0.2s ease-in-out;
}

.quick-links__link:hover {
  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.quick-links__link--grow {
  flex-grow: 1;
}

.quick-links__image-container {
  display: block;
  margin: 0 auto;
  flex: 1 1 auto;
  font-size: 0;
}

.quick-links__image-ie-fix {
  margin: 0 auto;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .quick-links__link:hover .quick-links__image-ie-fix {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}

@media screen and (min-width: 641px) {
  .quick-links__link {
    padding: 24px;
    width: 33.333333%;
    /* we cannot use flex-basis due to a bug in IE11 as flex-basis does not take into account padding in this browser */
  }
}

@media screen and (min-width: 1000px) {
  .quick-links__link {
    width: 16.66666667%;
    /* we cannot use flex-basis due to a bug in IE11 as flex-basis does not take into account padding in this browser */
  }
}

/**
 * --------------------------------------------------------------------
 * BREADCRUMB
 * --------------------------------------------------------------------
 */
.breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
}

.breadcrumb__list svg {
  margin: 0 7px;
  width: 6px;
  height: 8px;
  vertical-align: inherit;
}

/**
 * --------------------------------------------------------------------
 * LOADING BAR
 * --------------------------------------------------------------------
 */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  opacity: 0;

  background: {
      {
      settings.accent_color
    }
  }

  ;
  transition: width 0.25s ease-in-out;
  z-index: 50;
  pointer-events: none;
}

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

/**
 * --------------------------------------------------------------------
 * EMPTY STATE
 * --------------------------------------------------------------------
 */
.empty-state {
  margin: 100px 0;
  text-align: center;
}

.empty-state--extra-tight {
  margin: 30px 0;
}

.empty-state--tight {
  margin: 40px 0;
}

.empty-state__heading {
  margin-bottom: 15px;
}

.empty-state__text {
  margin-bottom: 32px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;
}

.empty-state__quick-form {
  max-width: 410px;
  margin: 40px auto 25px auto;
}

.empty-state__button-container {
  margin-top: 16px;
}

.empty-state__button {
  min-width: 230px;
}

.empty-state__icon {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
}

.empty-state__icon .icon--package {
  width: 46px;
  height: 46px;
}

.empty-state__icon .icon--address {
  width: 46px;
  height: 45px;
}

.empty-state__icon-description {
  margin-bottom: 30px;
}

.empty-state__count {
  position: absolute;
  top: 2px;
  right: -9px;
  height: 20px;
  width: 20px;
  line-height: 20px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
  text-align: center;

  background: {
      {
      settings.accent_color
    }
  }

  ;

  color: {
      {
      settings.header_text_color
    }
  }

  ;
  border-radius: 100%;
}

@media screen and (min-width: 641px) {
  .empty-state {
    margin: 170px 0;
  }

  .empty-state--extra-tight {
    margin: 40px 0;
  }

  .empty-state--tight {
    margin: 105px 0;
  }
}

/**
 * --------------------------------------------------------------------
 * PAYMENT METHODS
 * --------------------------------------------------------------------
 */
.payment-list {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}

.payment-list__item {
  width: 38px;
  height: 24px;
  margin: 4px;
}

.payment-list__notice {
  margin-top: 18px;
}

/* Centered variation */
.payment-list--centered {
  justify-content: center;
}

/**
 * --------------------------------------------------------------------
 * LAYOUT
 *
 * Layout component can be used to create a two columns layout on laptop.
 * You can also create a smaller section by adding the "secondary" class
 * to a given layout section
 * --------------------------------------------------------------------
 */
.layout {
  margin-bottom: 70px;
}

.layout .layout {
  margin-top: 18px;
  margin-bottom: 0;
  /* nested layouts don't have margin bottom */
}

.layout__section {
  margin-bottom: 18px;
}

.layout .card:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 999px) {
  .layout--reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media screen and (min-width: 641px) {
  .layout {
    margin-bottom: 100px;
  }

  .layout .layout {
    margin-top: 30px;
  }
}

@media screen and (min-width: 1000px) {
  .layout {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
  }

  .layout--pad {
    padding-top: 25px;
  }

  .layout__section {
    margin: 0 15px;
    /* We need to use the individual properties instead of short hand due to a bug in IE11 */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
  }

  .layout__section:only-child {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .layout__section--secondary {
    flex: none;
    width: 260px;
  }

  .layout__section--large-secondary {
    flex: none;
    width: 320px;
  }
}

@media screen and (min-width: 1280px) {
  .layout__section--secondary {
    width: 288px;
  }

  .layout__section--large-secondary {
    width: 365px;
  }
}

/**
 * --------------------------------------------------------------------
 * MODAL
 * --------------------------------------------------------------------
 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.modal::before {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.modal[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal[aria-hidden=false] .modal__dialog {
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
  transition: transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
  transition: transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
}

.modal__dialog {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100vh;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  transition: visibility 0.25s ease-in-out,
  -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out,
  visibility 0.25s ease-in-out,
  -webkit-transform 0.25s ease-in-out;
}

.modal__loader {
  display: none;
  padding: 60px 0;
  text-align: center;
}

.modal__loader .icon--search-loader {
  width: 35px;
  height: 35px;

  color: {
      {
      settings.accent_color
    }
  }

  ;
}

.modal__header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  z-index: 1;
}

.modal__header,
.modal__content {
  padding: 20px;
}

.modal__header+.modal__content {
  padding-top: 30px;
}

.modal__title {
  margin-bottom: 0;
  text-align: center;
}

.modal__description {
  display: block;
  margin-bottom: 30px;
  text-align: center;
}

.modal__close {
  color: {
      {
      settings.heading_color
    }
  }

  ;
  z-index: 1;
}

.modal__close svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Ugly fix for border radius */
.modal .card {
  background: none;
}

/* Loading state */
.modal.is-loading .modal__loader {
  display: block;
}

.modal.is-loading .modal__inner {
  display: none;
}

@media screen and (max-width: 640px) {
  .modal__content--ios-push {
    padding-bottom: 45px;
    /* This allows to take into account the toolbar height of iOS to avoid annoying double click */
  }
}

@media screen and (min-width: 641px) {
  .modal {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal__dialog {
    width: 580px;
    height: auto;
    max-height: calc(100% - 80px);
    border-radius: 3px;
  }

  .modal__dialog--stretch {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }

  .modal__header,
  .modal__content {
    padding: 30px;
  }

  .modal__header {
    position: relative;
    display: block;
    padding-bottom: 0;
    text-align: center;
    border-bottom: none;
  }

  .modal__close {
    position: absolute;
    right: 28px;
    top: 28px;
  }

  .modal__description {
    margin-top: -18px;
  }
}

/**
 * --------------------------------------------------------------------
 * ICON STATE
 *
 * This allows to switch between two icons depending on an expanded status
 * --------------------------------------------------------------------
 */
.icon-state {
  position: relative;
  vertical-align: middle;
}

.icon-state .icon-state__primary,
.icon-state .icon-state__secondary {
  display: block;
  transition: opacity 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out, -webkit-transform 0.35s ease-in-out;
}

.icon-state .icon-state__secondary {
  position: absolute;
  top: 50%;
  left: 0;
  opacity: 0;
  -webkit-transform: translateY(-50%) scale(0.3);
  transform: translateY(-50%) scale(0.3);
}

.icon-state[aria-expanded=true] .icon-state__primary {
  opacity: 0;
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
}

.icon-state[aria-expanded=true] .icon-state__secondary {
  opacity: 1;
  -webkit-transform: translateY(-50%) scale(1);
  transform: translateY(-50%) scale(1);
}

/**
 * ----------------------------------------------------------------------------
 * TOOLTIP
 * ----------------------------------------------------------------------------
 */
@media (-moz-touch-enabled: 0),
(hover: hover) {
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]::before {
    position: absolute;
    content: attr(data-tooltip);
    bottom: calc(100% + 3px);
    left: 50%;
    padding: 2px 11px;
    white-space: nowrap;

    background: {
        {
        settings.accent_color
      }
    }

    ;

    color: {
        {
        settings.secondary_background
      }
    }

    ;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    border-radius: 3px;
    box-shadow: 0 1px rgba(0, 0, 0, 0.065);
    transition: visibility 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
    z-index: 1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  [data-tooltip]::after {
    position: absolute;
    content: "";
    left: calc(50% - 7px);
    bottom: calc(100% - 2px);
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;

    border-color: transparent transparent {
        {
        settings.accent_color
      }
    }

      {
        {
        settings.accent_color
      }
    }

    ;
    visibility: hidden;
    z-index: 1;
    opacity: 0;
    transition: visibility 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
    -webkit-transform: rotate(-45deg);
    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;
    -webkit-transform: none;
    transform: none;
  }

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

/**
 * --------------------------------------------------------------------
 * QUANTITY SELECTOR
 * --------------------------------------------------------------------
 */
.quantity-selector {
  display: inline-flex;
  align-items: center;
  height: 38px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-0px;

  border: 1px solid {
      {
      settings.border_color
    }
  }

  ;
  border-radius: 3px;

  box-shadow: 0 1px 1px rgba({
      {
      settings.border_color
    }
  }

  , 0.2);
vertical-align: middle;
}

.quantity-selector svg:hover {
  opacity: 1;
}

.quantity-selector .icon--minus {
  width: 10px;
  height: 2px;
}

.quantity-selector .icon--plus {
  width: 10px;
  height: 10px;
}

.quantity-selector__button {
  display: flex;
  align-items: center;
  padding: 0 12px;

  color: rgba({
      {
      settings.text_color
    }
  }

  , 0.6);
height: 100%;
transition: color 0.2s ease-in-out;
}

.quantity-selector__button:not([disabled]):hover {
  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.quantity-selector__value {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 5px;
  min-width: 32px;
  text-align: center;
  border: none;
}

.quantity-selector__value:focus {
  outline: none;
}

/**
 * --------------------------------------------------------------------
 * SHIPPING ESTIMATOR
 * --------------------------------------------------------------------
 */
.shipping-estimator__results {
  margin: 24px 0 2px 0;
  font-size: 1rem;
}

.shipping-estimator__results p {
  margin-bottom: 6px;
}

.shipping-estimator__results ul {
  color: {
      {
      settings.heading_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

/**
 * --------------------------------------------------------------------
 * COOKIE BAR
 * --------------------------------------------------------------------
 */
.cookie-bar {
  position: fixed;
  bottom: 20px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  width: 100%;
  z-index: 3;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-4px;
  transition: opacity 0.35s ease-in-out,
  visibility 0.35s ease-in-out,
  -webkit-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out,
  opacity 0.35s ease-in-out,
  visibility 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out,
  opacity 0.35s ease-in-out,
  visibility 0.35s ease-in-out,
  -webkit-transform 0.35s ease-in-out;
}

.cookie-bar[aria-hidden=false] {
  visibility: visible;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.cookie-bar__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px;
  z-index: 4;
  border-radius: 3px;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
}

.cookie-bar__text {
  line-height: 1.45;
}

.cookie-bar__button {
  margin-top: 12px;
  padding: 0 16px;
  line-height: 30px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-3px;
}

@media screen and (min-width: 641px) {
  .cookie-bar {
    bottom: 25px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
  }

  .cookie-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px 20px 25px;
  }

  .cookie-bar__text {
    line-height: 1.25;
  }

  .cookie-bar__button {
    flex: none;
    margin-left: 25px;
    margin-top: 0;
    padding: 0 18px;
    line-height: 36px;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-2px;
  }
}

/**
 * --------------------------------------------------------------------
 * CONTACT FORM
 * --------------------------------------------------------------------
 */
.contact {
  margin-bottom: 40px;
}

.contact__store-info {
  margin-top: 50px;
}

.contact__store-heading,
.contact__store-image {
  margin-bottom: 30px;
}

@media screen and (min-width: 641px) {
  .contact {
    margin-bottom: 90px;
  }
}

@media screen and (min-width: 1000px) {
  .contact__store-info {
    margin-top: 0;
    margin-left: 25px;
  }
}

/**
 * --------------------------------------------------------------------
 * PASSWORD PAGE
 * --------------------------------------------------------------------
 */
.password {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  padding: 20px 0;
}

@supports (--css: variables) {
  .password {
    height: calc(100vh - var(--header-height, 0px));
  }
}

.password__content {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  text-align: center;
}

.password__footer {
  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px-2px;
  text-align: center;
}

.password__footer-social {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.password__social-text {
  margin-right: 20px;
}

.password__powered-by a {
  display: inline-block;
  margin-left: 4px;
  vertical-align: bottom;
}

.password__powered-by svg {
  width: 98px;
  height: 28px;
}

.password__admin-link {
  display: block;
  margin-left: 18px;
}

@media screen and (min-width: 1000px) {

  /* On password there is no search bar so we increase the header */
  .template-password .header {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .password {
    padding: 40px 0;
  }

  .password__footer {
    text-align: left;
  }

  .password__footer--with-social {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .password__admin-link {
    display: inline-block;
  }

  .password__footer-social {
    margin-top: 0;
  }
}

/**
 * --------------------------------------------------------------------
 * FAQ
 * --------------------------------------------------------------------
 */
.faq {
  margin: 40px 0 70px 0;
}

.faq__group {
  margin-bottom: 30px;
}

.faq__group-title {
  margin-bottom: 20px;
  text-align: center;
}

.faq__item {
  padding: 20px 20px;

  background: {
      {
      settings.secondary_background
    }
  }

  ;

  border-top: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.faq__item+.faq__item {
  border-top: none;
}

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

.faq__question .plus-button {
  margin-left: 40px;
}

.faq__answer-wrapper {
  overflow: hidden;
  height: 0;
  transition: height 0.2s ease-in-out;
}

.faq__answer {
  margin: 10px 30px 0 0;
}

.faq__contact-info {
  margin-top: 50px;
}

/* Those adjustments are quite ugly as they are small adjustments over generic blocks, but well... designers want the
   design as they imagined it, even if it's a bit less consistent across the board */
.faq__contact-info .page__header {
  margin: 30px 0;
}

.faq__contact-info .page__description {
  margin-top: 18px;
}

@media screen and (min-width: 641px) {
  .faq {
    margin: 70px 0 115px 0;
  }

  .faq__group {
    margin-bottom: 50px;
  }

  .faq__group-title {
    margin-bottom: 25px;
    margin-left: 0;
  }

  .faq__item {
    padding: 20px 30px;

    border: 1px solid {
        {
        settings.border_color
      }
    }

    ;
    border-radius: 3px 3px 0 0;
  }

  .faq__item+.faq__item {
    border-radius: 0;
  }

  .faq__item:last-child {
    border-radius: 0 0 3px 3px;
  }
}

@media screen and (min-width: 1000px) {
  .faq__group {
    margin-bottom: 0;
  }

  .faq__group:first-child .faq__group-title {
    margin-top: 10px;
  }

  .faq__group+.faq__group {
    margin-top: 50px;
  }
}

/**
 * --------------------------------------------------------------------
 * POPUP NEWSLETTER
 * --------------------------------------------------------------------
 */
.modal--newsletter {
  bottom: 0;
  top: auto;
  height: auto;
}

.modal--newsletter .modal__dialog {
  position: relative;
  height: auto;
  padding: 48px 20px 20px 20px;
}

.popup-newsletter__title {
  text-align: center;
  margin-bottom: 10px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--5px;
}

.popup-newsletter__close {
  position: absolute;
  right: 20px;
  top: 16px;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.popup-newsletter__close svg {
  width: 15px;
  height: 15px;
}

.popup-newsletter__content {
  text-align: center;
}

.popup-newsletter__form {
  margin-top: 20px;
}

@media screen and (min-width: 641px) {
  .modal--newsletter {
    height: 100%;
  }

  .modal--newsletter .modal__dialog {
    max-width: 540px;
    padding: 64px 80px 80px 80px;
  }

  .popup-newsletter__close {
    position: absolute;
    right: 30px;
    top: 24px;
  }

  .popup-newsletter__close svg {
    width: 20px;
    height: 20px;
  }

  .popup-newsletter__title {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--13px;
  }

  .popup-newsletter__form {
    margin-top: 30px;
  }
}

/**
 * --------------------------------------------------------------------
 * EXIT POPUP NEWSLETTER
 * --------------------------------------------------------------------
 */
.modal--exit-popup {
  bottom: 0;
  top: auto;
  height: auto;
}

.modal--exit-popup .modal__dialog {
  position: relative;
  height: auto;
  padding: 48px 20px 20px 20px;
}

.exit-popup__title {
  text-align: center;
  margin-bottom: 8px;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--13px;
  line-height: 1.2;
}

.exit-popup__subheading {
  text-align: center;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--3px;
}

.exit-popup__close {
  position: absolute;
  right: 20px;
  top: 16px;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.exit-popup__close svg {
  width: 15px;
  height: 15px;
}

.exit-popup__form {
  margin-top: 20px;
}

.exit-popup__pay-more {
  display: block;
  margin-top: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 641px) {
  .modal--exit-popup {
    height: 100%;
  }

  .modal--exit-popup .modal__dialog {
    max-width: 540px;
    padding: 95px 80px 30px 80px;
  }

  .exit-popup__close {
    position: absolute;
    right: 30px;
    top: 24px;
  }

  .exit-popup__close svg {
    width: 20px;
    height: 20px;
  }

  .exit-popup__title {
    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px--33px;
  }

  .exit-popup__form {
    margin-top: 30px;
  }

  .exit-popup__pay-more {
    margin-top: 75px;
  }
}

/**
 * --------------------------------------------------------------------
 * DRAWER
 * --------------------------------------------------------------------
 */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  z-index: 5;
  visibility: hidden;
  transition: visibility 0.35s linear;
}

.drawer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  background: #000000;
}

.drawer__inner {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 345px;
  margin-left: auto;
  background: white;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  transition: -webkit-transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.drawer[aria-hidden=false] {
  visibility: visible;
}

.drawer[aria-hidden=false]::before {
  opacity: 0.4;
}

.drawer[aria-hidden=false] .drawer__inner {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/**
 * --------------------------------------------------------------------
 * SEARCH RESULTS
 * --------------------------------------------------------------------
 */
.link-search-results:not(:only-child) {
  margin-top: 40px;
}

.link-search-results__list {
  list-style: none;
}

.link-search-results__link {
  display: block;
  padding: 8px 20px;
  transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
}

.link-search-results__link:hover,
.link-search-results__link:focus {
  background: rgba({
      {
      settings.accent_color
    }
  }

  , 0.08);

color: {
    {
    settings.accent_color
  }
}

;
outline: none;
}

@media screen and (min-width: 641px) {
  .link-search-results:not(:only-child) {
    margin-top: 60px;
  }
}

/**
 * --------------------------------------------------------------------
 * EXPANDABLE CONTENT
 * --------------------------------------------------------------------
 */
.expandable-content[aria-expanded] {
  position: relative;
  max-height: 320px;
  overflow: hidden;
  transition: 0.2s ease-in-out;
}

.expandable-content__toggle {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px 20px;
  visibility: hidden;
  opacity: 0;

  color: {
      {
      settings.accent_color
    }
  }

  ;
  text-align: left;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  z-index: 1;
  transition: opacity 0.1s ease-in-out,
  visibility 0.1s ease-in-out;
}

.expandable-content__toggle::before {
  position: absolute;
  content: "";
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 50px;
  pointer-events: none;

  background: linear-gradient(rgba({
        {
        settings.secondary_background
      }
    }

    , 0), rgba({
      {
      settings.secondary_background
    }
  }

  , 0.4) 15%, {
  {
  settings.secondary_background
}
});
}

.expandable-content__toggle-icon {
  position: relative;
  margin-right: 15px;
  width: 10px;
  height: 10px;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.expandable-content__toggle-icon::before,
.expandable-content__toggle-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.expandable-content__toggle-icon::before {
  width: 2px;
  height: 10px;
}

.expandable-content__toggle-icon::after {
  width: 10px;
  height: 2px;
}

.expandable-content--expandable[aria-expanded=true] .expandable-content__toggle-icon {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.expandable-content--expandable[aria-expanded=true] .expandable-content__toggle-icon::after {
  display: none;
}

.expandable-content--expandable .expandable-content__toggle {
  visibility: visible;
  opacity: 1;
}

.expandable-content--expandable[aria-expanded=true] .expandable-content__toggle::before {
  height: 0;
}

@media (-moz-touch-enabled: 0),
(hover: hover) {
  .expandable-content[aria-expanded=false] .expandable-content__toggle:hover .expandable-content__toggle-icon {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
  }
}

@media screen and (min-width: 641px) {
  .expandable-content__toggle {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/**
 * --------------------------------------------------------------------
 * VALUE PICKER
 *
 * This component allows to provide a replacement to dropdown select.
 * On mobile it used by opening a drawer box, while on desktop it looks
 * like a popover
 * --------------------------------------------------------------------
 */
.value-picker-button svg {
  width: 9px;
  height: 7px;
  margin-left: 10px;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.value-picker-button svg path {
  stroke-width: 2.5px;
}

.value-picker-button--pill {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  text-align: left;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
}

.value-picker-button--pill svg {
  width: 12px;
  height: 8px;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.value-picker-button--pill path {
  stroke-width: 2px;
}

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

.value-picker {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;

  font-size: {
      {
      settings.base_text_font_size
    }
  }

  px--1px;
  visibility: hidden;
  transition: visibility 0.35s ease-in-out;
  cursor: pointer;
  /* Fix an issue on iOS where without this the overlay is not clickable... */
}

.value-picker::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  background: #000000;
}

.value-picker[aria-hidden=false] {
  visibility: visible;
}

.value-picker[aria-hidden=false]::before {
  opacity: 0.4;
}

.value-picker[aria-hidden=false] .value-picker__inner {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.value-picker .icon--nav-triangle-borderless {
  display: none;
}

.value-picker__inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  background: {
      {
      settings.secondary_background
    }
  }

  ;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: visibility 0.2s ease-in-out,
  -webkit-transform 0.2s ease-in-out;
  transition: visibility 0.2s ease-in-out,
  transform 0.2s ease-in-out;
  transition: visibility 0.2s ease-in-out,
  transform 0.2s ease-in-out,
  -webkit-transform 0.2s ease-in-out;
}

.value-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px 16px 20px;

  border-bottom: 1px solid {
      {
      settings.border_color
    }
  }

  ;
}

.value-picker__header .icon--close {
  width: 17px;
  height: 17px;

  color: {
      {
      settings.heading_color
    }
  }

  ;
}

.value-picker__title {
  margin: 0;
}

.value-picker__close svg {
  display: block;
}

.value-picker__choice-list {
  padding: 15px 0;
  max-height: 430px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
  list-style: none;
}

.value-picker__choice-item {
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  padding: 8px 50px 7px 20px;
  /* Designer does not like symmetry, sorry :D */
}

.value-picker__choice-item svg {
  position: absolute;
  width: 13px;
  height: 11px;
  right: 20px;
  top: 17px;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.value-picker__choice-item.is-selected {
  color: {
      {
      settings.accent_color
    }
  }

  ;

  font-weight: {
      {
      text_font_medium.weight
    }
  }

  ;
}

.value-picker__choice-item.is-selected svg {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* On tablet and higher, the selector will look like a popover */
@media screen and (min-width: 641px) {

  /* This is the wrapper class on which elements are positioned relatively on desktop */
  .value-picker-wrapper {
    position: relative;
  }

  .value-picker {
    position: absolute;
    width: auto;
    height: auto;
    top: calc(100% + 10px);
    left: auto;
    right: -25px;
    bottom: auto;
    min-width: 160px;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    background: #fff;
    color: #677279;
    z-index: 4;
    cursor: auto;
    border-radius: 3px;
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
    will-change: transform;
  }

  .value-picker::before {
    display: none;
  }

  .value-picker[data-picker-position=top] {
    top: auto;
    bottom: calc(100% + 10px);
  }

  .value-picker[aria-hidden=false] {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1.001);
    transform: scale(1.001);
    transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
    transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
    transition: opacity 0.4s cubic-bezier(0, 1, 0.4, 1), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1);
  }

  .value-picker .icon--nav-triangle-borderless {
    display: block;
    position: absolute;
    bottom: 100%;
    right: 20px;
    width: 18px;
    height: 8px;
    z-index: 2;
    -webkit-filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.12));
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.12));
  }

  .value-picker[data-picker-position=top] .icon--nav-triangle-borderless {
    bottom: auto;
    top: 100%;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }

  .value-picker__inner {
    position: relative;
    width: auto;
    -webkit-transform: none !important;
    transform: none !important;
    transition: none;
    border-radius: 3px;
  }

  .value-picker__header {
    display: none;
    /* Because of popover the context is clear and does not need header */
  }

  .value-picker__choice-list {
    padding: 15px 0;
    max-height: none;
    white-space: nowrap;

    font-size: {
        {
        settings.base_text_font_size
      }
    }

    px-0px;
  }

  .value-picker__choice-item {
    display: block;
    padding: 2px 25px;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background 0.15s ease-in-out;
  }

  .value-picker__choice-item.is-selected,
  .value-picker__choice-item:hover {
    background: rgba({
        {
        settings.accent_color
      }
    }

    , 0.08);

  color: {
      {
      settings.accent_color
    }
  }

  ;
  font-weight: normal;
}

.value-picker__choice-item.is-selected svg,
.value-picker__choice-item:hover svg {
  display: none;
}

/* Small variation */
.value-picker--small {
  min-width: 105px;
  right: -2px;
}

.value-picker--small .value-picker__choice-list {
  padding: 10px 0;
  font-size: 0.85rem;
}

.value-picker--small .value-picker__choice-item {
  padding: 2px 18px;
}

.value-picker--small .icon--nav-triangle-borderless {
  right: 11px;
}

/* Auto variation */
.value-picker--auto {
  min-width: 0;
}
}

/* ============================================================================
   STOREWIDE PRODUCT CARD AND GRID OVERRIDES
   ============================================================================ */
/* Task 3 & Task 4: Storewide image container aspect ratio and cover containment */
.product-item__image-wrapper .aspect-ratio {
  padding-bottom: 0 !important;
  aspect-ratio: 1/1 !important;
  width: 100% !important;
  height: auto !important;
}

.product-item__image-wrapper .aspect-ratio img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Task 2: Responsive Card Spacing / Gaps globally */
/* Mobile (under 640px) */
@media screen and (max-width: 640px) {
  .product-list:not(.flickity-enabled) {
    gap: 12px !important;
  }
}

/* Tablet (641px - 999px) */
@media screen and (min-width: 641px) and (max-width: 999px) {
  .product-list:not(.flickity-enabled) {
    gap: 16px !important;
  }

  /* Responsive card width adjustments on tablet */
  .product-item.\31 \/2--tablet {
    width: calc(50% - 8px) !important;
  }

  .product-item.\31 \/3--tablet {
    width: calc(33.333333% - 10.67px) !important;
  }

  .product-item.\31 \/4--tablet {
    width: calc(25% - 12px) !important;
  }
}

/* Desktop (1000px and up) */
@media screen and (min-width: 1000px) {

  /* Flickity Enabled: Use margin-right for gap spacing */
  .product-list.flickity-enabled .product-item {
    margin-right: 16px !important;
  }

  /* Flexbox Grid: Use gap on container and reset margin-right on items */
  .product-list:not(.flickity-enabled) {
    gap: 16px !important;
  }

  .product-list:not(.flickity-enabled) .product-item {
    margin-right: 0 !important;
  }

  /* Core Width Adjustments for all standard grid classes to support the gap */
  .product-item.\31 \/1--lap,
  .product-item.\31 \/1--lap-and-up,
  .product-item.\31 \/1--desk,
  .product-item.\31 \/1--wide {
    width: 100% !important;
  }

  .product-item.\31 \/2--lap,
  .product-item.\31 \/2--lap-and-up,
  .product-item.\31 \/2--desk,
  .product-item.\31 \/2--wide {
    width: calc(50% - 8px) !important;
  }

  .product-item.\31 \/3--lap,
  .product-item.\31 \/3--lap-and-up,
  .product-item.\31 \/3--desk,
  .product-item.\31 \/3--wide {
    width: calc(33.333333% - 10.67px) !important;
  }

  .product-item.\31 \/4--lap,
  .product-item.\31 \/4--lap-and-up,
  .product-item.\31 \/4--desk,
  .product-item.\31 \/4--wide {
    width: calc(25% - 12px) !important;
  }

  .product-item.\31 \/5--lap,
  .product-item.\31 \/5--lap-and-up,
  .product-item.\31 \/5--desk,
  .product-item.\31 \/5--wide {
    width: calc(20% - 12.8px) !important;
  }

  .product-item.\31 \/6--lap,
  .product-item.\31 \/6--lap-and-up,
  .product-item.\31 \/6--desk,
  .product-item.\31 \/6--wide {
    width: calc(16.666667% - 13.33px) !important;
  }
}

/* ============================================================================
   WHATSAPP FLOATING BUTTON
   ============================================================================ */
.whatsapp-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float-btn:hover {
  transform: scale(1.1);
  background-color: #20ba5a;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.whatsapp-float-svg {
  width: 35px;
  height: 35px;
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* ============================================================================
   HERO TYPOGRAPHY AND HEADER ADJUSTMENTS
   ============================================================================ */
/* Sleeker header with reduced vertical padding */
.header {
  padding: 8px 0 !important;
}

/* Increased Slideshow title sizes */
.slideshow__title {
  font-size: 32px !important;
  line-height: 1.25 !important;
}

@media screen and (min-width: 641px) {
  .slideshow__title {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1000px) {
  .slideshow__title {
    font-size: 56px !important;
  }
}

/* ============================================================================
   STOREWIDE INTERACTIVE ANIMATIONS
   ============================================================================ */
/* Product card lift and shadow hover effect */
.product-item {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  z-index: 5;
}

/* Product card image hover zoom effect */
.product-item__image-wrapper img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-item:hover .product-item__image-wrapper img {
  transform: scale(1.06) !important;
}

/* Slide-in anims for section titles and main slideshow wrapper */
.section__header,
.slideshow__content-wrapper {
  animation: slide-in-up 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes slide-in-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ====================================================================
   PRODUCT PAGE REDESIGN STYLES
   ==================================================================== */

/* Quantity Selector: [-] 1 [+] */
.quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  height: 42px;
  width: 130px;
}

.quantity-selector__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  border: none;
  background: none;
  cursor: pointer;
  color: #555;
  transition: background 0.2s;
  padding: 0;
}

.quantity-selector__button:hover {
  background: #f5f5f5;
}

.quantity-selector__button svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.quantity-selector__input {
  width: 50px;
  height: 100%;
  border: none;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  text-align: center;
  font-weight: 600;
  color: #333;
  -moz-appearance: textfield;
  padding: 0;
}

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

/* Fix product purchase buttons overflow */
.product-form__payment-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 15px 0 0 0 !important;
}

.product-form__payment-container>* {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: none !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 641px) {
  .product-form__payment-container {
    flex-direction: row !important;
    gap: 15px !important;
  }

  .product-form__payment-container>* {
    flex: 1 1 0% !important;
    width: auto !important;
  }
}

/* Trust Badge & Shipping Section */
.trust-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #e0e0e0;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5c5c5c;
  line-height: 1.4;
}

.trust-item svg {
  width: 18px;
  height: 18px;
  fill: #1e2d7d;
  flex-shrink: 0;
}

/* Rating Area Below Title */
.product-meta__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: #666;
}

.product-meta__rating-stars {
  color: #ffb800;
  font-size: 15px;
  letter-spacing: 1px;
}

/* Checklist of Key Benefits */
.product-meta__benefits {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-meta__benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #333;
}

.product-meta__benefit-item svg {
  width: 14px;
  height: 14px;
  fill: #2ecc71;
  flex-shrink: 0;
}

/* Benefit Cards Grid ("Why You'll Love It") */
.benefit-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .benefit-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .benefit-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.benefit-card {
  background: #fdfdfd;
  border: 1px solid #eef0f5;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.benefit-card__icon-wrapper {
  width: 48px;
  height: 48px;
  background: #f5f6fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
  color: #1e2d7d;
}

.benefit-card__icon-wrapper svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.benefit-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.benefit-card__text {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* Specifications Table */
.specs-table-wrapper {
  overflow-x: auto;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  font-size: 14px;
}

.specs-table th,
.specs-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eef0f5;
}

.specs-table th {
  background: #f8f9fc;
  font-weight: 600;
  color: #333;
  width: 30%;
}

.specs-table td {
  color: #555;
}

/* How It Works Steps Grid */
.step-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .step-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step-item {
  position: relative;
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.step-number {
  font-size: 32px;
  font-weight: 800;
  color: #ffccd5;
  line-height: 1;
  margin-bottom: 10px;
}

.step-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.step-text {
  font-size: 13px;
  color: #666;
  line-height: 1.45;
}

/* Reviews Panel & Breakdown */
.reviews-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media screen and (min-width: 768px) {
  .reviews-container {
    grid-template-columns: 280px 1fr;
  }
}

.reviews-breakdown {
  background: #fdfdfd;
  border: 1px solid #eef0f5;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  align-self: start;
}

.reviews-breakdown__score {
  font-size: 48px;
  font-weight: 700;
  color: #333;
  line-height: 1.1;
}

.reviews-breakdown__stars {
  color: #ffb800;
  font-size: 20px;
  margin: 10px 0;
}

.reviews-breakdown__text {
  font-size: 13px;
  color: #666;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.review-card {
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 8px;
  padding: 20px;
}

.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.review-card__author {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.review-card__date {
  font-size: 12px;
  color: #999;
}

.review-card__stars {
  color: #ffb800;
  font-size: 13px;
  margin-bottom: 6px;
}

.review-card__title {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
}

.review-card__text {
  font-size: 13px;
  color: #555;
  line-height: 1.45;
}

/* FAQ Accordion panels */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-panel {
  border: 1px solid #eef0f5;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.faq-panel__toggle {
  display: none;
}

.faq-panel__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  margin: 0;
  background: #fff;
  transition: background 0.2s;
  user-select: none;
}

.faq-panel__label:hover {
  background: #fcfcfd;
}

.faq-panel__icon {
  position: relative;
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease-in-out;
}

.faq-panel__icon::before,
.faq-panel__icon::after {
  content: '';
  position: absolute;
  background: #333;
  transition: transform 0.2s ease-in-out;
}

.faq-panel__icon::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}

.faq-panel__icon::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}

.faq-panel__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.faq-panel__content-inner {
  padding: 0 20px 20px 20px;
  font-size: 13.5px;
  color: #666;
  line-height: 1.5;
}

.faq-panel__toggle:checked+.faq-panel__label .faq-panel__icon {
  transform: rotate(45deg);
}

.faq-panel__toggle:checked~.faq-panel__content {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}

/* Mobile Sticky Buy Bar */
.mobile-sticky-buy {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border-top: 1px solid #edf2f7 !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 99999 !important;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 768px) {
  .mobile-sticky-buy {
    display: none !important;
  }
}

.mobile-sticky-buy__price-wrapper {
  display: flex;
  flex-direction: column;
}

.mobile-sticky-buy__label {
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-sticky-buy__price {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.mobile-sticky-buy__button {
  background: linear-gradient(135deg, #ff8a75 0%, #ff5a36 100%) !important;
  color: #ffffff !important;
  border: none !important;
  height: 44px !important;
  border-radius: 22px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0 24px !important;
  box-shadow: 0 4px 12px rgba(255, 90, 54, 0.2) !important;
  cursor: pointer !important;
  min-width: 140px !important;
}

body {
  padding-bottom: 0;
}

@media screen and (max-width: 767px) {
  body.has-sticky-buy {
    padding-bottom: 68px !important;
  }
}

/* ====================================================================
   PREMIUM PRODUCT PAGE OVERRIDES
   ==================================================================== */

/* Hide FAQ checkboxes */
.faq-panel__toggle {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Remove all harsh black borders and add soft shadows */
.product-block-list__item,
.product-block-list__item--info,
.product-block-list__item--gallery,
.product-block-list__item--info .card,
.product-block-list__item--gallery .card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Sleek Pill-Shaped Buttons with Gradients */
.product-form__add-button,
.product-form__buy-now-button {
  height: 52px !important;
  border-radius: 26px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-form__add-button {
  background: linear-gradient(135deg, #ff8a75 0%, #ff5a36 100%) !important;
  color: #ffffff !important;
}

.product-form__add-button:hover {
  background: linear-gradient(135deg, #ff7a59 0%, #e04825 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(255, 90, 54, 0.3) !important;
}

.product-form__buy-now-button {
  background: linear-gradient(135deg, #4a5568 0%, #1a202c 100%) !important;
  color: #ffffff !important;
}

.product-form__buy-now-button:hover {
  background: linear-gradient(135deg, #2d3748 0%, #111827 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(26, 32, 44, 0.3) !important;
}

/* Larger title layout */
.product-meta__title {
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #1a1a1a !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.5px !important;
}

@media screen and (max-width: 640px) {
  .product-meta__title {
    font-size: 24px !important;
  }
}

/* Quantity Selector: Pill-shaped and rounded */
.quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #f7fafc !important;
  height: 38px !important;
  width: 120px !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.quantity-selector:hover {
  border-color: #cbd5e0 !important;
  background: #edf2f7 !important;
}

.quantity-selector__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  color: #4a5568 !important;
  border-radius: 50% !important;
  transition: background-color 0.2s, color 0.2s !important;
  padding: 0 !important;
}

.quantity-selector__button:hover {
  background-color: #ffffff !important;
  color: #1a202c !important;
}

.quantity-selector__input {
  width: 48px !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #1a202c !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

/* Benefits list design */
.product-meta__benefits {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 15px 0 !important;
}

.product-meta__benefit-item {
  display: flex !important;
  align-items: center !important;
  font-size: 13.5px !important;
  color: #333 !important;
  margin-bottom: 6px !important;
  list-style: none !important;
  list-style-type: none !important;
}

/* Trust badge layouts */
.trust-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding-top: 15px !important;
  border-top: 1px dashed #e0e0e0 !important;
}

.trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  color: #4a4a4a !important;
  line-height: 1.4 !important;
}

/* Premium Block Swatch Buttons */
.block-swatch__item {
  border-radius: 20px !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.block-swatch__radio:checked+.block-swatch__item {
  border-color: #B08D45 !important;
  background-color: rgba(176, 141, 69, 0.04) !important;
  color: #B08D45 !important;
}

/* Restrict recommended product cards size to prevent stretching */
.product-recommendations .product-item {
  max-width: 280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: inline-block !important;
  vertical-align: top !important;
}

.product-recommendations .product-list {
  justify-content: center !important;
}

/* ====================================================================
   ZAYRANO PREMIUM BRAND REDESIGN (COLLECTION & MINI-CART DRAWER)
   ==================================================================== */

/* Global Brand Color Scheme & Off-White Background */
[data-section-type="collection"],
.collection,
.layout,
.page__sub-header {
  background-color: #FAF8F5 !important;
}

/* 1. Collection Header Styling */
.collection__title {
  color: #1E2328 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 8px !important;
}

.collection__description .rte {
  color: #6B7280 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* 2. Collection Product Grid Styling */
.product-list--collection {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 16px !important;
}

.product-list--collection::before,
.product-list--collection::after {
  display: none !important;
}

/* 3. Product Card Custom Design */
.product-list--collection .product-item {
  width: 100% !important;
  margin: 0 !important;
  background-color: #FFFFFF !important;
  border: 1px solid #E4E1DA !important;
  border-radius: 4px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.product-list--collection .product-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(15, 42, 74, 0.04) !important;
  border-color: #B08D45 !important;
}

/* Equal Image Dimensions (1:1 Aspect Ratio) */
.product-list--collection .product-item__image-wrapper {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.product-list--collection .product-item__image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Card Content Spacing */
.product-list--collection .product-item__meta {
  margin-top: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.product-list--collection .product-item__title {
  color: #1E2328 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.product-list--collection .price {
  color: #0F2A4A !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* 4. Hide Order Now (COD App) and Quick View on Collection Cards */
.product-list--collection [class*="easysell"],
.product-list--collection [id*="easysell"],
.product-list--collection [class*="easy-sell"],
.product-list--collection [id*="easy-sell"],
.product-list--collection [class*="codForm"],
.product-list--collection [class*="cod-btn"],
.product-list--collection [data-action="open-modal"][data-secondary-action="open-quick-view"],
.product-list--collection .button--ternary {
  display: none !important;
}

/* 5. Style remaining Add to Cart Button */
.product-list--collection .product-item__action-button.button--primary,
.product-list--collection .product-item__action-button.button--primary:visited {
  width: 100% !important;
  background: #0F2A4A !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  margin-top: 12px !important;
  padding: 0 !important;
  transition: background-color 0.2s ease !important;
}

.product-list--collection .product-item__action-button.button--primary:hover {
  background: #1C3D63 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Responsive Grid Columns */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .product-list--collection {
    grid-template-columns: repeat(3, 1fr) !important;
    /* 3 Columns Tablet */
    gap: 16px !important;
    padding: 16px !important;
  }
}

@media screen and (max-width: 767px) {
  .product-list--collection {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 Columns Mobile */
    gap: 12px !important;
    padding: 12px !important;
  }

  .product-list--collection .product-item {
    padding: 10px !important;
  }
}

/* 6. Filter & Sorting Sidebar Styling */
.collection__filter-group-name,
.card__title--small {
  color: #0F2A4A !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

.collection__active-filter-item,
.collection__mobile-active-filter-item {
  background-color: #0F2A4A !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  border: none !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
}

.collection__active-filter-cross svg {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

.checkbox-wrapper {
  border-color: #0F2A4A !important;
}

.checkbox-wrapper input:checked+svg {
  color: #B08D45 !important;
  /* Gold checkmark */
  fill: #B08D45 !important;
}

.collection__filter-link.is-active {
  color: #0F2A4A !important;
  font-weight: 700 !important;
}

.value-picker-button {
  color: #1E2328 !important;
  font-size: 14px !important;
  border-color: #E4E1DA !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

.collection__layout-button.is-selected {
  color: #0F2A4A !important;
}



/* Global Brand Color Scheme & Off-White Background */
[data-section-type="collection"],
.collection,
.layout,
.page__sub-header {
  background-color: #FAF8F5 !important;
}

/* 1. Collection Header Styling */
.collection__title {
  color: #1E2328 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 8px !important;
}

.collection__description .rte {
  color: #6B7280 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}



/* 5. Style recently viewed product items exactly like other ZAYRANO cards */
.recently-viewed-products-placeholder .product-item {
  background-color: #FFFFFF !important;
  border: 1px solid #E4E1DA !important;
  border-radius: 4px !important;
  padding: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.recently-viewed-products-placeholder .product-item:hover {
  transform: translateY(-2px) !important;
  border-color: #B08D45 !important;
}

.recently-viewed-products-placeholder .product-item__image-wrapper {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.recently-viewed-products-placeholder .product-item__image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Smooth marquee infinite loop transition for Recently Viewed Carousel */
.recently-viewed-products-placeholder .product-list:not(.is-pointer-down) .flickity-slider {
  transition: transform 2.5s linear !important;
}

/* Custom transitions and scale-up hover animations for buttons */
.product-list--collection .product-item__action-button.button--primary,
.product-list--collection [class*="es-button"],
.product-list--collection [class*="es-btn"],
.product-list--collection [class*="codForm-btn"],
.zaynaro-btn {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-list--collection .product-item__action-button.button--primary:hover,
.product-list--collection [class*="es-button"]:hover,
.product-list--collection [class*="es-btn"]:hover,
.product-list--collection [class*="codForm-btn"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(15, 42, 74, 0.15) !important;
}

/* Hide EasySell COD Button inside Cart Drawer/Mini Cart to fit original buttons properly */
#mini-cart [class*="easysell"],
#mini-cart [id*="easysell"],
#mini-cart [class*="easy-sell"],
#mini-cart [id*="easy-sell"],
#mini-cart [class*="codForm"],
#mini-cart [class*="cod-btn"],
#mini-cart [class*="es-"] {
  display: none !important;
}


/* ====================================================================
   ZAYRANO GLOBAL DESIGN SYSTEM NORMALIZATION LAYER
   ==================================================================== */

/* 1. Global Component Border Radius */
.card,
.product-item,
.form__field,
.button,
select,
textarea {
  border-radius: 4px !important;
}

/* 2. Global Button System Normalization */
.button--primary:hover {
  background-color: #18181B !important;
}

.button--secondary {
  background-color: #FFFFFF !important;
  color: #18181B !important;
  box-shadow: 0 0 0 1px #18181B inset !important;
}

.button--secondary:hover {
  background-color: rgba(24, 24, 27, 0.05) !important;
  color: #18181B !important;
}

/* 3. Global Form Inputs Focus Normalization */
.form__field:focus,
select:focus,
textarea:focus {
  border-color: #18181B !important;
  box-shadow: 0 0 0 1px #18181B !important;
}

/* 4. Global Link Transitions */
a,
.nav-bar__link,
.mobile-menu__nav-link {
  transition: color 200ms ease-out !important;
}

a:hover {
  color: #1C3D63;
}

/* 5. Typography Hierarchy Sizing Override */
h1,
.h1,
.rte h1 {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 641px) {

  h1,
  .h1,
  .rte h1 {
    font-size: 44px !important;
  }
}

h2,
.h2,
.rte h2 {
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 641px) {

  h2,
  .h2,
  .rte h2 {
    font-size: 32px !important;
  }
}

h3,
.h3,
.rte h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

@media screen and (min-width: 641px) {

  h3,
  .h3,
  .rte h3 {
    font-size: 22px !important;
  }
}

html,
body {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

@media screen and (min-width: 641px) {

  html,
  body {
    font-size: 16px !important;
  }
}

.small-text,
.product-item__vendor {
  font-size: 13px !important;
  font-weight: 400 !important;
}

.button,
button,
input[type="submit"],
input[type="button"],
.button--primary,
.button--secondary {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.nav-bar__link,
.mobile-menu__nav-link {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.product-item__title {
  font-size: 15px !important;
  font-weight: 500 !important;
}

@media screen and (min-width: 641px) {
  .product-item__title {
    font-size: 16px !important;
  }
}

.price {
  font-size: 15px !important;
  font-weight: 600 !important;
}

@media screen and (min-width: 641px) {
  .price {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   ZAYRANO STEP 4: UI/UX ENHANCEMENT & PREMIUM ANIMATIONS
   ========================================================================== */

/* 1. Shop by Collection Heading - Glassmorphism Banners */
.collection-list__header-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 32px !important;
  background: linear-gradient(135deg, #0F2A4A, #1C3D63) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 8px 32px rgba(15, 42, 74, 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-sizing: border-box !important;
}

.collection-list__header-left {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.collection-list__header-icon-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0 !important;
  color: #FFFFFF !important;
}

.collection-list__header-icon {
  fill: currentColor !important;
}

.collection-list__header-text-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.collection-list__header-title {
  margin: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

.collection-list__header-subtitle {
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.4 !important;
}

.collection-list__header-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  cursor: pointer !important;
}

.collection-list__header-btn-arrow {
  fill: currentColor !important;
  transition: transform 0.3s ease !important;
}

.collection-list__header-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

.collection-list__header-btn:hover .collection-list__header-btn-arrow {
  transform: translateX(4px) !important;
}

@media screen and (max-width: 768px) {
  .collection-list__header-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 20px !important;
  }

  .collection-list__header-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 2. Scroll Animation Reveals (IntersectionObserver classes) */
.fade-up-element {
  opacity: 0 !important;
  transform: translateY(15px) !important;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.fade-up-element.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 3. Product Cards Enhancements */
.product-item {
  background: #FFFFFF !important;
  border: 1px solid #E4E1DA !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow: hidden !important;
  position: relative;
}

.product-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(15, 42, 74, 0.06) !important;
}

.product-item__image-wrapper {
  border-radius: 10px !important;
  overflow: hidden !important;
  display: block !important;
}

.product-item__image-wrapper img {
  border-radius: 10px !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.product-item:hover .product-item__image-wrapper img {
  transform: scale(1.04) !important;
}

/* 4. Button Wave & Shimmer Animations */
.button--primary-wave {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  background-color: #18181B !important;
  color: #FAFAF9 !important;
  border: 1px solid #18181B !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
}

.button--primary-wave:hover {
  background-color: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
}

.button--primary-wave::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
  transform: translateY(-50%) skewX(-25deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.button--primary-wave:hover::after {
  animation: button-shimmer-wave 0.6s ease-out forwards !important;
}

@keyframes button-shimmer-wave {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

/* Secondary Button - Quick View Slide-up on Hover */
.product-item__action-button.button--ternary {
  background-color: #FFFFFF !important;
  border: 1px solid #B08D45 !important;
  color: #0F2A4A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, background-color 0.2s ease !important;
  width: 100% !important;
  padding: 8px 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
}

.product-item:hover .product-item__action-button.button--ternary {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.product-item__action-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
  width: 100% !important;
}

.product-item__action-button.button--ternary:hover {
  background-color: rgba(176, 141, 69, 0.06) !important;
}

/* 5. New Product Badges */
.product-label--new {
  background-color: #0F2A4A !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* 6. Infinite Announcement Bar Marquee */
.announcement-bar--marquee {
  background: #0F2A4A !important;
  color: #FFFFFF !important;
}

.announcement-bar__marquee-content {
  animation-duration: 25s !important;
}

/* 7. Sticky Header Backdrop blur & premium navy background matching footer */
#shopify-section-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: linear-gradient(135deg, #0F2A4A 0%, #08172A 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}

#shopify-section-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 80 L80 0 M0 0 L80 80' stroke='rgba(255,255,255,0.01)' stroke-width='1'/%3E%3C/svg%3E") !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#shopify-section-header.is-scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1001 !important;
  background: linear-gradient(135deg, rgba(15, 42, 74, 0.98) 0%, rgba(8, 23, 42, 0.98) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 15px rgba(8, 23, 42, 0.2) !important;
  animation: headerSlideDown 0.3s ease-out !important;
}

@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

/* Force header container background to transparent so the section background shows through */
.header,
.nav-bar {
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
}

/* Header link and icon colors */
.header__action-item-link,
.header__cart-toggle,
.header__mobile-nav-toggle,
.header__link,
.nav-bar__link,
.header__logo-text,
.header__logo-link {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.header__action-item-title,
.header__desktop-nav-text {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Search bar styling */
.search-bar__top {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
}

.search-bar__input {
  color: #FFFFFF !important;
}

.search-bar__input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.search-bar__submit {
  color: #FFFFFF !important;
}

/* Inline Desktop Navigation dropdown tweaks */
.header__inline-nav {
  margin: 0 auto !important;
}

.header__linklist {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

.header__link-item {
  position: relative !important;
}

.header__link {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  padding: 12px 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.2s ease !important;
}

.header__link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #B08D45 !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.header__link:hover::after,
.header__link-item:hover>.header__link::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

/* Global Homepage Section Header - Glassmorphism Card Style overriding inline settings */
.template-index div[id^="shopify-section-"] .section__header,
.template-index div[id^="shopify-section-"] .section__header--bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 32px !important;
  background: linear-gradient(135deg, #0F2A4A, #1C3D63) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 8px 32px rgba(15, 42, 74, 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  text-align: left !important;
  overflow: visible !important;
}

.template-index div[id^="shopify-section-"] .section__header-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  margin: 0 !important;
  flex: 1 !important;
}

.template-index div[id^="shopify-section-"] .section__header-icon-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0 !important;
  color: #FFFFFF !important;
}

.template-index div[id^="shopify-section-"] .section__header-icon {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  display: block !important;
}

.template-index div[id^="shopify-section-"] .section__header-text-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 4px !important;
  margin: 0 !important;
}

.template-index .section__title {
  margin: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

.template-index .section__header-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

.template-index div[id^="shopify-section-"] .section__action-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

.template-index div[id^="shopify-section-"] .section__action-link:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
  color: #FFFFFF !important;
}

.template-index div[id^="shopify-section-"] .section__action-link svg {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  transition: transform 0.3s ease !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  width: 14px !important;
  height: 14px !important;
}

.template-index div[id^="shopify-section-"] .section__action-link:hover svg {
  transform: translateX(4px) !important;
}

@media screen and (max-width: 768px) {

  .template-index div[id^="shopify-section-"] .section__header,
  .template-index div[id^="shopify-section-"] .section__header--bar {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  .template-index div[id^="shopify-section-"] .section__header-left {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .template-index div[id^="shopify-section-"] .section__header-text-stack {
    align-items: center !important;
    text-align: center !important;
  }

  .template-index div[id^="shopify-section-"] .section__action-link {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
}

/* Header Search & Newsletter Input Text Visibility Normalizations */
.search-bar__filter-active,
.search-bar__filter-label,
.search-bar__filter-label svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.search-bar__input::-webkit-input-placeholder,
.form__field::-webkit-input-placeholder,
.form__field::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.search-bar__input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer__block-item--newsletter .form__floating-label,
.static-newsletter .form__floating-label {
  color: rgba(255, 255, 255, 0.65) !important;
}

.footer__block-item--newsletter .form__field,
.static-newsletter .form__field {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.footer__block-item--newsletter .form__field:focus~.form__floating-label,
.static-newsletter .form__field:focus~.form__floating-label {
  color: #B08D45 !important;
}

/* Footer elements high-contrast visibility */
.footer,
.footer__title,
.footer__brand-logo,
.footer__tagline,
.footer__brand-description,
.footer__contact-item,
.footer__contact-item a,
.footer__contact-item span,
.footer__linklist-item a,
.footer__links a,
.footer__aside,
.footer__bottom-left,
.footer__bottom-right {
  color: #FFFFFF !important;
}

.footer__brand-description,
.footer__contact-item,
.footer__contact-item span,
.footer__contact-item a,
.footer__linklist-item a,
.footer__links a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.footer__contact-item a:hover,
.footer__linklist-item a:hover,
.footer__links a:hover {
  color: #B08D45 !important;
}

.footer__tagline {
  color: #B08D45 !important;
}

/* 8. Premium ZAYRANO Footer Column Styles */
.footer {
  background: linear-gradient(135deg, #0F2A4A 0%, #08172A 100%) !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(228, 225, 218, 0.15) !important;
  padding: 60px 0 30px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 80 L80 0 M0 0 L80 80' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3C/svg%3E") !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

.footer__block-item--brand {
  display: flex !important;
  flex-direction: column !important;
  max-width: 280px !important;
}

.footer__brand-logo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #FFFFFF 30%, #B08D45 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  white-space: nowrap !important;
  position: relative !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
  text-shadow: 0 2px 10px rgba(8, 23, 42, 0.15) !important;
}

.footer__tagline {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #B08D45 !important;
  margin-bottom: 12px !important;
}

.footer__brand-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 20px !important;
}

.footer__social-links .social-media__item {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.2s ease !important;
}

.footer__social-links .social-media__item:hover {
  color: #B08D45 !important;
}

/* Help columns contact items */
.footer__contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer__contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.footer__contact-item a {
  color: inherit !important;
  text-decoration: none !important;
}

.footer__contact-item a:hover {
  color: #B08D45 !important;
}

.footer__contact-icon {
  color: #B08D45 !important;
  flex-shrink: 0 !important;
}

/* Newsletter Box */
.footer__block-item--newsletter {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 24px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  max-width: 320px !important;
}

.footer__block-item--newsletter .footer__title {
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.footer__newsletter-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 16px !important;
}

.footer__newsletter-form .form__input-wrapper {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s ease !important;
}

.footer__newsletter-form .form__input-wrapper:focus-within {
  border-color: #B08D45 !important;
}

.footer__newsletter-form .form__field {
  background: transparent !important;
  color: #FFFFFF !important;
  border: none !important;
  outline: none !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
}

.footer__newsletter-form .form__submit {
  background-color: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.footer__newsletter-form .form__submit:hover {
  background-color: #967534 !important;
  border-color: #967534 !important;
}

/* Bottom Bar containers */
.footer__bottom-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 40px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.footer__bottom-left p,
.footer__bottom-right p {
  margin: 0 !important;
}

.footer__bottom-center .payment-list {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

@media screen and (max-width: 768px) {
  .footer__bottom-container {
    flex-direction: column !important;
    text-align: center !important;
  }
}

.footer__brand-description,
.footer__contact-item,
.footer__contact-item span,
.footer__contact-item a,
.footer__linklist-item a,
.footer__links a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.footer__contact-item a:hover,
.footer__linklist-item a:hover,
.footer__links a:hover {
  color: #B08D45 !important;
}

.footer__tagline {
  color: #B08D45 !important;
}

/* 8. Premium ZAYRANO Footer Column Styles */
.footer {
  background: linear-gradient(135deg, #0F2A4A 0%, #08172A 100%) !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(228, 225, 218, 0.15) !important;
  padding: 60px 0 30px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 80 L80 0 M0 0 L80 80' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3C/svg%3E") !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}

.footer__block-item--brand {
  display: flex !important;
  flex-direction: column !important;
  max-width: 280px !important;
}

.footer__brand-logo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #FFFFFF 30%, #B08D45 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  white-space: nowrap !important;
  position: relative !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
  text-shadow: 0 2px 10px rgba(8, 23, 42, 0.15) !important;
}

.footer__tagline {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #B08D45 !important;
  margin-bottom: 12px !important;
}

.footer__brand-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 20px !important;
}

.footer__social-links .social-media__item {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.2s ease !important;
}

.footer__social-links .social-media__item:hover {
  color: #B08D45 !important;
}

/* Help columns contact items */
.footer__contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer__contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.footer__contact-item a {
  color: inherit !important;
  text-decoration: none !important;
}

.footer__contact-item a:hover {
  color: #B08D45 !important;
}

.footer__contact-icon {
  color: #B08D45 !important;
  flex-shrink: 0 !important;
}

/* Newsletter Box */
.footer__block-item--newsletter {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 24px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  max-width: 320px !important;
  margin-top: 40px !important;
}

.footer__block-item--newsletter .footer__title {
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.footer__newsletter-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 16px !important;
}

.footer__newsletter-form .form__input-wrapper {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s ease !important;
}

.footer__newsletter-form .form__input-wrapper:focus-within {
  border-color: #B08D45 !important;
}

.footer__newsletter-form .form__field {
  background: transparent !important;
  color: #FFFFFF !important;
  border: none !important;
  outline: none !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
}

.footer__newsletter-form .form__submit {
  background-color: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.footer__newsletter-form .form__submit:hover {
  background-color: #967534 !important;
  border-color: #967534 !important;
}

/* Bottom Bar containers */
.footer__bottom-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 40px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.footer__bottom-left p,
.footer__bottom-right p {
  margin: 0 !important;
}

.footer__bottom-center .payment-list {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

@media screen and (max-width: 768px) {
  .footer__bottom-container {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* Animated Multi-Color Moving Border for Circular Collections */
@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Homepage Circular Collection Moving Border */
.template-index .collection-item__image-wrapper--rounded {
  isolation: isolate !important;
  background: transparent !important;
  padding: 3px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  border: none !important;
}

.template-index .collection-item__image-wrapper--rounded::before {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: conic-gradient(from 0deg,
      #0044ff,
      #00e5ff,
      #0044ff) !important;
  animation: rotateBorder 6s linear infinite !important;
  z-index: -2 !important;
}

.template-index .collection-item__image-wrapper--rounded::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;

  background: {
      {
      settings.background
    }
  }

  !important;
  border-radius: 50% !important;
  z-index: -1 !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
}

.template-index .collection-item__image-wrapper--rounded .aspect-ratio {
  border-radius: 50% !important;
  overflow: hidden !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* Premium ZAYRANO Homepage Section Headings (Centered Card Design) */
.template-index .section__header {
  background: linear-gradient(135deg, #0F2A4A 0%, #08172A 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  box-shadow: 0 8px 25px rgba(8, 23, 42, 0.15), 0 0 15px rgba(0, 229, 255, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 30px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box !important;
}

.template-index .section__header .section__title {
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
}

.template-index .section__header .section__header-subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Glowing Icon Container */
.template-index .section__header .section__header-icon-container {
  background: rgba(0, 229, 255, 0.1) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  margin-right: 12px !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15) !important;
}

.template-index .section__header .section__header-icon {
  color: #00e5ff !important;
  fill: #00e5ff !important;
  width: 20px !important;
  height: 20px !important;
}

/* Premium "View All" Pill Button */
.template-index .section__header .section__action-link {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 8px 18px !important;
  border-radius: 30px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.template-index .section__header .section__action-link svg {
  color: inherit !important;
  fill: currentColor !important;
  transition: transform 0.2s ease !important;
}

.template-index .section__header .section__action-link:hover {
  background: #00e5ff !important;
  color: #08172A !important;
  border-color: #00e5ff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3) !important;
}

.template-index .section__header .section__action-link:hover svg {
  transform: translateX(3px) !important;
}

/* Hide Releasit & EasySell COD buttons on all pages except the product detail page */
body:not(.template-product) [class*="releasit"],
body:not(.template-product) [id*="releasit"],
body:not(.template-product) [class*="easysell"],
body:not(.template-product) [id*="easysell"] {
  display: none !important;
}

/* Global Compare-At Price Styling */
.price--compare {
  color: #8E8E93 !important;
  /* Muted grey color */
  text-decoration: line-through !important;
  /* Clear horizontal strikethrough */
}

.price--compare::before {
  display: none !important;
  /* Hide old buggy absolute line */
}

/* Compare-At Price Styling on Product Detail Pages */
.product-form .price-list {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.product-form .price-list .price--highlight {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0F2A4A !important;
  /* ZAYRANO dark navy brand color */
  margin: 0 !important;
}

.product-form .price-list .price--compare {
  font-size: 16px !important;
  margin: 0 !important;
  top: 0 !important;
}

.product-form .price-list .product-label--on-sale {
  margin: 0 !important;
  /* Gap handles spacing */
  font-weight: 600 !important;
}

/* Fix mobile product title clipping under product gallery thumbnails */
@media screen and (max-width: 640px) {
  .product-meta {
    margin-top: 12px !important;
  }
}

/* Premium ZAYRANO "SAVE %" Badge on Listing Grids */
.product-item__label-list .product-label--on-sale {
  background: #B08D45 !important;
  /* ZAYRANO Gold Accent */
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(176, 141, 69, 0.25) !important;
}

/* Visually Consistent SAVE % Badge on Product Detail Pages */
.product-form .price-list .product-label--on-sale {
  background: #B08D45 !important;
  /* ZAYRANO Gold Accent */
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(176, 141, 69, 0.2) !important;
}

/* Mobile Button Layout Override - No wrapping, equal heights, consistent typography */
.product-item .product-item__action-list button,
.product-item .product-item__action-list a,
.product-item [class*="releasit"] button,
.product-item [class*="releasit"] a,
.product-item [class*="easysell"] button,
.product-item [class*="easysell"] a,
.product-item button[class*="releasit"],
.product-item a[class*="releasit"],
.product-item button[class*="easysell"],
.product-item a[class*="easysell"],
.product-item .es-button,
.product-item .es-button-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  /* Visual consistency and equal heights */
  line-height: 42px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  /* Fit text on small viewports */
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 641px) {

  .product-item .product-item__action-list button,
  .product-item .product-item__action-list a {
    font-size: 12px !important;
    height: 46px !important;
    line-height: 46px !important;
  }
}

/* Stack spacing for product page purchase buttons */
.template-product .product-form__payment-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Pulsing heartbeat micro-animation for product page Buy Now / COD checkout buttons */
.template-product [class*="releasit"] button,
.template-product [class*="releasit"] a,
.template-product [class*="easysell"] button,
.template-product [class*="easysell"] a,
.template-product button[class*="releasit"],
.template-product a[class*="releasit"],
.template-product button[class*="easysell"],
.template-product a[class*="easysell"],
.template-product .es-button {
  animation: heartbeat 2.5s infinite ease-in-out !important;
  transform-origin: center !important;
}

/* Standardize product form Add to Cart and COD checkout buttons sizes */
.template-product .product-form__add-button,
.template-product [class*="releasit"] button,
.template-product [class*="releasit"] a,
.template-product [class*="easysell"] button,
.template-product [class*="easysell"] a,
.template-product button[class*="releasit"],
.template-product a[class*="releasit"],
.template-product button[class*="easysell"],
.template-product a[class*="easysell"],
.template-product .es-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 54px !important;
  /* Premium tall desktop height */
  line-height: 54px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

@media screen and (max-width: 640px) {

  .template-product .product-form__add-button,
  .template-product [class*="releasit"] button,
  .template-product [class*="releasit"] a,
  .template-product [class*="easysell"] button,
  .template-product [class*="easysell"] a,
  .template-product button[class*="releasit"],
  .template-product a[class*="releasit"],
  .template-product button[class*="easysell"],
  .template-product a[class*="easysell"],
  .template-product .es-button {
    height: 48px !important;
    /* Comfortable mobile tap height */
    line-height: 48px !important;
    font-size: 13px !important;
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.04);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.04);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

/* Premium Delivery Timeline styling */
.delivery-timeline {
  margin-top: 24px !important;
  padding: 18px !important;
  background-color: #f7f9fc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.delivery-timeline__title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F2A4A !important;
  /* Navy brand color */
  margin-bottom: 16px !important;
  letter-spacing: 0.2px !important;
}

.delivery-timeline__title .delivery-timeline__icon {
  font-size: 18px !important;
}

.delivery-timeline__steps {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  width: 100% !important;
}

.delivery-timeline__step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.delivery-timeline__dot {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background-color: #e2e8f0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px #cbd5e1 !important;
}

.delivery-timeline__step.is-active .delivery-timeline__dot {
  background-color: #B08D45 !important;
  /* Premium gold accent color */
  color: #fff !important;
  box-shadow: 0 0 0 1px #B08D45 !important;
}

.delivery-timeline__step.is-delivered.is-active .delivery-timeline__dot {
  background-color: #10b981 !important;
  /* Success green for delivered */
  box-shadow: 0 0 0 1px #10b981 !important;
  font-size: 14px !important;
}

.delivery-timeline__label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 3px !important;
}

.delivery-timeline__sub {
  font-size: 10px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.delivery-timeline__line {
  flex-grow: 1 !important;
  height: 2px !important;
  background-color: #e2e8f0 !important;
  margin-top: -28px !important;
  /* Centered with dots */
  position: relative !important;
  z-index: 1 !important;
  min-width: 15px !important;
}

.delivery-timeline__line.is-active {
  background-color: #B08D45 !important;
}

/* Hide empty product page block items to prevent empty white cards */
.product-block-list__item:empty,
.product-block-list__item--trust:not(:has(img)):not(:has(.payment-list__item)),
.product-block-list__item--reviews:not(:has(.spr-review)),
.product-block-list__item--content:not(:has(.rte p)):not(:has(.rte div)):not(:has(.card__collapsible-content p)):not(:has(p)) {
  display: none !important;
}

@media screen and (max-width: 480px) {
  .delivery-timeline__label {
    font-size: 11px !important;
  }

  .delivery-timeline__sub {
    font-size: 9px !important;
  }

  .delivery-timeline {
    padding: 12px !important;
  }
}

/* Force relative flex layout on product page columns to prevent absolute height clipping */
@media screen and (min-width: 1000px) {
  .product-block-list__wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 30px !important;
    position: relative !important;
  }

  .product-block-list__item--gallery {
    width: calc(50% - 15px) !important;
    position: relative !important;
  }

  .product-block-list__item--info {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: calc(50% - 15px) !important;
    height: auto !important;
  }

  /* Medium layout adjustments */
  .product-block-list--medium .product-block-list__item--gallery {
    width: calc(55% - 15px) !important;
  }

  .product-block-list--medium .product-block-list__item--info {
    width: calc(45% - 15px) !important;
  }

  /* Large layout adjustments */
  .product-block-list--large .product-block-list__item--gallery {
    width: calc(60% - 15px) !important;
  }

  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 54px !important;
  /* Premium tall desktop height */
  line-height: 54px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

@media screen and (max-width: 640px) {

  .template-product .product-form__add-button,
  .template-product [class*="releasit"] button,
  .template-product [class*="releasit"] a,
  .template-product [class*="easysell"] button,
  .template-product [class*="easysell"] a,
  .template-product button[class*="releasit"],
  .template-product a[class*="releasit"],
  .template-product button[class*="easysell"],
  .template-product a[class*="easysell"],
  .template-product .es-button {
    height: 48px !important;
    /* Comfortable mobile tap height */
    line-height: 48px !important;
    font-size: 13px !important;
  }
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.04);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.04);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

/* Premium Delivery Timeline styling */
.delivery-timeline {
  margin-top: 24px !important;
  padding: 18px !important;
  background-color: #f7f9fc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.delivery-timeline__title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F2A4A !important;
  /* Navy brand color */
  margin-bottom: 16px !important;
  letter-spacing: 0.2px !important;
}

.delivery-timeline__title .delivery-timeline__icon {
  font-size: 18px !important;
}

.delivery-timeline__steps {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  width: 100% !important;
}

.delivery-timeline__step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.delivery-timeline__dot {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background-color: #e2e8f0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px #cbd5e1 !important;
}

.delivery-timeline__step.is-active .delivery-timeline__dot {
  background-color: #B08D45 !important;
  /* Premium gold accent color */
  color: #fff !important;
  box-shadow: 0 0 0 1px #B08D45 !important;
}

.delivery-timeline__step.is-delivered.is-active .delivery-timeline__dot {
  background-color: #10b981 !important;
  /* Success green for delivered */
  box-shadow: 0 0 0 1px #10b981 !important;
  font-size: 14px !important;
}

.delivery-timeline__label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 3px !important;
}

.delivery-timeline__sub {
  font-size: 10px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.delivery-timeline__line {
  flex-grow: 1 !important;
  height: 2px !important;
  background-color: #e2e8f0 !important;
  margin-top: -28px !important;
  /* Centered with dots */
  position: relative !important;
  z-index: 1 !important;
  min-width: 15px !important;
}

.delivery-timeline__line.is-active {
  background-color: #B08D45 !important;
}

/* Hide empty product page block items to prevent empty white cards */
.product-block-list__item:empty,
.product-block-list__item--trust:not(:has(img)):not(:has(.payment-list__item)),
.product-block-list__item--reviews:not(:has(.spr-review)),
.product-block-list__item--content:not(:has(.rte p)):not(:has(.rte div)):not(:has(.card__collapsible-content p)):not(:has(p)) {
  display: none !important;
}

@media screen and (max-width: 480px) {
  .delivery-timeline__label {
    font-size: 11px !important;
  }

  .delivery-timeline__sub {
    font-size: 9px !important;
  }

  .delivery-timeline {
    padding: 12px !important;
  }
}

/* Force relative flex layout on product page columns to prevent absolute height clipping */
@media screen and (min-width: 1000px) {
  .product-block-list__wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 30px !important;
    position: relative !important;
  }

  .product-block-list__item--gallery {
    width: calc(50% - 15px) !important;
    position: relative !important;
  }

  .product-block-list__item--info {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: calc(50% - 15px) !important;
    height: auto !important;
  }

  /* Medium layout adjustments */
  .product-block-list--medium .product-block-list__item--gallery {
    width: calc(55% - 15px) !important;
  }

  .product-block-list--medium .product-block-list__item--info {
    width: calc(45% - 15px) !important;
  }

  /* Large layout adjustments */
  .product-block-list--large .product-block-list__item--gallery {
    width: calc(60% - 15px) !important;
  }

  .product-block-list--large .product-block-list__item--info {
    width: calc(40% - 15px) !important;
  }
}

/* Truncate product card titles to exactly one line with ellipsis (...) */
.product-item__title {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: #18181B !important;
}

/* ============================================================================
   ZAYRANO FINAL VISUAL REFINEMENTS (3-COLOR SYSTEM, GRID GAPS, BORDER FIXES)
   ============================================================================ */

/* 1. Page Background Alignment */
body,
#main,
.page__content {
  background-color: #FAFAF9 !important;
}

/* 2. Grid Padding and Gaps - Prevents Cards from touching Parent Borders */
.product-list--collection {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 16px !important;
  margin: 0 !important;
  background: #FAFAF9 !important;
  border: none !important;
  box-sizing: border-box !important;
}

.product-list--collection .product-item {
  width: calc(25% - 12px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
  .product-list--collection {
    gap: 16px !important;
    padding: 16px !important;
  }

  .product-list--collection .product-item {
    width: calc(33.333333% - 10.67px) !important;
  }
}

@media screen and (max-width: 767px) {
  .product-list--collection {
    gap: 12px !important;
    padding: 12px !important;
  }

  .product-list--collection .product-item {
    width: calc(50% - 6px) !important;
    padding: 10px !important;
  }
}

/* 3. Product Card Independent Styling */
.product-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(24, 24, 27, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.04) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

.product-item:hover {
  border-color: #B08D45 !important;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.08) !important;
}

.product-item::after {
  display: none !important;
  /* Hide old intersecting box-shadow border grid lines */
}

/* 4. Product Card Spacing Adjustments */
.product-item__image-wrapper {
  margin-bottom: 12px !important;
}

.product-item__price-list {
  margin-bottom: 12px !important;
}

.product-item__vendor {
  margin-bottom: 4px !important;
  color: rgba(24, 24, 27, 0.5) !important;
}

/* 5. Gold Save Percentage Badge Consistent Positioning */
.product-item__label-list {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  margin: 0 !important;
  z-index: 5 !important;
}

.product-item__label-list .product-label--on-sale {
  background: #B08D45 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(176, 141, 69, 0.2) !important;
  text-transform: uppercase !important;
}

/* 6. Header Contrast Correction */
.header,
#shopify-section-header,
.header__wrapper {
  background: #18181B !important;
  color: #FFFFFF !important;
}

.header__linklist-link,
.header__action-list-link,
.nav-bar__link {
  color: #FFFFFF !important;
}

.header__linklist-link:hover,
.header__action-list-link:hover,
.nav-bar__link:hover {
  color: #B08D45 !important;
}

/* 7. Announcement Bar */
.announcement-bar {
  background: #18181B !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 8. Flat Zinc Section Headings (No Gradients) */
.template-index div[id^="shopify-section-"] .section__header,
.template-index div[id^="shopify-section-"] .section__header--bar,
.template-index .section__header,
.collection-list__header-card {
  background: #18181B !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.15) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
}

.template-index .section__header .section__header-icon-container,
.template-index div[id^="shopify-section-"] .section__header-icon-container,
.collection-list__header-icon-container {
  background: rgba(176, 141, 69, 0.15) !important;
  border: 1px solid rgba(176, 141, 69, 0.3) !important;
  color: #B08D45 !important;
}

.template-index .section__header .section__header-icon,
.template-index div[id^="shopify-section-"] .section__header-icon,
.collection-list__header-icon {
  color: #B08D45 !important;
  fill: #B08D45 !important;
}

/* 9. Stable Hover State for View All / Explore Buttons (No Movement) */
.template-index div[id^="shopify-section-"] .section__action-link,
.template-index .section__header .section__action-link,
.collection-list__header-btn {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
  transform: none !important;
  box-shadow: none !important;
}

.template-index div[id^="shopify-section-"] .section__action-link:hover,
.template-index .section__header .section__action-link:hover,
.collection-list__header-btn:hover {
  background: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
  transform: none !important;
  box-shadow: none !important;
}

.template-index div[id^="shopify-section-"] .section__action-link svg,
.template-index .section__header .section__action-link svg,
.collection-list__header-btn-arrow {
  transition: none !important;
  transform: none !important;
}

.template-index div[id^="shopify-section-"] .section__action-link:hover svg,
.template-index .section__header .section__action-link:hover svg,
.collection-list__header-btn:hover .collection-list__header-btn-arrow {
  transform: none !important;
}

/* 10. Button Outlines System */
.button--primary {
  background-color: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid #18181B !important;
}

.button--primary:hover {
  background-color: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
}

.button--secondary {
  background-color: transparent !important;
  color: #18181B !important;
  border: 1px solid #18181B !important;
  box-shadow: none !important;
}

.button--secondary:hover {
  background-color: #18181B !important;
  color: #FFFFFF !important;
  border-color: #18181B !important;
}

/* Outline Buttons on Dark Elements (Footers, announcements, collection headers) */
.footer .button--secondary,
.announcement-bar .button--secondary,
.section__header .button--secondary,
.collection-list__header-card .button--secondary {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
}

.footer .button--secondary:hover,
.announcement-bar .button--secondary:hover,
.section__header .button--secondary:hover,
.collection-list__header-card .button--secondary:hover {
  background-color: #FFFFFF !important;
  color: #18181B !important;
  border-color: #FFFFFF !important;
}

/* 11. Mobile Buttons Formatting (Force single line CTAs) */
.product-item .product-item__action-list button,
.product-item .product-item__action-list a,
.product-item [class*="releasit"] button,
.product-item [class*="releasit"] a,
.product-item [class*="easysell"] button,
.product-item [class*="easysell"] a,
.product-item button[class*="releasit"],
.product-item a[class*="releasit"],
.product-item button[class*="easysell"],
.product-item a[class*="easysell"],
.product-item .es-button,
.product-item .es-button-title,
.template-product .product-form__add-button,
.template-product [class*="releasit"] button,
.template-product [class*="releasit"] a,
.template-product [class*="easysell"] button,
.template-product [class*="easysell"] a,
.template-product button[class*="releasit"],
.template-product a[class*="releasit"],
.template-product button[class*="easysell"],
.template-product a[class*="easysell"],
.template-product .es-button {
  white-space: nowrap !important;
}

@media screen and (max-width: 480px) {

  .product-item .product-item__action-list button,
  .product-item .product-item__action-list a,
  .product-item [class*="releasit"] button,
  .product-item [class*="releasit"] a,
  .product-item [class*="easysell"] button,
  .product-item [class*="easysell"] a,
  .product-item button[class*="releasit"],
  .product-item a[class*="releasit"],
  .product-item button[class*="easysell"],
  .product-item a[class*="easysell"],
  .product-item .es-button,
  .product-item .es-button-title,
  .template-product .product-form__add-button,
  .template-product [class*="releasit"] button,
  .template-product [class*="releasit"] a,
  .template-product [class*="easysell"] button,
  .template-product [class*="easysell"] a,
  .template-product button[class*="releasit"],
  .template-product a[class*="releasit"],
  .template-product button[class*="easysell"],
  .template-product a[class*="easysell"],
  .template-product .es-button {
    font-size: 11px !important;
    padding: 0 8px !important;
  }
}

/* 12. Clean Collection Circles (No gradients, spin animations, or glowing) */
.template-index .collection-item__image-wrapper--rounded {
  border: 2px solid #B08D45 !important;
  padding: 4px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(176, 141, 69, 0.15) !important;
  background: #FFFFFF !important;
  position: relative !important;
  isolation: auto !important;
}

.template-index .collection-item__image-wrapper--rounded::before,
.template-index .collection-item__image-wrapper--rounded::after {
  display: none !important;
}

/* 13. Disable Excessive COD Button Pulsings */
.template-product [class*="releasit"] button,
.template-product [class*="releasit"] a,
.template-product [class*="easysell"] button,
.template-product [class*="easysell"] a,
.template-product button[class*="releasit"],
.template-product a[class*="releasit"],
.template-product button[class*="easysell"],
.template-product a[class*="easysell"],
.template-product .es-button {
  animation: none !important;
}

/* 14. Unify Footers and Delivery timelines */
.footer {
  background: #18181B !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.footer::before {
  background-image: none !important;
}

.product-form .price-list .price--highlight {
  color: #18181B !important;
}

.delivery-timeline__title {
  color: #18181B !important;
}

/* Homepage Hero Banner CTA Button Outline Override */
.slideshow__button {
  background-color: #B08D45 !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease !important;
}

.slideshow__button:hover {
  background-color: #9c7b39 !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  opacity: 0.9 !important;
}

/* ============================================================================
   ZAYRANO PRODUCT DETAIL PAGE VISUAL ALIGNMENT
   ============================================================================ */

/* Page Background */
.template-product,
.template-product #main,
.template-product .page__content {
  background-color: #FAFAF9 !important;
}

/* Card layout on Product Details Page */
.template-product .card {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(24, 24, 27, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.04) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

/* Outer/Inner spacing padding to prevent components touching */
.template-product .card__section {
  padding: 30px !important;
}

@media screen and (max-width: 767px) {
  .template-product .card__section {
    padding: 20px !important;
  }
}

/* Collapsible headers, Tab titles and Spec headers styling */
.template-product .card__header,
.template-product .card__collapsible-button {
  background: #18181B !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.template-product .card__title,
.template-product .card__collapsible-button .plus-button {
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.template-product .card__collapsible-button {
  padding: 20px 30px !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
}

/* Specs Table styling */
.template-product .specs-table th {
  background: #FAFAF9 !important;
  color: #18181B !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(24, 24, 27, 0.08) !important;
}

.template-product .specs-table td {
  color: #18181B !important;
  border-bottom: 1px solid rgba(24, 24, 27, 0.08) !important;
}

/* Benefit Cards styling */
.template-product .benefit-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(24, 24, 27, 0.12) !important;
  border-radius: 8px !important;
}

.template-product .benefit-card__title {
  color: #18181B !important;
  font-weight: 700 !important;
}

/* Estimated delivery styling */
.template-product .delivery-timeline {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(24, 24, 27, 0.12) !important;
  border-radius: 8px !important;
}

.template-product .delivery-timeline__title {
  color: #18181B !important;
}

/* COD Purchase Buttons Styling */
.template-product [class*="releasit"] button,
.template-product [class*="releasit"] a,
.template-product [class*="easysell"] button,
.template-product [class*="easysell"] a,
.template-product button[class*="releasit"],
.template-product a[class*="releasit"],
.template-product button[class*="easysell"],
.template-product a[class*="easysell"],
.template-product .es-button {
  background: #18181B !important;
  color: #FFFFFF !important;
  border: 1px solid #B08D45 !important;
  /* Gold border outline */
  box-shadow: none !important;
  animation: none !important;
  /* disable pulsing */
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

.template-product [class*="releasit"] button:hover,
.template-product [class*="releasit"] a:hover,
.template-product [class*="easysell"] button:hover,
.template-product [class*="easysell"] a:hover,
.template-product button[class*="releasit"]:hover,
.template-product a[class*="releasit"]:hover,
.template-product button[class*="easysell"]:hover,
.template-product a[class*="easysell"]:hover,
.template-product .es-button:hover {
  background: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
}

/* Add to Cart Button Styling */
.template-product .product-form__add-button {
  background: #B08D45 !important;
  color: #FFFFFF !important;
  border: 1px solid #B08D45 !important;
  transition: background-color 180ms ease, border-color 180ms ease !important;
}

.template-product .product-form__add-button:hover {
  background: #18181B !important;
  border-color: #18181B !important;
  color: #FFFFFF !important;
}

/* Dynamic SAVE percentage alignment */
.template-product .product-form .price-list .price--highlight {
  color: #18181B !important;
}

.template-product .product-form .price-list .price--compare {
  color: #8E8E93 !important;
  text-decoration: line-through !important;
}

.template-product .product-form .price-list .product-label--on-sale {
  background: #B08D45 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

/* 15. Homepage Featured Collection & Recommendation Lists Spacing (Gaps on 4 sides of the cards) */
[data-section-type="featured-collection"] .scroller,
.product-recommendations .scroller {
  padding-top: 12px !important;
  padding-bottom: 24px !important;
}

@media screen and (max-width: 767px) {

  [data-section-type="featured-collection"] .scroller,
  .product-recommendations .scroller {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }
}

/* 16. Sold Out / Disabled button color adjustments */
.button--disabled,
.product-item__action-button.button--disabled,
.template-product .product-form__add-button[disabled],
button.product-form__add-button[disabled],
.es-button[disabled] {
  background-color: #E4E4E7 !important;
  /* Zinc-200 background */
  color: #71717A !important;
  /* Zinc-500 text */
  border: 1px solid #D4D4D8 !important;
  /* Zinc-300 border */
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 17. Footer Styles Reset & Cleanup */
.footer {
  background-color: #18181B !important;
  color: #FAFAF9 !important;
}

.footer__title {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  padding: 0 !important;
  font-weight: 700 !important;
  cursor: default !important;
}

.footer__contact-item a,
.footer__linklist-item a {
  color: #A1A1AA !important;
  /* Premium zinc-400 links */
  transition: color 180ms ease !important;
}

.footer__contact-item a:hover,
.footer__linklist-item a:hover {
  color: #B08D45 !important;
  /* Accent gold on hover */
}

/* 18. ZAYRANO Premium Infinite Announcement Marquee Ticker */
.announcement-bar__marquee-container {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
  background-color: #B08D45 !important;
  /* Premium Gold Background */
  color: #18181B !important;
  /* Primary Dark Text */
  padding: 8px 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

.announcement-bar__marquee-wrapper {
  display: inline-block !important;
  white-space: nowrap !important;
}

.announcement-bar__marquee-content {
  display: inline-block !important;
  white-space: nowrap !important;
  animation: zayrano-marquee-anim 28s linear infinite !important;
  will-change: transform !important;
}

/* Pause moving marquee on mouse hover (Desktop only) */
.announcement-bar__marquee-container:hover .announcement-bar__marquee-content {
  animation-play-state: paused !important;
}

.announcement-bar__marquee-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 0 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  color: #18181B !important;
}

.announcement-bar__marquee-item a {
  color: inherit !important;
  text-decoration: none !important;
}

.announcement-bar__marquee-separator {
  color: rgba(24, 24, 27, 0.4) !important;
  font-size: 11px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

@keyframes zayrano-marquee-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-33.333333%, 0, 0);
  }
}

@media screen and (max-width: 767px) {
  .announcement-bar__marquee-container {
    padding: 6px 0 !important;
  }

  .announcement-bar__marquee-item {
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}

/* Accessibility: Respect Reduced Motion preferences */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar__marquee-content {
    animation: none !important;
    white-space: normal !important;
    text-align: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .announcement-bar__marquee-separator {
    display: inline-block !important;
  }
}

/* 19. ZAYRANO Premium Search Categories Select Dropdown */
.search-bar__filter {
  position: relative !important;
}

.search-bar__filter-label {
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  height: 100% !important;
  padding: 0 20px !important;
  outline: none !important;
}

.search-bar__filter-label:focus {
  outline: none !important;
}

.search-bar__filter-menu {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 200px !important;
  background-color: #18181B !important;
  /* Premium Dark Background */
  border: 1px solid #27272A !important;
  /* Subtle zinc-800 border */
  border-radius: 6px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease !important;
}

.search-bar__filter-menu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.search-bar__filter-menu-item {
  color: #D4D4D8 !important;
  /* zinc-300 soft text */
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background-color 150ms ease, color 150ms ease !important;
  white-space: nowrap !important;
}

.search-bar__filter-menu-item:hover {
  background-color: #B08D45 !important;
  /* Zayrano Gold hover background */
  color: #FFFFFF !important;
  /* High-contrast white text */
}

.search-bar__filter-menu-item.is-selected {
  color: #B08D45 !important;
  /* Gold active text */
  font-weight: 600 !important;
}

.search-bar__filter-menu-item.is-selected:hover {
  color: #FFFFFF !important;
  /* Override text on active hover */
}

/* 20. ZAYRANO Premium Mini-Cart Dropdown Style Improvements */
.mini-cart {
  background-color: #18181B !important; /* Solid Premium Dark Background */
  background: #18181B !important;
  color: #FAFAF9 !important;            /* Warm White text */
  border: 1px solid #27272A !important;   /* zinc-800 border */
  border-radius: 6px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.5) !important;
}

.mini-cart__inner {
  background-color: #18181B !important;
  background: #18181B !important;
}

.mini-cart__content {
  background-color: #18181B !important;
  background: #18181B !important;
}

/* Ensure all text inside the mini-cart is warm white and perfectly readable */
.mini-cart__product-title,
.mini-cart__product-vendor,
.mini-cart__price-info,
.mini-cart__quantity-remove,
.mini-cart__recap-price-line,
.mini-cart__amount-saved,
.mini-cart__empty-state,
.mini-cart .alert,
.mini-cart p,
.mini-cart span,
.mini-cart a:not(.button) {
  color: #FAFAF9 !important;
}

.mini-cart__product-vendor {
  color: #A1A1AA !important; /* Zinc-400 for vendor link */
}

.mini-cart__product-vendor:hover {
  color: #B08D45 !important; /* Gold on hover */
}

/* Free shipping alert styling in mini cart */
.mini-cart .alert {
  background-color: #27272A !important; /* zinc-800 background */
  border: 1px solid #3F3F46 !important;   /* zinc-700 border */
  border-radius: 4px !important;
  padding: 8px 12px !important;
  color: #FAFAF9 !important;
}

/* Quantity input and selector styling inside mini cart */
.mini-cart .quantity-selector {
  border: 1px solid #3F3F46 !important;
  background-color: #27272A !important;
  border-radius: 24px !important; /* Rounded pill style */
  color: #FAFAF9 !important;
  height: 30px !important;        /* Compact height inside cart */
  width: 100px !important;        /* Compact width */
  padding: 2px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mini-cart .quantity-selector__value {
  background-color: transparent !important; /* Transparent to show zinc-800 bg */
  color: #FAFAF9 !important;
  border: none !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  width: 32px !important;
  padding: 0 !important;
  height: 100% !important;
}

.mini-cart .quantity-selector__button {
  color: #FAFAF9 !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background-color 150ms ease, color 150ms ease !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.mini-cart .quantity-selector__button:hover {
  background-color: #B08D45 !important; /* Zayrano Gold on hover */
  color: #FFFFFF !important;
}

.mini-cart .quantity-selector__button:hover svg {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.mini-cart .quantity-selector__button svg {
  width: 9px !important;
  height: 9px !important;
  fill: #FAFAF9 !important;
  color: #FAFAF9 !important;
}

/* Recap & Footer Action Buttons inside mini cart */
.mini-cart__recap {
  border-top: 1px solid #27272A !important;
  background-color: #18181B !important;
}

/* View Cart outline button */
.mini-cart .button--secondary {
  background-color: transparent !important;
  color: #FAFAF9 !important;
  border: 1px solid #B08D45 !important; /* Gold border */
  box-shadow: none !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

.mini-cart .button--secondary:hover {
  background-color: #B08D45 !important; /* Gold hover background */
  color: #FFFFFF !important;
}

/* Checkout solid button */
.mini-cart .button--primary {
  background-color: #B08D45 !important; /* Zayrano Gold */
  color: #FFFFFF !important;
  border: 1px solid #B08D45 !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
}

.mini-cart .button--primary:hover {
  background-color: #FFFFFF !important; /* White background hover */
  border-color: #FFFFFF !important;
  color: #18181B !important;            /* Dark text hover */
}

/* Matching dark navigation triangle at top */
.mini-cart .icon--nav-triangle-borderless {
  color: #18181B !important;
  fill: #18181B !important;
}

/* ============================================================================
   CUSTOM ACCENT THEME COLOR ADJUSTMENTS
   ============================================================================ */

/* 1. Cart Page & Mini-Cart Checkout Buttons Theme Color */
.cart-recap__checkout,
.page__button-action[name="checkout"],
.mini-cart__button-container button[name="checkout"] {
  background-color: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FAFAF9 !important;
}

.cart-recap__checkout:hover,
.page__button-action[name="checkout"]:hover,
.mini-cart__button-container button[name="checkout"]:hover {
  background-color: #8b7037 !important;
  border-color: #8b7037 !important;
  color: #FFFFFF !important;
}

/* 2. Collections Page "Add to Cart" Buttons Theme Color */
.product-list--collection .product-item__action-button.button--primary,
.product-list--collection .product-item__action-button.button--primary:visited {
  background: #18181B !important; /* Make Add to Cart buttons black by default */
  color: #FAFAF9 !important;
  border: 1px solid #18181B !important;
}

.product-list--collection .product-item__action-button.button--primary:hover {
  background: #B08D45 !important; /* Gold on hover */
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
}

/* 3. Search Results & Suggestions List — stacking fix */
/* CRITICAL: do NOT add position:relative or high z-index to .header__search-bar-wrapper here.
   The theme JS relies on its position becoming fixed (is-fixed class) — any position:relative
   !important override will break that, trapping the overlay in normal document flow. */
.header {
  position: relative !important;
  z-index: 100 !important;
}

.search-bar {
  position: relative !important;
  z-index: 2 !important;
}

.search-bar__results,
.search-bar__menu-wrapper {
  background: #18181B !important; /* Dark theme background matching header */
  color: #FAFAF9 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: none !important;
  z-index: 99999 !important; /* High z-index to stay above header navigation menu */
}

.search-bar__menu-title {
  color: #A1A1AA !important; /* Zinc-400 muted gray */
}

.search-bar__menu-link {
  color: #FAFAF9 !important;
}

.search-bar__menu-link:hover,
.search-bar__menu-link:focus {
  color: #B08D45 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.search-bar__result-category {
  background: #242427 !important; /* Slightly lighter dark gray for category headers */
  color: #FAFAF9 !important;
  box-shadow: 0 1px rgba(255, 255, 255, 0.05), 0 -1px rgba(255, 255, 255, 0.05) !important;
}

.search-bar__result-item {
  color: #FAFAF9 !important;
}

.search-bar__result-item:hover,
.search-bar__result-item:focus {
  background: rgba(255, 255, 255, 0.05) !important;
}

.search-bar__item-title {
  color: #FAFAF9 !important;
}

.search-bar__result-link {
  color: #B08D45 !important;
}

.search-bar__result-link:hover,
.search-bar__result-link:focus {
  color: #B08D45 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 4. Sold Out Products button look disabled gray */
.product-item--sold-out .product-item__action-button,
.product-item--sold-out button,
.product-item--sold-out [class*="es-button"],
.product-item--sold-out [class*="es-btn"],
.product-item--sold-out [class*="codForm-btn"],
.product-item--sold-out [class*="releasit-"] {
  background-color: #E4E4E7 !important;
  color: #71717A !important;
  border: 1px solid #D4D4D8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 5. Product Detail Page Sold Out sibling buttons */
.product-form__payment-container button[disabled] ~ button,
.product-form__payment-container button[disabled] ~ div,
.product-form__payment-container button[disabled] ~ [class*="es-"],
.product-form__payment-container button[disabled] ~ [class*="codForm-"] {
  background-color: #E4E4E7 !important;
  color: #71717A !important;
  border: 1px solid #D4D4D8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 6. Remove Quick View buttons globally */
.button--ternary,
.product-item__action-button.button--ternary,
.product-item__quick-view-icon,
[data-action="open-modal"][data-secondary-action="open-quick-view"] {
  display: none !important;
}

/* 7. Cart price alignment and compare price crossed-out style overrides */
.line-item__price--compare {
  text-decoration: line-through !important;
  color: #71717A !important;
  margin-left: 0 !important;
  margin-right: 12px !important;
  display: inline-block !important;
}

.line-item__price--compare::before {
  display: none !important; /* Hide original pseudo line */
}

.line-item__price--highlight {
  margin-left: 0 !important;
  display: inline-block !important;
}

/* ============================================================================
   MOBILE HEADER & MENU STYLING ADJUSTMENTS
   ============================================================================ */

/* 1. Force header items onto an absolute single-row layout on mobile and center logo */
@media screen and (max-width: 640px) {
  .header {
    overflow: visible !important;
    background: #18181B !important;
  }

  .header__inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 !important;
  }

  /*
   * Hamburger nav — vertically centered using height+flex instead of transform.
   * IMPORTANT: do NOT use transform here; it would create a stacking context
   * that could interfere with child element positioning.
   */
  .header__mobile-nav {
    position: absolute !important;
    left: 8px !important;
    top: 0 !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    z-index: 10 !important;
    transform: none !important;
  }

  /*
   * Logo — left-aligned after the hamburger button.
   * Hamburger sits at left:8px with ~34px width, so logo starts at left:50px
   * giving 8px breathing room. Uses height+align-items (no transform) to
   * vertically center without breaking position:fixed on child elements.
   */
  .header__logo {
    position: absolute !important;
    left: 50px !important;
    top: 0 !important;
    height: 64px !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    z-index: 5 !important;
    max-width: 160px !important;
    width: auto !important;
  }

  .header__logo-link {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    color: #FFFFFF !important;
  }

  /* Logo image — slightly larger for better mobile visibility */
  .header__logo-image {
    max-height: 44px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  /*
   * Mobile right-side action list.
   *
   * CRITICAL: Do NOT use transform: translateY here.
   * CSS transforms on any ancestor break position:fixed on descendants (W3C spec).
   * The mini-cart uses position:fixed — any transform in its ancestor chain will
   * cause it to position relative to that transformed element, not the viewport.
   *
   * Solution: Use top:0 + height:64px + align-items:center for vertical centering.
   * This is visually identical to top:50%+translateY(-50%) but has NO transform.
   *
   * Cart badge offset: badge has right:-14px, so action-list sits at right:18px
   * to keep the badge fully inside the viewport on all screens ≥320px.
   */
  .header__action-list {
    position: absolute !important;
    right: 18px !important;
    top: 0 !important;
    height: 64px !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    z-index: 10 !important;
    gap: 2px !important;
  }

  .header__action-item {
    padding: 0 3px !important;
    flex: 0 0 auto !important;
  }

  /*
   * Cart item containing block fix.
   * Setting position:static removes it from the positioned ancestor chain,
   * so the mini-cart's position:fixed resolves against the VIEWPORT correctly.
   */
  .header__action-item--cart {
    padding-right: 0 !important;
    position: static !important;
  }

  /* Force icons to be white and visible on dark header */
  .header__action-item-link,
  .header__action-item-link svg,
  .header__action-item-link svg * {
    color: #FFFFFF !important;
  }

  .header__action-item-link svg [stroke],
  .header__action-item-link svg stroke,
  .header__action-item-link svg path[stroke],
  .header__action-item-link svg circle[stroke] {
    stroke: #FFFFFF !important;
  }

  .header__action-item-link svg [fill="currentColor"],
  .header__action-item-link svg path:not([fill="none"]),
  .header__action-item-link svg circle:not([fill="none"]),
  .header__action-item-link svg g:not([fill="none"]) {
    fill: #FFFFFF !important;
  }

  .header__cart-count {
    color: #FFFFFF !important;
    background-color: #B08D45 !important;
  }

  /* ─── 2. SEARCH BAR — MOBILE COMPLETE FIX ─────────────────────────────── */

  /*
   * Default state: wrapper positioned directly below header.
   * MUST use position:absolute (not relative) so is-fixed state can override
   * it to position:fixed via the base CSS. A relative !important anywhere in
   * the ancestor chain would block that override.
   */
  .header__search-bar-wrapper {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: transparent !important;
  }

  /* Search input row gets the dark background */
  .header__search-bar-wrapper .search-bar {
    background: #18181B !important;
    border-bottom: 1px solid #3F3F46 !important;
    padding: 8px 12px !important;
  }

  /*
   * IS-FIXED STATE — native position:fixed (set by base CSS) now works because
   * we removed the position:relative !important override above.
   * The wrapper covers the full screen (100vh) from JS focus event.
   * Semi-transparent backdrop lets the user see they're in search mode.
   */
  .header__search-bar-wrapper.is-fixed {
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  .header__search-bar-wrapper.is-fixed .search-bar {
    background: #18181B !important;
    border-bottom: 1px solid #3F3F46 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    padding: 8px 12px !important;
  }

  /*
   * ACCOUNT & CART — ALWAYS CLICKABLE.
   *
   * The action list must stay ABOVE the search overlay so the user can always
   * tap the cart or account icon, even while search is open.
   * z-index: 1000 places it above the search wrapper (z-index: 999).
   * DO NOT apply pointer-events:none here under any condition.
   */
  .header__action-list {
    z-index: 1000 !important;
    pointer-events: auto !important;
  }

  /* Hide results inner area when nothing to show (aria-hidden=true) */
  .search-bar__results[aria-hidden="true"],
  .search-bar__menu-wrapper[aria-hidden="true"] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .search-bar__results[aria-hidden="false"],
  .search-bar__menu-wrapper[aria-hidden="false"] {
    visibility: visible !important;
    opacity: 1 !important;
    background: #18181B !important;
    border-top: 1px solid #27272A !important;
  }

  /* Input field */
  .search-bar__input {
    color: #FAFAF9 !important;
    background: #27272A !important;
    border: 1px solid #3F3F46 !important;
    border-radius: 6px !important;
  }

  .search-bar__input:focus {
    border-color: #B08D45 !important;
    outline: none !important;
  }

  .search-bar__input::placeholder {
    color: #71717A !important;
  }

  /* Search submit icon */
  .search-bar__submit svg path[stroke],
  .search-bar__submit svg circle[stroke] {
    stroke: #FAFAF9 !important;
  }

  .search-bar__submit svg path:not([fill="none"]),
  .search-bar__submit svg circle:not([fill="none"]) {
    fill: #FAFAF9 !important;
  }

  /*
   * CLOSE BUTTON LAYOUT — flex container.
   * The JS sets inline style.width on .search-bar__close-button.
   * Do NOT set width:auto !important — it would block the JS inline style.
   */
  .search-bar__top-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .search-bar__top {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Close button — DO NOT set width (JS controls it inline) */
  .search-bar__close-button {
    flex-shrink: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Close text — compact, professional styling */
  .search-bar__close-text {
    display: inline-block !important;
    color: #B08D45 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(176, 141, 69, 0.6) !important;
    border-radius: 4px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
  }

  .search-bar__close-text:active {
    background: rgba(176, 141, 69, 0.15) !important;
  }
}

/* 4. Mobile menu drawer — solid dark background */
.mobile-menu,
.mobile-menu__inner,
.mobile-menu__panel {
  background-color: #18181B !important;
  color: #FAFAF9 !important;
}

.mobile-menu__nav-link,
.mobile-menu__back-button,
.mobile-menu__section-title {
  color: #FAFAF9 !important;
}

.mobile-menu__help-wrapper,
.mobile-menu__help-wrapper a {
  color: #D4D4D8 !important;
}

.mobile-menu {
  z-index: 9999 !important;
}

/* ============================================================================
   DESKTOP & MOBILE NAV DROPDOWN — SOLID DARK BACKGROUNDS + Z-INDEX
   ============================================================================ */

/*
 * ROOT CAUSE: nav-dropdown has z-index:1 (too low to appear above page sections)
 * and inherits settings.secondary_background (may be light on some theme configs).
 *
 * FIX: Explicit dark #18181B background + elevated z-index within header stacking
 * context. Box-shadow provides the premium depth effect.
 */
.nav-dropdown {
  background-color: #18181B !important;
  background: #18181B !important;
  color: #FAFAF9 !important;
  border-color: #27272A !important;
  z-index: 200 !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* Floating variant (condensed nav) */
.nav-dropdown--floating {
  background-color: #18181B !important;
  background: #18181B !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* Nested sub-dropdowns — one level higher z-index */
.nav-dropdown .nav-dropdown {
  background-color: #18181B !important;
  background: #18181B !important;
  border-color: #27272A !important;
  z-index: 201 !important;
}

/* Dropdown link text */
.nav-dropdown__link {
  color: #FAFAF9 !important;
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus {
  color: #B08D45 !important;
  background-color: rgba(176, 141, 69, 0.08) !important;
}

.nav-dropdown__link[aria-expanded="true"] {
  color: #B08D45 !important;
}

/* Arrow triangles — dark fill to match dropdown background */
.nav-dropdown .icon--nav-triangle-borderless path,
.nav-dropdown .icon--nav-triangle-left path {
  fill: #18181B !important;
  stroke: #27272A !important;
}

/*
 * ROOT CAUSE: mega-menu uses settings.secondary_background with no dark override.
 * FIX: same dark treatment as nav-dropdown.
 */
.mega-menu {
  background-color: #18181B !important;
  background: #18181B !important;
  color: #FAFAF9 !important;
  border-color: #27272A !important;
  z-index: 200 !important;
}

.mega-menu--floating {
  background-color: #18181B !important;
  background: #18181B !important;
}

.mega-menu__title {
  color: #B08D45 !important;
}

.mega-menu__link {
  color: #D4D4D8 !important;
}

.mega-menu__link:hover {
  color: #B08D45 !important;
}

.mega-menu .icon--nav-triangle-borderless path {
  fill: #18181B !important;
  stroke: #27272A !important;
}

/* ============================================================================
   MINI-CART DRAWER — MOBILE POSITIONING + Z-INDEX FIX
   ============================================================================ */

/*
 * Desktop z-index fix: base value z-index:1 is too low.
 */
.mini-cart {
  z-index: 200 !important;
}

/*
 * MOBILE MINI-CART — CRITICAL POSITIONING FIX
 *
 * ROOT CAUSE:
 * The mini-cart uses position:absolute; left:0; top:100%.
 * On mobile, .header__action-list is position:absolute; right:18px — this
 * becomes the containing block because it is the nearest positioned ancestor.
 * As a result, left:0 resolves to the RIGHT edge of the screen (where the
 * cart icon lives), pushing the entire drawer off-screen to the right.
 *
 * FIX:
 * Use position:fixed on mobile so the mini-cart positions relative to the
 * VIEWPORT — not any parent element. This is the standard approach for
 * mobile cart drawers in modern ecommerce.
 *
 * top: var(--header-height, 64px) matches the dynamic mobile header height.
 * The drawer fills the remaining viewport height below the header.
 */
@media screen and (max-width: 640px) {
  .mini-cart {
    position: fixed !important;
    top: var(--header-height, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--header-height, 64px)) !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  /* When open — ensure no max-height clipping */
  .mini-cart[aria-hidden="false"] {
    transform: none !important;
    max-height: none !important;
  }

  /* Adjust the nav-triangle arrow: hide on mobile full-screen drawer */
  .mini-cart .icon--nav-triangle-borderless {
    display: none !important;
  }
}

/* ============================================================================
   ACCOUNT POPOVER & DROPDOWN STYLING
   ============================================================================ */

/* 1. Global Dark Theme popover */
.popover {
  background-color: #18181B !important;
  color: #FAFAF9 !important;
  border: 1px solid #27272A !important;
  z-index: 200 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
}

.popover__title,
.popover__legend,
.popover__link-item,
.popover__secondary-action,
.popover__secondary-action p,
.popover__secondary-action button {
  color: #FAFAF9 !important;
}

.popover__link-item:hover {
  color: #B08D45 !important;
}

/* Input fields inside the login popover */
.popover .form__field,
.popover .form__field--text,
.popover input.form__field {
  color: #FAFAF9 !important;
  background-color: #27272A !important;
  border: 1px solid #3F3F46 !important;
}

.popover .form__field:focus {
  border-color: #B08D45 !important;
}

.popover .form__floating-label {
  color: #A1A1AA !important;
}

/* Buttons inside the popover */
.popover .form__submit,
.popover .button {
  background-color: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #FFFFFF !important;
}

.popover .form__submit:hover,
.popover .button:hover {
  background-color: #967537 !important;
  border-color: #967537 !important;
}

/* Popover arrow triangle */
.popover .icon--nav-triangle-borderless path {
  fill: #18181B !important;
  stroke: #27272A !important;
}

/* 2. Mobile popover positioning */
@media screen and (max-width: 640px) {
  .header__action-item--account {
    position: static !important;
  }

  .popover {
    position: absolute !important;
    left: auto !important;
    right: 8px !important;
    width: 290px !important;
    min-width: 0 !important;
    top: calc(100% + 4px) !important;
    border-radius: 4px !important;
  }

  .popover .icon--nav-triangle-borderless {
    left: auto !important;
    right: 28px !important;
  }
}

/* Note: Search close button fix is now handled in the mobile header section above */

/* ============================================================================
   SORT BY — VALUE PICKER BOTTOM SHEET — DARK THEME FIX
   ============================================================================ */

/*
 * ROOT CAUSE:
 * .value-picker__inner uses settings.secondary_background which is light on
 * ZAYRANO's dark theme — it renders transparent/white, making sort options
 * overlap the product grid without any solid background.
 * The overlay uses z-index:5 which is fine, but the inner panel needs
 * an explicit dark background color to be legible.
 *
 * FIX: Override .value-picker__inner and related elements with #18181B.
 */

/* Overlay backdrop — keep existing semi-transparent black */
.value-picker::before {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Bottom sheet panel — solid dark background */
.value-picker__inner {
  background-color: #18181B !important;
  background: #18181B !important;
  color: #FAFAF9 !important;
  border-top: 1px solid #27272A !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Sheet header — title + close button row */
.value-picker__header {
  background-color: #18181B !important;
  border-bottom: 1px solid #27272A !important;
}

.value-picker__title {
  color: #FAFAF9 !important;
}

/* Close X button */
.value-picker__header .icon--close,
.value-picker__close,
.value-picker__close svg {
  color: #FAFAF9 !important;
  fill: #FAFAF9 !important;
  stroke: #FAFAF9 !important;
}

/* Choice list items */
.value-picker__choice-item {
  color: #D4D4D8 !important;
  background-color: transparent !important;
}

.value-picker__choice-item:hover {
  background-color: rgba(176, 141, 69, 0.1) !important;
  color: #FAFAF9 !important;
}

/* Selected item — gold accent */
.value-picker__choice-item.is-selected {
  color: #B08D45 !important;
  font-weight: 600 !important;
}

/* Checkmark icon on selected item */
.value-picker__choice-item svg {
  color: #B08D45 !important;
  fill: #B08D45 !important;
  stroke: #B08D45 !important;
}

/* Ensure value picker z-index sits above collection toolbar (z-index:3)
   but below mobile menu (z-index:9999) */
.value-picker {
  z-index: 1000 !important;
}

/* Desktop popover variant (≥641px) — also dark */
@media screen and (min-width: 641px) {
  .value-picker {
    background-color: #18181B !important;
    background: #18181B !important;
    color: #FAFAF9 !important;
    border: 1px solid #27272A !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    border-radius: 6px !important;
  }

  .value-picker__inner {
    border-radius: 6px !important;
    border-top: none !important;
  }
}