/** Shopify CDN: Minification failed

Line 602:15 Unexpected "}"
Line 4735:19 Expected identifier but found "{"
Line 4735:20 Unexpected "{"
Line 4735:30 Expected ":"

**/
.Sohni-class{
  text-decoration:underline !important;
  text-underline-offset:3px;
}
button.product__popup_upsell_drawer {
    border: none;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 11px;
    cursor: pointer;
    padding: 0px;
    /* text-transform:uppercase; */
}
.cart-notification-wrapper .cart-notification {
    background: white;
}

@font-face {
  font-family: "Montserat";
  src: url("https://cdn.shopify.com/s/files/1/0585/9049/4804/files/montserat_regular.woff2?v=1752309122")
    format("woff2");
  font-style: normal;
}

.page-width {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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

.product {
  width: 100%;
  max-width: 1600px; /* Adjust as needed */
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .product {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .product {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }
}

.right-things-product {
  width: 100%;
  order: 1;
}

.grid__item.product__media-wrapper {
  width: 100%;
  order: 2;
}

.product__info-wrapper.grid__item {
  width: 100%;
  order: 3;
}

/* For desktop layout */
@media (min-width: 992px) {
  .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    position: sticky;
    top: 60%;
    transform: translateY(-50%) !important;
  }
  /* Left slider: override sticky+translateY, position right column absolutely so
   * it can flex-center its content within the full viewport-height gallery column.
   * 5-class specificity beats the 4-class sticky rule above on every property. */
  .product--left-gallery .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--gallery-split, 50%) !important;
    right: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  /* Left scroll: same override but sticky instead of absolute — right column
   * stays on screen while the user scrolls through the image stack. */
  .product--scroll-gallery .product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    position: sticky !important;
    top: var(--header-height, 66px) !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .right-things-product {
    order: 1;
  }

  .grid__item.product__media-wrapper {
    order: 2;
  }

  .product__info-wrapper.grid__item {
    order: 3;
  }

  /* Ensure equal spacing */
  .right-things-product,
  .grid__item.product__media-wrapper,
  .product__info-wrapper.grid__item {
    padding: 0 15px;
  }
}

/* Center align all content */
.product__title,
.product__media-gallery,
.product__info-container {
  display: flex;
  flex-direction: column;
}
.product__info-container {
  gap: 10px;
}
.product__info-container > div {
  margin: 0 !important;
}
/* Make sure media doesn't overflow */
.product__media-wrapper .product__media {
  max-width: 100%;
  height: auto;
}

.accordion .summary__title {
  transition: 0.2s ease-out !important;
}

@media (max-width: 767px) {
  .container-for-txt-svg {
    margin-bottom: 10px;
  }
  .variant_selects_no_margin {
    margin: 0 !important;
  }
  span.price-item.price-item--regular {
    margin-bottom: 20px;
  }

  .only-show-in-mobile {
    margin: 4px !important;
  }
  .fit-label-text {
    font-size: 1.2rem;
  }
  .only-show-in-mobile .verified svg {
    display: inline !important;
    width: 17px !important;
    height: 17px !important;
  }
  product-form.product-form {
    margin-top: 5px !important;
  }
  form[id^="Quantity-Form-"] {
    margin-bottom: 0px !important;
  }
  .quantity__rules {
    margin-top: 0px !important;
    position: relative;
    font-size: 1.2rem;
  }
  .verified-badge {
    display: inline-block !important;
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .verified-badge {
    position: relative;
    z-index: 1;
  }
}

h2.h4.accordion__title {
  font-weight: 400;
  font-size: 12px;
}
svg.icon-left-right {
  width: 40px !important;
  height: 17px !important;
}

/* model reference bar */
.pulse-model-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-inline: 14px;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm, 4px);
}
.pulse-model-bar--split {
  justify-content: space-around;
}
.pulse-model-bar__slot {
  flex: 1;
  text-align: center;
}
.pulse-model-bar__divider {
  width: 1px;
  height: 1.4em;
  flex-shrink: 0;
  margin: 0 2px;
}

/* main-product styling */

@media screen and (min-width: 990px) {
  .product__info-container [id^="price-"] {
    margin-bottom: 1rem;
  }
  .product--large:not(.product--no-media) .product__info-wrapper {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) / 2) !important;
  }
}
@media screen and (min-width: 990px) {
  .grid__item.product__media-wrapper {
    width: 32.33% !important;
  }
  .right-things-product {
    width: 25%;
    position: sticky;
    height: 100%;
    top: 60%;
    transform: translateY(-50%);
  }
  .right-things-product {
    /* max-height: 97vh; */
    /* overflow-y: auto; */
  }
  /* ── Left gallery layout overrides ── */
  .product--left-gallery .right-things-product {
    position: static !important;
    transform: none !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
  }
  .product--left-gallery .grid__item.product__media-wrapper {
    width: 100% !important;
  }
  .product--large:not(.product--no-media) .product--left-gallery .product__info-wrapper,
  .product--left-gallery .product__info-wrapper.grid__item {
    width: 100% !important;
  }
  .product--stacked .product__media-item {
    max-width: calc(
      100% - var(--grid-desktop-horizontal-spacing) / 2
    ) !important;
  }
  .product__media-gallery .slider .product__media-item {
    width: 100% !important;
  }
  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    width: 100% !important;
  }
  .only-show-in-mobile {
    display: none;
  }
  .product__title {
    /* margin-top: 3.5rem; */
  }
}
.only-show-in-desktop {
  display: block;
}
.only-show-in-mobile {
  display: none;
}
@media (max-width: 767px) {
  .only-show-in-desktop {
    display: none;
  }
}
@media (max-width: 768px) {
  .only-show-in-mobile {
    display: block;
  }
}
.mobile-facets__main{
  overflow-x:hidden;
}
.icon-with-text {
  display: flex;
  align-items: center;
  border: 1px solid #007bff;
  padding: 10px;
  border-radius: 5px;
  width: fit-content;
  font-family: sans-serif;
}

.icons {
  display: flex;
  margin-right: 10px;
}

.icons img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* margin-left: -8px; */
  border: 2px solid white;
}

.text {
  font-size: 1.6rem;
  letter-spacing: 0.1px;
}

.verified {
  color: #3191e7;
  margin-left: 0px;
}
.container-for-txt-svg {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.container-for-txt-svg .text {
  min-width: 0;
}
.container-for-txt-svg .text p {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.purchased-count {
  font-weight: bold;
}

legend.form__label {
  text-align: left;
}

fieldset.js.product-form__input.product-form__input--pill {
    text-align: left;
    margin-bottom: 20px !important;
}

.product__title h1,
.related-products__heading.h1 {
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 100%;
  text-align: left;
  margin-bottom: 10px;
}
.price--large {
  line-height: 100% !important;
  font-size: 15px !important;
}
span.price-item.price-item--regular {
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0px;
}
variant-selects label {
  text-transform: uppercase;
  font-size: 12px !important;
}
.color___label_value, span.color___label {
    text-transform: uppercase;
}
.variant__Color .swatch-input__label span.swatch {
    margin-bottom: 5px;
}

/* ── Clean minimal swatches (Represent-inspired) ── */
.product-form__input--swatch {
  --swatch-input--size: 2.8rem;
}
/* Thinner border */
.swatch {
  border-width: 0.5px !important;
  border-color: rgba(var(--color-foreground), 0.12) !important;
}
/* Sharp square: zero radius */
.swatch-input__input + .swatch-input__label.swatch-input__label--square {
  --swatch-input--border-radius: 0 !important;
}
.swatch--square {
  --swatch--border-radius: 0 !important;
}
/* Selected: thin offset outline */
.swatch-input__input:checked + .swatch-input__label,
.swatch-input__input:active + .swatch-input__label {
  outline: 1px solid rgb(var(--color-foreground)) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.swatch-input__input + .swatch-input__label:hover,
.swatch-input__input:hover + .swatch-input__label {
  outline: 1px solid rgba(var(--color-foreground), 0.3) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.swatch-input__input:focus-visible + .swatch-input__label {
  outline: 1px solid rgb(var(--color-foreground)) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* ── Variant dropdown — clean minimal redesign ── */
.pulse-vdrop {
  margin-bottom: 2rem;
}
.pulse-vdrop__label {
  display: block;
}
.pulse-vdrop__wrap {
  position: relative;
  border: 1px solid #000000;
  min-height: 4.4rem;
}
.pulse-vdrop__select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 1.3rem 4rem 1.3rem 1.5rem !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  outline: none;
  min-height: unset !important;
  height: 4.4rem;
  line-height: 1 !important;
  display: block;
}
.pulse-vdrop__select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.pulse-vdrop__icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  color: rgb(var(--color-foreground));
}

/* ── Variant image swatches (Represent-style: flush, only selected has border) ── */
.product-form__input--variant-img {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.6rem !important;
}
/*
 * section-main-product.css line 1547 nukes margin-bottom on all
 * fieldset.js.product-form__input at ≤749px with (0,2,1) + !important.
 * These rules use specificity (0,3,1) to win at every breakpoint.
 */
fieldset.js.product-form__input.product-form__input--variant-img {
  margin-bottom: 2.4rem !important;
}
fieldset.js.product-form__input.product-form__input--pill {
  margin-bottom: 2rem !important;
}
/* Hard reset — nothing from pill/underline/boxed mobile styles bleeds in */
.product-form__input--variant-img input[type="radio"] + .variant-img-swatch {
  outline: none !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border-bottom: none !important;
}
.variant-img-swatch {
  position: relative;
  display: inline-block;
  width: 5rem;
  height: 6.25rem;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  /* transparent border so layout is stable — only color changes on select */
  border: 1px solid transparent !important;
  outline: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.variant-img-swatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  box-sizing: border-box;
}
.variant-img-swatch__text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000000;
  line-height: 1;
}
/* Selected: outline outside the box, no layout shift */
.product-form__input--variant-img input[type="radio"]:checked + .variant-img-swatch {
  box-shadow: 0 0 0 1px currentColor !important;
  z-index: 1 !important;
}
/* Sold-out */
.variant-img-swatch--soldout {
  cursor: not-allowed;
}
.variant-img-swatch--soldout img {
  opacity: 0.45;
}
.variant-img-swatch__slash {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  clip-path: polygon(0% 100%, 0.75px 100%, 100% 0.75px, 100% 0%, calc(100% - 0.75px) 0%, 0% calc(100% - 0.75px));
  pointer-events: none;
}
.fit-label,
legend.form__label {
  font-weight: 400;
  margin-bottom: 10px;
  font-family: var(--font-heading-family);
  display: block;
  font-size: 11px;
  line-height: 100%;
  letter-spacing: 0px;
  text-transform: uppercase;
}
/* span.color___label {
    text-transform: uppercase;
    font-size: 10px;
} */
.product__title.only-show-in-mobile {
  width: calc(80% - 10px);
}
.accordion {
  margin-top: 0px !important;
}

.form__label span, .variant__Size .form__label, .variant__LEGTH .form__label, .product-form__input .form__label{
  font-family: var(--font-heading-family);
} 

               }
.fit-scale-wrapper {
  margin: 10px 0 30px;
  font-family: inherit;
  width: 100%;
  padding-bottom: 10px;
}

.fit-bar {
  display: flex;
  justify-content: space-between;
  gap: 3px; /* spacing between segments */
  margin-top: 5px;
}

.fit-segment {
  flex: 1;
  text-align: center;
  font-size: 12px;
  padding: 0.1px;
  position: relative;
  height: 2px;
  background: #EEEFEE;
  border-radius: 30px;
}

.fit-segment.active {
  height: 2px;
  position: relative;
  border-radius: 30px !important;
}
span.small-label-one {
  width: 100%;
  left: 0;
  text-align: left;
}
.product-popup-modal__content-info th,
.accordion__content th {
  font-weight: 100;
}
span.small-label-two {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
@media(min-width: 1450px){
  span.small-label-two {
    /* left: -5px; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.fit-label-text {
  text-transform: uppercase;
  position: absolute;
  top: 8px;
  white-space: nowrap;
  font-size: 1.1rem;
}
  span.fit-label-text.small-label-three {
    right: 0;
}
.accordion * {
    font-size: 1.2rem;
}
@media (max-width: 767px) {
  /* .fit-scale-wrapper {
    margin-bottom: 40px;
} */
  .text {
    font-size: 1.2rem;
    letter-spacing: 0.1px;
  }
  .fit-scale-wrapper {
    width: 100%;
  }
 /* span.fit-label-text.small-label-two  {
    right: 3px;
        left: initial !important;
  } */

  variant-selects label {
    text-transform: uppercase;
    font-size: 9px !important;
  }
  .product-add-to-custom-button {
    margin: 0 !important;
  }
  .product-form__buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.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);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.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);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

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

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

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

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

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

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

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

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

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

@media screen and (min-width: 990px) {
 .header:not(.drawer-menu).page-width {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}

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

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

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

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

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

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

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

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

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.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.5rem;
  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(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(
    calc(var(--font-heading-scale) * 5.6rem),
    14vw,
    calc(var(--font-heading-scale) * 7.2rem)
  );
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

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

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

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

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

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

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

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

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

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

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

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

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

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: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

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

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

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.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.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.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: 10px;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
  recommendation-slider.swiper.related__products__slider > div {
    flex-wrap: nowrap;
  }
  .grid__item.swiper-slide:not(.related-products .grid__item.swiper-slide) {
    max-width: 100% !important;
    padding-inline: 2rem;
    box-sizing: border-box;
  }
}

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

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

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

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

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

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

.circle-divider::after {
  content: "\2022";
  margin: 0 1.3rem 0 1.5rem;
}

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

.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: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow)
    forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  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);
  transform: translateY(-50%);
}

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

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

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

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

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

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

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

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

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

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

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

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

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

  .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 {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

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

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

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

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

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

.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: 990px) {
  .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);
  }
}

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

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

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .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);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

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

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

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }


  .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 {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}
@media screen and (max-width: 500px) {
.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
.related-products .grid--2-col-tablet-down .grid__item {
    width: calc(42% - var(--grid-mobile-horizontal-spacing) / 2) !important;
} 
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 501px) and (max-width: 989px) {
li.collection-list__item.grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing));
}
}
@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;
  }

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

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

/* component-media */
.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--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.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);
  --shadow-visible: var(--buttons-shadow-visible);
  --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;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.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-shadow), var(--shadow-opacity));
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button: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;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  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));
}

.button:after,
.shopify-challenge__button: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) + 1px)
      rgba(var(--color-button), var(--alpha-button-background));
}

.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,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.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,
.quantity__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__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

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

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

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

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;
  min-width: 1.3rem;
}

.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-shadow), 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 {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.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-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

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

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

.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__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 + var(--inputs-border-width))
    rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.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: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  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: 1.5rem;
  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) + 2rem);
  top: calc(1rem + 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: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input: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: 2.2rem 1.5rem 0.8rem 2rem;
  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: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > svg {
  height: 2.5rem;
  width: 2.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-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(14rem / 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.5rem);
}

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

.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-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  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;
}

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

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: "\2022";
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

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

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

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

.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: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "announcements";
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: "social-icons announcements language-currency";
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "social-icons language-currency";
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

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

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}
body:has(.shopify-section-header-sticky:has(:not(.shopify-section-header-hidden))) .section-scrolling-banner:has(.marquee-container.sticky_announcement_bar){
    z-index:4;
}
.shopify-section-header-sticky:has(.shopify-section-header-hidden){
  z-index:3 !important;
}
.shopify-section-header-sticky:has(:not(.shopify-section-header-hidden)){
  z-index:5 !important;
}
.shopify-section-header-sticky {
  position: sticky;
  top: 0px;
  background:white;
  z-index:4 !important;
  padding:0px !important;
}
@media (min-width:750px){
  .shopify-section-header-sticky {
    padding:10px 0px;
 }
}
.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

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

.header {
  display: grid;
  grid-template-areas: "left-icons heading icons";
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
  .menu-drawer .menu-drawer__menu .menu-drawer__menu-item {
    z-index: 4;
}
  .menu-drawer .menu-drawer__menu .menu-drawer__submenu{
    z-index: 5;
}
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      "heading icons"
      "navigation navigation";
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: "heading navigation icons";
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      "left-icons heading icons"
      "navigation navigation navigation";
  }

  .header--top-center.drawer-menu {
    grid-template-areas: "left-icons heading icons";
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center)
    .header__inline-menu {
    margin-top: 1.05rem;
  }
}

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

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

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  /* padding-right: 0.8rem; */
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

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

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.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: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

account-icon {
  display: flex;
}

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

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

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

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

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__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;
}

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

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

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

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

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

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

  .header--middle-left .header__inline-menu {
    margin-left: 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));
  z-index: -1;
}

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

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

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

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

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.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-desktop {
  overflow: hidden;
}

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

@media screen and (min-width: 990px) {
  .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.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
  text-transform:uppercase;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
}

@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;
  pointer-events: none;
}

.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,
.global-media-settings .placeholder-svg {
  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,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  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);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .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: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: "";
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid
    rgba(var(--color-foreground), var(--media-border-opacity));
  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));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url("#Shape-Arch");
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > svg {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > svg {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease,
      box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease,
      box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0),
      0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift
    .collage__item
    .card-wrapper:hover
    .card--standard
    .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift
    .card-wrapper
    .card--shape.card--standard:not(.card--text)
    .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease,
      filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease,
      filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15))
      drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--standard
    .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease,
      opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--standard
    .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url("./sparkle.gif");
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift
    .card-wrapper:hover
    .card--standard
    .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift
    .card-wrapper:active
    .card--standard
    .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift
    .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift
    .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift
    .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift
    .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift
    .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    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));
  }

  .animate--hover-vertical-lift
    .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

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

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite
    ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

@media only screen and (min-width: 800px) {
  .grid {
    margin-top: 0px;
  }
  ul#product-grid {
    width: -webkit-fill-available;
}
}

/* ── Variant style: Underline — visual rules (all screen sizes) ── */
variant-selects:not(.variant-selects--boxed) .product-form__input input[type="radio"] + label:not(.variant-img-swatch):not(.swatch-input__label) {
  border: none !important;
  background: transparent !important;
}

variant-selects:not(.variant-selects--boxed) .product-form__input input[type="radio"]:checked + label:not(.variant-img-swatch):not(.swatch-input__label) {
  border-bottom: 1.5px solid var(--underline-color-size, rgb(var(--color-foreground))) !important;
  border-radius: 0 !important;
}

variant-selects:not(.variant-selects--boxed) .product-form__input[data-product-input="color"] input[type="radio"]:checked + label {
  border-bottom: none !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ── Variant style: Underline — mobile layout (same compact row as boxed) ── */
@media screen and (max-width: 749px) {
  variant-selects:not(.variant-selects--boxed) fieldset.product-form__input--pill {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 0 1.6rem 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  variant-selects:not(.variant-selects--boxed) fieldset.product-form__input--pill legend.form__label {
    flex: 0 0 100% !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(var(--color-foreground), 0.5) !important;
    font-weight: 400 !important;
  }

  variant-selects:not(.variant-selects--boxed) .product-form__input--pill input[type="radio"] + label {
    flex: 1 1 0% !important;
    min-width: 2.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 4rem !important;
    padding: 0 0.4rem !important;
    font-size: 1.15rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: rgba(var(--color-foreground), 0.65) !important;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.15) !important;
    transition: color 0.12s ease, border-color 0.12s ease !important;
    text-decoration: none !important;
    position: relative !important;
  }

  /* Reset: HTML disabled attribute must NOT trigger sold-out visuals */
  variant-selects:not(.variant-selects--boxed) .product-form__input--pill input[type="radio"]:disabled:not(.disabled) + label {
    opacity: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    color: rgba(var(--color-foreground), 0.65) !important;
  }

  variant-selects:not(.variant-selects--boxed) .product-form__input--pill input[type="radio"]:checked + label {
    color: rgb(var(--color-foreground)) !important;
    border-bottom: 1.5px solid var(--underline-color-size, rgb(var(--color-foreground))) !important;
    border-radius: 0 !important;
  }

  variant-selects:not(.variant-selects--boxed) .product-form__input--pill input[type="radio"].disabled:not(:checked) + label {
    opacity: 0.3 !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
    border-bottom-color: transparent !important;
  }
  /* :checked always wins over unselected sold-out styles */
  variant-selects:not(.variant-selects--boxed) .product-form__input--pill input[type="radio"]:checked + label {
    opacity: 1 !important;
    text-decoration: none !important;
  }
  /* Selected + sold-out: dimmed so it's honest (matches "SOLD OUT" button state) */
  variant-selects:not(.variant-selects--boxed) .product-form__input--pill input[type="radio"].disabled:checked + label {
    opacity: 0.5 !important;
    text-decoration: line-through !important;
    color: rgb(var(--color-foreground)) !important;
    border-bottom: 1.5px solid rgba(var(--color-foreground), 0.4) !important;
  }
}

/* ── Variant style: Boxed (mobile only) ── */
@media screen and (max-width: 749px) {
  .variant-selects--boxed .product-form__input--pill {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  .variant-selects--boxed .product-form__input--pill input[type="radio"] + label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--vbox-border, #cccccc) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: rgb(var(--color-foreground)) !important;
    border-radius: 2px !important;
    padding: 0.7rem 1.1rem !important;
    font-size: 1.3rem !important;
    min-width: 4rem !important;
    height: 3.6rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    letter-spacing: 0.03em !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
  }

  .variant-selects--boxed .product-form__input--pill input[type="radio"] + label::before {
    display: none !important;
  }

  /* Reset: HTML disabled attribute must NOT trigger sold-out visuals */
  .variant-selects--boxed .product-form__input--pill input[type="radio"]:disabled:not(.disabled) + label {
    color: rgb(var(--color-foreground)) !important;
    border-color: var(--vbox-border, #cccccc) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
  }
  .variant-selects--boxed .product-form__input--pill input[type="radio"]:disabled:not(.disabled) + label::after {
    display: none !important;
  }

  .variant-selects--boxed .product-form__input--pill input[type="radio"]:checked + label {
    background: var(--vbox-selected-bg, #000000) !important;
    background-color: var(--vbox-selected-bg, #000000) !important;
    color: var(--vbox-selected-text, #ffffff) !important;
    border-color: var(--vbox-selected-bg, #000000) !important;
    border-bottom-color: var(--vbox-selected-bg, #000000) !important;
    border-radius: 2px !important;
  }

  /* Selected + sold-out: dimmed background to signal unavailability */
  .variant-selects--boxed .product-form__input--pill input[type="radio"].disabled:checked + label {
    background: rgba(0, 0, 0, 0.38) !important;
    background-color: rgba(0, 0, 0, 0.38) !important;
    border-color: rgba(0, 0, 0, 0.38) !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .variant-selects--boxed .product-form__input--pill input[type="radio"].disabled:not(:checked) + label {
    color: var(--vbox-soldout, #bbbbbb) !important;
    border-color: var(--vbox-soldout, #bbbbbb) !important;
    text-decoration: none !important;
    cursor: not-allowed !important;
  }

  /* :checked always wins */
  .variant-selects--boxed .product-form__input--pill input[type="radio"]:checked + label::after {
    display: none !important;
  }

  .variant-selects--boxed .product-form__input--pill input[type="radio"].disabled:not(:checked) + label::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--vbox-soldout, #bbbbbb) !important;
    clip-path: polygon(0% 100%, 1.5px 100%, 100% 1.5px, 100% 0%, calc(100% - 1.5px) 0%, 0% calc(100% - 1.5px)) !important;
    pointer-events: none !important;
  }
}
.card-information > .price {
  text-align: center;
}
.card__heading {
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  /* Margins zeroed — vertical rhythm is now driven by `gap` on the
     parent .card__information / .main_info_alignment_data flex
     containers (see rules below). Using gap instead of per-element
     margins avoids the stacking-with-existing-bottom-margins
     inconsistency we hit on mobile, where .price's default
     margin-bottom (only zeroed by Dawn on desktop) was adding extra
     space below the price. */
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width:990px){
  .collection-list .card__heading{
    font-size:14px !important;
  }
.card__content span.price-item.price-item--regular {
  font-size: 12px !important;
}
}
.card__content span.price-item.price-item--regular {
  font-family: var(--font-body-family);
  font-weight: 100 !important;
  font-size: 16.69px;
}
.full-unstyled-link {
  letter-spacing: normal;
}
@media (min-width:1200px){
      ul#product-grid{
        padding-right:0;
      }
      /* .collection.custom_collection_grid.page-width {
    padding: 0;
} */
.custom_collection_grid:has(.collection_link_list) .collection_link_list {
    max-width: 200px !important;
    width: 100%;
}
}


 .badge.card_sale_badge {
  color:var(--sale_badge_color);
  background-color:var(--sale_badge_bgcolor);
}
.badge.card_soldout_badge {
  color:var(--soldout_badge_color);
  background-color:var(--soldout_badge_bgcolor);
}
.badge.card_soldout_badge, .badge.card_sale_badge{  
  border-radius:var(--badges_border_radius);
} 
.filter_color *{
  color:var(--filter_text_clr) !important;
}
.variant_selects_no_margin {
    margin: 0!important;
    padding-top: 7px;
}

  .scrolling_banner_text {
    z-index: 2;
    position: relative;
}
.header__heading-logo-wrapper img {
    width: 100%;
    height: fit-content;
}
.cart_drawer_footer_note {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 2rem;
}
.cart-drawer .tax-note {
    font-size: 12px;
    margin: 0rem !important;
    text-align: right !important;
}
@media (min-width:990px){
  .collection.custom_collection_grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  .collection_link_list_width {
    width: 100%;
    max-width: 200px;
  }
  .product.custom_product_class {
    align-items: flex-start;
}
.related-products .card__heading{
  font-size:14px;
}
}
@media (max-width:749px){
.facets-container{
    width:100%; 
}
}
 .countdown_timer_wrapper .modal__content {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    right: unset;
    bottom: unset;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
}

 
 @media screen and (max-width: 989px) {
  .related-products .card__heading{
  font-size:12px;
}
 details-modal.header__search {
    display: none;
}
}
 @media screen and (min-width: 1600px) {
/* .footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width:100%;
} */
 }
 @media screen and (min-width: 500px) {
div#shopify-section-footer {
    /* position: sticky;
    bottom: 0; */
    top: 100%;
    width: 100%;
    /* max-width: 2000px; */
    /* margin: auto; */
}
 }

.js details[open].menu-opening>.mobile-facets__submenu{
  background-color:{{ settings.drawer_backg_colr | default: settings.filter_drawer_bg }};
}

.custom_cart_drawer_cls .drawer__inner{
background-color:var(--drawer-bg-colorrr);
}
.custom_cart_drawer_cls *{
  color:var(--drawer-color-custommm) !important;
}
.custom_cart_drawer_cls path{
  fill:var(--drawer-color-custommm);
}
.drawer__header {
    border-bottom: 1px solid var(--drawer-color-border);
}
.addto_cart_items:not(:first-child) {
    border-top: 1px solid var(--drawer-color-border);
}
.addto_cart_items:last-child {
    border-bottom: 1px solid var(--drawer-color-border);
    padding-inline:3rem;
}

.custom_cart_drawer_cls .cart__checkout-button{
  background-color:var(--drawer_chec_btn_bg);
  color:var(--drawer_chec_btn_clr) !important;
}
.cart-item__price-wrapper span.price.price--end.my-custom-price-font{
  font-size:10px;
}
.custom_cart_drawer_cls .drawer__footer {
    border-top: 1px solid var(--drawer-color-border);
}
.quantity-in-flex-- {
    display: flex;
    gap: 10px;
}
.quantity-in-flex-- .quantity {
    margin-top: 5px;
    min-height: 0;
}
.quantity-in-flex-- .quantity-popover-container {
    max-width: 12rem;
}
.quantity-in-flex-- .quantity-popover-container .quantity__input {
    font-size: 10px;
}
.quantity-in-flex-- .quantity-popover-container a:not([href]) {
    cursor: pointer;
}
.quantity-in-flex-- .cart-item cart-remove-button {
    margin: 0;
}
.quantity-in-flex-- #editing-view-port {
    font-size: 10px;
}
.quantity-in-cart-drawer {
    font-size: 10px;
    width: 50px;
    margin: 5px 0 0;
}
/* Cart-drawer line-item "Remove" link.
   Flex row so the trash icon sits beside the word; text-decoration
   underline (instead of the previous bottom-border, which spanned the
   icon and looked like a horizontal line under the whole row). The
   underline is now scoped to the word itself via .__text. */
.meri-cart-remove-class {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 150ms ease;
}
.meri-cart-remove-class:hover {
    opacity: 1;
}
.meri-cart-remove-class .icon-remove {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}
.meri-cart-remove-class__text {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
@media (min-width:750px){
.quantity-in-flex--  cart-remove-button{
  margin:0px !important;
}
.product_page_size_chart .product-popup-modal__content{
    width: 50%;
    height: auto;
    padding-bottom: 3rem;
}
.product_page_size_chart .product-popup-modal__content-info{
  width:90%;
  margin:auto;
}
}
span.price.price--end.my-custom-price-font {
    font-size: 14px;
}
#CartDrawer-Checkout,facet-filters-form :where(summary,button,.mobile-facets__header-inner,.mobile-facets__clear,.mobile-facets__clear){
  text-transform:uppercase;
}
.facets__label:hover span.facet-checkbox__text-label {
    text-decoration: none !important;
}
/* overlay opacity */
form#FacetFiltersFormMobile {
    background: #00000040;
}
/* Product page  */
@media (max-width:990px){
.product__description.rte.quick-add-hidden.product_right_description.only-show-in-mobile p {
    margin-top: 10px;
}
fieldset.js.product-form__input.variant__size {
    margin-top: 20px;
}
}


  .size-chart {
    width: 350px;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #d9d9d9;
  }

  .size-chart th,
  .size-chart td {
    border: 1px solid #d9d9d9;
    padding: 8px 10px;
  }

  .size-chart th p,
  .size-chart td p {
    margin: 0;
  }

  .size-chart th {
    text-align: left;
  }

  .size-chart td:nth-child(2),
  .size-chart td:nth-child(3) {
    text-align: center;
  }
 .product__accordion .accordion__content table.size-chart {
    width: 100% !important;
}
@media (max-width:500px){
.size-chart td p{
      margin:0px;
  }
  
  .size-chart td {
    padding: 8px 0px 8px 10px !important;
    font-size: 11px;
  }
  .size-chart th{
    padding: 8px 0px 8px 10px !important;
    font-size: 10px;
  }
  h1.main-page-title.size_chart_heading {
    margin-bottom: 13px;
    font-size: 27px;
}
  table.size-chart{
    width:290px !important
  }
  
}
.product-popup-modal:not([open]) {
  display: none;
}
body {
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}

.password-modal__content .modal__close-button .icon path {
    fill: black;
}


@media (max-width:1600px){
#MainContent .custom_product_class {
  max-width:1300px
}
#MainContent .product-add-to-custom-button{height:48px;}
}

.template-index .footer{margin-top:0 !important;}



/* ── Card swatches (unified: metafield + variant modes) ──────────────
   Goal:
     • Default: a single line of "+N Colorways" text below price,
       aligned exactly with the title's first character.
     • Desktop hover: text instantly swaps for the row of swatches in
       the same horizontal position. No layout shift.
     • Mobile: count text is hidden, swatches always visible inline.
     • Metafield mode and variant mode look IDENTICAL — same paddings,
       same alignment, same hover behavior, same swatch sizing.

   Why no absolute positioning: the previous version positioned the
   swatch row absolutely with `inset-inline-start: 4px` to overlay
   the count. That's brittle (parent positioning, double-padding) and
   was the source of the misalignment. Replacing with display-toggle
   makes the layout dead simple — count and swatch row occupy the
   same flow position; only one is shown at a time.

   Why no padding on .wrapper_imagination_color: it's a transparent
   grouping wrapper around variant-mode .card_color. Padding here
   ADDS to .card_color's own padding, pushing variant-mode swatches
   past where the title sits. Keep all padding on .card_color only. */
.wrapper_imagination_color {
    margin: 0;
    padding: 0;
}
/* .card_color itself is a flex container. With one child visible at a
   time (count text OR swatch row), justify-content on the container
   directly controls horizontal placement of whichever is shown.
   Block-level so it spans the full content-box width of its parent
   .card__information — therefore inherits the title's padding-inline. */
.card_color {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    /* margin-top zeroed — vertical rhythm is driven by `gap` on
       .card__information (see below). */
    margin-top: 0;
    width: 100%;
    color: var(--color-foreground);
    line-height: 1.4;
    /* min-height removed: previously `var(--cust_swatch_width, 1.3rem)`
       reserved 20-28px of vertical space here even when only the small
       +N Colorways count text was visible, and `align-items: center`
       pushed that text down to the middle — adding 3-7px of phantom
       gap above the swatch row that we couldn't eliminate via the
       flex `gap` on the parent. Without min-height, .card_color
       shrinks to its content height (the dots have their own width/
       height from .color-item, so the row still sizes correctly). */
}
.card-information .price {
    margin-bottom: 0;
}

/* (Unified vertical rhythm rules moved to the end of this file — they
   need to come AFTER the @media (max-width: 749px) mobile-alignment
   block below, otherwise rules there with same specificity + !important
   win the source-order tie and clobber the gap/flex-direction.) */

/* Count text — visible by default. Inline-flex so the parent's
   justify-content can position it horizontally. */
.card_color .color_count {
    display: inline-flex !important;
    align-items: center;
    font-size: 1.1rem;
    color: var(--color-foreground);
    line-height: 1.4;
    white-space: nowrap;
}

/* Hide the orphaned <input type="checkbox"> that toggles the swatch
   "+N more" expansion — it's a UA element, never user-visible. */
.card_color .swatch-toggle-input {
    display: none !important;
}

/* The two swatch row containers — hidden by default. On hover they
   become inline-flex so the parent .card_color can position them
   the same way it positions the count text. */
.card_color .card_colors,
.card_color .main_impact_spacing {
    display: none !important;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    /* Override legacy absolute positioning baked into older rules. */
    position: static !important;
    inset: auto !important;
    width: auto !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible;
    margin: 0;
    padding: 0;
}
/* Variant mode: the actual swatch row sits one level deeper, inside
   .main_impact_spacing. Reset that inner element too. */
.card_color .main_impact_spacing .card-grid-options-size {
    display: flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: inherit !important;
    overflow: visible;
    padding: 0;
    gap: 4px;
}

/* Desktop hover: count → swatches. */
@media (hover: hover) {
    .product-card-wrapper:hover .card_color .color_count {
        display: none !important;
    }
    .product-card-wrapper:hover .card_color .card_colors,
    .product-card-wrapper:hover .card_color .main_impact_spacing {
        display: inline-flex !important;
    }
}

/* Touch: always show swatches, hide count text. */
@media (hover: none) {
    .card_color .color_count {
        display: none !important;
    }
    .card_color .card_colors,
    .card_color .main_impact_spacing {
        display: inline-flex !important;
    }
}

/* Color circle (or rounded square per merchant border-radius2 setting). */
.color-item {
    flex: 0 0 var(--cust_swatch_width, 1.3rem) !important;
    width: var(--cust_swatch_width, 1.3rem) !important;
    height: var(--cust_swatch_width, 1.3rem) !important;
    max-width: var(--cust_swatch_width, 1.3rem) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--border_radius_swatch, 50%);
    cursor: pointer;
    box-sizing: border-box;
    padding: 0;
    vertical-align: middle;
}
/* Active swatch selection indicator. Uses an outline (not a thicker
   border) so it doesn't reflow neighboring swatches and so it sits
   OUTSIDE the visible swatch shape — a clear ring rather than a
   recoloured edge. Works for BOTH modes:
     • metafield mode: <variant-image class="card_variant-image"> —
       has an inner <img>, handleState marks both element + img.
     • variant-color mode: <variant-image class="color-item"> —
       no inner <img>, handleState now marks the element itself
       (was previously only marking inner img → outline never
       landed on variant-color swatches → user reported "no
       indicator on variant mode"). */
.color-item.current-active-color {
    outline: 1px solid var(--active-border-color);
    outline-offset: 2px;
    border-color: var(--active-border-color);
}

/* Per-card alignment — drives BOTH text-align (for count) and
   justify-content (for the swatch row). Single source of truth.
   !important so this wins over any legacy rules. */
.card_color.text-alignment--left {
    justify-content: flex-start !important;
    text-align: start !important;
}
.card_color.text-alignment--center {
    justify-content: center !important;
    text-align: center !important;
}
.card_color.text-alignment--right {
    justify-content: flex-end !important;
    text-align: end !important;
}
variant-image.card_variant-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-options-wrapper {
    position: absolute;
    bottom: 0;
    z-index: 2;
    right: 0;
    display:block;
    cursor: pointer;
}
.quick-add-btn {
    font-size: 0;
    /* The wrapper has `pointer-events: none` for products without
       inline option pills (Ajmal's original behavior — see the
       :has() rule in card-product.liquid). Without overriding here,
       the + button is non-interactive on those products. Restoring
       interactivity at this child level lets the + still fire hover
       and click while keeping the rest of the empty wrapper area
       transparent to clicks (so the underlying image link still
       receives them). */
    pointer-events: auto !important;
}
.button-unstyled {
    background-color: transparent;
    color: inherit;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font: inherit;
}
.quick-add-btn button {
    padding: 1.5rem 1rem;
}
.quick-add-btn svg {
    width: 2rem;
    height: auto;
}
quick-add ul {
    margin-bottom: 0 !important;
    overflow-y: hidden;
}
.card-grid-options-size {
    display: none;
    flex-flow: row nowrap;
    overflow-x: auto;
    flex: none;
    width: 100%;
    /* Always left-align: when pills overflow, `justify-content: center`
       hides the first size at the start of the scroll (the row scrolls
       to its midpoint by default), so a 5-size product like XS S M L XL
       would open with only S M L visible — looking like 3 sizes total
       with no swipe affordance. flex-start guarantees the first size is
       visible and overflow falls off to the right, where the fade mask
       below signals "swipe for more". */
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: auto;
    scrollbar-width: auto;
    padding-bottom: .2rem;
    /* Enable horizontal swipe on touch devices when pills overflow.
       Without explicit pan-x, the browser may capture the touch for
       vertical scroll only — making the size row unscrollable when
       the user wants to swipe through more sizes than fit on screen. */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
/* Right-edge fade hint — applied ONLY inside the quick-buy panel where
   the size pills live. Color swatches in variant-color mode use the
   same `.card-grid-options-size` class (inside `.card_color`, not
   inside `.card-options-wrapper`), so scoping with `.card-options-wrapper`
   keeps the swatch row crisp while still hinting overflow on the size
   pills. When pills fit, the fade lands on empty space and is invisible. */
.card-options-wrapper .card-grid-options-size {
    mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
}
/* Single-pill products (e.g. socks with one "One Size" variant) look
   awkward left-aligned in an otherwise empty row. Center them, and
   drop the right-edge fade because there's nothing to scroll to. */
.card-options-wrapper .card-grid-options-size:has(.card__size-value:only-child) {
    justify-content: center;
    mask-image: none;
    -webkit-mask-image: none;
}
/* Desktop: center the pill row when there are 5 or fewer pills (they
   reliably fit in the wider desktop panel). On hover-capable devices
   the panel is roomy enough that left-aligned XS would leave dead
   space on the right. With 6+ pills, flex-start (the default above)
   takes over so the row still scrolls from the first pill. The fade
   mask still applies — when pills fit, the fade lands on empty space
   and stays invisible. */
@media (hover: hover) and (pointer: fine) {
  .card-grid-options-size:not(:has(.card__size-value:nth-child(6))) {
    justify-content: center;
  }
}
.card-grid-options-size:has(.color-item){
  gap:1px;
}
.card__size-value {
    scroll-snap-align: start;
    flex: none;
    position: relative;
}
/* .card-grid-options-size>:first-child {
    margin-left: auto;
} */
/* .card-grid-options-size>:last-child {
    margin-right: auto;
} */
@media screen and (min-width: 750px) {
    .card__size-value button {
        min-height: 3rem;
    }
    .card-options-wrapper.quick-buy--active {
        padding: 2rem 1rem 1.5rem;
    }
    .card__size-value button {
    min-height: 3rem;
  }
}
.quick-buy--active .card-grid-options-size{
  display: flex;
}
.quick-buy--active .quick-add-btn{
  display: none;
}
.card-options-wrapper.quick-buy--active {
    background:var(--color-foreground);
    padding: 1rem 1rem;
    left: 0;
}
/* No-op the expand for products without inline option pills. Even if
   something adds .quick-buy--active to those wrappers, the expand
   visuals stay reverted and the + button stays in place. Matches the
   user expectation: products without sizes should not show a hover
   panel at all — only the + click adds. */
.card-options-wrapper:not(:has(.card-grid-centered ul)).quick-buy--active {
    background: transparent;
    padding: 0;
    left: auto;
}
.card-options-wrapper:not(:has(.card-grid-centered ul)).quick-buy--active .quick-add-btn {
    display: block;
}
/* Pure-CSS hover expand — redundant fallback that works without ANY
   JS. Triggers when the wrapper has inline pills AND is hovered.
   Matches what .quick-buy--active does but doesn't depend on the
   custom element's connectedCallback or any document delegation.
   For products without inline pills, :has() doesn't match and this
   rule is a no-op — preserving the "no hover panel for no-size
   products" behavior. Gated on (hover: hover) so touch devices —
   which synthesize hover events as a finger drags across the panel —
   don't keep re-triggering the expand state and interfering with
   horizontal swipes between size pills. On mobile, the panel opens
   via tap on the + button (handled by the JS click delegation). */
@media (hover: hover) and (pointer: fine) {
  .card-options-wrapper:has(.card-grid-options-size [data-value]):hover {
      background: var(--color-foreground);
      padding: 1rem 1rem;
      left: 0;
  }
  .card-options-wrapper:has(.card-grid-options-size [data-value]):hover .quick-add-btn {
      display: none;
  }
  .card-options-wrapper:has(.card-grid-options-size [data-value]):hover .card-grid-options-size {
      display: flex;
  }
}
.card__size-value :is(button) {
    position: relative;
    font-size: .8rem;
    text-align: center;
    min-width: 4rem;
    color:var(--color-variants);
    padding: .6rem 1rem;
    /* Keep every label on one line — when a single-pill product is named
       "One Size" or a multi-pill product has long names like "Extra Large",
       the row is a horizontal scroller, so wrapping to two lines would
       distort pill heights and look broken. */
    white-space: nowrap;
    border: .1rem solid var(--color-border);
    background: var(--color-background);
    transition: background-color .3s ease;
    text-transform: uppercase;
}
/* Reset Dawn's `.swatch` circle sizing from component-swatch.css for
   TEXT pills only. That file styles every `.swatch` as a 4.4rem
   fixed-width 1:1 circle. The text size pill <button> has
   class="swatch ..." so it inherits the circle — any label longer
   than ~4.4rem ("One Size", "Extra Large") spills past the colored
   background. Color swatches stay circular because they have the
   .color-item override; we scope this reset to buttons WITHOUT
   .color-item. !important is needed because component-swatch.css
   declares width at equal specificity and load order isn't guaranteed. */
.card__size-value > button.swatch:not(.color-item) {
    width: max-content !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
}
.card-grid-options-size .card__size-value+.card__size-value button {
    border-left: 0;
}
/* .card__size-value button:hover,button.swatch-button.swatch.is-active{
    background-color: var(--color-border);
} */
/* Sold-out size pill / color swatch styling inside the quick-buy panel.
   The Liquid template adds `disabled` to the <button> when the variant
   is unavailable (or missing — the `unless value.variant.available`
   check treats nil + false the same). Visual treatment:
     • Diagonal line across the pill (works for both text pills and
       color swatches, where text-decoration can't reach).
     • text-decoration: line-through as a backup for text pills.
     • Faded text color so available pills feel more "active".
   The line's `height: 141.42%` is √2 × button height — spans the
   diagonal at 45° regardless of button aspect ratio. Uses
   `--color-border` from the <quick-buy> wrapper's inline style with a
   neutral fallback. */
.card__size-value :is(button[disabled],div[disabled]) {
    color: rgba(0, 0, 0, 0.4) !important;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: var(--color-border, rgba(0, 0, 0, 0.5));
    text-decoration-thickness: 1px;
}
.card__size-value :is(button[disabled],div[disabled])::before {
    content: '';
    display: block;
    position: absolute;
    height: 141.42%;
    width: 1.5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: var(--color-border, rgba(0, 0, 0, 0.55));
    pointer-events: none;
    z-index: 2;
}
.swatch-color.swatch.button-unstyled {
    width: var(--width);
    height: var(--width);
    border-radius: 50%;
}
@media screen and (max-width: 749px) {
    /* (Old card_colors visibility / color_count opacity rules removed —
       the unified swatch block above uses (hover: none) MQ to handle
       touch devices via display toggle.) */
    .card__size-value :is(button) {
        max-height: 3rem;
    }
}
.card__information.text-alignment--left .main_info_alignment_data  {
    display: flex;
    align-items: baseline;
  }
 .wrapper_prise_alignment .price__container {
    margin-top: 6px;
}
.card__information.text-alignment--left {
    padding-inline: 4px !important;
}

.cart_sininig_text {
  width:50%;
}
.card__information.text-alignment--left .price .price-item {
 margin: 0;
} 

/* LTR (default) alignment rules — merchant's left/center/right setting
   maps directly to physical left/center/right text alignment. */
.card__information.text-alignment--right {
  text-align: end;
}
.card__information.text-alignment--left h3.card__heading{
  text-align: start;
  width:100%;
}

 .card__information.text-alignment--center h3.card__heading{
  text-align:center;
}

.card__information.text-alignment--left .wrapper_prise_alignment {
  text-align: end;
}
.card__information.text-alignment--center .wrapper_prise_alignment {
  text-align:center;
}
.card__information.text-alignment--right h3.card__heading {
  text-align: end;
}
.card__information.text-alignment--right .wrapper_prise_alignment {
  text-align: start;
}

/* RTL (Arabic): center EVERYTHING in the product card regardless of the
   merchant's chosen alignment. Title on its own row centered, price
   stacked beneath it (also centered), color swatches centered. LTR is
   completely untouched. */

/* The "left" alignment is the only one that uses display:flex on the
   .main_info_alignment_data container — title and price sit side-by-side.
   Switching to block in RTL makes them stack vertically. */
[dir="rtl"] .card__information.text-alignment--left .main_info_alignment_data {
  display: block !important;
}

/* Center the text inside the card information block. */
[dir="rtl"] .card__information.text-alignment--left h3.card__heading,
[dir="rtl"] .card__information.text-alignment--right h3.card__heading,
[dir="rtl"] .card__information.text-alignment--left,
[dir="rtl"] .card__information.text-alignment--right {
  text-align: center !important;
}
[dir="rtl"] .card__information.text-alignment--left .wrapper_prise_alignment,
[dir="rtl"] .card__information.text-alignment--right .wrapper_prise_alignment,
[dir="rtl"] .card__information.text-alignment--left .card-information,
[dir="rtl"] .card__information.text-alignment--right .card-information {
  text-align: center !important;
}
/* Center the actual `.price` block too — Shopify's price snippet
   renders this independently and may have its own internal alignment. */
[dir="rtl"] .card__information .price,
[dir="rtl"] .card__information .price .price__container,
[dir="rtl"] .card__information .price__regular,
[dir="rtl"] .card__information .price__sale {
  text-align: center !important;
  justify-content: center !important;
}
/* Center color swatches row. */
[dir="rtl"] .card_color.text-alignment--left,
[dir="rtl"] .card_color.text-alignment--right {
  justify-content: center !important;
  text-align: center !important;
}




.swatch-toggle-input {
  display: none;
}

/* Overflow swatches (index > 5) — hidden by default in BOTH modes.
   The toggle below reveals them when the merchant clicks the "+N" label,
   which flips the sibling .swatch-toggle-input checkbox via its `for=`. */
.swatch-extra {
  display: none !important;
}

/* +N more label — sized to match the swatches so the grid stays visually
   balanced. --cust_swatch_width is set on the parent container
   (.card_colors in metafield mode, .card-grid-options-size in color-
   variation mode) so the label inherits it via the cascade. Font size
   scales as a fraction of the swatch width so the label always reads
   as proportionally smaller than the swatch — no matter what swatch
   size the merchant picks (8px → ~6px, 28px → ~9px, 40px → ~13px).
   Subtle by design: regular weight, lower opacity, no border. It's a
   text indication, not a CTA. */
.swatch-more-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* clamp(): keep the label readable on small swatches (12px floor),
     still scale up if the merchant picks larger swatches (cap at 16px),
     and grow at ~45% of the swatch width in between. The earlier pure
     proportional sizing (0.32 of swatch width) gave ~9px on the default
     28px swatch — too small to read on mobile. */
  font-size: clamp(12px, calc(var(--cust_swatch_width, 28px) * 0.45), 16px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-foreground);
  opacity: 0.7;
  width: var(--cust_swatch_width, 28px);
  height: var(--cust_swatch_width, 28px);
  background: transparent;
  border: 0;
  transition: opacity 0.2s ease;
}
.swatch-more-label:hover {
  opacity: 1;
}
/* Mobile: tighten the floor / scale / cap so the label reads as a
   subtle indication rather than a chunky badge at touch sizes. */
@media (max-width: 749px) {
  .swatch-more-label {
    font-size: clamp(10px, calc(var(--cust_swatch_width, 28px) * 0.38), 13px);
  }
}

/* Toggle reveal: when the hidden checkbox is checked, show the overflow
   swatches and hide the +N label. The ~ combinator works for both modes
   because .swatch-toggle-input is a sibling of the swatch container in
   each case (.card_colors for metafield, .main_impact_spacing for
   color-variation). */
.swatch-toggle-input:checked ~ .card_colors .swatch-extra,
.swatch-toggle-input:checked ~ .main_impact_spacing .swatch-extra {
  display: inline-flex !important;
}
.swatch-toggle-input:checked ~ .card_colors .swatch-more-label,
.swatch-toggle-input:checked ~ .main_impact_spacing .swatch-more-label {
  display: none !important;
}
.product-card-wrapper .card__content input[type="checkbox"] {
    display: none;
    width: auto;
    margin-right: 0.5rem;
}
/* (Old variant-mode hover rules removed — unified block above
   handles `display: flex !important` + `position: absolute` + the
   hover fade for both metafield and variant modes consistently.) */
.card-grid-centered .card-grid-options-size:has(.color-item) {
    gap: 3px;
}
/* (Removed `.card_color .card-grid-options-size { margin-top: 3px }`
   — it was adding a 3px offset to variant-mode swatches, breaking
   their vertical alignment with the count text. The unified swatch
   block above keeps them on the same row.) */

.text-alignment--center .main_info_alignment_data .card-information > .price {
    text-align: center;
}
.text-alignment--left .main_info_alignment_data .card-information > .price {
    text-align: right;
}

/* ── Card image click navigation ──
   Why this is non-trivial: the card has two .card__content divs.
   The FIRST one (`.card__inner > .card__content`) is a flex sibling
   of `.card__media`. Because `.card__inner.ratio` is a flex container
   with `align-items: stretch`, that .card__content stretches to the
   full image area. Its only VISIBLE children are the badge (corner)
   and <quick-buy> (bottom-right); the .card__information inside it
   is `display: none` for media cards. So .card__content is a
   transparent overlay that paints AFTER .card__media in DOM order
   — capturing every click meant for the image. That's why only the
   title (which lives in the SECOND .card__content, below the image)
   was clickable.

   Fix: make the overlay transparent to clicks on empty space, while
   keeping its real interactive children hit-targetable. The image
   click is then handled either by a wrapping <a> (which we can't
   use because the gallery has <button> chevrons inside) or — what
   we do here — by .card__media itself acting as the link target
   via data-product-url + JS handler in global.js. */
.card__media[data-product-url] {
    cursor: pointer !important;
}
.card__inner > .card__content {
    pointer-events: none;
}
.card__inner > .card__content quick-buy,
.card__inner > .card__content .card__badge,
.card__inner > .card__content .card__information {
    pointer-events: auto;
}
/* ── Mobile content-alignment override for product cards ──
   The Desktop alignment class (`text-alignment--left/center`) on the
   .card__information div drives THREE things, not just one:
     1. `text-align` on .card__information / h3 / .price
     2. `display: flex` vs default block on .main_info_alignment_data
        (left = flex side-by-side title/price, center = block stacked)
     3. h3 `width: 100%` when desktop-left (so flex item takes full row)
   Just overriding text-align on mobile leaves the layout (flex/block)
   wrong, so the mobile choice looks inconsistent. This block re-applies
   ALL three behaviors based on the mobile class. !important needed
   because both classes sit on the same element with equal specificity. */
@media (max-width: 749px) {
  /* Swatch row alignment */
  .card_color.text-alignment-mobile--left {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .card_color.text-alignment-mobile--center {
    justify-content: center !important;
    text-align: center !important;
  }
  /* Mobile-LEFT: side-by-side layout, left-aligned title, right-aligned price (mirrors desktop-left). */
  .card__information.text-alignment-mobile--left .main_info_alignment_data {
    display: flex !important;
    align-items: baseline;
  }
  .card__information.text-alignment-mobile--left h3.card__heading {
    text-align: left !important;
    width: 100% !important;
  }
  .card__information.text-alignment-mobile--left .main_info_alignment_data .card-information > .price {
    text-align: left !important;
  }
  /* Mobile-CENTER: stacked block layout, centered title + centered price (mirrors desktop-center). */
  .card__information.text-alignment-mobile--center .main_info_alignment_data {
    display: block !important;
  }
  .card__information.text-alignment-mobile--center h3.card__heading {
    text-align: center !important;
    width: auto !important;
  }
  .card__information.text-alignment-mobile--center .main_info_alignment_data .card-information > .price {
    text-align: center !important;
  }
}

/* (Old "BRUTE FORCE" block removed — its blanket `flex-direction:
   column !important` on .main_info_alignment_data was overriding the
   alignment-specific layout rules in theme.liquid's head <style>,
   keeping desktop-left stacked instead of side-by-side. The current
   spacing/layout rules live in theme.liquid head <style> + the
   inline <style> at the top of card-product.liquid. Margin/padding
   zeroing for the gap consistency is also handled there. */

/* ============================================================
   Judge.me visual overrides (Pulse Premium)
   ============================================================
   Smaller, sharper-edged stars across every Judge.me touchpoint
   (preview badge on product cards, product-page summary, review
   widget per-review stars). Judge.me's default star renders at
   ~16-18px and uses slightly rounded SVG strokes. These rules:
     • shrink star font-size (Judge.me uses font-size as the
       single source of star size — works on both SVG and webfont
       implementations across versions)
     • force `stroke-linejoin: miter` so star tips are POINTED
       not curved
     • zero out any border-radius applied to the SVG fill
     • tighten letter-spacing so star clusters feel denser

   Selectors are deliberately broad — Judge.me has shipped many
   markup variants over the years (preview-badge, prev-badge,
   star-rating, jdgm-star). Catch them all and apply the same
   visual contract. !important is required because Judge.me's
   own stylesheet loads AFTER ours and would otherwise win.
============================================================ */
.jdgm-widget,
.jdgm-prev-badge,
.jdgm-preview-badge,
.jdgm-rev-widg,
.jdgm-review-widget {
  font-family: inherit !important;
}

/* Star size — font-size on the star container is what scales the
   icon. 12px feels premium on cards; the product-page widget gets
   a slightly larger size below. */
.jdgm-star,
.jdgm-prev-badge__stars,
.jdgm-prev-badge .jdgm-star,
.jdgm-preview-badge .jdgm-star,
.jdgm-rev__rating,
.jdgm-rev-widg__summary-stars {
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* Sharper edges on SVG-based stars — newer Judge.me versions
   render stars as SVG paths with rounded joins. Miter joins keep
   star tips as crisp points. */
.jdgm-star svg,
.jdgm-prev-badge__stars svg,
.jdgm-rev-widg__summary-stars svg {
  stroke-linejoin: miter !important;
  stroke-linecap: square !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* Product-page summary stars — slightly larger so the headline
   star rating reads as a focal element (still well under
   Judge.me's default ~18px). */
.jdgm-rev-widg .jdgm-rev-widg__summary-stars,
.jdgm-rev-widg__summary-stars .jdgm-star {
  font-size: 14px !important;
}

/* Per-review row stars inside the widget body — keep tight so
   each review feels compact. */
.jdgm-rev__header .jdgm-rev__rating,
.jdgm-rev__rating .jdgm-star {
  font-size: 11px !important;
}

/* Remove any inherited filter (drop-shadow on hover, etc.) that
   would soften the edge. */
.jdgm-star,
.jdgm-preview-badge,
.jdgm-rev-widg {
  filter: none !important;
}
/* RTL-CARD-CENTER-1779655253 */
/* RTL-CARD-STACK-1779655433 */