/** Shopify CDN: Minification failed

Line 1020:2 "margin-botton" is not a known CSS property
Line 10543:2 "margin-botton" is not a known CSS property
Line 11880:29 Unexpected "-->"
Line 11889:0 Expected "{" but found "."
Line 11894:0 Expected "{" but found "."
Line 11908:33 Unexpected "-->"

**/
@charset "utf-8";

/**
 * ----------------------------------------------------------------------------------------------
 * 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;
  /* "hidden" faz o navegador calcular overflow-y como auto, criando um contexto
     de rolagem — e position: sticky dentro dele gruda nesse contexto, que rola
     junto com a pagina. Era isso que impedia o cabecalho fixo de funcionar.
     "clip" corta igual sem criar o contexto. A primeira linha e o fallback para
     navegadores antigos, que ignoram a segunda. */
  overflow-x: hidden!important;
  overflow-x: clip!important;
} 
body {
  margin: 0;
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden!important;
    overflow-x: clip!important;
  }
}

[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;
}

.color-line {
    background: linear-gradient(to right, #ffff4a 0, #fcd000 4%, #ffc112 5%, #a3d3fd 50%, #dbeeff 84%, #00d62e 119%);
    background-image: linear-gradient(to right, #ffff4a 0, #fcd000 7%, #ffc112 11%, #ff8a00 17%, #ff5f5f 23%, #ff5156 29%, #ff7ae7 35%, #ff5193 41%, #c739ff 46%, #a400e1 63%, #2eceff 76%, #0086ff 87%, #72f772 97%, #00d604);
    height: 5px;
    width: 100%;
}

/**
 * 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;
}

.shipping-preview {
    margin: 30px 0 40px 0;
    color: #1f1f1f;
}

.shipping-preview i {
    float: left;
    margin-right: 15px;
    top: 0px;
    position: relative;
    width: 40px;
}

.shipping-preview p {
    font-size: 14px;
    line-height: 21px;
}

.shipping-preview h4 {
    font-size: 18px;
    margin-bottom: 5px;
    line-height: 1;
}

.shipping-preview h4 b {
    color: var(--accent-color);
}

.verification__stamp {
    font-size: 18px;
    position: relative;
    display: inline-block;
    top: -2px;
}

.verification__stamp:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    color: #0086FF;
}

.barradefundo {
    margin-top: 10px;
    background: var(--product-on-sale-accent);
    padding: 3px 10px 4px 10px;
    border-radius: 30px;
    color: var(--product-on-sale-color);
    font-weight: bold;
    font-size: 12px;
}

.fretefundo {
    margin: 18px 1px 54px 1px;
    background: none;
    border-radius: 50px;
    border: 2px solid #00bd58;
    padding: 10px 21px 11px 18px;
}

.product-block-list__item--description img {
    margin: 0 auto!important;
}

.security__payment p {
    color: var(--primary-button-background);
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 100;
    margin-top: 30px;
}

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;
  padding-right: 40px;
}

.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(var(--text-color-rgb), 0.8);
  border-radius: 100%;
  cursor: pointer;
  transform: scale(1);
  will-change: transform;
  transition: background 0.2s ease-in-out, 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 {
  transform: scale(1.35);
  background: var(--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: var(--flickity-arrow-color);
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transform: scale(0.7);
  z-index: 1;
}
.flickity-prev-next-button:hover {
  background: var(--accent-color);
}
.flickity-prev-next-button svg {
  position: relative;
  width: 15px;
  height: 15px;
  fill: var(--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]) {
  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% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes drift-fadeZoomIn {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

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

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

@keyframes drift-loader-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@-webkit-keyframes drift-loader-before {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(6px);
  }
  25% {
    transform: scale(1.3) translateX(8px);
  }
  40% {
    transform: scale(1.2) translateX(6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(6px);
  }
  75% {
    transform: scale(0.7) translateX(8px);
  }
  90% {
    transform: scale(0.8) translateX(6px);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes drift-loader-before {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(6px);
  }
  25% {
    transform: scale(1.3) translateX(8px);
  }
  40% {
    transform: scale(1.2) translateX(6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(6px);
  }
  75% {
    transform: scale(0.7) translateX(8px);
  }
  90% {
    transform: scale(0.8) translateX(6px);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes drift-loader-after {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(-6px);
  }
  25% {
    transform: scale(1.3) translateX(-8px);
  }
  40% {
    transform: scale(1.2) translateX(-6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(-6px);
  }
  75% {
    transform: scale(0.7) translateX(-8px);
  }
  90% {
    transform: scale(0.8) translateX(-6px);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes drift-loader-after {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(-6px);
  }
  25% {
    transform: scale(1.3) translateX(-8px);
  }
  40% {
    transform: scale(1.2) translateX(-6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(-6px);
  }
  75% {
    transform: scale(0.7) translateX(-8px);
  }
  90% {
    transform: scale(0.8) translateX(-6px);
  }
  100% {
    transform: scale(1);
  }
}

.drift-zoom-pane {
  position: absolute;
  background: var(--secondary-background);
  top: 0;
  left: 0;
  height: 520px;
  width: 100%;
  max-width: 520px;
  z-index: 2;
  border: 1px solid var(--accent-color);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(#000000, 0.2);
  /* This is required because of a bug that causes border-radius to not work with child elements in certain cases. */
  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%;
  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(var(--text-color-rgb), 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(var(--accent-color-rgb), 0.05);
  border: 1px solid var(--accent-color);
  border-radius: 3px;
}

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

/**
 * ----------------------------------------------------------------------------
 * GENERAL
 * ----------------------------------------------------------------------------
 */

html {
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-style: var(--text-font-style);
  font-size: calc(var(--base-text-font-size) - 1px);
  line-height: 1.87;
  color: var(--text-color);
  background: var(--background);
}

@media screen and (min-width: 641px) {
  html {
    font-size: var(--base-text-font-size);
  }
}

/**
 * ----------------------------------------------------------------------------
 * MP INFOS
 * ----------------------------------------------------------------------------
 */

#badges-product {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
}
#badges-product .badge {
    display: flex;
    align-items: flex-start;
    justify-content: start;
    width: 100%;
}
#badges-product .badge .badge-icon {
    margin-right: 10px;
    margin-top: 5px;
    fill: rgba(0, 0, 0, 0.55);
    color: rgba(0, 0, 0, 0.55);
}
#badges-product .badge .badge-text {
    flex: 1;
    color: rgba(0, 0, 0, 0.55);
    font-size: 13px;
    margin-bottom: 5px;
}
#badges-product p {
    margin: 0;
    padding: 0;
}
#badges-product .badge .badge-text .highlight-text {
    color: #0086ff;
}

/**
 * ----------------------------------------------------------------------------
 * HEADINGS
 * ----------------------------------------------------------------------------
 */

.heading {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  color: var(--heading-color);
}

.h1, .rte h1 {
  margin-bottom: 20px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 24px));
  line-height: 1.45;
}

.h2, .rte h2 {
  margin-bottom: 20px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 22px));
  line-height: 1.55;
}

.h3, .rte h3 {
  margin-bottom: 14px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
  line-height: 1.6;
}

.h4, .rte h4 {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  line-height: 1.75;
}

.h5, .rte h4 {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  line-height: 1.85;
  text-transform: uppercase;
}

.h6, .rte h5 {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  line-height: 1.85;
  text-transform: uppercase;
}

@media screen and (min-width: 641px) {
  .h1, .rte h1 {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 26px));
    line-height: 1.43;
  }

  .h2, .rte h2 {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 25px));
    line-height: 1.5;
  }

  .h3, .rte h3 {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 21px));
    line-height: 1.5;
  }

  .h4, .rte h4 {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
    line-height: 1.7;
  }

  .h5, .rte h5 {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
    line-height: 1.75;
  }

  .h6, .rte h6 {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
    line-height: 1.7;
  }
}

/**
 * --------------------------------------------------------------------
 * TEXT HEADING
 * --------------------------------------------------------------------
 */

.text--strong, .highlight {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: normal;
}

.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: var(--link-color);
}

.link--secondary:hover,
.link--secondary:focus {
  color: var(--heading-color);
}

.link--strong {
  font-weight: var(--heading-font-weight);
}

.link--accented {
  color: var(--accent-color);
}

.link--accented:hover {
  text-decoration: underline;
}

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

.link1 {
  transition: color 0.2s ease-in-out;
  color: var(--secondary-button-background);
  margin-botton: 2px;
  
}

.link1:hover,
.link1:focus {
  color: var(--primary-button-background);
}

.link1--secondary:hover,
.link1--secondary:focus {
  color: var(--heading-color);
}

.link1--strong {
  font-weight: var(--heading-font-weight);
}

.link1--accented {
  color: var(--accent-color);
}

.link1--accented:hover {
  text-decoration: underline;
}

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


/**
 * --------------------------------------------------------------------
 * ICON
 * --------------------------------------------------------------------
 */

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

@keyframes spinnerRotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    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;
    transform: translateZ(0);
    /* Needed to avoid a glitch on iOS */
  }
}

/**
 * --------------------------------------------------------------------
 * TABLE
 * --------------------------------------------------------------------
 */

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

.overflow-none {
  overflow: hidden;
}

.table,
.rte table {
  width: 100%;
  text-align: left;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.table th {
  font-weight: normal;
}

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

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

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

.table tbody tr {
  border-top: 1px solid var(--border-color);
}

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

.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 {
    margin-left: 20px;
  }

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

@media screen and (min-width: 641px) {
  .table th, .table td {
    padding: 15px 30px;
  }

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

  .table th:last-child,
  .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: var(--page-max-width, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--mobile-container-gutter);
}

.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 var(--mobile-container-gutter);
  }
}

@media screen and (min-width: 641px) {
  .container {
    padding: 0 var(--desktop-container-gutter);
  }
}
/**
 * --------------------------------------------------------------------
 * ASPECT RATIO
 * --------------------------------------------------------------------
 */

.aspect-ratio {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.image-border-radius > img {
  overflow: auto;
  border-radius: 50px;
}

.image-principal-border-radius {
  overflow: auto;
  border-radius: 8px;
}

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

.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%;
  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% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(100%);
  }
}

@keyframes lazyLoader {
  0%, 100% {
    transform: translateX(-50%);
  }
  50% {
    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;
}

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

.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: var(--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: var(--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: var(--text-color);
  background-color: rgba(var(--text-color-rgb), 0.1);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.placeholder-svg--inverted {
  fill: var(--background);
  background-color: var(--text-color);
  fill-opacity: 0.5;
}
/* This is just a foundation for an ultra simplistic grid */

.grid {
  display: flex;
  flex-wrap: wrap;
  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;
}

.grid__cell--top {
  align-self: flex-start;
}

.grid__cell--middle {
  align-self: center;
}

.grid__cell--bottom {
  align-self: flex-end;
}

@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%;
  }

  .\39\/12--lap {
    width: 75%;
  }

  .\32\/3--lap {
    width: 66.666666%;
  }

  .\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%;
  }

  .\39\/12--lap-and-up {
    width: 75%;
  }

  .\32\/3--lap-and-up {
    width: 66.666666%;
  }

  .\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%;
  }

  .\39\/12--desk {
    width: 75%;
  }

  .\32\/3--desk {
    width: 66.666666%;
  }

  .\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%;
  }

  .\39\/12--wide {
    width: 75%;
  }

  .\32\/3--wide {
    width: 66.666666%;
  }

  .\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: 20%;
  }
}

/**
 * --------------------------------------------------------------------
 * 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%;
  border-radius: 10px
}

@media only screen and (max-width: 999px){
  .mobhide {
      display: none !important;
  }
  
  .flex{
  	flex-direction: column;
  }
  
  .metade{
  	width: 100%!important;
  }
  
  .frete{
    margin-left: 0;
  }
  
  .product-form__info-content .price-list, .product-form__info-content .product-meta__label-list{
  	margin-left: 0;
  }
}

.metade{
 	width: 48%; 
}

.metade span {
	width: 100%;
    background: none;
    border: 2px solid var(--product-on-sale-accent);
    color: var(--product-on-sale-accent);
}

.metade span:hover {
    background: var(--product-on-sale-accent);
    border: 2px solid var(--product-on-sale-accent);
    color: white;
	width: 100%;
}

.flex{
	display: flex;
      width: 100%;
    justify-content: space-between;
}


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

  .scroller .block-list::before {
    content: "";
    flex: 0 0 var(--mobile-container-gutter);
  }

  .scroller .block-list::after {
    content: "";
    flex: 0 0 calc(var(--mobile-container-gutter) - 7px);
  }

  .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 var(--desktop-container-gutter);
  }

  .scroller .block-list::after {
    flex: 0 0 calc(var(--desktop-container-gutter) - 15px);
  }
}

@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 */
  transform: scale(1.01);
  /* The 1.01 is necessary to avoid some rounding issues on Chrome */
  transition: opacity 0.2s ease-in-out, transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

  .article-item:hover .article-item__title {
    color: var(--accent-color);
  }
}

.article-item__meta {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
}

.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(var(--text-color-rgb), 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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  }
}

@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% + (var(--mobile-container-gutter) * 2));
  left: calc(-1 * var(--mobile-container-gutter));
  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: var(--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 var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.article-comment__date {
  display: block;
  margin-bottom: 12px;
  font-style: italic;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  }

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

  .article-comment__author {
    margin-bottom: 2px;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  }

  .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: calc(-1 * var(--mobile-container-gutter));
    margin-right: calc(-1 * var(--mobile-container-gutter));
  }
}

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

.blog-sidebar__post-item {
  display: flex;
  align-items: flex-start;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

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

.blog-sidebar__post-item:hover .blog-sidebar__post-title {
  color: var(--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: 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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.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(var(--text-color-rgb), 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 var(--background);
  height: 32px;
  width: 32px;
  line-height: 28px;
  /* 32px minus 4px of border */
  text-align: center;
  border-radius: 100%;
  background: var(--accent-color);
  color: var(--secondary-background);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
}

@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 var(--border-color);
    border-radius: 3px;
  }
}

/* Linklists */
.blog-sidebar__linklist {
  list-style: none;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.blog-sidebar__link-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--form-border-color);
  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;
}
.button {
  position: relative;
  display: inline-block;
  padding: 0px 30px;
  padding-bottom: 3px;
  line-height: 45px;
  border-radius: 40px;
  text-align: center;
  font-weight: var(--text-font-bolder-weight);
  font-size: var(--base-text-font-size);
  cursor: pointer;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.button2 {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  line-height: 48px;
  border-radius: 2px;
  width: 75% !important;
  text-align: center;
  font-weight: var(--text-font-bolder-weight);
  font-size: var(--base-text-font-size);
  cursor: pointer;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.button[disabled] {
  cursor: not-allowed;
}

.button--extra-small {
  padding: 0 15px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  line-height: 34px;
}

.button--small {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  line-height: 42px;
}

.button--large {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  line-height: 55px;
}

.button--extra-large {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
  line-height: 60px;
}

.button--primary {
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
}

.button--primary:hover {
  background: rgba(var(--primary-button-background-rgb), 0.8);
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
}

.button2--primary {
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
}

.button2--primary:hover {
  background: rgba(var(--primary-button-background-rgb), 0.8);
}

.button2--primary::after {
    content: "";
    height: 0px;
  width: 75% !important;
    display: block;
    background: var(--primary-button-background);
    filter: brightness(0.8);
    margin: -4px -30px;
    top: 0px;
    position: relative;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.button2--primary {
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
  height: 0px;
}

.button2--primary:hover {
  background: rgba(var(--primary-button-background-rgb), 0.8);
}

.button2--primary::after {
    content: "";
    height: 0px;
    display: block;
    background: var(--primary-button-background);
    filter: brightness(0.8);
    margin: -4px -30px;
    top: 0px;
    position: relative;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

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

.button--secondary:hover {
  background: rgba(var(--secondary-button-background-rgb), 0.8);
}

.button--ternary {
  color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--border-color) inset;
  /* use box-shadow instead of border to not create additional space */
}

.button--ternary:hover {
  background: rgba(var(--border-color-rgb), 0.5);
  color: var(--text-color);
}

.button--transparent {
  color: var(--text-color);
  box-shadow: 0 0 0 1px var(--border-color) inset;
  /* use box-shadow instead of border to not create additional space */
}

.button--transparent:hover {
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
  box-shadow: 0 0 0 1px var(--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: var(--product-sold-out-color);
  box-shadow: 0 0 0 1px var(--product-sold-out-color) inset; /* use box-shadow instead of border to not create additional space */
  color: var(--secondary-background);
}

.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;
}

/**
 * --------------------------------------------------------------------
 * DROPMETA CSS
 * --------------------------------------------------------------------
 */

.tempofrete {
    border-radius: 16px;
    padding: 14px 15px 14px 18px;
    background: #f2f2f5;
}

/**
 * --------------------------------------------------------------------
 * 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: var(--secondary-background);
}

.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;
  text-align: center;
}

.card__subtitle {
  margin-bottom: 14px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
}

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

.card__title--small {
  text-align: center;
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
}

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

.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: var(--heading-color);
}

.card__section + .card__section::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(100% - var(--mobile-container-gutter));
  top: 0;
  right: 0;
  height: 1px;
  background: var(--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% + var(--mobile-container-gutter));
  margin: 20px 0;
  border: none;
  border-top: 1px solid var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.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 var(--secondary-background); /* allows to hide 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: 25px;
    box-shadow: 0px 5px 10px 0px #00000008;
  }

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

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

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

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

  .card__subtitle {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  }

  .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: -webkit-sticky;
    position: sticky;
    top: 0;
    margin-bottom: 0;
  }

  @supports (--css: variables) {
    .card--sticky {
      top: calc((var(--header-height) + 30px) * 0);
      top: calc((var(--header-height) + 30px) * var(--header-is-sticky, 0));
    }
  }
}

.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: var(--secondary-background);
  color: var(--text-color);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  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;
  will-change: transform;
}

.mini-cart[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  transform: scale(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;
}

.mini-cart .icon--nav-triangle-borderless {
  position: absolute;
  width: 38px;
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.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 var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  text-transform: uppercase;
}

.mini-cart__product-title {
  display: block;
  margin-bottom: 4px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  line-height: 1.5;
}

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

.mini-cart__price-list > .price {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  font-weight: var(--text-font-bolder-weight);
}

.mini-cart__price-info {
  margin-top: -2px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

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

.mini-cart__discount {
  display: inline-block;
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  background: rgba(var(--product-on-sale-accent-rgb), 0.08);
  color: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  line-height: 1;
}

.mini-cart__recap {
  padding: 15px 20px 20px 20px;
  border-top: 1px solid var(--border-color);
}

.mini-cart__recap-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
}

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

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

.mini-cart__amount-saved {
  color: var(--product-on-sale-accent);
  font-weight: var(--text-font-bolder-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;
  }
}

@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: 10px;
    box-shadow: 0 1px 5px 2px rgb(0 0 0 / 5%);
    border: 3px solid var(--primary-button-background);
  }

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

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

  .mini-cart__line-item-list {
    max-height: 300px;
  }

  .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: var(--page-max-width, 1280px);
    margin-left: auto;
    margin-right: auto;
  }

  .cart-wrapper__inner {
    position: relative;
  }

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

  .cart-recap {
    position: absolute;
    right: var(--desktop-container-gutter);
    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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.estimate-shipping__toggle {
  display: flex;
  align-items: center;
  padding: 20px;
  width: 100%;
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-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: transform 0.2s ease-in-out;
}

.estimate-shipping__toggle[aria-expanded=true] .estimate-shipping__arrow svg {
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
  font-weight: var(--text-font-bolder-weight);
  color: var(--heading-color);
}

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

.cart-recap__price-line--highlight {
  color: var(--product-on-sale-accent);
}

.cart-recap__amount-saved {
  color: var(--product-on-sale-accent);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
}

.cart-recap__note {
  margin-top: 14px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--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: transform 0.2s ease-in-out;
}
.cart-recap__note-button[aria-expanded=true] svg {
  transform: rotateZ(180deg);
}

.cart-recap__note-edit {
  margin-right: 14px;
  color: var(--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: var(--text-font-bolder-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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
  }

  .cart-recap__amount-saved {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  }

  .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 var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.collection__toolbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding: 0 var(--mobile-container-gutter);
  box-shadow: 0 1px var(--border-color), 0 -1px var(--border-color);
  background: var(--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: var(--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) * 0);
    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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  }

  .collection__toolbar {
    padding: 0 30px;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  }

  .collection__toolbar--bordered {
    margin-top: 30px;
    box-shadow: 0 1px var(--border-color), 0 -1px var(--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 var(--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 var(--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: transform 0.25s ease-in-out;
}

.collection__filter-group-name[aria-expanded=true] svg {
  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: var(--accent-color);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
}

/* 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: transform 0.25s ease-in-out;
}

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

.collection__filter-link.is-active {
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
}

.collection__filter-linklist .collection__filter-linklist {
  padding: 0 0 0 10px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

/* 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: var(--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: var(--text-font-bolder-weight);
  color: var(--accent-color);
}

.collection__active-filter-cross {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  background: var(--accent-color);
  color: var(--secondary-background);
  height: 20px;
  width: 20px;
  border-radius: 3px;
  box-shadow: 0 1px rgba(var(--border-color-rgb), 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: var(--background);
  border-bottom: 1px solid var(--border-color);
}

.collection__mobile-active-filters {
  margin: -5px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
}

.collection__mobile-active-filter-item {
  padding: 4px 12px;
  background: var(--accent-color);
  border-radius: 3px;
  box-shadow: 0 1px rgba(var(--accent-color-rgb), 0.15);
  color: var(--secondary-background);
  font-weight: var(--text-font-bolder-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 var(--border-color);
  z-index: 1;
}

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

.collection-drawer__close {
  margin-right: 16px;
  color: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
}

.collection-drawer__section-title {
  margin: 0;
  padding: 4px 15px;
  text-transform: uppercase;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  font-weight: var(--text-font-bolder-weight);
  background: var(--background);
  border-bottom: 1px solid var(--border-color);
}

.collection-drawer__footer {
  padding: 15px;
  box-shadow: 0 -2px 2px rgba(var(--border-color-rgb), 0.65);
}

.collection-drawer__footer .button {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

/**
 * --------------------------------------------------------------------
 * PRODUCT LIST
 * --------------------------------------------------------------------
 */

.product-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--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 var(--mobile-container-gutter);
  }

  .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 var(--desktop-container-gutter);
  }

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

@media screen and (min-width: 641px) {
  .product-list {
    background: none;
    border-radius: 3px;
    border: none;
  }

  /* 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 var(--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: none;
  }

  .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) {
  /* 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 var(--border-color);
    z-index: 1;
    pointer-events: none;
    border: none;
  }

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

  .product-list--scrollable .product-item {
    min-height: 100%;
    margin-bottom: 20px;
  }

  .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-size: 100%;
}

.featured-collection__header {
  padding: 0 var(--mobile-container-gutter) 40px var(--mobile-container-gutter);
}

.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: none;
}

.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;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .featured-collection {
    margin: 0 calc(-1 * var(--desktop-container-gutter));
    background-image: none !important;
  }

  .featured-collection__header {
    padding-left: var(--desktop-container-gutter);
    padding-right: var(--desktop-container-gutter);
    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: var(--desktop-container-gutter);
  }
}

@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: 16px;
  }

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

  .featured-collection__header {
    width: 333px;
    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: none;
    right: 0;
  }
}
/**
 * --------------------------------------------------------------------
 * COLLECTION ITEM (round style)
 * --------------------------------------------------------------------
 */

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

.collection-item:first-child {
  margin-left: var(--mobile-container-gutter);
}

.collection-item:last-child {
  margin-right: var(--mobile-container-gutter);
}

.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;
  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, 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: var(--desktop-container-gutter);
  }

  .collection-item:last-child {
    margin-right: var(--desktop-container-gutter);
  }
}

@media screen and (min-width: 641px) {
  .collection-item__title {
    transform: translateX(14px);
    transition: 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: 12.5%;
  }
}

@media (-moz-touch-enabled: 0),(hover: hover) {
  .collection-item:hover .collection-item__title {
    color: var(--accent-color);
  }

  .features--animate-zoom .collection-item:hover img {
    transform: scale(1.07);
  }

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

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

/**
 * --------------------------------------------------------------------
 * COLLECTION ITEM (block style)
 * --------------------------------------------------------------------
 */

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

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

.collection-block-item {
  display: block;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
}

.collection-block-item--overlay::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.collection-block-item__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 8s linear, opacity 0.3s ease-in-out !important;
}

.collection-block-item__title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 0 20px;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  z-index: 1;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
}

@media (-moz-touch-enabled: 0),(hover: hover) {
  .features--animate-zoom .collection-block-item:hover .collection-block-item__image {
    transform: scale(1.4);
  }
}
/**
 * --------------------------------------------------------------------
 * Custom content section (this one is a bit a "fit-all" section, so it
 * was hard to make it very generic)
 * --------------------------------------------------------------------
 */

.custom-content--centered {
  text-align: center;
}

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

/* Small exception for the standalone product, that is not within a grid, so it must have borders on all edges */
.custom-content--product .product-item::after {
  box-shadow: none;
}
/**
 * --------------------------------------------------------------------
 * FIELD
 * --------------------------------------------------------------------
 */

.form__field {
display: block;
    padding: 12px 12px;
    border-radius: 40px;
    background: #ededed;
    border: none;
    width: 100%;
    line-height: normal;
    height: 48px;
    color: var(--heading-color);
    -webkit-appearance: none;
    resize: none;
    font-size: 1rem;
    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: var(--text-color);
}

.form__field::-moz-placeholder {
  color: var(--text-color);
}

.form__field:-ms-input-placeholder {
  color: var(--text-color);
}

.form__field::-ms-input-placeholder {
  color: var(--text-color);
}

.form__field::placeholder {
  color: var(--text-color);
}

.form__field:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  color: var(--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: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
}

.form__label--light {
  color: var(--text-color);
}

.form__submit {
  display: block;
}

.form__submit--tight {
  margin-top: 12px;
  width: 100%;
  background: none;
  border: 2px solid var(--footer-text-color);
  color: var(--footer-text-color);
}

.form__submit--tight:hover {
  background: var(--footer-text-color);
  color: var(--footer-background);
  border: 2px solid var(--footer-text-color);
}

@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: 18px;
  top: 0;
  line-height: 48px; /* allows to center the field */
  font-size: 1rem;
  color: var(--text-color);
  transform: scale(1);
  transform-origin: left top;
  transition: 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 {
  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 var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.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: var(--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: var(--secondary-background);
}

.select-wrapper--primary select {
  width: 100%;
  padding: 0 36px 0 12px;
  height: 48px;
  border: 1px solid var(--form-border-color);
  border-radius: 2px;
  background: transparent;
  box-shadow: 0 -1px 1px rgba(var(--border-color-rgb), 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: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  outline: none;
}

.select-wrapper--primary select:valid {
  color: var(--heading-color);
        border-radius: 30px;

}

.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: var(--secondary-background);
  color: currentColor;
  line-height: inherit;
  vertical-align: middle;
  width: 100%;
  padding: 0 36px 0 12px;
  height: 48px;
  border: 1px solid var(--form-border-color);
  border-radius: 2px;
  box-shadow: 0 -1px 1px rgba(var(--border-color-rgb), 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: var(--accent-color);
  box-shadow: 0 0 0 1px var(--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);
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
  color: var(--secondary-background);
}

.checkbox-wrapper ~ label {
  vertical-align: middle;
  cursor: pointer;
}

.checkbox {
  display: block;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--form-border-color);
  background: var(--secondary-background);
  box-shadow: 0 1px rgba(var(--border-color-rgb), 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: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  outline: none;
}

.checkbox:checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: none;
}

.checkbox:checked + svg {
  transform: scale(1);
}

.checkbox.is-selected ~ label {
  color: var(--accent-color);
  font-weight: var(--text-font-bolder-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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 22px));
}

.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 var(--border-color);
  text-transform: uppercase;
  margin-bottom: 15px;
  border-radius: 3px;
  text-align: center;
}

.gift-card__expires-on {
  display: block;
  color: var(--product-in-stock-color);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 24px));
  }

  .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;
  background: var(--footer-background);
  color: var(--footer-text-color);
}

.footer__block-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.footer__title {
  position: relative;
  display: block;
  font-weight: bold;
  width: 100%;
  margin-bottom: 0.85em;
  text-align: left;
  color: var(--footer-text-color);
}

.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;
  color: var(--footer-text-color);
}

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

.footer__aside {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  color: var(--footer-text-color);
}

.footer__aside-item {
  margin-top: 34px;
}

.footer__aside-item--localization,
.footer__aside-item--copyright {
  margin-top: 45px;
  text-align: center;
}

.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: calc(-1 * var(--mobile-container-gutter));
    padding-right: var(--mobile-container-gutter);
    border-bottom: 1px solid var(--footer-background);
  }

  .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;
    color: var(--footer-text-color);
  }

  .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: 0px solid var(--footer-background);
  }

  .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: 30px;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  }

  .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;
    flex: 0 0 35%;
  }

  .footer__block-item--newsletter {
    flex-basis: 350px;
  }

  .footer__block-item--links {
    max-width: 300px;
  }

  .footer__aside {
    align-items: center;
    gap: 16px;
  }

  .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: var(--header-background);
  color: var(--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;
}

@media screen and (max-width: 640px) {
 .logodorodape {
   display: flex;
   justify-content: center;
   margin: 12px 0 12px 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 var(--header-border-color);
  border-radius: 3px;
  font-weight: var(--text-font-bolder-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;
  margin-right: 12px;
}


.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;
  }
}

@media screen and (min-width: 641px) {
  .header {
    padding: 20px 0;
    padding-bottom: 5px;
  }

  .header__inner {
    flex-wrap: nowrap;
  }

  .header__logo {
    margin-right: 35px;
  }
}

@media screen and (min-width: 1000px) {
  .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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  }
}

/**
 * --------------------------------------------------------------------
 * HEADER ACTION LIST
 * --------------------------------------------------------------------
 */

.header__action-list {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.header__action-item {
  padding: 0 6px;
}
.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: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
}

.header__action-item-link--small {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  font-weight: normal;
}

.header__action-item-title {
  display: block;
  margin-bottom: -6px;
  color: var(--header-light-text-color);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  font-weight: normal;
}

.header__action-item--currency,
.header__action-item--locale {
  margin-right: 25px;
  padding: 0 24px;
}

.header__currency-selector {
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
}

.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;
  margin-top: 0px;
}

.header__cart-count {
  display: inline-flex;
  position: absolute;
  right: -1px;
  top: 3px;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 4px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  font-weight: var(--text-font-bolder-weight);
  text-align: center;
  background: var(--header-accent-color);
  color: var(--secondary-background);
  border-radius: 1.75em;
  transition: transform 0.35s ease-in-out;
  will-change: transform;
  transform: scale(1.01);
  z-index: 1;
}

.header__cart-toggle[aria-expanded=true] .header__cart-count,
.header__cart-toggle:hover .header__cart-count {
  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: var(--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: var(--header-border-color);
    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 20px;
  }

  .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: 4px; /* Slight adjustment for the pixel perfect muahah */
    margin-top: 0px!important;
  }
}

/**
 * --------------------------------------------------------------------
 * SEARCH
 * --------------------------------------------------------------------
 */

.search-bar {
  position: relative;
  min-width: 100%;
  padding-bottom: 15px;
  z-index: 1;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
}

/* Top part */
.search-bar__top {
  position: relative;
  display: flex;
  height: 45px;
  align-items: center;
  justify-content: space-between;
  border-radius: 40px;
  background: #fff;
  color: var(--text-color);
  z-index: 1;
}

.search-bar__input-wrapper {
  position: relative;
  height: 100%;
}

.search-bar__input {
  height: 100%;
  width: 100%;
  padding: 0 15px 1px 25px;
  border: none;
  background: transparent;
  line-height: normal;
  color: var(--heading-color);
  -webkit-appearance: none;
}

.search-bar__input::-webkit-input-placeholder {
  color: var(--text-color);
  opacity: 1;
}

.search-bar__input::-moz-placeholder {
  color: var(--text-color);
  opacity: 1;
}

.search-bar__input:-ms-input-placeholder {
  color: var(--text-color);
  opacity: 1;
}

.search-bar__input::-ms-input-placeholder {
  color: var(--text-color);
  opacity: 1;
}

.search-bar__input::placeholder {
  color: var(--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 var(--header-border-color);
}

.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: 60px;
    background: var(--header-accent-color);
    height: 37px;
    border-radius: 100px;
    color: white;
    margin-right: 4px;
}

.search-bar__submit svg {
  position: relative;
}

.search-bar__submit .icon--search {
  width: 18px;
  height: 19px;
}

.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: var(--text-color);
  background: var(--secondary-background);
}

@supports (--css: variables) {
  .search-bar__inner {
    height: calc(100vh - var(--header-height) - 25px);
  }
}

.search-bar__inner-animation {
  height: 100%;
}

.search-bar__results,
.search-bar__menu-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--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 {
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
}

.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: var(--accent-background);
  color: var(--accent-color);
  outline: none;
}

/* Results */
.search-bar__results .skeleton-container {
  display: none;
}

.search-bar__results {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  font-weight: var(--text-font-bolder-weight);
  background: var(--background);
  box-shadow: 0 1px var(--border-color), 0 -1px var(--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: var(--accent-background);
  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: var(--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: var(--accent-color);
  background: var(--accent-background);
  outline: none;
}

.search-bar__view-all {
  display: block;
  padding: 10px;
  width: 100%;
  text-align: center;
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
  transition: background 0.2s ease-in-out;
}

.search-bar__view-all:hover,
.search-bar__view-all:focus {
  background: var(--accent-background);
  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 - calc(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;
    height: 0;
    overflow: hidden;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
    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 {
    height: auto;
    opacity: 1;
    white-space: nowrap;
  }
}

@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: 0px;
  }

  .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;
  }
}

@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: var(--secondary-background);
  border-radius: 3px;
  border: 1px solid var(--border-color);
}

.map__store-item:not(:last-child) {
  border-bottom: 1px solid var(--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 {
  transform: rotateZ(0deg);
  transition: transform 0.2s ease-in-out;
}

.map__store-name[aria-expanded=true] .map__icon-container {
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.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 var(--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: var(--text-color);
  background-color: transparent;
  /* stylelint-disable-next-line */
  /* stylelint-disable-next-line */
  /* stylelint-disable-next-line */
}
.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:-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:-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:-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: var(--secondary-background);
  border-color: rgba(var(--text-color-rgb), 0.05);
}
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid {
  background-color: var(--secondary-background);
  border-color: rgba(var(--text-color-rgb), 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(var(--text-color-rgb) 0.55);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-moz-range-thumb {
  box-shadow: 2px 0 0 0 var(--secondary-background);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-thumb {
  box-shadow: 2px 0 0 0 var(--secondary-background);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 0 0 0 var(--secondary-background);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor 0, rgba(var(--text-color-rgb) 0.6)) 0);
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--text-color-rgb) 0.6)) var(--value, 0));
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-moz-range-track {
  background-color: rgba(var(--text-color-rgb) 0.6);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]::-ms-fill-upper {
  background-color: rgba(var(--text-color-rgb) 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(var(--text-color-rgb) 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(var(--text-color-rgb) 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(var(--text-color-rgb) 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(var(--text-color-rgb) 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-ms-thumb {
  box-shadow: 0 0 0 3px rgba(var(--text-color-rgb) 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(var(--text-color-rgb) 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip {
  background-color: var(--text-color);
  color: var(--secondary-background);
}
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip::before {
  border-top-color: var(--text-color);
}
.plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer {
  background-image: linear-gradient(-45deg, rgba(var(--text-color-rgb) 0.6) 25%, transparent 25%, transparent 50%, rgba(var(--text-color-rgb) 0.6) 50%, rgba(var(--text-color-rgb) 0.6) 75%, transparent 75%, transparent);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range] {
  color: var(--secondary-background);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-moz-range-thumb {
  box-shadow: 2px 0 0 0 var(--text-color);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-ms-thumb {
  box-shadow: 2px 0 0 0 var(--text-color);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 0 0 0 var(--text-color);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, currentColor 0, rgba(var(--secondary-background-rgb), 0.6) 0);
  background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--secondary-background-rgb), 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(var(--secondary-background-rgb), 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(var(--secondary-background-rgb), 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(var(--secondary-background-rgb), 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(var(--secondary-background-rgb), 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(var(--secondary-background-rgb), 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-ms-thumb {
  box-shadow: 0 0 0 3px rgba(var(--secondary-background-rgb), 0.25);
}
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(var(--secondary-background-rgb), 0.25);
}

.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
  background: var(--secondary-background);
  border-color: rgba(var(--text-color-rgb) 0.05);
}
.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
  color: var(--text-color);
}
.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
  color: rgba(var(--text-color-rgb) 0.55);
}
.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus {
  color: rgba(var(--text-color-rgb) 0.55);
  background: rgba(var(--text-color-rgb) 0.05);
}
.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
  border-color: rgba(var(--text-color-rgb) 0.05);
}
.shopify-model-viewer-ui.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
  background: var(--secondary-background);
  border-color: rgba(var(--text-color-rgb) 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(var(--text-color-rgb) 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%;
}

.video-wrapper iframe:not([src]) {
  pointer-events: none;
}

/* 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: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

@media (-moz-touch-enabled: 0),(hover: hover) {
  .video-wrapper:hover .icon--play {
    transform: scale(1.15);
  }
}

/**
 * --------------------------------------------------------------------
 * VIDEO ITEM (used for standalone section)
 * --------------------------------------------------------------------
 */

.video-item {
  max-width: 855px;
  margin: 20px auto;
}

.video-item--stretch {
  max-width: none;
}

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

.video-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-item.is-playing .video-wrapper__image-wrapper {
  visibility: hidden;
  opacity: 0;
}

.video-item.is-playing iframe {
  visibility: visible;
  height: 100%;
  width: 100%;
}

/**
 * --------------------------------------------------------------------
 * 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;
  }

  /* In this configuration the first column is larger */
  .mosaic--two-columns .mosaic__column:first-child {
    flex-grow: 1.38;
  }

  /* 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: var(--secondary-background);
  color: var(--text-color);
  border-radius: 0 0 3px 3px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  box-shadow: 0 1px 5px 2px rgb(0 0 0 / 5%);
}

.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 - 0px - 0px - 40px);
  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 - 0px - 40px);
    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: var(--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%;
  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 var(--border-color);
}

/**
 * --------------------------------------------------------------------
 * MEGA MENU
 * --------------------------------------------------------------------
 */

.mega-menu {
  position: absolute;
  width: 100vw;
  left: 0;
  top: 100%;
  background: var(--secondary-background);
  border-radius: 0 0 3px 3px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--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 {
  transform: scale(1.01); /* This is necessary to fix an issue with rounding pixels on Chrome */
  transition: transform 0.6s ease-in-out;
}

.features--animate-zoom .mega-menu__promo:hover .aspect-ratio {
  transform: scale(1.06);
}

.mega-menu__promo:hover .mega-menu__image-heading {
  color: var(--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 - 0px - 0px - 40px);
  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 var(--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%;
    background: var(--header-background);
    text-align: center;
    border-bottom: 1px solid #0000001a;
  }

  .nav-bar::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 40px;
    right: 0;
    top: 0;
    background: var(--header-background);
  }

  .nav-bar__item {
    color: var(--header-cordotexto);
    position: relative;
    display: inline-block;
    margin-right: 35px;
    padding: 12px 0px 16px 0;
    text-align: center;
    font-size: 14px;
  }

  .nav-bar__item--static {
    position: static;
  }

  .nav-bar__item > .nav-dropdown {
    min-width: calc(100% + 20px);
    border-radius: 10px;
  }

  .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: var(--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: var(--text-color);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  transform: scale(0.9);
  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;
  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;
  transform: scale(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;
}

.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: var(--secondary-background);
  overflow-y: auto;
  overflow-x: hidden;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), visibility 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;
  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 var(--border-color);
}

.mobile-menu__section.is-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--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: transform 0.3s ease-in-out;
}

.mobile-menu__nav-list-toggle[aria-expanded=true] svg {
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
}

.mobile-menu__image-text {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
}

.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 {
  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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.line-item__vendor {
  display: block;
  margin-bottom: 7px;
  line-height: 1.55;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  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: var(--text-font-bolder-weight);
  color: var(--accent-color);
}

.line-item__price--compare {
  color: var(--text-color);
}

.line-item__price--highlight {
  color: var(--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(var(--text-color-rgb), 0.7);
}

.line-item__price-info {
  margin-top: -2px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.line-item__discount-list {
  list-style: none;
  margin-top: 2px;
}

.line-item__discount {
  display: inline-block;
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  background: rgba(var(--product-on-sale-accent-rgb), 0.08);
  color: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  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: 95%;
  }

  .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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  }

  .line-item--stack .line-item__price {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  }

  .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 var(--border-color);
}

.order-foot__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 16px 0;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.order-foot__item + .order-foot__item {
  border-top: 1px solid var(--border-color);
}

.order-foot__item--highlight,
.order-foot__item--strong {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
  font-weight: var(--text-font-bolder-weight);
}

.order-foot__item--highlight {
  color: var(--product-on-sale-accent);
}

.order-foot__item--strong {
  color: var(--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 var(--border-color);
}

.address-list__item {
  padding: 24px 20px;
}

.address-list__action-list {
  margin-top: 14px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.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: var(--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 var(--border-color), 1px 0 var(--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__image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  fill: dimgrey;
  background: darkgrey;
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

/* 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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.page__tag-item {
  position: relative;
  display: inline-block;
  margin: 0 20px 10px 20px;
}

.page__tag-item.is-selected {
  color: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
}

.page__meta-item:not(:last-child)::after {
  display: inline-block;
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 10px;
  border-radius: 100%;
  background: rgba(var(--text-color-rgb), 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: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  }
}

@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: var(--secondary-background);
  color: var(--text-color);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 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;
  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), transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
}

.popover__legend {
  margin-bottom: 16px;
}

.popover__secondary-action {
  margin-top: 16px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.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 rgb(0 0 0 / 5%);
  }

  .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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
  }
}

@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: var(--accent-background);
  color: var(--accent-color);
}

/* Panel */
.popover__panel-list {
  position: relative;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
}

.popover__panel {
  width: 100%;
  visibility: hidden;
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), visibility 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.popover__panel--default {
  transform: translateX(-100%);
}

.popover__panel--sliding {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
}

.popover[aria-hidden=false] .popover__panel.is-selected {
  visibility: visible;
}

.popover__panel.is-selected {
  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;
    border-radius: 10px;
  }
  .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;
    transform: scale(0.9) translateX(calc(50% - 7px));
  }

  .popover--unlogged .icon--nav-triangle-borderless {
    left: calc(50% - 8px);
  }

  .popover--unlogged[aria-hidden=false] {
    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(var(--text-color-rgb), 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: calc(-1 * var(--mobile-container-gutter));
    margin-right: calc(-1 * var(--mobile-container-gutter));
  }
}

@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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  }

  .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;
  margin: 0 4px;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border 0.2s ease-in-out;
  cursor: pointer;
}

.product-gallery__thumbnail.is-nav-selected {
  border-radius: 12px;
  filter: brightness(0.9);
  transition: all 0.6s;
}

.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: calc(var(--mobile-container-gutter) - 4px);
  }

  .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 */
    overflow: auto;
    border-radius: 12px;
  }
}

@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;
    overflow: auto;
    border-radius: 12px;
  }
}

/**
 * --------------------------------------------------------------------
 * 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: -5px;
}

/* 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: 8px;
  font-size: 0;
}

.discount__percentage {
    font-size: 12px;
    padding: 4px 8px;
    color: #fff;
    font-weight: 600;
    background: var(--product-on-sale-accent);
    border-radius: 30px;
    display: inline-block;
    position: relative;
    top: -2px;
}

.discount__money {
    font-size: 14px;
    border: 1px solid var(--product-on-sale-accent);
    padding: 0px 10px;
    color: #fff;
    font-weight: 600;
    background: var(--product-on-sale-accent);
    border-radius: 5px;
    display: inline-block;
  	top: -5px;
}

.discount__money b {
    font-weight: 900;
    color: #fff;
}

.product-meta__label-list .product-label + .product-label {
  margin-left: 5px;
}

.product-meta__reference {
  margin-bottom: 3px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

.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: var(--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;
    margin-top: 10px;
  }

  .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: -8px;
  }

  .product-meta__reviews-badge .spr-badge .spr-badge-caption {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  }
}

/**
 * --------------------------------------------------------------------
 * 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: var(--text-color);
}

.product-form__info-list {
  display: table;
  width: 100%;
  margin: -22px 0 6px 0;
  border-spacing: 0 22px;
}

.product-form__info-item {
  display: block;
  align-items: center;
}

.product-form__info-title {
  display: table-cell;
  padding-right: 40px;
  vertical-align: middle;
  white-space: nowrap;
}

.product-form__info-item--quantity > * {
  vertical-align: middle;
}

.product-form__info-content {
  display: table-cell;
  width: 100%;
}

.product-form__price-info {
  margin-top: 5px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.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;
  margin-top: -30px;
  transition: all 0.5s;
}

.product-form__error {
  margin-top: 18px;
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease-in-out;
}

.align-price-discount {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.product-form .price--compare {
  top: -5px;
  font-size: 14px;
}

@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: column;
    align-items: flex-start;
        margin: -16px -9px;

  }

  .product-form__payment-container > * {
    flex: none;
    line-height: 55px !important;
    width: calc(96%);
    border-radius: 40px;
    margin: -10px 0 11px 9px;
  }

}


/**
 * --------------------------------------------------------------------
 * SHOPIFY QUICK PAYMENT
 * --------------------------------------------------------------------
 */

.shopify-payment-button__button--unbranded {
  position: relative;
  display: inline-block;
  padding: 0 30px !important;
  line-height: 58px !important;
  border-radius: 5px !important;
  text-align: center;
  background: var(--secondary-button-background) !important;
  color: var(--secondary-button-text-color) !important;
  font-weight: var(--text-font-bolder-weight) !important;
  font-size: var(--base-text-font-size) !important;
  cursor: pointer;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.shopify-payment-button__button--unbranded:hover {
  background: rgba(var(--secondary-button-background-rgb), 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: var(--link-color);
  transition: color 0.2s ease-in-out;
}

.shopify-payment-button__more-options:not([disabled]):hover {
  text-decoration: none;
  color: var(--link-color-hover);
}

.shopify-payment-button__more-options[aria-hidden=true] {
  display: none;
}

/**
 * --------------------------------------------------------------------
 * BLOCK LIST
 * --------------------------------------------------------------------
 */

.product-block-list__item--trust .icon--lock {
  width: 18px;
  height: 24px;
  color: var(--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 var(--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: 5px 12px;
  color: #ffffff;
  border-radius: 21px;
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  line-height: 1;
  vertical-align: top;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

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

.product-label--custom1 {
  background: var(--product-custom-label-1-background);
  color: var(--product-custom-label-1-color);
}

.product-label--custom2 {
  background: var(--product-custom-label-2-background);
  color: var(--product-custom-label-2-color);
}

/**
 * --------------------------------------------------------------------
 * PRODUCT PRICE
 * ---------
 -----------------------------------------------------------
 */
.label-price {
    color: #fff;
}

.price-list {
  line-height: 1;
}

.price-list2 {
  align-items: baseline;
  line-height:1;
}

.price {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 24px));
  color: var(--product-cor-do-preco-semdesc);
}

.price--highlight {
  margin-right: 0.3em;
  color: var(--product-cor-do-preco);
  font-weight: 600;
  font-size: 28px;
}

.price--compare {
  position: relative;
  color: var(--product-cor-do-preco-riscado);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
}

.price--compare::before {
    position: absolute;
    content: "";
    top: 47%;
    left: -1px;
    width: calc(95% + 6px);
    height: 1px;
    background: var(--product-cor-do-preco-riscado);
    font-size: 10px;
}

/**
 * --------------------------------------------------------------------
 * INVENTORY AND BAR
 * --------------------------------------------------------------------
 */

.inventory {
  position: relative;
  display: block;
  padding-left: 1.4em;
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  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: var(--product-in-stock-color);
}

.inventory--low {
  color: var(--product-low-stock-color);
}

.inventory-bar {
  position: relative;
  display: block;
  margin: 16px 0 10px 0;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: var(--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: var(--product-in-stock-color);
}

.inventory--low + .inventory-bar > .inventory-bar__progress {
  background: var(--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: var(--secondary-background);
  box-shadow: 0 0 0 1px var(--form-border-color) 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: 8px;
  border: 2px solid var(--accent-color);
}

.color-swatch__button.is-selected .color-swatch__label {
  font-weight: var(--text-font-bolder-weight);
  color: var(--accent-color);
}

.color-swatch--white .color-swatch__item {
  box-shadow: 0 0 0 1px var(--form-border-color) inset;
}

/* The view more is used on listing, to restrict the number of displayed swatches */
.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(var(--secondary-background-rgb), 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 var(--form-border-color);
  border-radius: 40px;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(var(--border-color-rgb), 0.25);
}

.block-swatch__radio:checked + .block-swatch__item {
  box-shadow: 0 0 0 1px var(--accent-color);
  border-color: var(--accent-color);
  background: rgba(var(--accent-color-rgb), 0.06);
  color: var(--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: var(--accent-color);
  border-radius: 40px;
  padding: 0;
  transition-duration: 0.3s;
}

/* 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: var(--secondary-background);
  white-space: normal;
    transform: scale(.95);
    border-radius: 20px!important;
    box-shadow: 0px 5px 25px -26px black;
    transition: all 0.5s;
}

.product-item:hover {
  margin-top: -6px;
  margin-bottom: 6px;
  cursor: pointer;
}

.product-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2; /* needed to overlap the labels (if any) */
  pointer-events: none;
}

.product-item__image-wrapper {
  display: block;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 10px;
}

.product-item__image-wrapper .placeholder-svg {
  height: auto;
}

.product-item__secondary-image {
  display: none;
}

.product-item__label-list {
  position: absolute;
  top: 0px;
  left: -1px;
  z-index: 2;
  font-size: 0;
}

.product-item__label-list > .product-label {
  display: block;
  border-radius: 30px;
  background: var(--product-on-sale-accent);
  margin: 15px;
  padding: 5px 10px 5px 10px;
}

.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: -15px;
  margin-bottom: 20px;
}

.product-item__price-list .price {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  
}

.product-item__vendor {
  display: block;
  margin-bottom: 6px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  text-transform: uppercase;
}

.product-item__vendor,
.product-item__title {
  display: block;
  line-height: 1.55;
}

.product-item__title {
  margin-bottom: 25px;
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  line-height: 1;
}

.product-item .price {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
}

.product-item .price--compare {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

.product-item__reviews-badge {
  display: block;
  margin: 3px 0;
  margin-bottom: 0px;
}

.product-item__inventory {
  margin-top: 14px;
}

.product-item__inventory::before {
  top: 0.3em;
}

.product-item__inventory {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

@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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .product-item--vertical .price:not(.price--compare),
  .product-item--list .price:not(.price--compare) {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
    font-weight: bold;
  }
}

@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;
  transform: scale(1.01); /* The 1.01 is necessary to avoid some rounding issues on Chrome */
  transition: opacity 0.2s ease-in-out, transform 1.2s ease-in-out;
}

.promo-block__inner {
  position: relative;
  z-index: 1;
}

.promo-block__content {
  margin-bottom: 1em;
}

.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);
  }

  .features--animate-zoom .promo-block:hover .promo-block__image-wrapper--cover {
    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
 * --------------------------------------------------------------------
 */

.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: var(--product-review-star-color);
}

.spr-icon-star-empty.spr-icon-star-empty {
  color: rgba(var(--text-color-rgb), 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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

/**
 * --------------------------------------------------------------------
 * MAIN REVIEW
 * --------------------------------------------------------------------
 */
#shopify-product-reviews {
  margin: 0 !important;
  overflow: visible !important;
}

#shopify-product-reviews .spr-container {
  padding: 0;
  border: none;
}

#shopify-product-reviews .spr-header {
  position: relative;
}

#shopify-product-reviews .spr-header-title {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  color: var(--heading-color);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
  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 {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  line-height: 48px;
  border-radius: 8px;
  text-align: center;
  font-weight: var(--text-font-bolder-weight);
  font-size: var(--base-text-font-size);
  cursor: pointer;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  float: none;
  background: var(--primary-button-background);
  color: var(--primary-button-text-color);
}

#shopify-product-reviews .spr-summary-actions-newreview:hover,
#shopify-product-reviews .spr-button:hover {
  background: rgba(var(--primary-button-background-rgb), 0.8);
}

#shopify-product-reviews .spr-form,
#shopify-product-reviews .spr-reviews {
  margin-top: 44px;
  border-top: 1px solid var(--border-color);
}

#shopify-product-reviews .spr-form-submitted + .spr-reviews {
  margin-top: 0;
  border-top: none;
}

#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: var(--heading-color);
  font-weight: var(--text-font-bolder-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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
}

#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 var(--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: var(--accent-color);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  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 .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: var(--heading-color);
  font-weight: var(--text-font-bolder-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: 8px;
  border: none;
  background: #ededed;
  color: #8a8a8a;
  width: 100%;
  min-height: 48px;
  line-height: normal;
  -webkit-appearance: none;
  resize: none;
  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: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
  color: var(--heading-color);
  outline: none;
}

#shopify-product-reviews .spr-form-input::-webkit-input-placeholder {
  color: rgba(var(--text-color-rgb), 0.6);
}

#shopify-product-reviews .spr-form-input::-moz-placeholder {
  color: rgba(var(--text-color-rgb), 0.6);
}

#shopify-product-reviews .spr-form-input:-ms-input-placeholder {
  color: rgba(var(--text-color-rgb), 0.6);
}

#shopify-product-reviews .spr-form-input::-ms-input-placeholder {
  color: rgba(var(--text-color-rgb), 0.6);
}

#shopify-product-reviews .spr-form-input::placeholder {
  color: rgba(var(--text-color-rgb), 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: var(--success-background);
  color: var(--success-color);
}

#shopify-product-reviews .spr-form-message-error {
  background: var(--error-background);
  color: var(--error-color);
}

#shopify-product-reviews .spr-pagination {
  margin-top: 16px;
  color: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  border-top: none;
}

#shopify-product-reviews .spr-pagination a {
  transition: color 0.2s ease-in-out;
}

#shopify-product-reviews .spr-pagination a:hover {
  color: var(--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: var(--accent-color);
  color: var(--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 .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% + var(--mobile-container-gutter));
    height: 1px;
    background: var(--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 .spr-header-title {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 21px));
    line-height: 1.5;
    margin-bottom: 15px;
  }

  #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 .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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  }

  #shopify-product-reviews .spr-review-header-byline {
    bottom: 0;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  }

  #shopify-product-reviews .spr-pagination {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--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: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  color: var(--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: var(--link-color);
  transition: color 0.2s ease-in-out;
  -webkit-text-decoration: var(--text-link-decoration);
  text-underline-position: under;
}

.linkcarrinho {
  color: var(--link-color);
  margin-botton: 2px;
}

.rte a:not(.button):hover {
  color: var(--link-color-hover);
}

.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(var(--text-color-rgb), 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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  border-left: 5px solid rgba(var(--text-color-rgb), 0.4);
}

.rte table {
  margin-top: 2em;
}

@media screen and (min-width: 641px) {
  .rte blockquote {
    padding-left: 30px;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
  }

  .rte img,
  .rte .video-wrapper {
    margin: 3em 0;
  }
}
.section {
  margin: 50px 0;
}

.section--tight {
  margin: 30px 0;
}

/* When isolated, sections use padding instead of margin (useful for sections that has plain background) */
.section--isolated {
  margin: 0 !important;
  padding: 50px 0;
}

.section--isolated.section--tight {
  padding: 40px 0;
}

.section--text-centered {
  text-align: center;
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 15px;
  overflow: hidden;
}

.section__title {
  margin-bottom: 0;
}

.section__title::after {
    content: '';
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--accent-color);
    height: 6px;
    width: 90%;
    border-radius: 10px;
}

.section__action-link {
  margin-left: 20px;
  flex-shrink: 0;
  font-weight: var(--text-font-bolder-weight);
  color: var(--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: 60px 0;
  }

  .section--tight {
    margin: 40px 0;
  }

  .section--isolated {
    padding: 60px 0;
  }

  .section__header {
    overflow: visible;
    margin-bottom: 20px;
  }

  .section__header--tight {
    margin-bottom: 14px;
  }

  .section__header-stack {
    flex-direction: row;
    align-items: center;
  }

  .section__action-link {
    transform: translateX(26px);
    transition: 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 {
    transform: translateX(0);
  }

  .section__action-link:hover svg {
    opacity: 1;
    right: 0;
  }
}
.slideshow {
  height: 400px;
  overflow: hidden;
}

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

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

.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;
  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%;
  transform: translate(-50%, -50%);
}

/* Altura uniforme: o slide reserva sempre a mesma proporcao, entao a imagem
   preenche a caixa em vez de esticar quando o arquivo tem outra proporcao. */
.slideshow__image--fill {
  object-fit: cover;
  object-position: center center;
}

@media screen and (min-width: 641px) {
  .slideshow:not(.slideshow--edge2edge) {
    margin: var(--desktop-container-gutter) 0;
  }

  .slideshow:not(.slideshow--edge2edge) .flickity-viewport {
    border-radius: 10px;
  }

  .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;
    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;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 1000px) {
  .slideshow {
    height: 430px;
  }

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

  .slideshow--large {
    height: 520px;
  }
}
.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 var(--border-color);
  border-radius: 3px;
  background: var(--secondary-background);
}

.team__member-pic {
  width: 144px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  padding: 8px;
  background: var(--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;
  font-weight: bold;
  color: var(--accent-color);
}

.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;
  font-size: 12px;
}

@media screen and (max-width: 640px) {
  .text-with-icons {
    padding-bottom: 28px;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 50px;
  }

  .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;
  }

  /* When it follows a page__header element we slightly move it up */
  .page__header + .text-with-icons {
    margin-top: -5px;
  }

  .text-with-icons__item {
    padding: 15px 20px;
  }

  .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 var(--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 var(--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 var(--border-color);
  }
}
/**
 * --------------------------------------------------------------------
 * 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: var(--background);
  color: var(--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: var(--error-background);
  color: var(--error-color);
}

.alert--success {
  background: var(--success-background);
  color: var(--success-color);
}

.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: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  border-top: 1px solid var(--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: var(--primary-button-background);
  color: var(--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 calc(-1 * var(--mobile-container-gutter)); /* 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 calc(-1 * var(--desktop-container-gutter));
  }

  .scroller__inner {
    scroll-padding-left: var(--desktop-container-gutter);
  }

  .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: var(--border-color);
}

.skeleton-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--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%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background-color: currentColor;
  transition: transform 0.35s ease-in-out, opacity 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 {
  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: var(--secondary-button-background);
  border-radius: 2px;
  text-align: center;
  font-weight: var(--text-font-bolder-weight);
  font-size: var(--base-text-font-size);
  cursor: pointer;
  transition: background 0.25s ease-in-out, color 0.25s ease-in-out, border 0.25s ease-in-out;
  background: var(--secondary-button-background);
  color: var(--secondary-button-text-color);
}

.shopify-challenge__button.shopify-challenge__button:hover {
  background: rgba(var(--secondary-button-background-rgb), 0.8);
}

@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: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 24px));
  line-height: 1.45;
  color: var(--heading-color);
}

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

  .shopify-policy__title h1 {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 28px));
    line-height: 1.45;
  }
}

/**
 * --------------------------------------------------------------------
 * ANNOUNCEMENT BAR
 * --------------------------------------------------------------------
 */

.announcement-bar {
  position: relative;
  display: block;
  font-weight: var(--text-font-bolder-weight);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
}

.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 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0px 5px 0px;
    font-size: 14px;
  }
}

@media screen and (min-width: 641px) {
  .announcement-bar {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
    text-align: left;
  }

  .announcement-bar__inner {
    display: flex;
    align-items: center;
  	justify-content: center;
    width: 100%;
    padding: 5px 0px 5px 0px;
    font-size: 14px;
  }

  .announcement-bar__content {
    padding: 7px 0;
  }

  .announcement-bar__content--center {
    margin-left: auto;
    padding-left: 0px;
    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: var(--header-accent-color);
    color: var(--secondary-background);
    box-shadow: 0 1px var(--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: var(--heading-color);
    transition: color 0.2s ease-in-out;
  }

  .announcement-bar__close:hover {
    color: var(--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;
  }
}

<!-- STYLE IMAGEM RESPONSIVA -->

@media (min-width: 992px)
.d-lg-block {
    display: block!important;
}


@media (min-width: 768px)
.d-md-block {
    display: block!important;
}

@media (min-width: 576px)
.d-sm-none {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.d-none {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

<!-- STYLE IMAGEM RESPONSIVA FIM -->

/**
 * --------------------------------------------------------------------
 * OFFER ITEM
 * --------------------------------------------------------------------
 */

.offer-item {
  padding: 20px;
  background: var(--secondary-background);
  border: 1px solid var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 17px));
}

.offer-item__content {
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
}

@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: var(--secondary-background);
  border: 1px solid var(--border-color);
  font-size: calc(var(--default-text-font-size) + 1px);
}

.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 var(--border-color), 0 1px var(--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: var(--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: transform 0.3s ease-in-out;
}

@media (-moz-touch-enabled: 0),(hover: hover) {
  .features--animate-zoom .quick-links__link:hover .quick-links__image-ie-fix {
    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: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
}

.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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  font-weight: var(--text-font-bolder-weight);
  text-align: center;
  background: var(--accent-color);
  color: var(--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;
  display: block;
  text-align: center;
  top: -3px;
  position: relative;
}

.payment-list__item {
  width: 38px;
  height: 24px;
  margin: 4px;
}

.payment-list__item2 {
  width: 38px;
  height: 32px;
  margin: 2px;
}

.payment-list__item4 {
  width: 38px;
  height: 32px;
  margin: 1px;
}

.payment-list__item7 {
  width: 28px;
  height: 24px;
  margin: 1px;
}

.payment-list__item5 {
  width: 20px;
  height: 20px;
  margin-left: 1px;
  margin-right: 1px;
  margin-bottom: 8px;
  margin-top: 0px;
}

.payment-list__item8 {
  width: 16px;
  height: 16px;
  margin-left: 1px;
  margin-right: 1px;
  margin-bottom: 6px;
  margin-top: 0px;
}

.payment-list__item3 {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 8px;
  margin-top: 0px;
}

.payment-list__notice {
  margin-top: 8px;
}

/* 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 {
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.18, 1.25, 0.4, 1), visibility 0.4s linear;
}

.modal__dialog {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  background: var(--secondary-background);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transform: scale(0.9);
  transition: transform 0.25s ease-in-out, visibility 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: var(--accent-color);
}

.modal__header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  background: var(--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: var(--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, transform 0.35s ease-in-out;
}

.icon-state .icon-state__secondary {
  position: absolute;
  top: 50%;
  left: 0;
  opacity: 0;
  transform: translateY(-50%) scale(0.3);
}

.icon-state[aria-expanded=true] .icon-state__primary {
  opacity: 0;
  transform: scale(0.3);
}

.icon-state[aria-expanded=true] .icon-state__secondary {
  opacity: 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: var(--accent-color);
    color: var(--secondary-background);
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
    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;
    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 var(--accent-color) var(--accent-color);
    visibility: hidden;
    z-index: 1;
    opacity: 0;
    transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transform: rotate(-45deg);
    box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.1);
  }

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

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

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

/**
 * --------------------------------------------------------------------
 * QUANTITY SELECTOR
 * --------------------------------------------------------------------
 */

.quantity-selector {
  display: inline-flex;
  align-items: center;
  height: 38px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
  border: none;
  border-radius: 30px;
  background: whitesmoke;
  box-shadow: 0 2px 5px -3px #0000005e;
  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(var(--text-color-rgb), 0.6);
  height: 100%;
  transition: color 0.2s ease-in-out;
  touch-action: manipulation;
}

.quantity-selector__button:not([disabled]):hover {
  color: var(--heading-color);
}

.quantity-selector__value {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  padding: 0 5px;
  min-width: 32px;
  text-align: center;
  border: none;
  background: transparent;
}

.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: var(--heading-color);
  font-weight: var(--text-font-bolder-weight);
}

/**
 * --------------------------------------------------------------------
 * COOKIE BAR
 * --------------------------------------------------------------------
 */

.cookie-bar {
  position: fixed;
  bottom: 80px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  width: 100%;
  z-index: 3;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 11px));
  transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}

.cookie-bar[aria-hidden=false] {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

.cookie-bar__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px;
  z-index: 4;
  border-radius: 10px;
  background: var(--secondary-background);
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
}

.cookie-bar__text {
  line-height: 1.45;
  color: #838383;
}

.cookie-bar__button {
  margin-top: 12px;
  padding: 0 16px;
  line-height: 30px;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px));
  background: var(--primary-button-background);
  
}

@media screen and (min-width: 641px) {
  .cookie-bar {
    bottom: 25px;
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  }

  .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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
    
  }
}

/**
 * --------------------------------------------------------------------
 * 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 - 0px);
    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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 13px));
  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__title {
  margin-bottom: 20px;
  text-align: center;
}

.faq__item {
  padding: 20px 20px;
  background: var(--secondary-background);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--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__group {
  margin-bottom: 30px;
}

.faq__group-title {
  text-align: center;
}

.faq__contact-info {
  margin-top: 50px;
}

@media screen and (min-width: 641px) {
  .faq {
    margin: 70px 0 115px 0;
  }

  .faq__title {
    margin-bottom: 25px;
    margin-left: 0;
  }

  .faq__item {
    padding: 20px 30px;
    border: 1px solid var(--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 + .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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
}

.popup-newsletter__close {
  position: absolute;
  right: 20px;
  top: 16px;
  color: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 28px));
  }

  .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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 28px));
  line-height: 1.2;
}

.exit-popup__subheading {
  text-align: center;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
}

.exit-popup__close {
  position: absolute;
  right: 20px;
  top: 16px;
  color: var(--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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 48px));
  }

  .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;
  transform: translateX(100%);
  transition: 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 {
  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: var(--accent-background);
  color: var(--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;
  border-radius: 14px;
}

.expandable-content__toggle {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  border-radius: 25px;
  bottom: 0;
  width: 100%;
  padding: 16px 20px;
  visibility: hidden;
  opacity: 0;
  color: var(--accent-color);
  text-align: left;
  font-weight: var(--text-font-bolder-weight);
  background: var(--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(var(--secondary-background-rgb), 0), rgba(var(--secondary-background-rgb), 0.4) 15%, var(--secondary-background));
}

.expandable-content__toggle-icon {
  position: relative;
  margin-right: 15px;
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease-in-out;
}

.expandable-content__toggle-icon::before, .expandable-content__toggle-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.2s ease-in-out;
  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 {
  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 {
    transform: rotateZ(45deg);
  }
}

@media screen and (min-width: 641px) {
  .expandable-content__toggle {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/**
 * --------------------------------------------------------------------
 * MENU (used exclusively in "custom content" section for now)
 * --------------------------------------------------------------------
 */

.menu-item__title {
  margin-bottom: 0.75em;
}

.menu-item__linklist {
  list-style: none;
}

.menu-item__link-item {
  padding: 5px 0;
}
/**
 * --------------------------------------------------------------------
 * 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: 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 var(--border-color);
  background: var(--secondary-background);
}

.value-picker-button--pill svg {
  width: 12px;
  height: 8px;
  transition: transform 0.2s ease-in-out;
}

.value-picker-button--pill path {
  stroke-width: 2px;
}

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

.value-picker {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 16px));
  visibility: hidden;
  transition: visibility 0.35s ease-in-out;
}

.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 {
  transform: translateY(0);
}

.value-picker .icon--nav-triangle-borderless {
  display: none;
}

.value-picker__inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--secondary-background);
  transform: translateY(100%);
  transition: visibility 0.2s ease-in-out, 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 var(--border-color);
}

.value-picker__header .icon--close {
  width: 17px;
  height: 17px;
  color: var(--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;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

.value-picker__choice-item.is-selected {
  color: var(--accent-color);
  font-weight: var(--text-font-bolder-weight);
}

.value-picker__choice-item.is-selected svg {
  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;
    transform: scale(0.9);
    background: #fff;
    color: #677279;
    z-index: 4;
    cursor: auto;
    border-radius: 3px;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 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;
    transform: scale(1.001);
    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;
  }

  .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%;
    transform: rotateZ(180deg);
  }

  .value-picker__inner {
    position: relative;
    width: auto;
    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: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 15px));
  }

  .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: var(--accent-background);
    color: var(--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;
  }
}

.boxPrevisualiza > p{
	display: none;
}

._1mVwsTnhAN7sNKiIn4mrTP{
       display: none!important
          }
     .sc-7dvmpp-1{
       display: none!important
     
  }

/**
 * Botão quantidade - Plus
 */
input.qtyplus {
    width: 40%;
    height: 40px;
    line-height: 0px;
    vertical-align: middle;
    color: #8188a1;
    font-weight: bold;
    font-size: 18px;
    border-radius: 0 30px 30px 0;
    background: #e8e9ef;
    border: none;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

input.qtyminus {
    width: 40%;
    height: 40px;
    line-height: 0px;
    vertical-align: middle;
    color: #8188a1;
    font-weight: bold;
    font-size: 18px;
    border-radius: 30px 0 0 30px;
    background: #e8e9ef;
    border: none;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
 }

.qty-align {
   display: flex;
   flex-direction: row;
   align-items: center;
}

@media (min-width: 641px) {
.qty-margin-top {
  margin-top: -2px;
}
}

@media (max-width: 640px) {
.qty-margin-top {
  margin-top: 10px;
}
}
  
.qty {
    font-weight: 600;
    width: 100%;
    height: 40px;
    text-align: center;
    border: none;
    background: #e8e9ef;
    margin: -4px;
    cursor: default;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
}

.mobileannouncement {
  text-align:center;
  margin-bottom:0vw;
}

.mobileannouncement {
  padding:0vw 0vw 0vw;
}


.mobileannouncement>img {
    max-height: 100%;
    margin: auto;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

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

@media screen and (min-width: 639px) {
  .mobileannouncement {
      display: none;
  }
}

.desktopannouncement {
  	text-align: -webkit-center;
}

@media screen and (max-width: 639px) {
  .desktopannouncement {
      display: none;
  }
}

.hidden {
	display: none;
}

.apartirde {
    font-size: 10pt;
    font-weight: bold;
    color: var(--product-cor-do-preco);
    flex: auto;
    display: block;
}

.announcesvg {
    width: 22px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
}

.div-black-discount {
    background-color: #000;
    text-align: center;
    padding: 10px;
  font-size: 18px;
}

.span-black-discount {
    font-family: Montserrat,sans-serif;
    font-weight: 700;
    color: #fff;
}

.neon-black-friday {
    font-family: Montserrat,sans-serif;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 1px #831d1c, 0 0 1px #831d1c, 0 0 1px #831d1c, 0 0 3px #FF2D3C, 0 0 15px #FF2D3C, 0 0 7px #FF2D3C, 0 0 20px #FF2D3C, 0 0 25px #FF2D3C;
}

.payment-list__item10 {
    width: 33px;
    height: 32px;
    margin: 4px;
}

.color-line2 {
    background: linear-gradient(to right,#191919 0,#FF2D3C 30%,#da0000 50%,#FF2D3C 75%,#191919 100%);
    width: 100%;
    height: 45px;
    padding: 5px;
    text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blackweek-bar-img {
    height: 100%;
    margin-right: 10px;
}

.blackweek-span {
    font-family: Montserrat,sans-serif;
    font-weight: 600;
    font-size: 10pt;
    color: #fff;
}

.blackweek-bold {
    font-weight: 800;
}

@media (min-width: 576px){
.blackweek-bar-img {
    margin-right: 20px;
}
}

@media (min-width: 576px){
.color-line2 {
    height: 70px;
}
}

@media (min-width: 800px){
.blackweek-span {
    font-size: 25pt;
}
}

@media (min-width: 576px){
.blackweek-span {
    font-size: 20pt;
}
}
.search-agp{
  display: -webkit-box;
}

/* ============================================================
   VESARLE — TEMA PRATA & PRETO  v2
   ============================================================ */

/* ---------- Paleta de variáveis ---------- */
:root {
  --vs-black:        #080808;
  --vs-dark:         #101010;
  --vs-card:         #141414;
  --vs-border:       #232323;
  --vs-border-light: #2e2e2e;
  --vs-silver-dim:   #707070;
  --vs-silver:       #a0a0a0;
  --vs-silver-bright:#cccccc;
  --vs-white:        #f0f0f0;
  --vs-gradient:     linear-gradient(90deg, #2a2a2a 0%, #888 30%, #e0e0e0 50%, #888 70%, #2a2a2a 100%);
  --vs-gradient-btn: linear-gradient(135deg, #4a4a4a 0%, #c0c0c0 45%, #e8e8e8 55%, #c0c0c0 70%, #4a4a4a 100%);
  --vs-gradient-text:linear-gradient(135deg, #888 0%, #e0e0e0 40%, #fff 55%, #e0e0e0 70%, #888 100%);

  /* Sobrepor variáveis do tema — elimina todos os roxos/azuis */
  --accent-color:                    #888888;
  --accent-color-rgb:                136, 136, 136;
  --link-color:                      #a0a0a0;
  --link-color-hover:                #d0d0d0;
  --header-accent-color:             #888888;
  --border-color:                    #232323;
  --border-color-rgb:                35, 35, 35;
  --background:                      #080808;
  --secondary-background:            #101010;
  --secondary-background-rgb:        16, 16, 16;
  --text-color:                      #a0a0a0;
  --heading-color:                   #f0f0f0;
  --header-background:               #080808;
  --header-text-color:               #cccccc;
  --header-light-text-color:         #888888;
  --header-border-color:             rgba(50,50,50,0.6);
  --footer-background:               #050505;
  --footer-text-color:               #888888;
  --primary-button-background:       #888888;
  --primary-button-text-color:       #080808;
  --secondary-button-background:     #141414;
  --secondary-button-text-color:     #cccccc;
  --product-on-sale-accent:          #888888;
  --product-on-sale-color:           #080808;
  --product-cor-do-preco:            #cccccc;
  --product-cor-do-preco-semdesc:    #cccccc;
  --product-cor-do-preco-riscado:    #606060;
  --product-cor-dos-titles:          #a0a0a0;
}

/* ---------- Base global ---------- */
body {
  background-color: var(--vs-black) !important;
  color: var(--vs-silver) !important;
}

a { color: var(--vs-silver); }
a:hover { color: var(--vs-white); }

h1, h2, h3, h4, h5, h6, .heading {
  color: var(--vs-white) !important;
}

/* ---------- Header + nav-bar = bloco único ---------- */
/* A cor vem do campo "Fundo" do cabeçalho, nas configurações do tema. Antes
   estava travada aqui com !important e o campo nao fazia nada. */
.header {
  background: var(--header-background) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.header__logo-text {
  color: var(--vs-silver-bright) !important;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
}

.header__action-item-link,
.header__action-item-title {
  color: var(--vs-silver) !important;
  transition: color 0.2s ease;
}
.header__action-item-link:hover { color: var(--vs-white) !important; }

/* Ícone de conta — mostrar em todos os tamanhos */
.vesarle-account-icon {
  display: inline-flex !important;
  visibility: visible !important;
}
.vesarle-account-icon svg path,
.vesarle-account-icon svg circle,
.vesarle-account-icon svg rect {
  fill: var(--vs-silver) !important;
  stroke: none !important;
}
.vesarle-account-icon:hover svg path,
.vesarle-account-icon:hover svg circle { fill: var(--vs-white) !important; }

/* Contador do carrinho */
.header__cart-count {
  background: var(--vs-silver-bright) !important;
  color: var(--vs-black) !important;
  font-weight: 700;
}

/* Ícone do carrinho */
.header__cart-icon svg path,
.header__cart-icon svg circle {
  fill: var(--vs-silver) !important;
}

/* Linha de acento sob o header — altura e cor vem dos campos da secao */
.vesarle-accent-line {
  width: 100%;
  background: var(--vs-gradient);
}

/* ---------- Search bar — 100% clicável ---------- */
.header__search-bar-wrapper {
  flex: 1 1 auto !important;
}

.search-bar__top {
  background: var(--vs-dark) !important;
  border: 1px solid var(--vs-border-light) !important;
  border-radius: 3px !important;
}

/* Input estica para preencher toda a área */
.search-bar__input-wrapper {
  flex: 1 !important;
  width: 100% !important;
}

.search-bar__input {
  background: transparent !important;
  color: var(--vs-silver-bright) !important;
  width: 100% !important;
  cursor: text !important;
}
.search-bar__input::placeholder { color: var(--vs-silver-dim) !important; }
.search-bar__input:focus { outline: none !important; }

/* Botão de busca — prata, sem roxo */
.search-bar__submit {
  background: linear-gradient(135deg, #3a3a3a, #787878) !important;
  border-radius: 2px !important;
  color: var(--vs-white) !important;
  flex-shrink: 0;
  height: 35px !important;
}
.search-bar__submit svg path { fill: var(--vs-white) !important; }
.search-bar__submit:hover {
  background: linear-gradient(135deg, #555, #aaa) !important;
}

.search-bar__inner {
  background: var(--vs-dark) !important;
  border: 1px solid var(--vs-border) !important;
  border-top: none !important;
}
.search-bar__result-item { border-bottom: 1px solid var(--vs-border) !important; }

/* ---------- Barra de navegação — mesmo bloco que o header ---------- */
.nav-bar {
  background: var(--header-background) !important;
  border-top: none !important;
  border-bottom: none !important;
}

.nav-bar__link {
  background: var(--vs-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  transition: opacity 0.2s ease;
}

.nav-bar__link:hover {
  opacity: 0.75;
  -webkit-text-fill-color: transparent;
}

/* Seta dropdown no menu */
.nav-bar__link svg { display: none; }

/* ---------- Título de seção — sublinhado prata metálico ---------- */
.section__title::after {
  background: var(--vs-gradient) !important;
  height: 3px !important;
  border-radius: 0 !important;
}

.section__title {
  color: var(--vs-white) !important;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.section__action-link {
  color: var(--vs-silver) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 700;
  transition: color 0.2s;
}
.section__action-link:hover { color: var(--vs-white) !important; }

/* ---------- Popover / dropdown ---------- */
.popover {
  background: var(--vs-card) !important;
  border: 1px solid var(--vs-border-light) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.95) !important;
}
.popover__link-item, .popover__link-item button {
  color: var(--vs-silver) !important;
}
.popover__link-item:hover {
  background: var(--vs-border) !important;
  color: var(--vs-white) !important;
}
.popover__title.heading { color: var(--vs-white) !important; }

.account-social-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 0 16px;
  background: var(--vs-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  color: #101010 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.account-social-login:hover {
  background: var(--vs-silver-bright) !important;
  color: #080808 !important;
}

.account-social-login__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.account-social-login__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.account-social-login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--vs-silver-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
}

.account-social-login__divider::before,
.account-social-login__divider::after {
  content: "";
  height: 1px;
  flex: 1 1 0;
  background: var(--vs-border-light);
}

@media screen and (max-width: 999px) {
  .header__action-item--account .popover--unlogged[aria-hidden=false] {
    position: fixed;
    top: var(--account-popover-top, var(--header-height, 0px));
    right: 12px;
    left: 12px;
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 24px);
    height: auto !important;
    max-height: var(--account-popover-height, calc(100vh - var(--account-popover-top, var(--header-height, 0px)) - 12px));
    max-height: var(--account-popover-height, calc(100dvh - var(--account-popover-top, var(--header-height, 0px)) - 12px));
    overflow: auto;
    transform: none !important;
    transform-origin: top center;
    z-index: 9;
  }

  .header__action-item--account .popover--unlogged .icon--nav-triangle-borderless {
    right: var(--account-popover-arrow-right, 66px);
    left: auto;
  }
}

/* Desktop dropdown menu */
.desktop-menu {
  background: var(--vs-card) !important;
  border: 1px solid var(--vs-border-light) !important;
}
.desktop-menu__link { color: var(--vs-silver) !important; }
.desktop-menu__link:hover { color: var(--vs-white) !important; }

/* ---------- Grid de produtos — 3 colunas grandes, sem corte ---------- */

/* Container sem clip */
.product-list,
.vesarle-product-grid {
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
  flex-wrap: wrap !important;
  gap: 0;
  padding: 0 !important;
}

/* 3 colunas em todas as listagens (collection page e featured) */
.product-list--collection .product-item--vertical,
.vesarle-product-grid .product-item--vertical,
.product-list--vertical .product-item--vertical {
  width: 33.3333% !important;
}

/* Espaçamento entre cards — gap fino */
.product-list--collection .product-item--vertical,
.vesarle-product-grid .product-item--vertical,
.product-list--vertical .product-item--vertical {
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* ---------- Card de produto ---------- */
.product-item {
  background: var(--vs-card) !important;
  border: 1px solid #1a1a1a !important; /* borda muito fina */
  border-radius: 0 !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease !important;
  overflow: hidden !important;
  position: relative;
  z-index: 1;
  height: 100%;
}

/* Roxo das parcelas → prata */
.product-item b[style*="color: var(--product-on-sale-accent)"],
.product-item [style*="color: var(--product-on-sale-accent)"],
.product-item b { color: var(--vs-silver) !important; }
.apartirde { color: var(--vs-silver-dim) !important; }

/* Hover: sobe sem ser cortado */
.product-list--collection .product-item--vertical:hover,
.vesarle-product-grid .product-item--vertical:hover,
.product-list--vertical .product-item--vertical:hover {
  z-index: 20 !important;
}

.product-item:hover {
  border-color: var(--vs-silver-dim) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.95) !important;
  transform: translateY(-10px) !important;
}

/* Badge sem arredondamento */
.product-item__label-list > .product-label {
  border-radius: 0 !important;
}

/* Remover arredondamento global do image-wrapper do tema original */
.product-item__image-wrapper {
  border-radius: 0 !important;
}

/* ---- Imagem dominante: altura fixa, preenchimento total ---- */

/* Wrapper: bloco fixo sem arredondamento */
.product-item__image-wrapper {
  display: block !important;
  position: relative !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

/* Cards verticais: wrapper com altura grande */
.product-item--vertical .product-item__image-wrapper {
  height: 580px !important;
  flex-shrink: 0;
}

/* aspect-ratio preenche 100% do wrapper */
.product-item--vertical .product-item__image-wrapper .aspect-ratio {
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  bottom: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  background: #0d0d0d;
}

/* Imagem preenche o container por completo, sem o translate do tema */
.product-item--vertical .product-item__image-wrapper img,
.product-item--vertical .product-item__image-wrapper .product-item__primary-image,
.product-item--vertical .product-item__image-wrapper .product-item__secondary-image,
.aspect-ratio .product-item__primary-image,
.aspect-ratio .product-item__secondary-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important; /* anula translate(-50%,-50%) do tema */
  transition: transform 0.5s ease !important;
}

.product-item--vertical:hover .product-item__image-wrapper img,
.product-item--vertical:hover .product-item__image-wrapper .product-item__primary-image {
  transform: scale(1.06) !important;
}

/* Overlay gradiente na base da imagem */
.product-item__image-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to bottom, transparent, rgba(8,8,8,0.6));
  pointer-events: none;
  z-index: 1;
}

/* ---- Info: pequena e discreta na base ---- */
.product-item__info {
  background: var(--vs-card) !important;
  padding: 8px 14px 12px !important;
}

.product-item__title {
  color: var(--vs-silver-dim) !important;  /* menos destaque */
  font-size: 12px !important;
  letter-spacing: 0.3px;
  line-height: 1.3;
  font-weight: 400 !important;
}
.product-item__title:hover { color: var(--vs-silver-bright) !important; }

/* Preços discretos */
.price-list { margin-top: 3px; }

.price:not(.price--compare) {
  color: var(--vs-silver) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.price--compare {
  color: var(--vs-silver-dim) !important;
  text-decoration: line-through;
  font-size: 11px !important;
  opacity: 0.7;
}
.price--highlight {
  color: var(--vs-silver-bright) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Badge de desconto — prata metálico */
.product-label--on-sale {
  background: var(--vs-gradient-btn) !important;
  color: var(--vs-black) !important;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 0 !important;
  font-weight: 700;
}

.product-label {
  border-radius: 0 !important;
  letter-spacing: 1px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Botões ---------- */
.button--primary {
  background: var(--vs-gradient-btn) !important;
  color: var(--vs-black) !important;
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 12px;
  border-radius: 0 !important;
  padding: 14px 24px !important;
  transition: opacity 0.2s ease !important;
}
.button--primary:hover { opacity: 0.82; }

.button--secondary, .button--ternary {
  background: transparent !important;
  color: var(--vs-silver) !important;
  border: 1px solid var(--vs-border-light) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  transition: border-color 0.2s, color 0.2s !important;
}
.button--secondary:hover, .button--ternary:hover {
  border-color: var(--vs-silver) !important;
  color: var(--vs-white) !important;
}

/* ---------- Seções gerais ---------- */
.section { background: var(--vs-black) !important; }

/* ---------- Cards genéricos ---------- */
.card {
  background: var(--vs-card) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: 0 !important;
}
.card__title--small { color: var(--vs-silver-bright) !important; }

/* ---------- Formulários ---------- */
.form__field--text, .form__field {
  background: var(--vs-dark) !important;
  border: 1px solid var(--vs-border-light) !important;
  color: var(--vs-silver-bright) !important;
  border-radius: 0 !important;
}
.form__field--text:focus, .form__field:focus {
  border-color: var(--vs-silver) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--vs-silver-dim) !important;
}
.form__floating-label { color: var(--vs-silver-dim) !important; }

/* ---------- Mini-cart ---------- */
.mini-cart {
  background: var(--vs-dark) !important;
  border-left: 1px solid var(--vs-border) !important;
}
.mini-cart__header {
  background: var(--vs-dark) !important;
  border-bottom: 1px solid var(--vs-border) !important;
  color: var(--vs-white) !important;
}
.mini-cart__item { border-bottom: 1px solid var(--vs-border) !important; }
.mini-cart__item-title { color: var(--vs-silver-bright) !important; }
.mini-cart__item-price { color: var(--vs-silver) !important; }

body.no-mobile-scroll {
  overflow: hidden !important;
}

.header__action-item--cart .mini-cart {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(440px, 100vw) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  background: linear-gradient(145deg, #090909 0%, #111113 54%, #1d1d21 100%) !important;
  border: 0 !important;
  border-left: 1px solid var(--vs-border-light) !important;
  border-radius: 0 !important;
  color: var(--vs-silver) !important;
  opacity: 1 !important;
  overflow: hidden !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.35s linear !important;
  visibility: hidden !important;
  z-index: 1000 !important;
  will-change: transform !important;
}

.header__action-item--cart .mini-cart[aria-hidden=false] {
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55) !important;
  transform: translateX(0) !important;
  visibility: visible !important;
}

.header__action-item--cart .mini-cart__backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: rgba(0, 0, 0, 0.62);
  border: 0;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s linear;
  z-index: 999;
}

.header__action-item--cart .header__cart-toggle[aria-expanded=true] ~ .mini-cart__backdrop {
  opacity: 1;
  visibility: visible;
}

.header__action-item--cart .mini-cart .icon--nav-triangle-borderless {
  display: none !important;
}

.header__action-item--cart .mini-cart__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  padding: 22px 24px !important;
  background: rgba(9, 9, 9, 0.96) !important;
  border-bottom: 1px solid var(--vs-border-light) !important;
}

.header__action-item--cart .mini-cart__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--vs-silver-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.2;
  text-transform: uppercase;
}

.header__action-item--cart .mini-cart__title {
  margin: 0;
  color: var(--vs-white);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}

.header__action-item--cart .mini-cart__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #141416;
  border: 1px solid var(--vs-border-light);
  color: var(--vs-silver);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.header__action-item--cart .mini-cart__close:hover {
  background: #1b1b1f;
  border-color: var(--vs-silver-dim);
  color: var(--vs-white);
}

.header__action-item--cart .mini-cart__close svg {
  width: 14px;
  height: 14px;
}

.header__action-item--cart .mini-cart__inner,
.header__action-item--cart .mini-cart__content--empty {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.header__action-item--cart .mini-cart__content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.header__action-item--cart .mini-cart__content:not(.mini-cart__content--empty) > * {
  padding-right: 24px !important;
  padding-left: 24px !important;
}

.header__action-item--cart .mini-cart__content--empty {
  justify-content: space-between !important;
  padding: 24px !important;
}

.header__action-item--cart .mini-cart__empty-state {
  padding: 72px 0 !important;
}

.header__action-item--cart .mini-cart__empty-state .heading {
  color: var(--vs-white) !important;
}

.header__action-item--cart .mini-cart__empty-state svg * {
  stroke: var(--vs-silver) !important;
}

.header__action-item--cart .mini-cart__alert-wrapper {
  padding-top: 18px !important;
}

.header__action-item--cart .mini-cart__line-item-list {
  max-height: none !important;
  height: 100% !important;
  overflow: auto !important;
}

.header__action-item--cart .mini-cart__line-item {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 18px 0 !important;
  border-color: var(--vs-border) !important;
}

.header__action-item--cart .mini-cart__image-wrapper {
  width: 92px !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  background: #050505;
  border: 1px solid var(--vs-border);
}

.header__action-item--cart .mini-cart__image-wrapper .aspect-ratio {
  height: 108px !important;
  padding-bottom: 0 !important;
}

.header__action-item--cart .mini-cart__image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
}

.header__action-item--cart .mini-cart__item-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-width: 0;
}

.header__action-item--cart .mini-cart__product-info {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0 !important;
}

.header__action-item--cart .mini-cart__product-title {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--vs-white) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
}

.header__action-item--cart .mini-cart__variant-title,
.header__action-item--cart .mini-cart__property {
  color: var(--vs-silver-dim) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.header__action-item--cart .mini-cart__property-list {
  margin: 0 !important;
}

.header__action-item--cart .mini-cart__price-list .price {
  color: var(--vs-silver-bright) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.header__action-item--cart .mini-cart__quantity {
  display: grid !important;
  justify-items: end !important;
  gap: 8px !important;
  color: var(--vs-silver) !important;
}

.header__action-item--cart .mini-cart__quantity .quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  min-width: 104px !important;
  overflow: hidden !important;
  background: #151518 !important;
  border: 1px solid #34343a !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.header__action-item--cart .mini-cart__quantity .quantity-selector__button,
.header__action-item--cart .mini-cart__quantity .quantity-selector__value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--vs-silver-bright) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 34px !important;
  text-align: center !important;
}

.header__action-item--cart .mini-cart__quantity .quantity-selector__value {
  width: 36px !important;
  border-right: 1px solid #2b2b31 !important;
  border-left: 1px solid #2b2b31 !important;
  color: var(--vs-white) !important;
}

.header__action-item--cart .mini-cart__quantity .quantity-selector__button {
  color: var(--vs-silver-dim) !important;
  cursor: pointer;
}

.header__action-item--cart .mini-cart__quantity .quantity-selector__button:hover {
  background: #202025 !important;
  color: var(--vs-white) !important;
}

.header__action-item--cart .mini-cart__quantity .quantity-selector__button .icon--plus {
  width: 9px !important;
  height: 9px !important;
}

.header__action-item--cart .mini-cart__quantity .quantity-selector__button .icon--minus {
  width: 9px !important;
  height: 2px !important;
}

.header__action-item--cart .mini-cart__quantity-remove {
  margin: 0 !important;
  color: var(--vs-silver-dim) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.header__action-item--cart .mini-cart__quantity-remove:hover {
  color: var(--vs-white) !important;
}

.header__action-item--cart .mini-cart__recap {
  flex: 0 0 auto !important;
  padding: 22px 24px 24px !important;
  background: rgba(16, 16, 16, 0.98) !important;
  border-top: 1px solid var(--vs-border-light) !important;
}

.header__action-item--cart .mini-cart__recap-price-line {
  color: var(--vs-white) !important;
  font-size: 15px;
}

.header__action-item--cart .mini-cart__button-container {
  margin-top: 18px !important;
}

.header__action-item--cart .mini-cart__button-container .button-group {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 !important;
}

.header__action-item--cart .mini-cart__button-container .button {
  width: 100%;
  margin: 0 !important;
  padding-right: 16px !important;
  padding-left: 16px !important;
  text-align: center;
}

.header__action-item--cart .mini-cart__button-container .button:hover {
  animation: none !important;
  transform: none !important;
}

@media screen and (max-width: 640px) {
  .header__action-item--cart .mini-cart {
    width: 100vw !important;
  }

  .header__action-item--cart .mini-cart__header,
  .header__action-item--cart .mini-cart__recap {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .header__action-item--cart .mini-cart__content:not(.mini-cart__content--empty) > * {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .header__action-item--cart .mini-cart__line-item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .header__action-item--cart .mini-cart__image-wrapper {
    width: 82px !important;
  }

  .header__action-item--cart .mini-cart__image-wrapper .aspect-ratio {
    height: 98px !important;
  }

  .header__action-item--cart .mini-cart__item-wrapper {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .header__action-item--cart .mini-cart__quantity {
    justify-items: start !important;
  }
}

/* ---------- Cart page ---------- */
.template-cart .page__header {
  margin: 28px 0 30px !important;
}

.template-cart .page__title {
  color: var(--vs-white) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.template-cart .cart-wrapper {
  margin-bottom: 54px;
}

.template-cart .cart-wrapper .card,
.template-cart .cart-recap .card {
  background: #111113 !important;
  border: 1px solid var(--vs-border) !important;
}

.template-cart .line-item-table th {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  color: var(--vs-silver) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.template-cart .line-item-table td {
  border-color: var(--vs-border) !important;
}

.template-cart .line-item__product-info-wrapper {
  align-items: center !important;
}

.template-cart .line-item__image-wrapper {
  width: 82px !important;
  min-width: 82px !important;
  overflow: hidden;
  background: #050505;
  border: 1px solid var(--vs-border);
}

.template-cart .line-item__image-wrapper .aspect-ratio {
  height: 96px !important;
  padding-bottom: 0 !important;
}

.template-cart .line-item__image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
}

.template-cart .line-item__title {
  margin: 0 0 6px !important;
  color: var(--vs-silver-bright) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.template-cart .line-item__variant-title,
.template-cart .line-item__property {
  display: block;
  color: var(--vs-silver-dim) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.template-cart .line-item__price,
.template-cart .line-item__line-price {
  color: var(--vs-silver-bright) !important;
  font-weight: 800 !important;
}

.template-cart .line-item__quantity .quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  min-width: 104px !important;
  overflow: hidden !important;
  background: #151518 !important;
  border: 1px solid #34343a !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.template-cart .line-item__quantity .quantity-selector__button,
.template-cart .line-item__quantity .quantity-selector__value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--vs-silver-bright) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 34px !important;
  text-align: center !important;
}

.template-cart .line-item__quantity .quantity-selector__value {
  width: 36px !important;
  border-right: 1px solid #2b2b31 !important;
  border-left: 1px solid #2b2b31 !important;
  color: var(--vs-white) !important;
}

.template-cart .line-item__quantity .quantity-selector__button {
  color: var(--vs-silver-dim) !important;
}

.template-cart .line-item__quantity .quantity-selector__button:hover {
  background: #202025 !important;
  color: var(--vs-white) !important;
}

.template-cart .line-item__quantity .quantity-selector__button .icon--plus {
  width: 9px !important;
  height: 9px !important;
}

.template-cart .line-item__quantity .quantity-selector__button .icon--minus {
  width: 9px !important;
  height: 2px !important;
}

.template-cart .line-item__quantity-remove {
  color: var(--vs-silver-dim) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
}

.template-cart .line-item__quantity-remove:hover {
  color: var(--vs-white) !important;
}

.template-cart .cart-recap .card__section {
  padding: 26px 28px !important;
}

.template-cart .cart-recap__price-line {
  align-items: center;
  margin-bottom: 0 !important;
  color: var(--vs-white) !important;
  font-size: 16px !important;
}

.template-cart .cart-recap__price-line-label {
  color: var(--vs-silver-bright);
}

.template-cart .cart-recap__price-line-price {
  color: var(--vs-white);
  font-size: 18px;
}

.template-cart .barradefundo {
  display: inline-flex;
  margin-top: 14px !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  color: #111113 !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  letter-spacing: 0.6px !important;
}

.template-cart .cart-recap__notices {
  display: none !important;
}

.template-cart .cart-recap__discount-code {
  display: grid;
  gap: 8px;
  margin: 22px 0 18px;
  padding-top: 20px;
  border-top: 1px solid var(--vs-border);
}

.template-cart .cart-recap__discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 8px;
}

.template-cart .cart-recap__discount-label {
  color: var(--vs-silver-bright);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.2;
  text-transform: uppercase;
}

.template-cart .cart-recap__discount-input {
  width: 100%;
  height: 46px !important;
  padding: 0 14px !important;
  background: #090909 !important;
  border: 1px solid var(--vs-border-light) !important;
  color: var(--vs-white) !important;
}

.template-cart .cart-recap__discount-input::placeholder {
  color: var(--vs-silver-dim);
}

.template-cart .cart-recap__discount-apply {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 46px !important;
  min-height: 46px;
  padding: 0 14px !important;
  background: #1a1a1d !important;
  border: 1px solid var(--vs-border-light) !important;
  color: var(--vs-silver-bright) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
}

.template-cart .cart-recap__discount-apply:hover {
  background: #242428 !important;
  color: var(--vs-white) !important;
}

.template-cart .cart-recap__discount-feedback {
  display: none;
  margin: 0;
  color: var(--vs-silver-dim);
  font-size: 12px;
  line-height: 1.35;
}

.template-cart .cart-recap__discount-feedback.is-visible {
  display: block;
}

.template-cart .cart-recap__discount-feedback.is-error {
  color: #f0b4b4;
}

.template-cart .cart-recap__checkout {
  margin-top: 10px !important;
}

.template-cart .cart-recap .metade {
  display: block;
  width: 100% !important;
  margin-top: 14px;
}

.template-cart .cart-recap .metade span {
  width: 100% !important;
  border: 1px solid var(--vs-silver-dim) !important;
  color: var(--vs-silver-bright) !important;
}

.template-cart .cart-recap .metade span:hover {
  border-color: var(--vs-white) !important;
  color: var(--vs-white) !important;
}

.template-cart .cart-recap__secure-payment {
  margin-top: 18px;
  padding: 18px;
  background: #111113;
  border: 1px solid var(--vs-border);
}

.template-cart .cart-recap__secure-payment-title {
  color: var(--vs-silver-bright) !important;
}

.template-cart .cart-manual-products {
  margin: 0 0 60px;
}

.template-cart .cart-manual-products__header {
  margin-bottom: 16px;
}

.template-cart .cart-manual-products__title {
  color: var(--vs-white) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.template-cart .cart-manual-products__title::after {
  content: "";
  display: block;
  width: min(260px, 100%);
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--vs-silver-bright), rgba(255, 255, 255, 0));
}

.template-cart .cart-manual-products__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.template-cart .cart-manual-product {
  min-width: 0;
  overflow: hidden;
  background: #111113;
  border: 1px solid var(--vs-border);
}

.template-cart .cart-manual-product__image-link,
.template-cart .cart-manual-product__image {
  display: block;
}

.template-cart .cart-manual-product__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #78777c;
}

.template-cart .cart-manual-product__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.template-cart .cart-manual-product__info {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.template-cart .cart-manual-product__name {
  min-height: 36px;
  overflow: hidden;
  color: var(--vs-silver-bright) !important;
  display: -webkit-box;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.template-cart .cart-manual-product__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 20px;
}

.template-cart .cart-manual-product__price-current {
  color: var(--vs-white);
  font-size: 14px;
  font-weight: 800;
}

.template-cart .cart-manual-product__price-compare {
  color: var(--vs-silver-dim);
  font-size: 12px;
  text-decoration: line-through;
}

.template-cart .cart-manual-product__form {
  margin: 0;
}

.template-cart .cart-manual-product__button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px !important;
  overflow: hidden;
  background: linear-gradient(135deg, #77767b 0%, #f4f4f4 54%, #8b8a8f 100%) !important;
  border: 0 !important;
  color: #050505 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  line-height: 1.2 !important;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.template-cart .cart-manual-product__button:hover {
  filter: brightness(1.08);
}

@media screen and (max-width: 999px) {
  .template-cart .cart-manual-products__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 640px) {
  .template-cart .page__title {
    font-size: 24px !important;
  }

  .template-cart .cart-recap .card__section {
    padding: 22px 18px !important;
  }

  .template-cart .cart-recap__discount-row {
    grid-template-columns: 1fr;
  }

  .template-cart .line-item__product-info-wrapper {
    align-items: flex-start !important;
  }

  .template-cart .line-item__image-wrapper {
    width: 78px !important;
    min-width: 78px !important;
  }

  .template-cart .line-item__image-wrapper .aspect-ratio {
    height: 92px !important;
  }

  .template-cart .cart-manual-products {
    margin-bottom: 44px;
  }

  .template-cart .cart-manual-products__title {
    font-size: 16px !important;
    letter-spacing: 3px !important;
  }

  .template-cart .cart-manual-products__list {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .template-cart .cart-manual-product {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  .template-cart .cart-manual-product__image {
    aspect-ratio: 3 / 4;
  }
}

/* ---------- Footer ---------- */
.footer, [data-section-type="footer"] {
  background: #050505 !important;
  border-top: 1px solid var(--vs-border) !important;
  color: var(--vs-silver-dim) !important;
}
.footer a { color: var(--vs-silver-dim) !important; }
.footer a:hover { color: var(--vs-white) !important; }
.footer__title, .footer .heading {
  color: var(--vs-silver-bright) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
}

/* Bloco de atendimento: icone + texto, a linha inteira clicavel. */
.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vs-silver-dim) !important;
  transition: color 0.2s ease;
}
.footer__contact-link:hover { color: var(--vs-white) !important; }

.footer__contact-link .contact-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--vs-silver) !important;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer__contact-link:hover .contact-icon {
  color: var(--vs-white) !important;
  transform: translateY(-1px);
}

.footer__contact-note {
  margin-top: 16px;
  font-size: 12px;
  opacity: 0.7;
}

/* Alvo de toque confortavel no mobile, sem afastar as linhas no desktop. */
@media screen and (max-width: 640px) {
  .footer__contact-list { gap: 4px; }
  .footer__contact-link { padding: 8px 0; }
}

/* Rodape enxuto: cada bloco do rodape ocupa a sua propria linha, centralizado,
   com a hierarquia indo do mais forte (pagamento) ao mais discreto (copyright). */
.footer__aside-item--payment,
.footer__aside-item--notice,
.footer__aside-item--copyright {
  width: 100%;
  text-align: center;
}

.footer__aside-item--payment { margin-top: 30px; }

.footer__aside-item--notice {
  max-width: 760px;
  margin: 26px auto 0 auto;
  font-size: 11px;
  line-height: 1.65;
  color: var(--vs-silver-dim) !important;
  opacity: 0.7;
}
.footer__aside-item--notice p { margin: 0; }
.footer__aside-item--notice strong { color: var(--vs-silver) !important; }

.footer__aside-item--copyright {
  margin-top: 26px !important;
  padding-top: 22px;
  border-top: 1px solid var(--vs-border);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--vs-silver-dim) !important;
}
.footer__aside-item--copyright p { margin: 0; }
.footer__aside-sep { margin: 0 6px; opacity: 0.45; }

/* ---------- Announcement bar ---------- */
/* Fundo e cor do texto vem dos campos da secao, impressos no <style> dela.
   Estavam travados aqui com !important e os campos nao faziam nada. */
.announcement-bar {
  border-bottom: 1px solid var(--vs-border);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb__link { color: var(--vs-silver-dim) !important; }
.breadcrumb__link:hover { color: var(--vs-white) !important; }

/* ---------- Paginação ---------- */
.pagination__item { color: var(--vs-silver) !important; }
.pagination__item--current, .pagination__item:hover {
  background: var(--vs-card) !important;
  color: var(--vs-white) !important;
  border-color: var(--vs-border-light) !important;
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  background: var(--vs-dark) !important;
  border-right: 1px solid var(--vs-border) !important;
}

@media screen and (max-width: 999px) {
  .shopify-section__header.header-section--mobile-menu-open {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    z-index: 8;
  }

  .mobile-menu[aria-hidden=false] {
    position: fixed;
    top: var(--mobile-menu-top, var(--header-height, 0px));
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: var(--mobile-menu-height, calc(100vh - var(--mobile-menu-top, var(--header-height, 0px))));
    height: var(--mobile-menu-height, calc(100dvh - var(--mobile-menu-top, var(--header-height, 0px))));
    max-height: var(--mobile-menu-height, calc(100vh - var(--mobile-menu-top, var(--header-height, 0px)))) !important;
    transform-origin: top left;
    z-index: 6;
  }
}

.mobile-menu__link { color: var(--vs-silver) !important; }
.mobile-menu__link:hover { color: var(--vs-white) !important; }

/* ---------- Flickity (carrossel) ---------- */
.flickity-prev-next-button {
  background: var(--vs-card) !important;
  border: 1px solid var(--vs-border-light) !important;
}
.flickity-prev-next-button:hover { background: var(--vs-border-light) !important; }
.flickity-prev-next-button svg path { fill: var(--vs-silver) !important; }

/* ---------- Links acento ---------- */
.link--accented, .link1--accented {
  color: var(--vs-silver-bright) !important;
}
.link--accented:hover, .link1--accented:hover {
  color: var(--vs-white) !important;
}

/* ---------- Scrollbar prata ---------- */
::-webkit-scrollbar { width: 5px; background: var(--vs-black); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--vs-silver-dim); }

/* ---------- Skeletons ---------- */
.skeleton-image, .skeleton-text {
  background: linear-gradient(90deg, var(--vs-card) 25%, var(--vs-border) 50%, var(--vs-card) 75%) !important;
  background-size: 200% 100% !important;
}

/* ---------- Estrelas ---------- */
.fas.fa-star { color: var(--vs-silver) !important; }

/* ---------- Barra colorida legada — prata ---------- */
.color-line {
  background: var(--vs-gradient) !important;
  height: 2px !important;
}

/* ---------- Filtros de coleção ---------- */
.collection__filter-link { color: var(--vs-silver) !important; }
.collection__filter-link.is-active,
.collection__filter-link:hover { color: var(--vs-white) !important; }

/* ---------- Hamburguer mobile ---------- */
.header__mobile-nav-toggle svg path {
  stroke: var(--vs-silver) !important;
  fill: var(--vs-silver) !important;
}

/* ---------- Faixa única do layout ---------- */
/* Header, seções do main e rodapé correm todos na mesma largura (--page-max-width,
   definida em snippets/css-variables.liquid), com a mesma sarjeta lateral. O tema já
   fazia isso via .container, mas seções injetadas por apps entram no <main> sem
   container nenhum e sangram de ponta a ponta, o que quebra a linha vertical do
   layout. As regras abaixo trazem essas seções para o mesmo trilho. */
#main .page-full,
#main .shopify-app-block,
#main > .shopify-section > .shopify-installments,
#Areviewsapp,
#az_reviews {
  max-width: var(--page-max-width, 1280px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mobile-container-gutter);
  padding-right: var(--mobile-container-gutter);
}

@media screen and (min-width: 641px) {
  #main .page-full,
  #main .shopify-app-block,
  #main > .shopify-section > .shopify-installments,
  #Areviewsapp,
  #az_reviews {
    padding-left: var(--desktop-container-gutter);
    padding-right: var(--desktop-container-gutter);
  }
}

/* Exceção: o hero sangra de propósito, então nada acima pode alcançá-lo. */
#main .slideshow--edge2edge,
#main .slideshow--edge2edge .page-full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* .container--medium existia como "um pouco mais estreito que o total" quando o trilho
   era 1480px. Com o trilho em 1280px a diferença virou ~130px: perto demais para ler
   como intenção, e é justamente esse quase-alinhamento que faz uma seção parecer
   desencaixada da outra. Passa a acompanhar o trilho.
   As larguras realmente menores (--narrow 800, --extra-narrow 630, --giga-narrow 520)
   continuam como estão: ali a diferença é grande o bastante para ler como uma coluna
   de leitura centralizada, e não como desalinhamento. */
.container--medium {
  max-width: var(--page-max-width, 1280px);
}

/* ---------- Cabecalho em tres colunas ----------
   O layout vive inteiro no <style> da secao header.liquid, onde as medidas vem
   dos campos do editor. Aqui existia um ".header__start, .header__end {
   display: contents }" de uma tentativa anterior: ele dissolvia os dois
   agrupadores, e os filhos deles viravam itens soltos do grid. Bastava a secao
   nao ganhar a disputa de especificidade em algum ponto para o cabecalho
   desmontar. Nao ha o que reconstruir aqui — a secao ja define tudo. */

/* ==========================================================================
   BUSCA CONDENSADA — só o ícone no header, campo abre num painel
   ========================================================================== */
/* No tema original a busca só era condensada no mobile; no desktop ela ficava
   sempre aberta ocupando um campo largo na linha do header. Aqui o ícone passa a
   ser o único gatilho em qualquer largura, e o campo abre como um painel colado
   na base do header. */

@media screen and (min-width: 641px) {
  .header--search-condensed .header__search-bar-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    padding: 18px var(--desktop-container-gutter);
    background: var(--vs-black);
    border-top: 1px solid var(--vs-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    z-index: 6;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }

  .header--search-condensed .header__search-bar-wrapper.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  /* O campo em si fica centrado e com uma largura de leitura confortável, em vez
     de esticar de ponta a ponta agora que o header ocupa a tela inteira. */
  .header--search-condensed .header__search-bar-wrapper .search-bar {
    max-width: 720px;
    margin: 0 auto;
  }

}

/* O ícone alterna entre lupa e X. O gancho é a classe que o JS põe no header ao
   abrir a busca (SearchBar.toggleMobileSearch) — o aria-expanded do botão não
   serviria, porque o script não o atualiza. */
/* O tema troca lupa por X com opacity + transform, nao com display: o
   .icon-state__secondary e absoluto e nasce com opacity 0. Usar display aqui
   revelava o X ainda transparente e escondia a lupa — a busca abria e o icone
   sumia por completo, sem indicar como fechar. */
.header--search-condensed.header--search-expanded .search-toggle .icon-state__primary {
  opacity: 0;
  transform: scale(0.3);
}

.header--search-condensed.header--search-expanded .search-toggle .icon-state__secondary {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ==========================================================================
   RESULTADOS DA BUSCA — cards com foto grande
   ========================================================================== */
@media screen and (min-width: 1000px) {
  /* O painel de resultados acompanha a largura do campo, ancorado nele. */
  .header--search-condensed .search-bar__inner {
    left: 0;
    width: 100%;
    height: auto;
    max-height: min(70vh, 620px);
    overflow: visible;
  }

  .header--search-condensed .search-bar__results {
    height: auto;
    max-height: min(70vh, 620px);
    border-radius: 0 0 4px 4px;
  }

  /* Grade de 2 colunas: cabem 6 produtos sem virar uma lista longa demais. */
  .header--search-condensed .search-bar__result-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header--search-condensed .search-bar__result-item {
    align-items: flex-start;
    padding: 14px 18px;
  }

  /* A foto grande que faltava: 60px -> 96px, com a proporção quadrada do tema. */
  .header--search-condensed .search-bar__image-container {
    width: 96px;
    margin-right: 16px;
  }
}

.search-bar__image-container img {
  -o-object-fit: cover;
     object-fit: cover;
}

.search-bar__item-vendor {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vs-silver-dim);
}

.search-bar__item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-bar__item-price {
  display: block;
  margin-top: 4px;
  font-weight: 700;
}

.search-bar__item-price-old {
  margin-right: 6px;
  font-weight: 400;
  opacity: 0.55;
}

.search-bar__item-sold-out {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.6;
}
/* ==========================================================================
   VITRINE E CATEGORIAS NO MOBILE
   ==========================================================================
   As regras da vitrine ("3 colunas grandes") foram escritas sem media query,
   entao valiam igual no celular: 3 colunas de ~115px com a imagem travada em
   580px de altura, o que produzia cards altissimos e estreitos, com a foto
   cortada e o texto espremido. Aqui a grade e a altura da foto passam a
   acompanhar a largura da tela.
   ========================================================================== */

/* A foto deixa de ter altura fixa e passa a manter proporcao retrato 3:4 em
   qualquer largura. O max-height evita que ela cresca demais agora que o
   layout ocupa a tela inteira; como a imagem e object-fit: cover, o corte
   nesse limite e suave. */
.product-item--vertical .product-item__image-wrapper {
  height: auto !important;
  aspect-ratio: 3 / 4;
  max-height: 620px;
}

/* --- Celular: 2 colunas --- */
@media screen and (max-width: 640px) {
  .product-list--collection .product-item--vertical,
  .vesarle-product-grid .product-item--vertical,
  .product-list--vertical .product-item--vertical {
    width: 50% !important;
    padding: 5px !important;
  }

  /* Com o card mais largo sobra espaco para o texto respirar. */
  .product-item__info {
    padding: 10px 12px 14px !important;
  }

  .product-item__title {
    font-size: 13px !important;
    color: var(--vs-silver) !important;
  }

  .price:not(.price--compare) {
    font-size: 15px !important;
  }

  /* O card sobe 10px no hover; no toque isso vira um salto estranho. */
  .product-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* --- Tablet: 3 colunas, que e onde elas finalmente cabem --- */
@media screen and (min-width: 641px) and (max-width: 999px) {
  .product-list--collection .product-item--vertical,
  .vesarle-product-grid .product-item--vertical,
  .product-list--vertical .product-item--vertical {
    width: 33.3333% !important;
  }
}

/* --- Telas muito largas: 4 colunas, ja que o layout e de tela cheia --- */
@media screen and (min-width: 1600px) {
  .product-list--collection .product-item--vertical,
  .vesarle-product-grid .product-item--vertical,
  .product-list--vertical .product-item--vertical {
    width: 25% !important;
  }
}

/* --- Categorias (carrossel de colecoes) --- */
@media screen and (max-width: 640px) {
  /* 36vw dava ~140px de card: imagem pequena e titulo apertado. Em 62vw cabe
     um card legivel mais a "espiada" no proximo, que e o que sinaliza para o
     cliente que da para arrastar. */
  .collection-item {
    width: 62vw;
    margin: 0 8px;
  }

  /* O .scroller__inner ja pede scroll-snap-type: x mandatory, mas nenhum item
     da lista de colecoes declarava onde encaixar — entao o snap nao acontecia
     e o arrasto parava em qualquer posicao, cortando o card. */
  .collection-item {
    scroll-snap-align: center;
  }

  .collection-item__title {
    font-size: 14px;
    letter-spacing: 0.5px;
  }
}

/* ==========================================================================
   RODAPÉ CENTRADO
   ==========================================================================
   Com o layout em tela cheia, a coluna de atendimento (flex: 0 0 35%) passou a
   valer ~890px numa tela de 2543px, enquanto menu e newsletter continuavam
   limitados a 300/350px. O resultado era todo o conteudo empilhado a esquerda
   com um vazio enorme a direita. As colunas passam a ter bases proprias e o
   conjunto ganha uma faixa centrada.
   ========================================================================== */

@media screen and (min-width: 1000px) {
  .footer__block-list {
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center;
    gap: 0 40px;
  }

  .footer__block-item--text {
    flex: 0 1 320px !important;
  }

  .footer__block-item--links {
    flex: 0 1 220px !important;
    max-width: none;
  }

  .footer__block-item--newsletter {
    flex: 0 1 320px !important;
    max-width: none;
  }
}

/* Entre 641 e 999px as colunas ja quebram sozinhas; so centralizamos o grupo. */
@media screen and (min-width: 641px) and (max-width: 999px) {
  .footer__block-list {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center;
  }
}

/* ==========================================================================
   CONTROLES DO CARD DE PRODUTO
   ========================================================================== */

.product-item__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-item--vertical .product-item__media,
.product-item__image-wrapper--gallery,
.product-item__image-wrapper--gallery .aspect-ratio {
  width: 100% !important;
}

.product-item__image-wrapper--gallery .aspect-ratio {
  max-width: none !important;
}

.product-item--horizontal .product-item__media,
.product-item--list .product-item__media {
  flex: none;
}

.product-item__image-wrapper--gallery .product-item__gallery-image,
.product-item__image-wrapper--gallery .product-item__primary-image,
.product-item__image-wrapper--gallery .product-item__secondary-image {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.5s ease !important;
}

.product-item__image-wrapper--gallery .product-item__gallery-image.is-active,
.product-item__image-wrapper--gallery .product-item__primary-image.is-active,
.product-item__image-wrapper--gallery .product-item__secondary-image.is-active,
.product-item__image-wrapper--gallery:hover .product-item__gallery-image.is-active,
.product-item__image-wrapper--gallery:hover .product-item__primary-image.is-active,
.product-item__image-wrapper--gallery:hover .product-item__secondary-image.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

.product-item__image-wrapper--gallery:hover .product-item__gallery-image:not(.is-active),
.product-item__image-wrapper--gallery:hover .product-item__primary-image:not(.is-active),
.product-item__image-wrapper--gallery:hover .product-item__secondary-image:not(.is-active) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.product-item__image-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--vs-silver-bright) !important;
  background: rgba(5, 5, 5, 0.72) !important;
  border: 1px solid var(--vs-border-light) !important;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.product-item__image-nav--prev {
  left: 10px;
}

.product-item__image-nav--next {
  right: 10px;
}

.product-item:hover .product-item__image-nav,
.product-item:focus-within .product-item__image-nav {
  opacity: 1;
  pointer-events: auto;
}

.product-item__image-nav:hover {
  background: rgba(20, 20, 20, 0.92) !important;
  border-color: var(--vs-silver-dim) !important;
}

.product-item__image-nav .icon {
  width: 8px;
  height: 12px;
}

.product-item--vertical.product-item--has-media .product-item__info > .product-item__action-list {
  display: none !important;
}

.product-item--list .product-item__action-list--card,
.product-item--horizontal .product-item__action-list--card {
  display: none !important;
}

.product-item__action-list--card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  margin: 0 !important;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.product-item:hover .product-item__action-list--card,
.product-item:focus-within .product-item__action-list--card {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.product-item__action-button--card {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  line-height: 1.2 !important;
}

.product-item__cart-text--mobile {
  display: none;
}

.product-item__meta-row {
  width: 100%;
}

.product-item--vertical .product-item__meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.product-item--vertical .product-item__meta-row .product-item__title {
  min-width: 0;
  margin: 0 !important;
}

.product-item--vertical .product-item__price-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: end;
  min-width: max-content;
  max-width: 48%;
  text-align: right;
}

.product-item__price-column .product-item__price-list {
  margin: 0 !important;
}

.product-item__price-column .price {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.product-item__price-column .price--compare {
  display: block;
  margin-top: 2px !important;
}

.product-item__installments {
  margin: 3px 0 0 !important;
  color: var(--vs-silver-dim) !important;
  font-size: 12px !important;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.product-item__installments b {
  color: var(--vs-silver) !important;
}

.product-item__installments-label {
  display: block;
  margin-top: 1px;
  color: var(--vs-silver-dim) !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.product-list--collection .product-item--vertical,
.vesarle-product-grid .product-item--vertical,
.product-list--vertical .product-item--vertical {
  padding: 0 !important;
}

.product-item {
  background: #78777C !important;
  border: none !important;
}

.product-item__info,
.product-item--vertical .product-item__image-wrapper .aspect-ratio,
.product-item__image-wrapper--gallery .aspect-ratio {
  background: #78777C !important;
}

.product-item__info {
  position: relative;
  z-index: 3;
  min-height: 56px;
  margin-top: -10px;
  background: linear-gradient(180deg, rgba(120, 119, 124, 0.84) 0%, #78777C 28%, #7B7A7F 100%) !important;
  padding: 17px 16px 12px !important;
}

.product-item__media {
  background: #78777C !important;
}

.product-item__image-wrapper::after {
  height: 42%;
  background: linear-gradient(to bottom, transparent 0%, rgba(120, 119, 124, 0.28) 58%, rgba(120, 119, 124, 0.92) 100%) !important;
}

.product-item .product-item__title,
.product-item .product-item__title:hover {
  color: #111111 !important;
}

.product-item--vertical .product-item__meta-row .product-item__title {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35;
}

.product-item__price-column .price,
.product-item__price-column .price--highlight {
  color: #111111 !important;
}

.product-item__price-column .price--compare,
.product-item__installments,
.product-item__installments-label {
  color: #111111 !important;
}

.product-item__installments b,
.product-item__price-column b {
  color: #111111 !important;
}

@media screen and (max-width: 640px) {
  .product-item__image-nav {
    width: 34px;
    height: 34px;
    opacity: 1;
    pointer-events: auto;
  }

  .product-item__image-nav--prev {
    left: 8px;
  }

  .product-item__image-nav--next {
    right: 8px;
  }

  .product-item__action-list--card {
    left: 8px;
    right: 8px;
    bottom: 8px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .product-item__action-button--card {
    min-height: 38px;
    padding: 10px 12px !important;
    font-size: 11px !important;
    letter-spacing: 1.2px;
  }

  .product-item__cart-text--desktop {
    display: none;
  }

  .product-item__cart-text--mobile {
    display: inline;
  }

  .product-item--vertical .product-item__meta-row {
    column-gap: 8px;
  }

  .product-item--vertical .product-item__price-column {
    min-width: 0;
    max-width: 50%;
  }

  .product-item__installments {
    font-size: 11px !important;
    white-space: normal;
  }

  .product-item__installments-label {
    font-size: 8px;
  }
}

/* Product page theme cleanup */
.template-product .product-block-list__item--info .card {
  background: #111111 !important;
  border: 1px solid #252528 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.template-product .product-meta__title,
.template-product .product-form__info-content,
.template-product .product-form__info-content .price,
.template-product .product-form__info-content .price--highlight,
.template-product .product-form__option-name,
.template-product .product-form__selected-value {
  color: #f1f1f2 !important;
}

.template-product .product-meta__reference,
.template-product .product-meta__reference a,
.template-product .product-form__info-title,
.template-product .product-form__shipping-estimator-subtitle {
  color: #b9b8bd !important;
}

.template-product .product-meta__real-summary {
  display: block;
  margin-bottom: 6px;
  color: #b7b7b7 !important;
  font-size: 12px;
  line-height: 1.4;
}

.template-product .product-meta__truthful {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  color: #b9b8bd;
  font-size: 13px;
  line-height: 1.35;
}

.template-product .product-meta__truthful .product-meta__sku,
.template-product .product-meta__truthful .product-meta__divider {
  color: #b9b8bd !important;
}

.template-product .product-meta__truthful .product-meta__divider {
  margin: 0 5px;
}

.template-product .product-meta__stock--available {
  color: #0086ff !important;
}

.template-product .product-meta__stock--preorder {
  color: #d7d6db !important;
}

.template-product .product-meta__stock--soldout {
  color: #d9a0a0 !important;
}

.template-product .card__separator {
  border-color: #262629 !important;
}

.template-product .block-swatch__item,
.template-product .color-swatch__item {
  background-color: #171719;
  border: 1px solid #8b8a90 !important;
  box-shadow: none !important;
  color: #f1f1f2;
}

.template-product .block-swatch__radio:checked + .block-swatch__item,
.template-product .color-swatch__radio:checked + .color-swatch__item::after {
  border-color: #f1f1f2 !important;
}

.template-product .color-swatch-list--large .color-swatch__item {
  width: 44px;
  height: 44px;
  border-radius: 6px;
}

.template-product .color-swatch__item svg {
  display: none !important;
}

.template-product .color-swatch--disabled .color-swatch__item svg {
  display: block !important;
  color: #f1f1f2;
}

.template-product .product-form__shipping-estimator {
  margin: 28px 0 26px;
  padding: 18px;
  background: linear-gradient(135deg, #171719 0%, #222226 58%, #78777c 180%);
  border: 1px solid #2f2f33;
}

.template-product .product-form__shipping-estimator-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 14px;
}

.template-product .product-form__shipping-estimator-title {
  color: #f1f1f2;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.template-product .product-form__shipping-estimator .form__input-row {
  gap: 10px;
  margin-bottom: 12px;
}

.template-product .product-form__shipping-estimator .form__input-wrapper {
  flex: 1 1 0;
}

.template-product .product-form__shipping-estimator-zip {
  max-width: 165px;
}

.template-product .product-form__shipping-estimator .form__label {
  color: #c7c6cb;
}

.template-product .product-form__shipping-estimator select,
.template-product .product-form__shipping-estimator .form__field {
  background: #0d0d0e !important;
  border: 1px solid #3a3a3f !important;
  color: #f1f1f2 !important;
}

.template-product .product-form__shipping-estimator .form__submit,
.template-product .product-form__payment-container .button--primary {
  background: linear-gradient(135deg, #78777c 0%, #f1f1f2 52%, #78777c 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #090909 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
}


.template-product .product-form__payment-container {
  gap: 10px;
  align-items: stretch !important;
  margin: 8px 0 0 !important;
}

.template-product .product-form__payment-container > * {
  width: 100% !important;
  margin: 0 !important;
}

.template-product #loader.loader,
.template-product .shopify-payment-button {
  display: none !important;
}

.template-product .product-payment-methods,
.template-product .product-payment-methods__icons {
  background: #171719 !important;
  border: 1px solid #2f2f33;
  box-shadow: none !important;
  color: #f1f1f2;
}

.template-product .product-payment-methods {
  border-bottom: 0;
  border-radius: 0 !important;
}

.template-product .product-payment-methods__icons {
  border-radius: 0 !important;
}

.template-product .product-payment-methods p,
.template-product .product-payment-methods b {
  color: #f1f1f2 !important;
}

@media screen and (max-width: 640px) {
  .template-product .product-form__shipping-estimator {
    padding: 14px;
  }

  .template-product .product-form__shipping-estimator-header,
  .template-product .product-form__shipping-estimator .form__input-row {
    display: block;
  }

  .template-product .product-form__shipping-estimator .form__input-wrapper,
  .template-product .product-form__shipping-estimator-zip {
    max-width: none;
    margin-bottom: 10px;
  }

  .template-product .product-form__payment-container > * {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Product page refinements */
.template-product .product-form__info-item--price {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin: 26px 0 28px !important;
}

.template-product .product-form__info-item--price .product-form__info-title {
  display: block;
  align-self: start;
  padding-right: 0;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 500;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.template-product .product-form__info-content--price {
  display: block !important;
}

.template-product .product-price-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.template-product .product-price-list .price--compare {
  order: 1;
  color: #8e8d93 !important;
  font-size: 13px !important;
  text-decoration: line-through;
}

.template-product .product-price-list .price,
.template-product .product-price-list .price--highlight {
  order: 2;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.15;
}

.template-product .product-price-list .discount__percentage,
.template-product .product-meta__label-list {
  display: none !important;
}

.template-product .product-price-list .align-price-discount {
  display: flex;
  align-items: baseline;
}

.template-product .product-installments {
  order: 3;
  margin: 4px 0 0 !important;
  color: #d7d6db !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.template-product .product-installments b {
  color: #ffffff !important;
  font-weight: 800;
}

.template-product .product-form__shipping-estimator {
  padding: 22px;
  background: linear-gradient(135deg, #141416 0%, #202024 62%, #303035 100%);
  border-color: #333339;
}

.template-product .product-form__shipping-estimator-header {
  margin-bottom: 16px;
}

.template-product .product-form__shipping-estimator-country,
.template-product .product-form__shipping-estimator-province {
  display: none !important;
}

.template-product .product-form__shipping-estimator .form__input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px;
  gap: 12px;
  align-items: end;
  max-width: 520px;
}

.template-product .product-form__shipping-estimator-zip {
  max-width: none;
}

.template-product .product-form__shipping-estimator .form__submit {
  min-height: 48px;
  margin: 0 !important;
  line-height: 48px !important;
}

.template-product .shipping-estimator__results {
  margin-top: 16px;
}

.template-product .vesarle-shipping-results__summary {
  margin: 0 0 10px;
  color: #d7d6db;
  font-size: 13px;
}

.template-product .vesarle-shipping-results__list {
  display: grid;
  gap: 8px;
}

.template-product .vesarle-shipping-rate {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid #3c3c42;
}

.template-product .vesarle-shipping-rate--cheapest {
  background: linear-gradient(135deg, rgba(0, 210, 106, 0.2) 0%, rgba(255, 255, 255, 0.055) 76%);
  border-color: rgba(0, 210, 106, 0.82);
  box-shadow: inset 3px 0 0 #00d26a;
}

.template-product .vesarle-shipping-rate__name {
  color: #f2f2f3;
  font-size: 13px;
  font-weight: 600;
}

.template-product .vesarle-shipping-rate__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.template-product .vesarle-shipping-rate__deadline {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ededf2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.template-product .vesarle-shipping-rate--cheapest .vesarle-shipping-rate__deadline {
  background: rgba(0, 210, 106, 0.22);
  border-color: rgba(0, 210, 106, 0.62);
  color: #ffffff;
}

.template-product .vesarle-shipping-rate--cheapest .vesarle-shipping-rate__price {
  color: #64f0a4;
}

.template-product .vesarle-shipping-rate__deadline[hidden] {
  display: none;
}

.template-product .vesarle-shipping-rate__price {
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.template-product .vesarle-shipping-results--message p {
  margin: 0;
  color: #d7d6db;
}

.template-product .vesarle-shipping-results--error p {
  color: #f1f1f2;
}

.template-product .vesarle-shipping-errors {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.template-product .vesarle-shipping-errors span {
  display: block;
  padding: 9px 10px;
  background: rgba(217, 160, 160, 0.08);
  border: 1px solid rgba(217, 160, 160, 0.28);
  color: #d9a0a0;
  font-size: 12px;
  line-height: 1.35;
}

.template-product #shopify-section-product-recommendations {
  margin-top: 28px;
  overflow: visible;
}

.template-product #shopify-section-product-recommendations .modal[aria-hidden="true"],
.template-product #shopify-section-product-recommendations .modal[aria-hidden="true"] .modal__loader,
.template-product #shopify-section-product-recommendations .modal__loader,
.template-product #shopify-section-product-recommendations .lazyload__loader {
  display: none !important;
}

.template-product #shopify-section-product-recommendations .scroller,
.template-product #shopify-section-product-recommendations .scroller__inner {
  overflow-y: visible !important;
}

.template-product #shopify-section-product-recommendations .scroller__inner {
  margin-bottom: 0;
  padding-bottom: 36px;
}

.template-product #shopify-section-product-recommendations .product-list--scrollable {
  align-items: stretch;
  padding-top: 8px;
}

.template-product #shopify-section-product-recommendations .product-item {
  min-height: 360px;
}

@media screen and (max-width: 640px) {
  .template-product .product-form__info-item--price {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 10px;
    margin: 20px 0 24px !important;
  }

  .template-product .product-form__shipping-estimator .form__input-row {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .template-product .product-form__shipping-estimator .form__submit {
    width: 100%;
  }
}

/* Compact product shipping estimator */
.template-product .product-form__shipping-estimator {
  max-width: 560px;
  margin: 18px 0 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #151517 0%, #202024 100%);
}

.template-product .product-form__shipping-estimator-header {
  display: block;
  margin-bottom: 12px;
}

.template-product .product-form__shipping-estimator-title {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  letter-spacing: 1.3px;
}

.template-product .product-form__shipping-estimator-subtitle {
  display: block;
  max-width: 360px;
  font-size: 12px;
  line-height: 1.35;
}

.template-product .product-form__shipping-estimator .shipping-estimator.form {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 132px;
  gap: 10px;
  align-items: end;
}

.template-product .product-form__shipping-estimator .form__input-row {
  display: block !important;
  max-width: none;
  margin: 0;
}

.template-product .product-form__shipping-estimator .form__label {
  margin-bottom: 6px;
  font-size: 12px;
}

.template-product .product-form__shipping-estimator .form__field {
  min-height: 44px;
  height: 44px;
}

.template-product .product-form__shipping-estimator .form__submit {
  min-height: 44px;
  height: 44px;
  line-height: 44px !important;
  padding: 0 18px !important;
}

.template-product .shipping-estimator__results {
  grid-column: 1 / -1;
  margin-top: 6px;
}

@media screen and (max-width: 640px) {
  .template-product .product-form__shipping-estimator {
    max-width: none;
    padding: 14px;
  }

  .template-product .product-form__shipping-estimator .shipping-estimator.form {
    grid-template-columns: 1fr 112px;
    gap: 8px;
  }
}

@media screen and (max-width: 420px) {
  .template-product .product-form__shipping-estimator .shipping-estimator.form {
    grid-template-columns: 1fr;
  }
}

/* Campo de instruções do pedido no carrinho */
.cart-recap__note { margin: 18px 0; }

.cart-recap__note-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-silver) !important;
}

.cart-recap__note-input {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  resize: vertical;
  background: var(--vs-dark) !important;
  border: 1px solid var(--vs-border-light) !important;
  border-radius: 3px !important;
  color: var(--vs-silver-bright) !important;
}

.cart-recap__note-input:focus {
  border-color: var(--vs-silver-dim) !important;
  outline: none;
}

/* ==========================================================================
   BARRA DE ANÚNCIO — mensagens, esteira e transições
   ==========================================================================
   As medidas vêm das variáveis --ab-* que a seção imprime por instância.
   ========================================================================== */

.announcement-bar__inner {
  padding-top: var(--ab-padding, 10px);
  padding-bottom: var(--ab-padding, 10px);
}

.announcement-bar__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.announcement-bar__track {
  display: flex;
  align-items: center;
}

.announcement-bar__message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 calc(var(--ab-gap, 60px) / 2);
  font-size: var(--ab-font-size, 13px);
  letter-spacing: var(--ab-letter-spacing, 1px);
  line-height: 1.4;
  white-space: nowrap;
}

.announcement-bar__message-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.announcement-bar__message-link:hover { opacity: 0.75; }

.announcement-bar__icon {
  display: inline-flex;
  flex: 0 0 auto;
}
.announcement-bar__icon svg {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

/* --- Sem animação: uma mensagem centralizada --- */
.announcement-bar--none .announcement-bar__track {
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Esteira: a lista é impressa duas vezes e o trilho anda 50% --- */
.announcement-bar--marquee .announcement-bar__track {
  width: -webkit-max-content;
  width: max-content;
  animation: vs-marquee var(--ab-speed, 20s) linear infinite;
  will-change: transform;
}

.announcement-bar__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Anda exatamente a largura de um grupo, que o JS mede e publica em
   --ab-group-width. Como ha copias suficientes para cobrir a tela inteira,
   ao terminar o deslocamento a copia seguinte esta na posicao da anterior e
   o laco fecha sem salto. Antes a animacao andava 50% de um trilho com so
   duas copias: em tela larga o trilho era mais estreito que a viewport, e
   sobrava vazio de um lado. */
@keyframes vs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--ab-group-width, 50%))); }
}

.announcement-bar--marquee.is-pausable:hover .announcement-bar__track {
  animation-play-state: paused;
}

/* --- Esmaecer e deslizar: uma mensagem por vez, trocadas por JS --- */
.announcement-bar--fade .announcement-bar__track,
.announcement-bar--slide .announcement-bar__track {
  position: relative;
  justify-content: center;
  min-height: calc(var(--ab-font-size, 13px) * 1.4);
}

.announcement-bar--fade .announcement-bar__message,
.announcement-bar--slide .announcement-bar__message {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.announcement-bar--fade .announcement-bar__message.is-active,
.announcement-bar--slide .announcement-bar__message.is-active {
  opacity: 1;
  pointer-events: auto;
}

.announcement-bar--slide .announcement-bar__message {
  transform: translate(-50%, 100%);
}
.announcement-bar--slide .announcement-bar__message.is-active {
  transform: translate(-50%, 0);
}

/* Quem pediu menos animação no sistema não recebe a esteira. */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar--marquee .announcement-bar__track {
    animation: none;
    justify-content: center;
  }
}

/* Numa tela estreita a esteira não pode empurrar o layout para o lado. */
@media screen and (max-width: 640px) {
  .announcement-bar__message {
    padding: 0 calc(var(--ab-gap, 60px) / 3);
  }
}

/* Aviso que só aparece dentro do editor de temas, quando o efeito escolhido
   na barra de anúncio não pode funcionar com a quantidade de mensagens. */
.announcement-bar__editor-note {
  margin: 0;
  padding: 8px 16px;
  background: #4a3b00;
  color: #ffd76e;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* Contato do menu mobile: ícone + texto, linha inteira clicável */
.mobile-menu__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vs-silver) !important;
  transition: color 0.2s ease;
}
.mobile-menu__contact-link:hover { color: var(--vs-white) !important; }

.mobile-menu__contact-link .contact-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* ==========================================================================
   PÁGINA DE PRODUTO — bloco de compra
   ========================================================================== */

/* O seletor de quantidade tinha as cores do tema roxo original (#e8e9ef de
   fundo, texto #8188a1), gritando dentro do prata/preto. */
.product-form__info-item--quantity {
  margin: 18px 0 14px;
}

.product-form__quantity-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--vs-silver-dim);
}

.qty-align.qty-align {
  max-width: 160px;
  border: 1px solid var(--vs-border-light);
  border-radius: 0;
  overflow: hidden;
}

input.qtyplus,
input.qtyminus {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 0 !important;
  background: var(--vs-card) !important;
  color: var(--vs-silver) !important;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

input.qtyplus:hover,
input.qtyminus:hover {
  background: var(--vs-border-light) !important;
  color: var(--vs-white) !important;
}

input.qty.qty {
  height: 44px;
  margin: 0 !important;
  background: var(--vs-dark) !important;
  color: var(--vs-silver-bright) !important;
  font-size: 15px;
}

/* Preço: rótulo discreto, valor em destaque, um sob o outro. */
.template-product .product-price-list {
  margin-top: 2px;
}


/* Aviso do editor quando o bloco de políticas ainda não tem o que listar */
.footer__editor-note {
  margin: 0;
  padding: 10px 12px;
  background: #4a3b00;
  color: #ffd76e;
  font-size: 12px;
  line-height: 1.4;
}

/* ==========================================================================
   CABEÇALHO NO CELULAR — o logo cede espaço, não os ícones
   ==========================================================================
   Numa tela de 360px o hambúrguer, o logo e os três ícones disputam a mesma
   linha. Quem cede é o logo: ele tem margem para encolher, os alvos de toque
   não — abaixo de ~44px um ícone deixa de ser clicável com o polegar.
   ========================================================================== */
@media screen and (max-width: 640px) {
  /* No celular o cabecalho e flex, nao grid: aqui so o espacamento vale. */
  .header--split .header__inner {
    gap: 8px;
  }

  .header--split .header__logo .header__logo-image {
    height: auto;
  }

  .header--split .header__logo,
  .header--split .header__logo-link {
    min-width: 0;
    max-width: 100%;
  }

  .header--split .header__logo-text {
    font-size: 18px;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  /* Ícones mais juntos para caber sem apertar o alvo de toque. */
  .header--split .header__action-item {
    padding: 0 4px;
  }

  .header--split .header__end {
    gap: 2px;
  }
}

/* Telas bem estreitas: o logo encolhe mais antes de qualquer coisa quebrar. */
@media screen and (max-width: 360px) {
  .header--split .header__logo-text { font-size: 16px; letter-spacing: 1px; }
  .header--split .header__action-item { padding: 0 2px; }
}

/* ==========================================================================
   CARD DE PRODUTO NO CELULAR — o botão sai de cima da foto
   ==========================================================================
   No celular o botão ficava permanentemente visível (opacity: 1) e absoluto
   sobre a base da imagem, tapando o produto e disputando leitura com o
   gradiente do rodapé da foto. Quando ele estiver ligado, passa a ocupar a
   sua própria linha, abaixo da imagem.
   ========================================================================== */
@media screen and (max-width: 640px) {
  .product-item__action-list--card {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 8px 0 0 !important;
  }

  /* Sem o botão por cima, o gradiente da base da foto não precisa ser tão
     forte — ele existia para dar contraste ao texto do botão. */
  .product-item__image-wrapper::after {
    height: 22%;
  }

  .product-item__action-button--card {
    min-height: 40px;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   CARD DE PRODUTO NO CELULAR — título e preço empilhados
   ==========================================================================
   O card usa duas colunas: título à esquerda, preço à direita. Num card de
   ~175px (grade de 2 colunas) o preço recebia no máximo 50% da largura, e
   "em até 3x de R$ 64,03" não cabe em ~83px — quebrava em cinco linhas, uma
   ou duas palavras por linha, empurrando o título para um filete.

   Duas colunas simplesmente não cabem nessa largura. Empilhados, cada um usa
   a linha inteira.
   ========================================================================== */
@media screen and (max-width: 640px) {
  .product-item--vertical .product-item__meta-row {
    display: block;
  }

  .product-item--vertical .product-item__meta-row .product-item__title {
    display: block;
    margin-bottom: 6px !important;
  }

  .product-item--vertical .product-item__price-column {
    max-width: none;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }

  .product-item__price-column .price-list,
  .product-item__installments {
    text-align: left;
  }

  .product-item__installments {
    white-space: normal;
    line-height: 1.35;
  }

  /* As setas de galeria ocupavam 38px de cada lado num card estreito e ficavam
     por cima do produto. Menores, e só nas bordas. */
  .product-item__image-nav {
    width: 28px;
    height: 28px;
  }

  .product-item__image-nav svg {
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   BLOCO DE COMPRA — a margem negativa que sobrepunha a quantidade
   ==========================================================================
   .product-form__payment-container nasce com margin-top: -30px no tema base.
   Na pagina de produto havia um override, mas o mesmo formulario aparece no
   produto em destaque da home, onde o body e template-index e o override nao
   pegava: o bloco dos botoes subia 30px e cobria o seletor de quantidade.
   ========================================================================== */
.product-form__payment-container {
  margin-top: 8px;
}

.product-form__info-item--quantity {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   CARD DE PRODUTO — tipografia e respiro do bloco de texto
   ==========================================================================
   O bloco vinha com padding 17/16/12, título em line-height 1.55 e folga entre
   as três linhas. Num card de ~175px isso consome mais de um terço da altura e
   afasta o preço do produto a que ele se refere.

   A hierarquia agora é: título discreto, preço em destaque logo abaixo, e o
   parcelamento como nota de rodapé. Distâncias menores entre eles, para lerem
   como um grupo só.
   ========================================================================== */
.product-item__info {
  min-height: 0 !important;
  padding: 12px 12px 14px !important;
}

.product-item--vertical .product-item__meta-row .product-item__title {
  line-height: 1.3 !important;
  margin-bottom: 5px !important;
}

.product-item__price-column .price-list {
  margin: 0 !important;
  line-height: 1.2;
}

.product-item__installments {
  margin: 2px 0 0 !important;
  line-height: 1.3;
}

@media screen and (max-width: 640px) {
  .product-item__info {
    padding: 10px 10px 12px !important;
  }

  .product-item--vertical .product-item__meta-row .product-item__title {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  .price:not(.price--compare) {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .product-item__installments {
    font-size: 10px !important;
    margin-top: 3px !important;
  }

  .product-item__installments-label {
    font-size: 8px;
    margin-top: 0;
  }
}

/* ==========================================================================
   CARD DE PRODUTO — altura igual e alinhamento à esquerda
   ==========================================================================
   Altura: o título tem clamp de 2 linhas, mas um título curto ocupa 1 e o card
   fica mais baixo que o vizinho. Reservando as 2 linhas sempre, os cards da
   mesma fileira terminam na mesma altura.

   Alinhamento: a coluna de preço nasce com justify-self: end, min-width:
   max-content e text-align: right, pensada para ficar À DIREITA do título. Como
   no celular ela passou a ficar ABAIXO, esses três precisam ser desfeitos —
   senão o preço e o parcelamento flutuam soltos, cada um numa posição.
   ========================================================================== */
.product-item--vertical .product-item__meta-row .product-item__title {
  min-height: 2.6em;
}

@media screen and (max-width: 640px) {
  .product-item--vertical .product-item__price-column {
    display: block;
    width: 100%;
    justify-self: stretch;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
  }

  .product-item--vertical .product-item__price-column .price-list,
  .product-item--vertical .product-item__price-column .price,
  .product-item--vertical .product-item__installments {
    display: block;
    text-align: left !important;
  }

  /* O card inteiro estica para a fileira ficar pareja. */
  .product-list--vertical .product-item--vertical,
  .vesarle-product-grid .product-item--vertical,
  .product-list--collection .product-item--vertical {
    display: flex;
  }

  .product-item--vertical .product-item {
    width: 100%;
  }
}

/* Endereço no rodapé: não é link, então alinha o ícone com a primeira linha
   em vez de centralizar num texto de várias linhas. */
.footer__contact-link--static {
  cursor: default;
  align-items: flex-start;
}

.footer__contact-link--static .contact-icon {
  margin-top: 2px;
}

.footer__contact-item--address {
  line-height: 1.5;
}

/* Endereço como coluna própria do rodapé */
.footer__address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
  color: var(--vs-silver-dim);
}

.footer__address .contact-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 3px;
  color: var(--vs-silver);
}

.footer__address-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Resultados do filtro local da busca: mesmo visual dos resultados do Shopify,
   já que reaproveitam as mesmas classes de card. */
.search-bar__local-results[hidden],
.search-bar__results-inner[hidden] {
  display: none !important;
}

@media screen and (min-width: 1000px) {
  .header--search-condensed .search-bar__local-results .search-bar__result-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   RODAPÉ NO CELULAR — colunas sempre abertas
   ==========================================================================
   O tema transforma cada bloco num acordeão abaixo de 640px: o conteúdo nasce
   com height 0 e o theme.js habilita o botão de abrir. Aqui tudo fica visível
   de saída.

   O height precisa de !important: o script anima a altura por style inline ao
   clicar, e sem isso um toque ainda fecharia a coluna. Com o botão sem
   pointer-events e o sinal de + escondido, também não fica parecendo clicável.
   ========================================================================== */
@media screen and (max-width: 640px) {
  .footer__collapsible {
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
  }

  .footer__title[data-action="toggle-collapsible"] {
    pointer-events: none;
    cursor: default;
    padding: 22px 0 10px;
  }

  .footer__block-item .plus-button {
    display: none;
  }

  .footer__collapsible-content {
    padding: 0 0 22px 0;
  }

  /* Sem o acordeão, a divisória entre colunas é o que dá ritmo à leitura. */
  .footer__block-item {
    border-bottom: 1px solid var(--vs-border);
  }

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

/* Regras estruturais para todas as opcoes novas do cabecalho. O nome do menu
   continua nav-bar--split porque a marcacao e compartilhada, mas quem decide o
   desenho final e a classe do header. */
@media screen and (min-width: 641px) {
  .header--centered .header__inner,
  .header--split .header__inner,
  .header--logo_left .header__inner,
  .header--condensed_center .header__inner {
    display: grid;
    align-items: center;
    column-gap: 16px;
    row-gap: 0;
  }

  .header--centered .header__inner,
  .header--split .header__inner,
  .header--condensed_center .header__inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .header--logo_left .header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .header--centered .header__start,
  .header--split .header__start,
  .header--logo_left .header__start {
    display: none;
  }

  .header--condensed_center .header__start {
    display: flex;
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
  }

  .header--condensed_center .header__mobile-nav {
    display: block !important;
  }

  .header--centered .header__logo,
  .header--split .header__logo,
  .header--condensed_center .header__logo {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    margin: 0;
  }

  .header--logo_left .header__logo {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    margin: 0;
  }

  .header--centered .header__end,
  .header--split .header__end,
  .header--logo_left .header__end,
  .header--condensed_center .header__end {
    display: flex;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
    gap: 4px;
  }

  .header--centered .header__end,
  .header--split .header__end,
  .header--condensed_center .header__end {
    grid-column: 3;
  }

  .header--logo_left .header__end {
    grid-column: 3;
  }

  .header--centered .nav-bar--split,
  .header--split .nav-bar--split,
  .header--logo_left .nav-bar--split {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    background: none !important;
    border: none !important;
  }

  .header--centered .nav-bar--split::after,
  .header--split .nav-bar--split::after,
  .header--logo_left .nav-bar--split::after {
    content: none;
  }

  .header--centered .nav-bar--split .nav-bar__linklist,
  .header--split .nav-bar--split .nav-bar__linklist,
  .header--logo_left .nav-bar--split .nav-bar__linklist {
    display: flex;
    align-items: center;
    margin: 0;
  }

  .header--centered .nav-bar--split .nav-bar__item,
  .header--split .nav-bar--split .nav-bar__item,
  .header--logo_left .nav-bar--split .nav-bar__item {
    white-space: nowrap;
  }

  .header--centered .nav-bar--split {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--vs-border) !important;
    text-align: center;
  }

  .header--centered .nav-bar--split .nav-bar__linklist {
    justify-content: center;
    flex-wrap: wrap;
  }

  .header--centered .header__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .header--centered .header__logo {
    grid-row: 1;
    grid-column: 1;
    justify-self: center !important;
    align-self: center;
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: fit-content;
    min-width: 0;
    line-height: 0;
  }

  .header--centered .header__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: fit-content;
  }

  .header--centered .header__end {
    grid-row: 1;
    grid-column: 1;
    justify-self: end !important;
  }

  .header--centered .nav-bar--split {
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
  }

  .header--logo_left .nav-bar--split {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }

  .header--logo_left .nav-bar--split .nav-bar__linklist {
    justify-content: center;
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 641px) and (max-width: 999px) {
  .header--split .nav-bar--split {
    display: none !important;
  }

  .header--split .header__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: "start logo end";
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .header--split .header__start {
    display: flex !important;
    grid-area: start;
    justify-self: start;
    align-self: center;
    min-width: 0;
  }

  .header--split .header__mobile-nav {
    display: block !important;
    margin-right: 0;
  }

  .header--split .header__logo {
    grid-area: logo;
    justify-self: center !important;
    align-self: center;
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: fit-content;
    min-width: 0;
    margin: 0;
    line-height: 0;
  }

  .header--split .header__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: fit-content;
    max-height: 72px;
    overflow: hidden;
  }

  .header--split .header__logo-image {
    width: auto;
    max-width: min(140px, 28vw) !important;
    height: auto !important;
  }

  .header--split .header__end {
    display: flex;
    grid-area: end;
    align-items: center;
    justify-content: flex-end;
    justify-self: end !important;
    align-self: center;
    min-width: 0;
    gap: 4px;
  }

  .header--split .header__action-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 0;
    padding-left: 0;
    min-width: 0;
  }
}

@media screen and (min-width: 1000px) {
  .header--split .header__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .header--split .header__start {
    display: none !important;
  }

  .header--split .nav-bar--split {
    grid-row: 1;
    grid-column: 1;
    justify-self: start !important;
    max-width: calc(50% - 120px);
    text-align: left;
  }

  .header--split .header__logo {
    grid-row: 1;
    grid-column: 1;
    justify-self: center !important;
    align-self: center;
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: fit-content;
    min-width: 0;
    line-height: 0;
  }

  .header--split .header__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: fit-content;
  }

  .header--split .header__end {
    grid-row: 1;
    grid-column: 1;
    justify-self: end !important;
  }

  .header--split .nav-bar--split .nav-bar__linklist {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
}

@media screen and (max-width: 640px) {
  .header .nav-bar--split {
    display: none !important;
  }

  .header--mobile-centered .header__inner,
  .header--mobile-logo_left .header__inner {
    display: grid !important;
    align-items: center;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    row-gap: 0;
  }

  .header--mobile-centered .header__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: "start logo end";
    column-gap: 6px;
  }

  .header--mobile-logo_left .header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "start logo end";
    column-gap: 10px;
  }

  .header--mobile-centered .header__start,
  .header--mobile-logo_left .header__start {
    display: flex;
    grid-area: start;
    justify-self: start;
    align-self: center;
    min-width: 0;
    order: initial !important;
    flex: none !important;
  }

  .header--mobile-centered .header__logo {
    grid-area: logo;
    justify-self: center;
    align-self: center;
    min-width: 0;
    margin: 0;
    line-height: 0;
    order: initial !important;
    flex: none !important;
  }

  .header--mobile-logo_left .header__logo {
    grid-area: logo;
    justify-self: start;
    align-self: center;
    min-width: 0;
    margin: 0;
    padding-left: 0;
    line-height: 0;
    order: initial !important;
    flex: none !important;
  }

  .header--mobile-centered .header__end,
  .header--mobile-logo_left .header__end {
    display: flex;
    grid-area: end;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    align-self: center;
    min-width: 0;
    gap: 2px;
    order: initial !important;
    flex: none !important;
  }

  .header--mobile-centered .header__mobile-nav,
  .header--mobile-logo_left .header__mobile-nav {
    margin-right: 0;
  }

  .header--mobile-centered .header__action-list,
  .header--mobile-logo_left .header__action-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: 0;
    padding-left: 0;
    min-width: 0;
  }

  .header--mobile-centered .header__action-item,
  .header--mobile-logo_left .header__action-item {
    padding: 0 3px;
  }

  .header--mobile-centered .header__action-item:last-child,
  .header--mobile-logo_left .header__action-item:last-child {
    padding-right: 0;
  }

  .header--mobile-centered .header__cart-icon svg,
  .header--mobile-logo_left .header__cart-icon svg {
    width: 32px;
    height: auto;
    margin-top: 4px !important;
  }

  .header--mobile-centered .header__logo-link,
  .header--mobile-logo_left .header__logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 64px;
    overflow: hidden;
  }

  .header--mobile-centered .header__logo-image,
  .header--mobile-logo_left .header__logo-image {
    width: auto;
    max-width: min(140px, 34vw) !important;
    height: auto !important;
  }
}