/** Shopify CDN: Minification failed

Line 4646:17 Expected ":"
Line 4647:2 Expected identifier but found "1"

**/
.no-js:not(html) {
  display: none !important;
}
 
html.no-js .no-js:not(html) {
  display: block !important;
}

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

html.no-js .no-js-inline {
  display: inline-block !important;
}

html.no-js .no-js-hidden {
  display: none !important;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
    overflow-x: hidden;
}
/* Color custom properties */
:root,
.color-background-1 {
  
  --color-foreground: var(--color-base-accent-1);         /* #404040 light black*/
  --color-background: var(--color-base-background-1);       /* #f6f5f0- light white*/
  --gradient-background: var(--gradient-base-background-1);
}

.color-background-2 {
  --color-foreground: var(--color-base-accent-3);    /* white*/
  --color-background: var(--color-base-background-2);       /* brown*/
  --gradient-background: var(--gradient-base-background-2);
}

.color-inverse {
  
 --color-foreground: var(--color-base-text);  /*dark black*/
  --color-background: var(--color-base-background-1); /*light grey*/
  --gradient-background: var(--gradient-base-background-1);
}

.color-accent-1 {
  --color-foreground: var(--color-base-accent-1);  /*light black*/
  --color-background: var(--color-base-background-3); /*dark grey */
  --gradient-background: var(--gradient-base-background-3);

}

.color-accent-2 {
   --color-foreground: var(--color-base-text); /* #ffffff white*/
  --color-background: var(--color-base-accent-3); /* #brown*/
  --gradient-background: var(--gradient-base-accent-3);
 
}
.color-foreground-outline-button {
  --color-foreground: var(--color-base-outline-button-labels);
}
/*text  */
.color-foreground-accent-1 {
  --color-foreground: var(--color-base-accent-1);
}
/*hover text  */
.color-foreground-accent-2 {
  --color-foreground: var(--color-base-accent-2);
}

:root,
.color-background-1 {
  --color-link: var(--color-icon);
  --alpha-link: 0.85;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-link: var(--color-foreground);
  --alpha-link: 0.7;
}

:root,
.color-background-1 {
  /*   --color-link: var(--color-base-outline-button-labels); */
  --color-link: var(--color-icon);
  --alpha-link: 0.85;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-link: var(--color-foreground);
  --alpha-link: 0.7;
}

:root,
.color-background-1 {

     --color-button: var(--color-base-solid-button-labels);
  --color-button-text: var(--color-base-text);
  --color-hover-button: var(--color-base-text);
  --color-button-hover-text: var(--color-base-solid-button-labels);
  --alpha-button-background: 1;
  --alpha-button-border: 1;

}

.button--secondary,.shopify-challenge__button {

  --color-button: var(--color-base-outline-button-labels);
 --color-button-text: var(--color-base-text);
  --color-hover-button: var(--color-base-text);
  --color-button-hover-text: var(--color-base-outline-button-labels);
  /*   --color-button: var(--color-background); */
  --alpha-button-background: 1;
  

}

.color-background-2 .button--secondary,
.color-accent-1 .button--secondary,
.color-accent-2 .button--secondary {
  --color-button: var(--color-background);
  --color-button-text: var(--color-foreground);
}

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

.button--tertiary {
  --color-button: var(--color-base-outline-button-labels);
  --color-button-text: var(--color-base-outline-button-labels);
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.color-background-2 .button--tertiary,
.color-inverse .button--tertiary,
.color-accent-1 .button--tertiary,
.color-accent-2 .button--tertiary {
  --color-button: var(--color-foreground);
  --color-button-text: var(--color-foreground);
}

:root,
.color-background-1 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-foreground);
  --alpha-badge-border: 0.1;
}

.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-background);
  --alpha-badge-border: 1;
}

:root,
.color-background-1,
.color-background-2 {
  --color-card-hover: var(--color-base-text);
}

.color-inverse {
  --color-card-hover: var(--color-base-background-1);
}

.color-accent-1,
.color-accent-2 {
  --color-card-hover: var(--color-base-solid-button-labels);
}

:root,
.color-icon-text {
  --color-icon: rgb(var(--color-base-text));
}

.color-icon-accent-1 {
  --color-icon: rgb(var(--color-base-accent-1));
}

.color-icon-accent-2 {
  --color-icon: rgb(var(--color-base-accent-2));
}

.color-icon-outline-button {
  --color-icon: rgb(var(--color-base-outline-button-labels));
}


.contains-card,
.card {
  --border-radius: var(--card-corner-radius);
  --border-width: var(--card-border-width);
  --border-opacity: var(--card-border-opacity);
  --shadow-horizontal-offset: var(--card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--card-shadow-vertical-offset);
  --shadow-blur-radius: var(--card-shadow-blur-radius);
  --shadow-opacity: var(--card-shadow-opacity);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
}
.close_icon_button {
  color: var(--color-icon);
  transition: all var(--duration-default) linear;
}
.close_icon_button:hover {
  color: rgba(var(--color-base-accent-2));
}

html {
  box-sizing: border-box;
  font-size: calc(var(--font-body-scale) * 62.5%);
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-size: 1.5rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
  body {
    font-size: 1.6rem;
  }
}
.dt-sc-column {
  display: grid;
  width: 100%;
  row-gap: var(--grid-desktop-horizontal-spacing);
  column-gap: var(--grid-desktop-vertical-spacing);
  margin-bottom: 30px;
  margin-left: 0;
  padding: 0;
  grid-auto-flow: row dense;
}
.dt-sc-column.two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.dt-sc-column.three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.dt-sc-column.four-column {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.dt-sc-column.five-column {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.dt-sc-column.six-column {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.dt-sc-column.seven-column {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.dt-sc-column.eight-column {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.dt-sc-column.nine-column {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}
.dt-sc-column.ten-column {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}
.dt-sc-column.eleven-column {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}
.dt-sc-column.twelve-column {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.two-third-one-third {
  grid-template-columns: 2fr 1fr;
}
.three-fourth-one-fourth {
  grid-template-columns: 3fr 1fr;
}
.four-fifth-one-fifth {
  grid-template-columns: 4fr 1fr;
}
.one-third-two-third {
  grid-template-columns: 1fr 2fr;
}
.one-fourth-three-fourth {
  grid-template-columns: 1fr 3fr;
}
.one-fifth-four-fifth {
  grid-template-columns: 1fr 4fr;
}
.double-quarter-half {
  grid-template-columns: 1fr 1fr 2fr;
}
.double-quarter-one-half {
  grid-template-columns: 1fr 1fr 2fr;
}

.no-js .sub-menu-block {
  display: none;
}

/* base */
header .header-contact svg.icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  top: 4px;
  position: relative;
  margin-right: 5px;
}

.page-width {
  max-width: calc(var(--page-width) + 8rem);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 4rem;
  }

  .page-width--narrow {
    padding: 0 4rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 4rem;
  }
}

@media screen and (min-width: 990px) {
  .page-width--narrow {
    padding: 0;
  }

  .page-width-desktop {
    max-width: calc(var(--page-width) + 8rem);
    padding: 0 5rem;
  }
}
.page-full-width {
  max-width: 100%;
  width: 100%;
 
}
.page-full-width.page-full-width_spacing .row {
  margin: 0 var(--page-full-width-spacing);
}
@media screen and (max-width: 990px) {
  .page-full-width.page-full-width_spacing .row {
    margin: 0 calc(var(--page-full-width-spacing) / 2);
  }
}
.isolate {
  position: relative;
  z-index: 1;
  /*   float:left;
  width:100%; */
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

body,
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  color: rgba(var(--color-foreground), 1);
/*   background:transparent; */
  background-color: rgb(var(--color-background));
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

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

.page-margin, .shopify-challenge__container {
    padding: 11rem 3rem;
}
.shopify-challenge__container .g-recaptcha {
  margin: 5rem 0;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

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

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.6rem;
  /*   letter-spacing: 0.06rem; */
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  /*   letter-spacing: calc(var(--font-heading-scale) * 0.06rem); */
  color: rgb(var(--color-foreground));
  line-height: calc(0.7 + 0.3 / max(1, var(--font-heading-scale)));
/*   word-break: break-word; */
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 7rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 8.5rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3.8rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4.8rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 2.6rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 3.6rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 2.4rem);
}

@media only screen and (min-width: 750px) {
  h4,
  .h4 {
    font-size: calc(var(--font-heading-scale) * 2.8rem);
  }
}
h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.6rem);
  }
}

.h6 {
  font-size: calc(var(--font-heading-scale) * 1.35rem);
}

@media only screen and (min-width: 400px) {
  h6,
  .h6 {
    font-size: calc(var(--font-heading-scale) * 1.4rem);
  }
}
h6,
.h6 {
  /*   color: rgba(var(--color-foreground), 0.75); */
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1.4rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.8rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
  font-weight: 700;
}

.caption-with-letter-spacing--medium {
  font-size: 1.8rem;
  letter-spacing: 1rem;
  color: var(--gradient-base-accent-3);
  font-weight: 600;
  font-family: var(--font-body-family);
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.6rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
  font-weight: 400;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.hidden {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 1;
}

/* a:empty, */
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

a {
  text-decoration: none;
  transition: all var(--duration-default) linear;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: none;
  /*   text-underline-offset: 0.3rem; */
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.6rem;
  font-family: inherit;
  transition: all var(--duration-default) linear;
}

.link--text {
  color: rgb(var(--color-foreground));
}
.link:hover,
.customer a:hover {
  color: rgba(var(--color-base-accent-2));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
 }

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  /*   text-decoration: none; */
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: default;
}

.circle-divider::after {
  content: "|";
  margin: 0 1.3rem 0;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  /*   text-decoration: none; */
  color: currentColor;
  /*   display: block; */
  display: inline-block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 300ms;
  --duration-long: 500ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
  /*   text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms; */
}

.underlined-link:hover,
.customer a:hover {
  color: var(--gradient-base-accent-2);
  /*   text-decoration-thickness: 0.2rem; */
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: " ";
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

/* Sidebar carousel */

.optional-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  /*   margin-top: 5px; */
}
.optional-sidebar #accordian li {
  line-height: normal;
}
.product-list-style .quick-add.button-quick-add {
  display: none;
}
.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}
ul.product-list-style .card__content {
  padding: 0 15px;
}
ul.product-list-style .product-icons,
ul.product-list-style .card__content .variant-option-color,
ul.product-list-style .card__content .variant-option-size {
  display: none;
}
ul.product-list-style li:not(:last-child) {
  margin-bottom: 30px;
}
ul.product-list-style .card .card__inner .card__media {
  border-radius: 0;
}
ul.product-list-style .card {
  display: grid;
  grid-template-columns: 1.5fr 2.5fr;
  gap: 0;
  padding: 0;
}
.optional-sidebar .filter-panel-menu li a:hover {
  color: var(--gradient-base-accent-2);
}
.widget.product-sidebar-type-carousel .swiper-wrapper {
  padding-bottom: 45px;
}
.widget.product-sidebar-type-carousel .swiper-sidebar-arrows.swiper-arrows {
  position: relative;
}
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-prev
  svg,
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-next
  svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-next:after,
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-prev:after {
  display: none;
}
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-prev {
  left: 35%;
}
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-next {
  right: 35%;
}
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-prev,
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-next {
  /* width: 30px;
  height: 30px;
  background: var(--gradient-base-background-1);
  box-shadow: 0 0 20px #00000026;
  margin: 0;
  top: unset;
  bottom: 14px;
  border-radius: 50%; */
}
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-prev:hover,
.widget.product-sidebar-type-carousel
  .swiper-sidebar-arrows.swiper-arrows
  .swiper-button-next:hover {
  /* color: var(--gradient-base-background-1);
  background: var(--gradient-base-accent-1); */
}

/*Sidebar menu */
.sidebar .StickySidebar > div[class*="filter-panel"] ul,
.sidebar > div[class*="filter-panel"] ul,
.widget[class*="product-sidebar"] ul {
  margin: 0;
  padding: 0;
}
#accordian li {
  position: relative;
  cursor: pointer;
}
#accordian a {
  margin-right: 30px;
}
.filter-panel-menu ul li a,
.product-sidebar-type-menu li a {
  display: block;
  padding: 0;
  position: relative;
  color: var(--gradient-base-accent-1);
}
.filter-panel-menu ul li:not(:last-child) a,
.product-sidebar-type-menu li:not(:last-child) a {
  margin: 1px 0 10px;
}
#accordian ul ul {
  display: none;
  padding-left: 30px;
}
ul ul {
  list-style-type: none;
}
#accordian a:not(:only-child):after {
  content: "+"; /*     font-family: fontawesome; */
  position: absolute;
  left: 100%;
  width: 30px;
  text-align: center;
  font-size: 22px;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}
#accordian .active > a:not(:only-child):after {
  pointer-events: none;
  content: "-";
}
.filter-panel-menu ul ul li {
  font-size: 1.4rem;
  list-style: disc;
}
/*sidebar*/
.optional-sidebar h5.sidebar_title {
  font-size: 2.4rem;
  /* margin: 30px 0 30px; */
  font-weight: 600;
}
.optional-sidebar > * {
  margin-bottom: 60px;
}
.optional-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.optional-sidebar ul.product-list-style .card {
  gap: 20px;
}
.optional-sidebar ul.product-list-style .card,
.optional-sidebar ul.product-list-style .card-information {
  text-align: left;
}
#FacetsWrapperDesktop .field__input {
  padding: 1rem;
  font-size: 1.4rem;
}
#FacetsWrapperDesktop .field__label {
  top: calc(0.8rem + var(--inputs-border-width));
}
@media screen and (max-width: 991px) {
  .optional-sidebar {
    /*     display: flex;
    flex-direction: column; */
    /* width: var(--sidebar-width); */
    width:270px;
  }
}

@media screen and (max-width: 991px) {
  .optional-sidebar .widget.product-sidebar-type-image {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    width: 350px;
  }
}

@media screen and (min-width: 750px) {
  button.toggleFilter {
    display: none;
  }
  .optional-sidebar span.close-sidebar {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  /*   .optional-sidebar {
    display: none;
  } */
  .facets-vertical.sidebar-left.open .optional-sidebar {
    left: 0;
  }
  .main-product-template .facets-vertical .optional-sidebar,
  .main-product-template .facets-vertical.sidebar-right .optional-sidebar {
    position: fixed !important;
    overflow-y: scroll !important;
    padding: 15px;
    max-width: 80%;
    top: 0;
    left: calc(var(--sidebar-width) * -1);
    height: 100%;
    background: var(--gradient-background);
    margin: 0;
    z-index: 17;
    transition: all 0.3s linear;
  }
  .main-product-template .facets-vertical.sidebar-right.open .optional-sidebar,
  .main-product-template .facets-vertical.sidebar-right.open .optional-sidebar {
    left: 0;
  }
  .main-product-template .facets-vertical.sidebar-right.open:after,
  .main-product-template .facets-vertical.sidebar-left.open:after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 16;
    background-color: rgba(0, 0, 0, 0.7);
  }
}
.optional-sidebar span.close-sidebar svg {
  width: 2.2rem;
}
.optional-sidebar span.close-sidebar {
  position: absolute;
  top: 2rem;
  right: 0rem;
  width: 4.4rem;
  height: 4.4rem;
}
@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 3;
  }
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/
.facet-filters .facets__display {
  width: 214px;
}
.facet-filters .facet-filters__sort {
  background: transparent;
}
*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}
.facet-filters.sorting .facets__display {
  width: 100%;
  left: 0;
}
/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused,
.no-js *:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Negate the fallback side-effect for browsers that support :focus-visible */
.no-js *:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset,
.no-js .focus-inset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.no-js .focus-inset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused,
.no-js .focus-offset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)),
    0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.no-js .focus-offset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
/*   text-transform: capitalize; */
}

.title-wrapper-with-link .title {
  margin: 0;
 font-weight: var(--font-heading-weight);
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
/*   text-transform: capitalize; */
}
.title--primary {
  margin: 4rem 0;
}
.title-wrapper-with-link.content-align--left {
  align-items: flex-start;
  text-align: left;
}
.title-wrapper-with-link.content-align--center {
  align-items: center;
  text-align: center;
}
.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 5rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon svg {
  width: 1.5rem;
}

/* .title-wrapper-with-link a {
  color: rgb(var(--color-link));
  margin-top: 0;
  flex-shrink: 0;
} */

/* .title-wrapper--no-top-margin {
  margin-top: 0;
}
 */
.title-wrapper--no-top-margin > .title,
.title-wrapper--no-top-margin > .sub-heading,
.title-wrapper--no-top-margin > .description {
  margin-top: 0;
  margin-bottom: 2rem;
}

.subtitle {
  font-size: 2.4rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 1);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.8rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  align-items:flex-start;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
  .subtitle,
  .subtitle--medium,
  .subtitle--small {
    font-size: 1.8rem;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 1200px) {
.product__info-wrapper.grid__item {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}
}
@media screen and (max-width: 750px) {
.product__info-wrapper.grid__item {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
}
.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 1200px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}
  .theme__default-footer_style
    .footer__blocks-wrapper.grid--4-col-tablet
    .grid__item {
    width: 100%;
    text-align: center;
  }

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }
  .product--thumbnail_slider .thumbnail-slider {
    display: flex;
    align-items: center;
    margin-top: 0;
   /*  height: 300px; */
  }
}

@media screen and (min-width: 1200px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 1199px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}
@media screen and (max-width: 780px) {
  .grid--4-col-desktop .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) * 2 / 2);
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing) * 2 / 2);
  }
  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }
}
@media screen and (max-width: 576px) {
  .grid--4-col-desktop .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) * 0);
    max-width: calc(100% - var(--grid-mobile-horizontal-spacing) * 0);
  }
  .grid--2-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) * 0);
    max-width: calc(100% - var(--grid-mobile-horizontal-spacing) * 0);
  }
}
@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 47%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--peek.slider .grid__item:last-of-type {
    margin-right: 1.5rem;
  }

  /*   .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  } */
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item
  /*,.grid--1-col-tablet-down .grid__item*/ {
    /*     width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem); */
    width: 100%;
    max-width: 100%;
  }
}
/* @media screen and (max-width: 480px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
    max-width: 50%;
  }
} */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .slider--tablet.grid--peek .grid__item:last-of-type {
    margin-right: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    /*     width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem); */
    width: calc(50% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }
}

/* component-media */
img {
  max-width: 100%;
  object-fit: cover;
  height: auto;
}
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

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

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button [role="button"],
.cart__dynamic-checkout-buttons [role="button"],
.cart__dynamic-checkout-buttons iframe {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --border-offset: var(
    --buttons-border-offset
  ); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
  transition: all var(--duration-default) linear;
  
}

.button,
.button-label,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  /* min-width: calc(20rem + var(--buttons-border-width) * 2); */
  min-height: calc(5rem + var(--buttons-border-width) * 2);
  font-size: calc(var(--font-heading-scale) * 1.4rem);
  letter-spacing: 1px;
  line-height: normal;
  text-transform: uppercase;
  padding: 0 5.74rem;
font-family: var(--font-body-family);
  color:rgba(var(--color-base-text));
}

.shopify-payment-button__button--branded {
  z-index: auto;
}

.cart__dynamic-checkout-buttons iframe {
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset)
    var(--shadow-blur-radius)
    rgba(var(--color-base-text), var(--shadow-opacity));
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  white-space: nowrap;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  transition: all .3s ease-in-out;
  font-family: var(--font-body-family);
  font-weight: 500;
  transition: all var(--duration-default) linear;
  position: relative;
  z-index:1;
 
}
/* .button:hover,
.shopify-challenge__button:hover,
.customer button:hover{
   background-color: rgba(var(--color-base-outline-button-labels));
    transition: all var(--duration-default) linear;
} */
.button:hover:after, .shopify-challenge__button:hover:after,.customer button:hover:after {
  
/*     background-color: rgba(var(--color-hover-button),var(--alpha-button-background));
    color: rgba(var(--color-button-hover-text)); */
/*     left:15px;
    top: 15px; */ 
}
.button:before,
.shopify-challenge__button:before,.shopify-challenge__button:before,#g-recaptcha>input.shopify-challenge__button.btn:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before,
.shopify-payment-button [role="button"]:before,
.cart__dynamic-checkout-buttons [role="button"]:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -7px;
    left: -7px;
    z-index: -1;
    border: 1px solid rgba(var(--color-base-solid-button-labels));
    overflow: visible;
    border-radius: var(--buttons-radius-outset);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity));
    transition:all var(--duration-default) linear;
}
.button:hover::before,.customer button:hover::before,#g-recaptcha>input.shopify-challenge__button.btn:before,
.shopify-challenge__button:hover::before,
.customer button:hover::before,
.shopify-payment-button__button--unbranded:hover::before,
.shopify-payment-button [role="button"]:hover::before,
.cart__dynamic-checkout-buttons [role="button"]:hover::before,

.button:hover::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 7px;
  top:7px;
 border:1px solid rgba(var(--color-base-solid-button-labels));
  z-index: -1;
  transition:all var(--duration-default) linear;
}
.button:after,
.shopify-challenge__button:after,#g-recaptcha>input.shopify-challenge__button.btn:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: "";
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width)
      rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

/* .button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 0px)
      rgba(var(--color-button-text), var(--alpha-button-background));
} */

#g-recaptcha>input.shopify-challenge__button.btn:before{
   content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -7px;
    left: -7px;
    z-index: -1;
    border: 1px solid rgba(var(--color-base-solid-button-labels));
    overflow: visible;
    border-radius: var(--buttons-radius-outset);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity));
    transition:all var(--duration-default) linear;
}
.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button [role="button"]:focus-visible,
.shopify-payment-button__button--unbranded:focus,
.shopify-payment-button [role="button"]:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(
    .focused
  ),
.shopify-payment-button
  [role="button"]:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Button - other */

.button:disabled,
.button[aria-disabled="true"],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled="true"],
.customer button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

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

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading-overlay__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  background: transparent;

}

.button.loading > .loading-overlay__spinner .path {
  stroke: rgb(var(--color-base-accent-2));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  color: rgb(var(--color-base-accent-1));
  margin-left: 0;
  padding-left: 0;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

/* .share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
} */

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  /*   height: 1.2rem; */
  margin-right: 1rem;
  color: rgb(var(--color-base-accent-2));
  /*   width: 1.3rem; */
}
.share-button__button {
  font-size: 1.8rem;
  font-weight: 700;
}
.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width)
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset)
    var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius)
    rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover svg {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused)
  + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused)
  + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--gradient-background);
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
 border: var(--inputs-border-width) solid rgb(var(--color-base-accent-2));
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset)
    var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius)
    rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
  box-shadow: none;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width)
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
  box-shadow: none;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  color: rgba(var(--color-foreground), 1);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}
/* .field.field--with-error input {
    border: 1px solid red;
}
.field.field--with-error input:focus{
  box-shadow: 0 0 0 calc(0.1rem + 0rem) red;
} */
.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + 0rem) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
  box-shadow: none;
  /*   border-color: rgba(var(--color-base-solid-button-labels)); */
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .icon-caret,
.customer select + svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: calc(var(--inputs-border-width) + 1.5rem);
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 1rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 0 3rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 3rem);
  top: calc(2rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease,
    font-size var(--duration-short) ease;
  color: var(--gradient-base-accent-1);
  letter-spacing: 0.1rem;
  line-height: 1.5;
  display: none;
}

/* :focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 3.3rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
} */

.field__button {
  align-items: center;
  background-color: var(--gradient-base-accent-1);
  border: 0;
  color: var(--gradient-base-accent-2);
  cursor: pointer;
  display: flex;
/*   height: 4.4rem; */
  justify-content: center;
  overflow: hidden;
/*   padding: 0; */
  position: absolute;
  right: 0;
  top: 0;
/*   width: 4.4rem; */
  transition: all 0.3s linear;
}

.field__button > svg {
  height: 1.5rem;
  width: 1.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}
.form-status *:focus-visible,
.form__message *:focus-visible {
  outline: none;
  outline-offset: unset;
  box-shadow: none;
}
.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(
    13.8rem / var(--font-body-scale) + var(--inputs-border-width) * 2
  );
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.8rem);
}

.quantity:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  /* border:1px solid rgba(var(--color-base-accent-2)); */
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width)
    rgba(var(--color-base-accent-2), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
  
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset)
    var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius)
    rgba(var(--color-base-text), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-size: 1.4rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.2rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
  border-radius: 0 var(--buttons-radius) var(--buttons-radius) 0;
  transition: all 0.3s linear;
}
.quantity__button:first-child {
  border-radius: var(--buttons-radius) 0 0 var(--buttons-radius);
}
.quantity__button:hover {
  background: var(--gradient-base-accent-2);
  color: var(--gradient-base-background-1);
}
.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button svg {
  width: 1.4rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  /*   background-color: rgb(var(--color-background)); */
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  /*   background-color: rgb(var(--color-background)); */
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  /*   background-color: inherit; */
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

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

.quantity__input[type="number"] {
  -moz-appearance: textfield;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.no-js details[open] .modal__toggle {
  position: absolute;
  z-index: 5;
}

.modal__toggle-close {
  display: none;
}

.no-js details[open] svg.modal__toggle-close {
  display: flex;
  z-index: 1;
  height: 1.7rem;
  width: 1.7rem;
}

.modal__toggle-open {
  display: flex;
}

.no-js details[open] .modal__toggle-open {
  display: none;
}

.no-js .modal__close-button.link {
  display: none;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
position: absolute;
    background-color: var(--gradient-base-background-2);
    color: rgb(var(--color-base-accent-3));
    height: 1.4rem;
    width: 1.4rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    top: -0.7rem;
    right: -1.2rem;
    line-height: 1.6rem;
    z-index: 1;
    font-weight: 500;
    opacity: .9;
}
/* .grid-count-bubble {  position: relative;  top: 1px;  left: 1px;} */
/* section-announcement-bar */
#shopify-section-announcement-bar {
  z-index: 4;
}

.announcement-bar {
  border-bottom: 0rem solid rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));

}

.announcement-bar__link {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  /*   text-decoration: none; */
}

.announcement-bar__link:hover {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-card-hover), 0.06);
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__link .announcement-bar__message {
  padding: 0;
  font-size: calc(var(--font-heading-scale)* 1.4rem);
  font-family: var(--font-body-family);
  font-weight: 400;
  letter-spacing: .5px;
}

.announcement-bar__message {
    text-align: center;
    padding: 0.8rem 2rem;
    margin: 0;
    letter-spacing: 0px;
    font-size: 1.2rem;
    font-weight: 400;
    font-family: var(--font-body-family);
}

/* section-header */
#shopify-section-header {
  /*   z-index: 3; */
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
}

.shopify-section-header-hidden {
  transform: translateY(-100%);
}

.shopify-section-header-hidden.menu-open {
  transform: translateY(0);
}

#shopify-section-header.animate {
  transition: transform 0.15s ease-out;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  /*   background-color: rgb(var(--color-background)); */
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
.index-header {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  right: 0;
}
.header .header-row {
  display: grid;
  grid-template-areas: "left-icon heading icons";
  row-gap: 10px;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: center;
  /*   padding-top: 1rem;
   padding-bottom: 1rem;  */
  /*   position: absolute; */
  /*   width: 100%; */
  left: 0;
  right: 0;
  /*   max-width: 100%; */
}
.header .localization-form:only-child {
  margin: 0;
}
.header .localization-form:only-child .button,
.header .localization-form:only-child .localization-form__select {
  margin: 0;
}
.header .disclosure__button {
  padding-top: 0;
  padding-bottom: 0;
  height: 3rem;
}
.header .localization-form:only-child {
  padding: 0;
}
@media screen and (max-width: 1200px) {
  .index-header {
    position: relative;
  }
}

.header *[tabindex="-1"]:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
  align-items: center;
  display: flex;
}

.header__heading-link {
  /*   display: inline-block; */
  padding: 0.75rem;
  /*   text-decoration: none; */
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  /*   width: 100%; */
}

@media screen and (max-width: 1279px) {
  .header__heading,
  .header__heading-link {
    text-align: left;
    justify-self: start;
  }
}
@media screen and (max-width: 750px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
    justify-self: center;
  }
}

@media screen and (min-width: 1280px) {
  /*   .header__heading-link {
    margin-left: -0.75rem;
  } */
  .header__heading,
  .header__heading-link {
    justify-self: start;
  }
}

/* Header icons */
.header__icons {
  grid-area: icons;
  justify-self: end;
  display: flex;
  align-items: center;gap:30px;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
  /*   top: -2px; */
  position: relative;
}

.header__icon::after {
  content: none;
}

/* .header__icon:hover .icon, */
/* .header__icon:hover svg, */
/* .header__icon--cart:hover svg,
.modal__close-button:hover .icon,
.search__button:hover .icon-search,
.icon-search:hover svg {
  color: var(--gradient-base-accent-3);
  fill: var(--gradient-base-accent-3);
} */
.header__icon .icon,
.header__icon svg,
.modal__close-button .icon,
.search__button .icon-search,
.icon-search svg {
  transition: all var(--duration-default) linear;
}
.header__icon .icon {
  height: 24px;
  width: 24px;
  fill: none;
  vertical-align: middle;
  transition: all var(--duration-default) linear;
}



.header__icon--cart .icon {
  height: 1.5rem;
  width: 1.5rem;
}

.header__icon--cart {
  position: relative;
  /*   margin-right: -1.2rem; */
}
.header__icon--wishlist,
.header__icon--compare {
  position: relative;
}
@media screen and (max-width: 750px) {
  .header__heading,
  .header__heading-link {
    grid-row: 1;
    grid-column: 1/4;
    /*     padding: 0 0 15px; */
  }
  .header__icons {
    justify-content: flex-end;
    grid-row: 2;
    grid-area: auto;
    grid-column: 3;
  }
  .header {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media screen and (max-width: 989px) {
  menu-drawer ~ .header__icons .header__icon--account {
    display: none;
  }
}
.header__icon--menu[aria-expanded="true"]::before {
  content: "";
  top: 100%;
  left: 0;
  height: calc(
    var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))
  );
  width: 100%;
  display: block;
  position: fixed;
  background: rgba(var(--color-foreground), 0.5);
  top: 0;
  z-index: 2;
  height: 100vh;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icon;
  justify-self: start;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}
.header .search-box .search-modal__content {
  padding: 0;
}

.no-js .predictive-search {
  display: none;
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: "";
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.no-js details[open] > .header__icon--search {
  top: 1rem;
  right: 0.5rem;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(
    100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width))
  );
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
    width: 100%;
    margin-bottom: 5rem;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 47.8rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  /* position: absolute; */
  opacity: 1;
  /* transform: scale(1); */
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  /*   margin-left: -1.2rem; */
  grid-area: navigation;
  display: none;
  width: 100%;
}
.header__inline-menu.secondary-menu {
  grid-area: secondary-menu;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header--top-center .header__inline-menu {
    justify-self: center;
    /*     margin-top: 15px;
    margin-bottom: 15px; */
    width: 100%;
  }
  /*   .header--top-center .header__inline-menu #AccessibleNav{justify-content: center;} */

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
    padding: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  /*   text-decoration: none; */
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

/* .header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
} */

/* .header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
} */

/* details[open] > .header__menu-item {
  text-decoration: underline;
} */

/* details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
} */

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  /*   transition: text-decoration-thickness var(--duration-short) ease; */
  color: rgb(var(--color-foreground));
  /*   text-decoration: underline;
  text-underline-offset: 0.3rem; */
}

/* .header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
} */

.header__submenu {
  transition: opacity var(--duration-default) ease,
    transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset)
    var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

.header__submenu.list-menu {
  padding: 2.4rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2.4rem;
}

.header__submenu .header__submenu .header__menu-item {
  padding-left: 3.4rem;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: hidden;
  }
}

/* @media screen and (min-width: 1024px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
} */

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.6rem 1.3rem;
  text-align: center;
  border-color: rgb(var(--color-foreground), var(--alpha-badge-border));
    background-color: rgb(var(--color-badge-background));
    color: rgb(var(--color-foreground)) !important;
  word-break: break-word;
}

.gradient {
/*   background:transparent !important; */
  background: rgb(var(--color-background));
  background: var(--gradient-background); 
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: "";
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid
    rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: "";
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset)
    var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius)
    rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid
    rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: "";
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset)
    var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}
/* product page thumbnail slick slider height issue when click color variant */
.height_fix {
  height: 350px !important;
}

/* Advanced product tagging*/
.adv-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 0;
}
.adv-product-list li {
  padding: 5px;
  list-style: none;
}
.adv-product-list .products a img {
  aspect-ratio: 1/1;
}
.adv-product-list .carousel-block-list.active {
  box-shadow: 0px 0px 15px var(--gradient-base-accent-1);
  border: 1px solid var(--gradient-base-background-2);
}
.adv-product-list .products .product-detail {
  padding: 10px 0 0;
}
.adv-product-list .products .product-detail .grid-link__title {
  text-align: center;
}
.adv-product-list .products .product-detail .grid-link__title a {
  display: block;
  font-size: 12px;
}
.adv-product-list li a span {
  color: rgba(var(--color-foreground), 1);
  transition: all var(--duration-default) linear;
  font-size: 1.6rem;
  font-weight: 500;
}
.adv-product-list li:hover a span {
  color: var(--gradient-base-accent-2);
}
/* Html section in product page */
.html-sections-product svg {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 5px;
}
.flag-icon {
  margin-left: 15px;
}
.disclosure .localization-form__select:after {
  display: none;
}
.button-quick-add {
  display: flex;
  justify-content: space-around;
  grid-row-start: 4;
}
.spr-form-label {
  font-size: 18px !important;
}
.spr-form-title {
  font-size: 20px !important;
}

/* product page new tag section */
.ribbon {
  background-color: #f2b500;
  transform: rotate(320deg);
  z-index: 999;
  width: 150px;
  height: 30px;
  text-align: center;
  top: 0px;
  left: -30px;
  margin: 20px 0;
  line-height: 34px;
  position: absolute;
  cursor: pointer;
  user-select: none;
  color: var(--gradient-background);
}
@media screen and (max-width: 750px) {
  .ribbon {
    width: 100px;
    left: 0;
  }
}
.ribbon:before {
  border-color: #f2b500 #f2b500 #f2b500 transparent;
  left: -25px;
  border-width: 17px;
}

.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  top: 5px;
  z-index: -10;
}

.ribbon:after {
  border-color: #f2b500 transparent #f2b500 #f2b500;
  right: -25px;
  border-width: 17px;
}
.optional-sidebar .product-deal-count {
  display: none;
}
.product__info-container .product-deal-count {
  display: none;
}
/* svg {
  width: 1.6rem;
  height: 1.6rem;
} */
body.overflow-hidden-mobile .shopify-section-header-sticky {
  opacity: 0;
  z-index: 1;
}

.swiper-pagination-bullet:before {
  will-change: transform;
}

.dt-sc-rating {
  width: 100%;
  /*   float: left; */
  margin: 0 0 0px 0;
  letter-spacing: 5px;
  display: flex;
  justify-content: flex-start;
/*   display:none; */
  margin-top:5px;
}
.dt-sc-rating div {
  display: block !important;
}
.dt-sc-rating div[class*="star-rating"] {
  position: relative;
  width: 100%;
}
.dt-sc-rating div[class*="star-rating"]:after {
  content: "\f005""\f005""\f005""\f005""\f005";
  display: block;
  position: relative;
  font-family: FontAwesome;
  color: #B4774B;
  font-size: 12px;
  font-style: normal;
}
.dt-sc-rating div[class*="no-star-rating"]:after {
  content: "\f006""\f006""\f006""\f006""\f006";
}
.dt-sc-rating div[class*="half-star-rating"]:after {
  content: "\f123""\f006""\f006""\f006""\f006";
}
.dt-sc-rating div[class*="one-star-rating"]:after {
  content: "\f005""\f006""\f006""\f006""\f006";
}
.dt-sc-rating div[class*="one-half-star-rating"]:after {
  content: "\f005""\f123""\f006""\f006""\f006";
}
.dt-sc-rating div[class*="two-star-rating"]:after {
  content: "\f005""\f005""\f006""\f006""\f006";
}
.dt-sc-rating div[class*="two-half-star-rating"]:after {
  content: "\f005""\f005""\f123""\f006""\f006";
}
.dt-sc-rating div[class*="three-star-rating"]:after {
  content: "\f005""\f005""\f005""\f006""\f006";
}
.dt-sc-rating div[class*="three-half-star-rating"]:after {
  content: "\f005""\f005""\f005""\f123""\f006";
}
.dt-sc-rating div[class*="four-star-rating"]:after {
  content: "\f005""\f005""\f005""\f005""\f006";
}
.dt-sc-rating div[class*="four-half-star-rating"]:after {
  content: "\f005""\f005""\f005""\f005""\f123";
}

/* sidebar */
.no-sidebar .blog-content__area {
  width: 100%;
}
/* @media screen and (min-width: 750px) {
  .blog-sidebar.facets-vertical,
  aside.facets-wrapper.sidebar-sticky {
    width: 380px;
  }
} */
@media screen and (min-width: 992px) {
  .blog-content__area {
    width: calc(100% - 380px);padding-right: 70px;
  }
}

.preloader-overflow {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
a#to-top.dt-sc-to-top {
  padding: 0;
  bottom: -50px;
  right: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  z-index: 2;
  position: fixed;
  background: var(--gradient-base-accent-1);
  color: var(--gradient-base-background-1);
  overflow: hidden;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
a#to-top.dt-sc-to-top.show {
  bottom: 100px;
}
a#to-top.dt-sc-to-top:hover {
  background: var(--gradient-base-accent-1);
  color: var(--gradient-base-background-1);
}
a#to-top.dt-sc-to-top:hover svg {
  fill: var(--gradient-base-background-1);
}
a#to-top.dt-sc-to-top svg {
  width: 20px;
  height: 10px;
  transition: all var(--duration-default) linear;
  fill: var(--gradient-base-background-1);
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

.video_overlay {
  opacity: 1;
  visibility: hidden;
  display: none;
}
.video_overlay.open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 98;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
}
#video_player {
  max-width: 80%;
  max-height: 80%;
  height: 360px;
  width: 640px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.video-section .video_modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: var(--DTBaseTransition);
}
#product-with-hidden-thumbs .thumbnail-slider {
  display: none;
}
/* quick view */
.quick-add-modal__content-info .optional-sidebar,
.quick-add-modal__content-info .dt-sc-enquiry-form,
.quick-add-modal__content-info .sticky-bar-form,
.quick-add-modal__content-info .html-sections-product,
.quick-add-modal__content-info .fake_counter_p,
.quick-add-modal__content-info .product-additional__information,
.quick-add-modal__content-info .product-deal-count,
.quick-add-modal__content-info .advance-product-style,
.quick-add-modal__content-info button.toggleFilter {
  display: none !important;
}
.quick-add-modal__content-info .main-product_info {
  width: 100%;
}
.mobile-menu-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  width: 100%;
  z-index: 98;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: opacity 0.2s, visibility 0.2s;
  transition: opacity 0.2s, visibility 0.2s;
}
body.overflow-hidden-mobile .customer-purchased {
  display: none;
}
body.enquiry-overlay .shopify-section-header-sticky {
  opacity: 0;
}
svg.placeholder-svg {
  width: 100%;
  height: 100%;
}
/* .spr-summary-actions a.spr-summary-actions-newreview {
  font-weight: 600 !important;
}  */
/*Review form*/
/* .spr-summary-actions a.spr-summary-actions-newreview:hover {
  color: var(--gradient-base-accent-2);
} */
a.spr-summary-actions-newreview {
    position: relative;
   transition: all .3s linear;
}

/* Secondary buttons */
button.button.button--secondary{
  margin-top:1rem;
}

.shopify-payment-button__button--unbranded,
button.button.button--secondary,.button.button--secondary
{
  background:rgba(var(--color-base-outline-button-labels));
  /* min-height: calc(5.5rem + var(--buttons-border-width) * 2);
  min-width: calc(20rem + var(--buttons-border-width) * 2); */
    font-size: calc(var(--font-heading-scale) * 1.4rem);
    letter-spacing: 1px;
    line-height: normal;
    text-transform: uppercase;
    padding: 0 6rem;
  margin-left:7px;
  z-index:1;
  
}

.shopify-payment-button__button--unbranded:before,
.button.product-form__submit:before,.contact__button .button.button--secondary:before,
.button.button--secondary:before,
#shopify-product-reviews a.spr-summary-actions-newreview:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -7px;
    left: -7px;
    z-index: -1;
    border: 1px solid rgba(var(--color-base-outline-button-labels));
    overflow: visible;
    border-radius: var(--buttons-radius-outset);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity));
    transition: all var(--duration-default) linear;
  text-decoration:none;
  
}
.shopify-payment-button__button--unbranded:hover::before,
.button.product-form__submit:hover::before,
.contact__button>button.button.button--secondary:hover::before,
#shopify-product-reviews a.spr-summary-actions-newreview:hover::before,
.button.button--secondary:hover::before
{
      content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 7px;
    left: 7px;
    z-index: -1;
    border: 1px solid rgba(var(--color-base-outline-button-labels));
    overflow: visible;
    border-radius: var(--buttons-radius-outset);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity));
    transition: all var(--duration-default) linear;
}
body#compare main#MainContent {
  min-height: 700px;
  display: flex;
  align-items: center;
}
body#wishlist main#MainContent {
  min-height: 700px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1920px) {
  body#compare main#MainContent {
    min-height: 100%;
    display: flex;
    align-items: center;
  }
  body#wishlist main#MainContent {
    min-height: unset;
    display: unset;
    align-items: unset;
  }
}

:root {
    --anim--slow-time: 1.5s;
    --anim--medium-time: 2s;
    --anim--fast-time: 2.5s;
    --anim-delay: 2.5s;
}
/*animation*/
/* @keyframes fadeIn {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
} */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 0;
    transform: scale3d(1.3, 1.3, 1.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.95, 0.95);
    
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes zoom-in-zoom-out-1 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
    
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
/*Fade  */
.fade-left-animate{
   animation: fadeInLeft 3s linear;
   -webkit-animation:fadeInLeft 3s linear;
}
/*Rotate  */
.rotate-animate{
 animation: rotate 2s linear infinite;
   -webkit-animation:rotate 2s linear infinite;
}

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

/* color-change */
 @keyframes change-background {
      0% {
        background: #707070;
      }
      50% {
        background: #b3dbd3;
      }
      100% {
        background: #707070;
      }
    }


/*Top Bottom  */
@keyframes up-down{
  0% {
    transform:  translate(1px,20px)  ;
  }
  24% {
    transform:  translate(1px,30px)  ;
  }
  50% {
    transform:  translate(1px,12px)  ;
  }
  74% {
    transform:  translate(1px,22px)  ;
  }
  100% {
    transform:  translate(1px,20px)  ;
  }
}

@-moz-keyframes up-down{
  0% {
    -moz-transform:  translate(1px,20px)  ;
  }
  24% {
    -moz-transform:  translate(1px,30px)  ;
  }
  50% {
    -moz-transform:  translate(1px,12px)  ;
  }
  74% {
    -moz-transform:  translate(1px,22px)  ;
  }
  100% {
    -moz-transform:  translate(1px,22px)  ;
  }
}

@-webkit-keyframes up-down {
  0% {
    -webkit-transform:  translate(1px,20px)  ;
  }
  24% {
    -webkit-transform:  translate(1px,30px)  ;
  }
  50% {
    -webkit-transform:  translate(1px,12px)  ;
  }
  74% {
    -webkit-transform:  translate(1px,22px)  ;
  }
  100% {
    -webkit-transform:  translate(1px,22px)  ;
  }
}

@-o-keyframes up-down {
  0% {
    -o-transform:  translate(1px,20px)  ;
  }
  24% {
    -o-transform:  translate(1px,30px)  ;
  }
  50% {
    -o-transform:  translate(1px,12px)  ;
  }
  74% {
    -o-transform:  translate(1px,22px)  ;
  }
  100% {
    -o-transform:  translate(1px,22px)  ;
  }
}

@-ms-keyframes up-down {
  0% {
    -ms-transform:  translate(1px,20px)  ;
  }
  24% {
    -ms-transform:  translate(1px,30px)  ;
  }
  50% {
    -ms-transform:  translate(1px,12px)  ;
  }
  74% {
    -ms-transform:  translate(1px,22px)  ;
  }
  100% {
    -ms-transform:  translate(1px,22px)  ;
  }
}

.up-down{
  animation: up-down linear 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: up-down linear 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: up-down linear 4s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: up-down linear 4s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: up-down linear 4s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}


.top-bottom-animate{
    -webkit-animation: top-bottom 3s infinite  linear;
    animation: top-bottom 3s infinite linear;
}
@-webkit-keyframes top-bottom {
    0% { transform: translateY(0); }
    50% { transform: translateY(-70px); }
100% { transform: translateY(0); }
}
@keyframes top-bottom {
    0% { transform: translateY(0); }
    50% { transform: translateY(-70px); }
   100% { transform: translateY(0); }
}

.slideDown {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
  animation-count: 1
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(8%);
  }
  65% {
    transform: translateY(-4%);
  }
  80% {
    transform: translateY(4%);
  }
  95% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  65% {
    -webkit-transform: translateY(-4%);
  }
  80% {
    -webkit-transform: translateY(4%);
  }
  95% {
    -webkit-transform: translateY(-2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/*
==============================================
slideUp
==============================================
*/

.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
  animation-count: 1;
  animation-delay: 1.5s;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(-8%);
  }
  65% {
    transform: translateY(4%);
  }
  80% {
    transform: translateY(-4%);
  }
  95% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50% {
    -webkit-transform: translateY(-8%);
  }
  65% {
    -webkit-transform: translateY(4%);
  }
  80% {
    -webkit-transform: translateY(-4%);
  }
  95% {
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/*
==============================================
slideLeft
==============================================
*/

.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
  animation-count: 1;
  animation-delay: 3s;

}

@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }
  50% {
    transform: translateX(-8%);
  }
  65% {
    transform: translateX(4%);
  }
  80% {
    transform: translateX(-4%);
  }
  95% {
    transform: translateX(2%);
  }
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  50% {
    -webkit-transform: translateX(-8%);
  }
  65% {
    -webkit-transform: translateX(4%);
  }
  80% {
    -webkit-transform: translateX(-4%);
  }
  95% {
    -webkit-transform: translateX(2%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/*
==============================================
slideExpandUp
==============================================
*/

.slideExpandUp {
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;
  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease -out;
  visibility: visible !important;
  animation-count: 1;
  animation-delay: 4s;
}

@keyframes slideExpandUp {
  0% {
    transform: translateY(100%) scaleX(0.5);
  }
  30% {
    transform: translateY(-8%) scaleX(0.5);
  }
  40% {
    transform: translateY(2%) scaleX(0.5);
  }
  50% {
    transform: translateY(0%) scaleX(1.1);
  }
  60% {
    transform: translateY(0%) scaleX(0.9);
  }
  70% {
    transform: translateY(0%) scaleX(1.05);
  }
  80% {
    transform: translateY(0%) scaleX(0.95);
  }
  90% {
    transform: translateY(0%) scaleX(1.02);
  }
  100% {
    transform: translateY(0%) scaleX(1);
  }
}

@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
  }
  30% {
    -webkit-transform: translateY(-8%) scaleX(0.5);
  }
  40% {
    -webkit-transform: translateY(2%) scaleX(0.5);
  }
  50% {
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60% {
    -webkit-transform: translateY(0%) scaleX(0.9);
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }
  80% {
    -webkit-transform: translateY(0%) scaleX(0.95);
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  }
  100% {
    -webkit-transform: translateY(0%) scaleX(1);
  }
}
/*
==============================================
expandUp
==============================================
*/

.expandUp {
  animation-name: expandUp;
  -webkit-animation-name: expandUp;
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes expandUp {
  0% {
    transform: translateY(100%) scale(0.6) scaleY(0.5);
  }
  60% {
    transform: translateY(-7%) scaleY(1.12);
  }
  75% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(0%) scale(1) scaleY(1);
  }
}

@-webkit-keyframes expandUp {
  0% {
    -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
  }
  60% {
    -webkit-transform: translateY(-7%) scaleY(1.12);
  }
  75% {
    -webkit-transform: translateY(3%);
  }
  100% {
    -webkit-transform: translateY(0%) scale(1) scaleY(1);
  }
}
/*
==============================================
fadeIn
==============================================
*/

.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
  animation-count;
  1;
  animation-delay: 5.5s;
  animation:fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0.0;
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
/*
==============================================
bigEntrance
==============================================
*/

.bigEntrance {
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;
  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  visibility: visible !important;
  animation-count: 1;
  animation-delay: 7s;
}

@keyframes bigEntrance {
  0% {
    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}
/*
==============================================
pulse
==============================================
*/

.pulse:hover {
  animation-name: pulse;
  -webkit-animation-name: pulse;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
}
/*
==============================================
floating
==============================================
*/

.floating:hover {
  animation-name: floating;
  -webkit-animation-name: floating;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/*
==============================================
tossing
==============================================
*/

.tossing:hover {
  animation-name: tossing;
  -webkit-animation-name: tossing;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

@-webkit-keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(4deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
  }
}
/*
==============================================
fade
==============================================
*/

.fade {
  opacity: 0.5;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 1;
}
/*
==============================================
grow
==============================================
*/

.grow {
  transition: transform .5s ease-in-out;
  -moz-transition: transform .5s ease-in-out;
  -webkit-transition: transform .5s ease-in-out;
}

.grow:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
/*
==============================================
circle
==============================================
*/

.circle {
  transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
}

.circle:hover {
  border-radius: 50%;
}
/*
==============================================
curls
==============================================
*/

.curls {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.curls:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}

.curls:hover:before,
.curls:focus:before,
.curls:active:before {
  width: 25px;
  height: 25px;
}
/*
==============================================
Bubble
==============================================
*/

.bubble-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  margin-bottom: 10px;
}
.bubble-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  bottom: 0;
  border-width: 10px 10px 0 10px;
  border-color: tomato transparent transparent transparent;
}
.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before {
  -webkit-transform: translateY(9px);
  transform: translateY(9px);
}

/*
==============================================
Bubble
==============================================
*/



@keyframes shake{
  0% {
    transform: translate(2px, 1px) rotate(0deg);transition: all var(--duration-default) linear;
}
10% {
    transform: translate(-1px, -2px) rotate(-2deg);transition: all var(--duration-default) linear;
}

20% {
    transform: translate(-3px, 0px) rotate(3deg);transition: all var(--duration-default) linear;
}
30% {
    transform: translate(0px, 2px) rotate(0deg);transition: all var(--duration-default) linear;
}

40% {
    transform: translate(1px, -1px) rotate(1deg);transition: all var(--duration-default) linear;
}

50% {
    transform: translate(-1px, 2px) rotate(-1deg);transition: all var(--duration-default) linear;
}

60% {
    transform: translate(-3px, 1px) rotate(0deg);transition: all var(--duration-default) linear;
}

70% {
    transform: translate(2px, 1px) rotate(-2deg);transition: all var(--duration-default) linear;
}

80% {
    transform: translate(-1px, -1px) rotate(4deg);transition: all var(--duration-default) linear;
}

90% {
    transform: translate(2px, 2px) rotate(0deg);transition: all var(--duration-default) linear;
}

100% {
    transform: translate(1px, -2px) rotate(-1deg);transition: all var(--duration-default) linear;
}
}
/*dt-base-custom */
h2 {
    font-weight: var(--font-body-weight);
}
h5.sub-title{
    font-family: var(--font-additional-family);
    font-weight: var(--font-additional-heading-style);
    color: rgb(var(--color-base-accent-2));
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:5px; 
  font-size:1.4rem;
}

h6.description{
  max-width: 620px;
  text-align: center;
  font-weight: var(--font-body-weight);
  line-height:2.2;
   
}
.collection .title-wrapper-with-link {
    margin-bottom: 0px;
}

a.banner-button.button.button--primary {
    margin-left: 7px;
}

h2.title.h2 {
    line-height: 46px;
}

h6.sub-heading {
    font-family: var(--font-body-family);
    color: rgba(var(--color-base-accent-2));
    font-size: 2.4rem;
    font-weight: 400;
}
.breadcrumb_title{color: rgba(var(--color-base-text));}
.breadcrumb a, .breadcrumb span {
    display: inline-block;
    margin: 3rem 1rem;
    font-size: 1.6rem;
    font-weight: 400;
    padding: 0 0.4rem;
    text-transform: uppercase;
    color: rgba(var(--color-base-text));
}
.button.underlined-link:hover {
  color: rgba(var(--color-base-text));
}
a.button.button--tertiary:before {
    display: none;
}

.template-404 {
    margin-top: 0;
    margin-bottom: 0rem;
}
form#contact_form>input, form#contact_form>textarea {
    border: 1px solid rgb(var(--color-base-accent-2));
}
form#contact_form>input:focus, form#contact_form>textarea:focus {
    border: 1px solid rgb(var(--color-base-accent-1));
}
/*Responsive  */
@media screen and (max-width: 1200px){
  .header__icons { gap: 2rem;}
}

.checkbox{
  display: block;
  margin-bottom: 15px;
}


a.link.list-social__link:hover {
     border: 1px solid rgb(var(--color-base-accent-2));
   transition:all .2s linear;
}

.cart-count-bubble[count="0"] {
    display: none;
}
/* @media screen and (max-width:556px){
inbox-online-store-chat#ShopifyChat {width:280px !important; }
} */

.card-wrapper .badge--new{
      position: absolute;
    top: 15px;
    left: 15px;
}
/* Decorative maroon subtitle with flanking lines, applied sitewide to all
   section subtitles that use the shared .title-wrapper-with-link markup.
   (Moved here from the main .title, which needs to stay free to wrap.) */
.title-wrapper-with-link .sub-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #6B1620;
  white-space: nowrap;
}

.title-wrapper-with-link .sub-title::before,
.title-wrapper-with-link .sub-title::after {
  content: '';
  flex: 1 1 60px;
  max-width: 70px;
  height: 1px;
  background: #6B1620;
}

@media screen and (max-width: 749px) {
  .title-wrapper-with-link .sub-title::before,
  .title-wrapper-with-link .sub-title::after {
    max-width: 32px;
  }
}

/* Blog card: clamp title to 2 lines, maroon Read More link */
.card__heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog__read {
  color: #6B1620 !important;
}

/* Navigation: maroon on hover and active/current page link */
.dt-sc-nav-link:hover,
.dt-sc-nav-link[aria-current="page"],
li.active > .dt-sc-nav-link,
li.top-level-link.active .dt-sc-nav-link {
  color: #6B1620 !important;
}

/* Navigation/header accents in brand maroon */
.cart-count-bubble {
  background-color: #6B1620 !important;
  color: #ffffff !important;
}

.header__icon .cart-count-bubble,
.header-wishlist-count,
.wishlist-count-bubble {
  background-color: #6B1620 !important;
  color: #ffffff !important;
}

/* Bolder section heading weight */
.title-wrapper-with-link .title {
  font-weight: 700 !important;
}

/* Reduce oversized blog card title font */
.article-card .card__information h3.card__heading {
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
}

/* Compact product tab buttons */
.tabs .tablinks {
  padding: 0.55rem 1.25rem !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.05em !important;
}

/* Festive Sale Offers banner: golden background instead of maroon */
.custom-grid1-block {
  background-color: #8A6B2E !important;
}

/* Remove image zoom-on-hover effect (blog cards, other native cards) */
.card__media .media:hover {
  transform: none !important;
}

/* Blog card: no border, shadow only, and no hover effect at all */
.article-card .card__inner {
  border: none !important;
  box-shadow: none !important;
}

.article-card,
.article-card * {
  transition: none !important;
}

.article-card:hover,
.article-card *:hover,
.article-card .card__inner:hover {
  transform: none !important;
  box-shadow: none !important;
}

.article-card__title a:hover,
.article-card__link:hover {
  text-decoration: none !important;
  color: inherit !important;
}

/* Real selectors used by this theme's blog card markup: title + read-more link.
   Hardcoded (not "inherit") because .card__heading's own base color is --color-icon,
   which is a gold/tan tone in this theme's scheme - inheriting it made hover look
   the same as the broken state instead of the intended dark title color. */
.article-card .card__information .card__heading,
.article-card .card__information .card__heading a,
.article-card .card__information .card__heading a:hover {
  color: #1a1a1a !important;
}

.article-card a.blog__read,
.article-card a.blog__read:hover {
  color: #6B1620 !important;
}

.article-card a.blog__read:before,
.article-card a.blog__read:after,
.article-card a.blog__read:hover:before,
.article-card a.blog__read:hover:after {
  content: none !important;
  display: none !important;
}

/* Catch-all safety net: nothing inside a blog card should visually change on hover */
.article-card a:hover,
.article-card a:focus,
.article-card *:hover {
  text-decoration: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* All section titles: centered and smaller on mobile */
@media screen and (max-width: 749px) {
  .title-wrapper-with-link {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .title-wrapper-with-link .sub-title,
  .title-wrapper-with-link .title,
  .title-wrapper-with-link .description {
    text-align: center !important;
    width: 100%;
  }

  .title-wrapper-with-link .title {
    font-size: calc(var(--font-heading-scale) * 2rem) !important;
  }

  .title-wrapper-with-link {
    margin-bottom: 1rem !important;
  }
}

/* Collection-list circles (Earrings/Necklaces/Rings): tighter image-to-title gap, smaller title on mobile */
.custom-collection-list-1 .card__content {
  padding: 1rem 1.5rem !important;
}

@media screen and (max-width: 749px) {
  .custom-collection-list-1 h3.card__heading {
    font-size: 1.05rem !important;
  }

  .custom-collection-list-1 .card__content {
    padding: 0.5rem 1rem !important;
  }
}

/* Product-tab: tighter gap between title and the filter tabs on mobile */
@media screen and (max-width: 749px) {
  .product-tab-with-carousel .tabs {
    margin-block: 0.5rem 2rem !important;
  }
}

/* Product cards in the swiper carousel were sizing to their own content instead of
   matching the tallest card in the row (e.g. a card with a discount badge got taller,
   pushing its Add to Cart button lower than cards without one). Force equal height. */
.product-tab-with-carousel .swiper-wrapper {
  align-items: stretch !important;
}

.product-tab-with-carousel .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.product-tab-with-carousel .swiper-slide .card-wrapper,
.product-tab-with-carousel .swiper-slide .overlay-card-wrapper {
  width: 100% !important;
  height: 100% !important;
}

/* Luminous/Alluring/Enchanting banner cards: side gap on mobile so it reads as a slider, not a static full-bleed banner */
@media screen and (max-width: 749px) {
  .multi-column .swiper {
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }
}

/* Luminous/Alluring/Enchanting banner cards: rounded corners */
.custom-card-1,
.custom-card-2 {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Office Wear / Everyday Wear / Festive Wear cards: whole card clickable, not just the small
   "Shop Now" button - stretch the existing link over the full card via a positioned ::after
   (.multicolumn-card, which is also .custom-card-1/2, is already position:relative). */
.custom-card-1,
.custom-card-2 {
  cursor: pointer;
}
.custom-card-1 .multicolumn-bottom a.button.link::after,
.custom-card-2 .multicolumn-bottom a.button.link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Custom Buy Now Button Color for Single Product Page */
.product-form__buttons .shopify-payment-button__button--unbranded,
.product-form__buttons .shopify-payment-button__button {
  background-color: #61020F !important;
  background: #61020F !important;
  color: #FFFFFF !important;
}
.product-form__buttons .shopify-payment-button__button--unbranded:hover,
.product-form__buttons .shopify-payment-button__button:hover {
  background-color: #4a010b !important;
  background: #4a010b !important;
  color: #FFFFFF !important;
}

/* Single Product Page - Sale Badge Customization */
.price--large .price__badge-sale {
  background-color: #894148 !important;
  color: #ffffff !important;
  border: none !important;
}

/* Single Product Page - Accordion / FAQ Customization */
.product__accordion.accordion {
  border: none !important;
  border-bottom: 1px solid #E5D5C5 !important; /* Soft line between items */
  margin-bottom: 0 !important;
  padding: 1.2rem 0 !important;
  background-color: transparent !important;
}
.product__accordion.accordion:first-of-type {
  border-top: 1px solid #E5D5C5 !important;
}

.product__accordion.accordion .accordion__title {
  color: #894148 !important;
  font-size: 16px !important;
  font-weight: 600 !important; letter-spacing: 0.5px;
}

/* Replace caret with + and - */
.product__accordion.accordion summary .icon-caret {
  display: none !important;
}
.product__accordion.accordion summary {
  padding: 0 !important;
  list-style: none; /* Hide default marker */
}
.product__accordion.accordion summary::-webkit-details-marker {
  display: none;
}
.product__accordion.accordion summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #894148;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.product__accordion.accordion details[open] summary::after {
  content: '-';
}

/* Content padding */
.product__accordion.accordion .accordion__content {
  padding: 1rem 0 0 0 !important;
  margin-top: 0 !important;
  color: #333 !important;
}



/* Customer Reviews Background Customization */
#judgeme_product_reviews,
.jdgm-widget.jdgm-review-widget,
.jdgm-rev-widg {
  background-color: #ffffff !important;
  padding: 30px 20px !important;
  border-radius: 8px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}



/* FAQ Section Customization (collapsible-content) */
.collapsible-content .accordion {
  border: none !important;
  border-bottom: 1px solid #E5D5C5 !important;
  margin-bottom: 0 !important;
  padding: 1.2rem 0 !important;
  background-color: transparent !important;
}
.collapsible-content .accordion:first-of-type {
  border-top: 1px solid #E5D5C5 !important;
}

.collapsible-content .accordion .accordion__title {
  color: #894148 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important; /* ensure it's not uppercase */
}

/* Replace caret with + and - */
.collapsible-content .accordion summary svg:not(.icon-accordion) {
  display: none !important; /* Hide the default caret SVG */
}
.collapsible-content .accordion summary {
  padding: 0 !important;
  list-style: none; /* Hide default marker */
  position: relative;
}
.collapsible-content .accordion summary::-webkit-details-marker {
  display: none;
}
.collapsible-content .accordion summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #894148;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.collapsible-content .accordion details[open] summary::after {
  content: '-'; /* minus sign */
}

/* Content padding */
.collapsible-content .accordion .accordion__content {
  padding: 1rem 0 0 0 !important;
  margin-top: 0 !important;
  color: #333 !important;
}

.collapsible-content .accordion summary .icon-accordion {
  display: none !important;
}

.collapsible-content .accordion summary .icon-caret {
  display: none !important;
}


/* Product Page Alignment Fix: Align Left Image with Right Title */
@media screen and (min-width: 990px) {
  .main-product_info.grid {
    align-items: flex-start !important;
  }
  .product__media-wrapper,
  .product__media-wrapper media-gallery,
  .product__media-wrapper slider-component {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: flex-start !important;
  }
  .product__info-wrapper,
  .product__info-container {
    margin-top: 0 !important;
  }
  .product__title {
    margin-top: 0 !important;
  }
  .product__title h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Remove any sticky extra padding that might misalign if it triggers */
  .product__info-container--sticky {
    padding-top: 0 !important;
  }
}

/* Make the left side image sticky
   height:max-content used to cancel out the sticky's "release room": verified via Playwright that a stacked
   position:sticky + overflow-y:auto pair on <html> AND <body> (from an unrelated horizontal-scroll fix that has
   since been reverted) was also silently breaking this - sticky needs the DOCUMENT to be the one scrolling
   element, not a nested one. */
@media screen and (min-width: 990px) {
  .product__media-wrapper {
    position: sticky !important;
    top: 5rem !important;
  }
  
  /* Optionally un-sticky the right side if it was sticky, because both being sticky can be problematic */
  .product__info-container--sticky {
    position: static !important;
    top: auto !important;
  }
}

/* ==========================================================================
   Cart (page + drawer) tweaks (Almiora)
   ========================================================================== */

/* "Tax included. Shipping calculated at checkout." - the theme's ".rte a" rule turns every link inside
   an .rte block into a beige uppercase button, so the word "Shipping" showed up as a big button. Make it plain inline text again. */
.tax-note a,
.tax-note.rte a {
  display: inline !important;
  background: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* Cart item images (cart page + drawer): always square, cropped to fill */
.cart-item__image {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Force hide all review widgets inside the cart drawer */
cart-drawer [id*="judgeme"],
cart-drawer [class*="jdgm"],
cart-drawer [id*="loox"],
cart-drawer [class*="loox"],
cart-drawer [id*="stamped"],
cart-drawer [class*="stamped"],
cart-drawer [id*="alireview"],
cart-drawer [class*="alireview"],
cart-drawer [id*="yotpo"],
cart-drawer [class*="yotpo"],
cart-drawer [id*="spr-"],
cart-drawer [class*="spr-"],
.cart-drawer [class*="jdgm"],
.cart-drawer [id*="judgeme"],
.drawer__footer [class*="jdgm"],
.drawer__footer [id*="judgeme"],
.drawer__footer [class*="loox"],
.drawer__footer [id*="loox"],
#CartDrawer [class*="jdgm"],
#CartDrawer [id*="judgeme"] {
    display: none !important;
}

/* Policy page container overrides */
.shopify-policy__container {
    max-width: 1000px !important;
    margin-bottom: 40px !important;
}

/* ==========================================================================
   Mega menu width (Almiora)
   The mega menu panel was stretched to the whole header width (sized by dt-mega-menu.js + --page-width) and its
   grid was 6 columns wide for only 5 items (4 link columns + promo image), which left a huge empty area on the
   right and big gaps between columns. Keep the JS-sized wrapper transparent and make the visible panel a compact,
   centered box whose columns share the width evenly.
   ========================================================================== */
@media screen and (min-width: 990px) {
  ul.dt-nav > li.has-mega-menu > div.sub-menu-block {
    background: transparent !important;
  }
  ul.dt-nav > li.has-mega-menu > div.sub-menu-block .submenu_inner {
    width: min(1240px, 100%) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    left: auto !important;
  }
  /* The list is <ul class="sub-menu-lists dt-sc-column six-column"> (NOT .mega-menu-brands), so base.css made it a
     6-track grid even though there are only 5 items. Use flex instead: link columns share the width with a gap
     between them and the promo image is pushed to the far right. */
  ul.dt-nav > li.has-mega-menu > div.sub-menu-block .dt-sc--main-menu--mega > ul.sub-menu-lists.dt-sc-column {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    column-gap: 3rem !important;
    padding: 30px 40px !important;
  }
  ul.dt-nav > li.has-mega-menu > div.sub-menu-block .dt-sc--main-menu--mega > ul.sub-menu-lists.dt-sc-column > li {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  ul.dt-nav > li.has-mega-menu > div.sub-menu-block .dt-sc--main-menu--mega > ul.sub-menu-lists.dt-sc-column > li.dt-sc-menu-image-with-text {
    flex: 0 0 230px !important;
    width: 230px !important;
    margin-left: auto !important;
  }
  /* component-mega-menu.css gives the FIRST column's heading 20px top padding (li:first-child > a) vs 12px for the others,
     which is why "Necklaces" sat lower than "Rings / Earrings / Bracelets". Same top padding for every column. */
  ul.dt-nav > li.has-mega-menu > div.sub-menu-block .dt-sc--main-menu--mega > ul.sub-menu-lists.dt-sc-column > li > a {
    padding-top: 12px !important;
  }
  /* rounded panel (bottom corners; the top edge sits flush under the header line) */
  ul.dt-nav > li.has-mega-menu > div.sub-menu-block .submenu_inner {
    border-radius: 0 0 16px 16px !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   Cart page footer + drawer suggestions (Almiora)
   ========================================================================== */

/* The theme draws an offset outline (.button::before/::after) behind every button - remove it in the cart footer, drawer CTAs, discount box and drawer suggestions */
#main-cart-footer .button::before,
#main-cart-footer .button::after,
.cart-drawer .cart__ctas .button::before,
.cart-drawer .cart__ctas .button::after,
.cart-sidebar-discount .button::before,
.cart-sidebar-discount .button::after,
.cart-drawer__collection .button::before,
.cart-drawer__collection .button::after {
  content: none !important;
  display: none !important;
}

/* Check out: maroon (same as "Buy it now"), no colour change on hover */
#main-cart-footer .cart__checkout-button,
#main-cart-footer .cart__checkout-button:hover,
.cart-drawer .cart__checkout-button,
.cart-drawer .cart__checkout-button:hover {
  background: #61020F !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin-left: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Continue shopping: outlined gold */
#main-cart-footer .title-wrapper-with-link a.button,
#main-cart-footer .title-wrapper-with-link a.button:hover {
  background: transparent !important;
  color: #6B1620 !important;
  border: 1.5px solid #B08D3E !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin: 0 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Discount code box (cart page + drawer) */
.cart-sidebar-discount input.discount-code {
  width: 100% !important;
  height: 50px !important;
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  padding: 0 16px !important;
  text-align: left !important;
  background: #ffffff !important;
  border: 1px solid rgba(176, 141, 62, 0.7) !important;
  border-radius: 10px !important;
}
.cart-sidebar-discount input.discount-code:focus,
.cart__footer .cart-sidebar-discount input.discount-code:focus {
  outline: none !important;
  border: 1px solid #B08D3E !important;
  box-shadow: 0 0 0 3px rgba(176, 141, 62, 0.18) !important;
}
#apply-discount-btn,
#apply-discount-btn:hover {
  width: 100% !important;
  min-height: 50px !important;
  margin-left: 0 !important;
  background: linear-gradient(135deg, #E3C589 0%, #B08D3E 55%, #8A6B2E 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Cart page footer columns: align to the top (the note had a 7rem top margin and Continue Shopping a 5rem one) */
@media screen and (min-width: 750px) {
  #main-cart-footer .cart__footer {
    align-items: flex-start;
  }
  #main-cart-footer .cart__footer cart-note.cart__note.field {
    margin-top: 0 !important;
  }
  #main-cart-footer .cart__footer .title-wrapper-with-link {
    margin: 0 !important;
  }
}

/* Cart drawer "you may also like" card: clean white card, gold Add to Cart (was a black block with underlined text) */
.cart-drawer__collection .card-wrapper .card {
  background: #ffffff !important;
  border: 1px solid rgba(176, 141, 62, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.cart-drawer__collection .card::after,
.cart-drawer__collection .card__inner::after {
  content: none !important;
}
.cart-drawer__collection .card__inner {
  border: 0 !important;
  box-shadow: none !important;
}
.cart-drawer__collection .quick-add__submit,
.cart-drawer__collection .quick-add__submit:hover,
.cart-drawer__collection .quick-add__submit:focus {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 1rem 1.6rem !important;
  background: linear-gradient(135deg, #E3C589 0%, #B08D3E 55%, #8A6B2E 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.cart-drawer__collection .quick-add__submit span {
  text-decoration: none !important;
}
.cart-drawer__collection .swiper-pagination-bullet-active {
  background: #B08D3E !important;
}

/* ==========================================================================
   Text links inside rich text (Almiora)
   component-rte.css turns EVERY link inside an .rte block into a beige uppercase button (padding, min-height 5rem,
   background). In policy pages, blog posts, page content and product tabs that made inline words like "here" or an
   email address look like stray buttons. Make them normal inline text links again (real buttons keep their .button class).
   ========================================================================== */
.rte a:not(.button),
.rte a:not(.button):hover {
  display: inline !important;
  background: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  color: #6B1620 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
}
.rte a:not(.button):hover {
  text-decoration-thickness: 0.2rem !important;
}

/* ==========================================================================
   Filter drawer opens from the left (Almiora)
   component-facets.css slides .mobile-facets__inner in from the right (margin-left:auto pins it to the right edge,
   and the closed state is translateX(105vw) - off-screen to the right). Mirror both so it opens from the left.
   ========================================================================== */
.mobile-facets__inner {
  margin-left: 0 !important;
  margin-right: auto !important;
  border-width: 0 var(--drawer-border-width) 0 0 !important;
}

.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
  transform: translateX(-105vw) !important;
}

/* ==========================================================================
   Filter drawer sits above the sticky header (Almiora)
   The theme only demotes the sticky header (z-index:1) when body has class "filter-clicked", but that class is
   wired to a DIFFERENT filter UI (.toggleFilter / .facets-vertical sidebar) in dt-theme.js. The collection page
   Filter drawer (<menu-drawer> / .mobile-facets, opened via a native <details>) never triggers it, so the sticky
   header (z-index:3) showed through on top of the drawer. Demote the header directly whenever this drawer is open,
   and raise the drawer's own z-index as a second safety net.
   ========================================================================== */
body:has(.mobile-facets__wrapper .disclosure-has-popup[open]) .shopify-section-header-sticky {
  z-index: 1 !important;
}

.mobile-facets {
  z-index: 9999 !important;
}

/* The header still painted on top even at z-index 9999 (some ancestor is trapping the stacking context, or the
   sticky class only gets added by JS past a scroll threshold). Side-step the whole z-index question: hide the
   header outright while the drawer is open, using the same reliable :has() open-state check. */
body:has(.mobile-facets__wrapper .disclosure-has-popup[open]) .header-wrapper {
  visibility: hidden !important;
}

/* ==========================================================================
   Mobile header: logo stays in the single icon row (Almiora)
   At <=750px base.css puts .header__heading on its own full-width row (grid-row:1, grid-column:1/4) and pushes
   .header__icons to row 2 - logo centered above, hamburger/search/wishlist/cart below. Put both back in the
   single row (matching the desktop/default "left-icon heading icons" template).
   ========================================================================== */
@media screen and (max-width: 750px) {
  .header__heading,
  .header__heading-link {
    grid-row: 1 !important;
    grid-column: auto !important;
    grid-area: heading !important;
  }

  .header__icons {
    grid-row: 1 !important;
    grid-column: auto !important;
    grid-area: icons !important;
  }
}

/* ==========================================================================
   Active filter pills: one sliding row on mobile (Almiora)
   component-facets.css makes .active-facets a flex-wrap:wrap row, so each active filter ("Category: Earrings",
   "Category: Necklaces", ...) stacked on its own line inside the mobile Filter And Sort drawer. Single horizontal,
   swipeable row instead.
   ========================================================================== */
.active-facets-mobile {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.active-facets-mobile::-webkit-scrollbar {
  display: none !important;
}

.active-facets-mobile .active-facets__button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   Footer logo smaller on mobile (Almiora)
   The logo image caps at the Theme Editor "logo_width" setting (220px) via an inline style - fine on desktop,
   too big relative to a narrow phone screen. Cap it smaller on mobile only, without touching the setting/desktop size.
   ========================================================================== */
@media screen and (max-width: 749px) {
  .footer_link img {
    max-width: 120px !important;
  }
}

/* Product card titles: single line on mobile so every card in a row matches height (Almiora) */
@media screen and (max-width: 749px) {
  .card__heading,
  .card__heading a,
  .overlay-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
}

/* Footer logo centered on mobile - only the logo, not the rest of the footer block (Almiora) */
@media screen and (max-width: 749px) {
  .footer_link {
    display: flex !important;
    justify-content: center !important;
  }
}

/* Header sits above page content (Almiora)
   The desktop mega menu panel lives inside ul.dt-desktop-menu (position:relative; z-index:2) and .header-wrapper had no
   z-index of its own, so the whole menu shared the root stacking level with page sections. Any later section with
   position:relative + z-index:2 (e.g. the About page "Our Story" block) painted over the open dropdown. Give the
   header its own higher stacking level so the dropdown always opens above the page. */
.header-wrapper {
  z-index: 20;
}

/* Blog listing + single article: rounded images (Almiora)
   Scoped to .main-blog (blog listing) and .article-template (single article) so cards elsewhere are untouched.
   Radius goes on the overflow:hidden wrappers as well as the <img> so the hover zoom stays clipped to the rounded shape. */
.main-blog .article-card__image-wrapper,
.main-blog .article-card__image,
.main-blog .article-card__image .article__image,
.article-template [class*="article-template__hero-"],
.article-template .article-template__hero-container img,
.article-template .article-template__content img {
  border-radius: 16px;
}
.main-blog .article-card__image-wrapper,
.main-blog .article-card__image,
.article-template [class*="article-template__hero-"] {
  overflow: hidden;
}
/* small "recent posts" thumbnails in the sidebar (shown on both pages) */
.main-blog .article-item .article-image img,
.article-template .article-item .article-image img {
  border-radius: 10px;
}

/* "Follow Us" Instagram handle section on the homepage: centred (Almiora)
   section-rich-text.css forces every rich-text block after the first to text-align:left, which left the handle
   sitting on the left under a centred "Follow Us" heading. Scoped to this one section by its id (the wrapper is a <section>, so no "div" prefix). */
[id*="rich_text_XUjjnt"] .rich-text__blocks > * {
  text-align: center;
}

/* Space below the homepage Instagram feed (Almiora)
   The feed is an Instafeed app block whose own bottom margin is 0, so the next section sat right against the last row
   of photos. Padding on the wrapping <section> (matched by its id, no "div" prefix) gives it breathing room. */
[id*="179033063492bb2502"] {
  padding-bottom: 60px;
}
@media screen and (max-width: 749px) {
  [id*="179033063492bb2502"] {
    padding-bottom: 40px;
  }
}

/* Product page: Add to wishlist + Share sit together now that Add to compare is gone (Almiora)
   .dT_VProdWishList / .dT_VProdCompareList both had width:100% so three items (wishlist, compare, share) split the row
   evenly. With compare removed the wishlist block alone stretched over the free space and pushed Share to the far right. */
.product__info-container .icon-with-text .dT_VProdWishList {
  width: auto;
  flex: 0 0 auto;
}