/** Shopify CDN: Minification failed

Line 1682:11 Expected identifier but found whitespace
Line 1682:12 Unexpected "linear-gradient("

**/


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

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

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

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

.underlined-link:hover {
  color: rgb(var(--color-link));
}


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

table:not([class]) {
  border-collapse: collapse;
  font-size: 1.4rem;
  border: 0.1rem solid rgb(var(--color-foreground), 0.2);
}

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

.placeholder-svg {
  fill: currentColor;
}

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

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

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

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

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

*:focus-visible, .block-editing {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: var(--outline-focus-offset, 0.3rem);
}

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

.skip-to-content-link--all {
  margin: 1rem 0 0 1rem;
}

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

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

/*
  Focus ring - inset
*/
.main-product-carousel {
  background: white !important;
}
.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

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

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

/*
  Focus ring - none
*/

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

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

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

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

/* Highlight elements */

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

a.light:hover {
  opacity: 1;
}

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

summary .icon-caret {
  transition: transform 500ms cubic-bezier(.03,.93,.97,1);
}
/* component-button */
/* Button - default */

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

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

.button.loading .icon, .button.loading span {
  opacity: 0;
}

/* ============================================================
   Button hover — v2 (full coverage + visible text + no slide)
   Find each "BEFORE" block in your theme CSS and replace with "AFTER".
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1) The gradient pseudo-element
   ───────────────────────────────────────────────────────────── */

/* BEFORE — find and DELETE
.button:not(.ignore-effect):not(:disabled):before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0px !important;
  background: linear-gradient(95deg, #00B58F 1.07%, #3395CF 27.35%, #F291C2 67.54%, #F8BE00 100%);
  transition: top 800ms cubic-bezier(.03,.93,.97,1);
  font-weight: 600;
  border-radius: 5px;
}
*/

/* AFTER — paste this in its place */
.button:not(.ignore-effect):not(:disabled):before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0px !important;
  /* Two stacked layers: 38% white "frost" on top + full-opacity gradient below.
     Net result: gradient still fully covers the button (no black bleed),
     but reads as a softened/glassy version of the original colors. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
    linear-gradient(95deg, #00B58F 1.07%, #3395CF 27.35%, #F291C2 67.54%, #F8BE00 100%);
  opacity: 0;
  transition: opacity 320ms ease;
  border-radius: inherit;
  font-weight: 600;
  pointer-events: none;
  z-index: 0;
}

/* Make sure the button text and icons sit ABOVE the ::before overlay */
.button:not(.ignore-effect):not(:disabled) {
  isolation: isolate;
}
.button:not(.ignore-effect):not(:disabled) > * {
  position: relative;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────
   2) The hover trigger
   ───────────────────────────────────────────────────────────── */

/* BEFORE — find and DELETE
.button:not(.ignore-effect):not(:disabled):hover:before {
  top: 0;
}
*/

/* AFTER — paste this in its place */
.button:not(.ignore-effect):not(:disabled):hover:before {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   3) The focus state — same softened gradient, full opacity
   ───────────────────────────────────────────────────────────── */

/* BEFORE — find and DELETE
.button:focus-visible,
.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 {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
}
*/

/* AFTER — paste this in its place */
.button:focus-visible,
.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 {
  background:
    linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38)),
    linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
}


/* ─────────────────────────────────────────────────────────────
   Note: the existing `color: white` rule already in your theme

     .button:not(.ignore-effect):not(:disabled):hover {
       color: white;
     }

   should now work — the text sits above the ::before because of
   the z-index/position rules added above.
   ───────────────────────────────────────────────────────────── */

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

.button .loading-overlay__spinner svg {
  height: 100%;
  width: 100%;
}

.button.loading > .loading-overlay__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  width: min(5rem, 50%);
}

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

.button:focus-visible,
.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 {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;

}

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

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

.button.loading:disabled,
.button.loading[aria-disabled='true'],
.button.loading.disabled {
  opacity: 1;
}

.shopify-challenge__button:hover {
  color: rgb(var(--color-button));
  background-color: rgb(var(--color-button-text));
}

/* Section heading */

.title__buttons {
  z-index: 1;
}

/* component-form */

.field {
  transition: box-shadow 100ms ease;
}

.field__input,
.select__select,
.customer .field input,
.customer select,
.spr-form-input {
  transition: box-shadow 100ms ease;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
  padding: 0.5rem 1rem;
}

.form-status-list {
  padding: 0;
  margin: 1rem 0 0;
}

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

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

/* Field */

.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__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 {
  min-height: 10rem;
  resize: none;
}

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

/* component-quantity */

.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__button {
  transition: background-color 300ms ease;
}

.quantity__button:hover:not(:active) {
  background-color: rgb(var(--color-foreground), .1);
}

.quantity__button:active {
  background-color: rgb(var(--color-foreground), .5);
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  z-index: 2;
}

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

/* Search */

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

.header__search > details .modal__close-button.link {
  z-index: 1;
}

/* Header sticky */
.shopify-section-header-sticky .hide-in-sticky {
  display: none;
}

/* Main header layout */

/* section-header */

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

sticky-header {
  min-height: var(--sticky-header-height-mobile, auto);
}

sticky-header header {
  background: rgb(var(--color-background));
}

.section-header.animate header {
  transition: transform 500ms cubic-bezier(.03,.93,.97,1), top 500ms cubic-bezier(.03,.93,.97,1);
}

.shopify-section-header-sticky header {
  position: fixed;
  top: 0;
}

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

.header-top {
  z-index: 5;
}

.header__toggle-nav-button {
  height: 4.4rem;
  transition: width 500ms ease, opacity 500ms ease, visibility 500ms ease, margin 500ms ease;
}

.header__toggle-nav-button .icon-close-state {
  display: none;
}

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

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

@media(min-width: 990px) {
  sticky-header {
    min-height: var(--sticky-header-height-desktop, auto);
  }

  .shopify-section-header-sticky .header--top-left {
    top: -1.1rem;
  }

  .header--top-left .header__inline-menu {
    transition: opacity 500ms ease, visibility 500ms ease, margin-top 500ms ease;
  }

  .shopify-section-header-sticky.toggle-nav .header__toggle-nav-button {
    width: 2.4rem;
    margin-right: 2.5rem;
  }

  .shopify-section-header-sticky.toggle-nav .header__toggle-nav-button:before {
    content: "";
    position: absolute;
    width: 4.4rem;
    height: 4.4rem;
    left: -1rem;
    top: 0;
  }

  .shopify-section-header-sticky.toggle-nav .header__inline-menu {
    margin-top: calc(var(--nav-height) * (-1));
    opacity: 0;
    visibility: hidden;
  }

  .shopify-section-header-sticky.open-nav .header__toggle-nav-button .icon-open-state {
    display: none;
  }

  .shopify-section-header-sticky.open-nav .header__toggle-nav-button .icon-close-state {
    display: block;
  }

  .shopify-section-header-sticky.open-nav .header__inline-menu {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
  }
}

/* Header icons */

.header__icon::after {
  content: none;
}

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

/* Customer support region */

.header__customer-support-region__list {
  --disclosure-direction: 1rem;
  padding: 2rem;
  row-gap: 2rem;
  min-width: 100%;
}

.header__customer-support-region__name {
  font-size: 2.2rem;
}

.header__customer-support-region__hotline {
  font-size: 1.8rem;
}

.header__customer-support-region__address {
  font-size: 1.1rem;
}

.header__customer-support-region__email {
  font-size: 1.4rem;
  color: rgb(var(--color-highlight));
}

@media(max-width: 989px) {
  .header__customer-support-region__list {
    border-top: 1px solid rgb(var(--color-background));
  }
}

@media(min-width: 990px) {
  .header__customer-support-region__list--in-dropdown {
    max-height: calc(100vh - 30rem);
    overflow-y: auto;
  }
}

/* Header menu drawer */

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

.cart-drawer__details[open] summary {
  position: inherit;
}

.cart-drawer__details[open] .cart-count-bubble {
  display: none;
}

.js .mega-menu[open] > .header__submenu, .js .mega-menu.open > .header__submenu, .js .mega-menu[open] > .mega-menu__content, .js .header__submenu__last[open] .header__submenu  {
   animation: none !important;
  transform: translateY(0);
  border-radius: 5px;
}

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

/* Header menu */

.header__submenu {
  transition: opacity 300ms ease,
    transform 300ms ease;
  width: max-content;
  max-width: min(45rem, 35vw);
  background-color: rgb(var(--color-background));
  box-shadow: 0px 0px 5px 0px rgb(var(--color-foreground), 0.15);
  margin-left: -0.9rem;
}

.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
}

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

.header__submenu--last-level {
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}

.header__menu-item--has-last-sub {
  column-gap: 0.7rem;
}

.header__menu-item--has-last-sub > .icon-caret {
  position: static;
}

.header__submenu .header__menu-item {
  padding: 1rem 2.4rem;
}

.header__submenu .icon-caret {
  right: 2.4rem;
}

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

@media screen and (min-width: 990px) {
  .header__submenu--has-go-to-link.list-menu, .mega-menu__content--has-go-to-link {
    padding-bottom: 0;
  }

  .header__goto-link {
    border-top: 1px solid rgb(var(--color-foreground), 0.05);
    padding: 1rem 2.4rem;
  }

  .header__goto-link a {
    font-size: 1.3rem;
    display: inline-flex;
    column-gap: 0.5rem;
  }

  .header__submenu__last[open] > summary .icon-caret {
    transform: rotate(-90deg);
  }
}

@media screen and (min-width: 990px) and (hover: hover) {
  .js .header__submenu--has-go-to-link.list-menu, .js .mega-menu__content--has-go-to-link {
    padding-bottom: 2.4rem;
  }
  
  .js .header__goto-link {
    display: none;
  }
}

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

.global-media-settings--small {
  --border-radius: 15px;
}

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

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

.badge--sale {
  --color-badge-foreground: var(--color-sale-badge-foreground);
  --color-badge-background: var(--color-sale-badge-background);
}

.badge--sold-out {
  --color-badge-foreground: var(--color-sold-out-badge-foreground);
  --color-badge-background: var(--color-sold-out-badge-background);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  word-break: normal;
}

.badge--custom-1 {
  --color-badge-foreground: var(--color-custom-badge-1-foreground);
  --color-badge-background: var(--color-custom-badge-1-background);
}

.badge--custom-2 {
  --color-badge-foreground: var(--color-custom-badge-2-foreground);
  --color-badge-background: var(--color-custom-badge-2-background);
  display: None;
}

.badge--custom-3 {
  --color-badge-foreground: var(--color-custom-badge-3-foreground);
  --color-badge-background: var(--color-custom-badge-3-background);
}

.badge--custom-4 {
  --color-badge-foreground: var(--color-custom-badge-4-foreground);
  --color-badge-background: var(--color-custom-badge-4-background);
}

.badge--custom-5 {
  --color-badge-foreground: rgb(var(--color-custom-badge-5-foreground));
  --color-badge-background: rgb(var(--color-custom-badge-5-background));
}

/* Component scroll over image */

@media(min-width: 750px) {
  use-animate img {
    transition: opacity 500ms ease 100ms, transform 1800ms cubic-bezier(.03,.93,.97,1) 500ms;
  }
  use-animate.loaded img {
    opacity: 1;
    transform: scale(1.0);
  }
}

/* Section announcement and slider component */

.slider-button {
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 2px rgb(var(--color-foreground), 0.07);
  border-radius: 0.6rem;
}

.slider-button--transparent {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.slider-button span {
  transition: transform 0.5s ease;
}

.slider-button--next:not([disabled]):hover span:first-child,
.slider-button--prev:not([disabled]):hover span:last-child {
  transform: rotate(-60deg);
}

.slider-button--next:not([disabled]):hover span:last-child,
.slider-button--prev:not([disabled]):hover span:first-child {
  transform: rotate(60deg);
}

.slider-button--announcement-bar {
  transition: transform 500ms cubic-bezier(.19,1,.22,1);
}

.slider-button--announcement-bar:hover {
  transform: scale(1.3);
}

@media (prefers-reduced-motion) {
  .slider {
    scroll-behavior: auto;
  }
}

.slider-button--next .icon {
  transition: transform 100ms ease;
}

.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
  transition: background-color 0.2s ease-in-out;
}

/* Links */

@keyframes link-hover {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

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

.underlined-link:hover:after {
  content: "";
  position: absolute;
  bottom: -0.1rem;
  width: 10%;
  border-bottom: 1px solid rgb(var(--color-background));
  animation: link-hover .3s linear forwards;
}

/* The underline only showns when hover */

.link-effect-no-underline {
  position: relative;
}

.link-effect-no-underline:before {
  content: "";
  left: 0;
  position: absolute;
  bottom: -0.1rem;
  border-bottom: 1px solid currentColor;
  width: 0;
  transition: width .3s ease-in-out;
}

.link-effect-no-underline:hover:before {
  width: 100%;
}
/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    
  }
  .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 {
    
  }
  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after,
  .spr-form-input:focus {
    outline: transparent solid 1px;
  }
  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.open-drawer-fixed {
  overflow: hidden;
}

/* Component toast message manager */

toast-message-manager {
  position: fixed;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 3rem;
  display: flex;
  flex-direction: column-reverse;
  row-gap: 1rem;
  overflow: hidden;
  z-index: 1001;
}

@media(min-width: 750px) {
  toast-message-manager {
    left: 50vw;
    right: auto;
    transform: translateX(-50%);
  }
}

toast-message {
  transform: translateX(calc(100% + 1rem));
  transition: transform 300ms ease;
  margin: 0.5rem;
  box-shadow: 0px 0px 3px 0px rgb(var(--color-overlay), 0.5);
  border-radius: 5px;
}

toast-message.open {
  transform: translateX(0);
}

.alert {
  --color-link: var(--color-foreground);
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background-message));
  padding: 1.6rem 5rem 1.6rem 3rem;
  position: relative;
  font-size: 1.6rem;
  font-weight: var(--font-body-weight-medium);
  border-radius: 5px;
}

.alert--no-button {
  padding-right: 3rem;
}

.alert--small {
  padding: 1rem 1rem 1rem 1.5rem;
  font-size: 1.4rem;
}

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

.alert--warning {
  --color-foreground: var(--color-text-message-warning);
  --color-background-message: var(--color-background-message-warning);
}

.alert--error {
  --color-foreground: var(--color-text-message-error);
  --color-background-message: var(--color-background-message-error);
}

.alert:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: rgb(var(--color-foreground));
}

.toast__button {
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  border: 0;
  padding: 0.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: calc(50% - 1.5rem);
  right: 1.5rem;
  border-radius: 50%;
  transition: background-color 300ms ease;
  cursor: pointer;
}

.toast__button:hover {
  background-color: rgb(var(--color-foreground), .1);
}

/* Component floating bar */

.floating-element {
  z-index: 2;
  transition: bottom 300ms cubic-bezier(.03,.93,.97,1), opacity 300ms ease, visibility 300ms ease;
}

.floating-element:not(.always-visible) {
  visibility: hidden;
}

.floating-button {
  z-index: 1;
  box-shadow: 0px 0px 3px 0px rgb(var(--color-overlay), 0.1);
  right: 85vw;
}

.floating-button:after {
  content: "";
  position: absolute;
  width: 4.4rem;
  height: 4.4rem;
}

back-to-top.floating-element.open, back-to-top.open ~ .compare-button-floating {
  opacity: 1;
  visibility: visible;
}

back-to-top:not(.open) button, back-to-top:not(.open) ~ .compare-button-floating button {
  pointer-events: none;
}

back-to-top .icon {
  transform: rotate(180deg);
}

@media (max-width: 749px) {
  .floating-element--back-to-top-has-compare {
    bottom: calc(var(--floating-element-position) + 5rem);
  }
}

/* Component card */

.quick-button--view {
  z-index: 2;
}

.compare-add-button {
  cursor: pointer;
}

.compare-added-check {
  right: -0.5rem;
  top: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: rgb(var(--color-foreground), 0.7);
  color: rgb(var(--color-background));
  border-radius: 50%;
  z-index: 1;
}

.compare-added-check .icon {
  width: 1rem;
  height: 0.8rem;
}

.compare-add-button--in-grid:before {
  left: -1.3rem;
  top: -1.3rem;
}

@media(hover: hover) {
  .quick-button--view {
    transition: opacity 300ms ease,
      visibility 300ms ease;
    opacity: 0;
  }

  .quick-view__submit {
    transition: background 300ms ease;
  }

  .quick-view__submit .icon-eye {
    transition: opacity 300ms ease;
  }

  .card-wrapper:hover .quick-button--view {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .quick-view__submit:hover {
    background: rgb(var(--color-background));
  }

  .quick-view__submit:not(.loading):hover .icon-eye {
    opacity: 1;
  }

  .compare-add-button:hover {
    color: rgb(var(--color-foreground));
  }
}

.card__heading a:after, .full-link:after {
  bottom: 0.5rem;
  content: "";
  left: 0.5rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  z-index: 1;
  outline-offset: 0.3rem;
}

.card__heading a:focus:after, .full-link:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus-visible:after, .full-link:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus:not(:focus-visible):after, .full-link:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}

.card__heading a:focus, .full-link:focus {
  box-shadow: none;
  outline: 0;
}

@media screen and (min-width: 990px) {
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform 500ms ease;
  }



  .card-wrapper:hover .card:not(.ignore-second-image)
    .media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .card:not(.ignore-second-image) .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform 500ms ease;
    transform: scale(1.03);
  }
}

@media(hover: hover) and (min-width: 990px) {
  .card-wrapper--product {
    transition: transform 500ms ease;
  }

  



  .card-wrapper--product:after {
    content: "";
    position: absolute;
    top: var(--product-card-shadow-position);
    left: var(--product-card-shadow-position);
    right: var(--product-card-shadow-position);
    bottom: var(--product-card-shadow-position);
    border-radius: 1.2rem;
    background: rgb(var(--color-background));
    z-index: -1;
    opacity: 0;
    visibility: hidden; 
    border: 3px solid;
    transition: opacity 500ms ease;
  }

  .card-wrapper--product:hover:after {

    top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 9999
    height: calc(100% + 8rem - var(--product-card-shadow-position));
    box-shadow: 0 7px 25px 3px rgb(0, 0, 0, var(--product-card-shadow-opacity));
  }

  .grid.contains-card--product.slider--desktop {
    padding-top: 5rem;
    padding-bottom: calc(9rem - var(--product-card-shadow-position));
    margin-top: -5rem;
    margin-bottom: calc(-9rem + var(--product-card-shadow-position));
  }

  .slider-component-desktop:not(.slider-component-full-width) .grid.contains-card--product.slider--desktop {
    margin-left: -5rem;
    padding-left: 5rem;
    scroll-padding-left: 5rem;
    margin-right: -5rem;
    padding-right: 5rem;
  }
}

.contains-card--collection {
  --outline-focus-offset: 0.3rem;
}

/* Component modal */

.modal__close-button.link {
  padding: 0rem;
  height: 4rem;
  width: 4rem;
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  box-shadow: 0.1rem 0.1rem 0.6rem 0 rgb(var(--color-overlay), 0.2);
}

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

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
}

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

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

/* Quick view and quick add button */

.card__quick-buttons {
  z-index: 2;
}

/* Component skeleton box */

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-box {
  overflow: hidden;
  position: relative;
  background-color: rgba(var(--color-foreground), 0.05);
}

.skeleton-box:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgb(var(--color-background), 0) 0,
    rgb(var(--color-background), 0.2) 20%,
    rgb(var(--color-background), 0.5) 60%,
    rgb(var(--color-background), 0)
  );
  animation: shimmer 1s infinite;
  content: '';
  z-index: 0;
}

/* Accordion icons */

.summary-accordion__icon-line {
  background: rgb(var(--color-foreground));
  transition: transform 500ms ease, background 500ms ease;
}

.summary-accordion__icon-line:first-child {
  transform-origin: center center;
}

.summary-accordion__plus-minus-wrapper {
  transition: background 700ms ease-in-out;
  transition: color 700ms ease-in-out;
  background-color: rgb(var(--color-background));
  box-shadow: 0rem 0.1rem 0.2rem rgba(var(--color-foreground), 0.05);
}

.summary-accordion--has-hover:hover .summary-accordion__plus-minus-wrapper {
  background: #3c3c3cff !important;
  color: white; 
}

.summary-accordion--has-hover:hover .summary-accordion__icon-line {
  background: rgb(var(--color-background));
}

/* Background overlay */

.background-overlay:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgb(var(--color-overlay), 0.5) 0%, rgb(var(--color-overlay), 0.5) 100%);
}

/* Tap area */

.tap-area-icon:before {
  content: "";
	position: absolute;
	width: 4.4rem;
	height: 4.4rem;
}

.tap-area-icon:focus-visible {
  outline: none;
}

.tap-area-icon:focus-visible:before {
  outline: 0.2rem solid rgba(var(--color-foreground),.5);
}

.mega-menu__content {
}

.sixty-nine-gradient {
  background: rgb(0,181,143) !important;
background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
}
.border-ninety-six-gradient {
  border-image: linear-gradient(#00b58f, #3395cf, #f291c2, #f8be00 ) 30;
  border-radius: 20px;

}
    /* Styles for the modal */
    .tooltip-custom {
      display:inline-block;
      position:relative;
      text-align:left;
  }
  
  

  .tooltip-custom:hover .bottom {
      display:block;
  }
  
  .bottom > p {
    text-align: center;
    font-weight: bold;
  }

  .tooltip-custom .bottom i {
      position:absolute;
      bottom:100%;
      left:50%;
      margin-left:-12px;
      width:24px;
      height:12px;
      overflow:hidden;
  }
  
  .tooltip-custom .bottom i::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    transform: translate(-50%,50%) rotate(45deg);
    background-color: white;
    border: 2px solid #00b58f;
  }
  .tooltip-custom .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:#EEEEEE;
    border:1px solid #33CC66;box-shadow:0 1px 8px rgba(0,0,0,0.5);
}
.header__count-bubble {
  box-shadow: none;
}
.compare--inventory:after, .compare--inventory:before {
  background: #00B58F;
  border-radius: 9px;
  content: "";
  height: 9px;
  left: -5px;
  margin: 8px;
  position: absolute;
  top: -5px;
  width: 13px;
  height: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  /* border-color: blue; */
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  /* left: 0; */
  width: 13px;
  height: 13px;
  border-radius: 50%;
  /* border-style: solid; */
  /* border-width: 2px; */
  border-color: #00B58F;
  /* background-color: rgba(0, 0, 0, 0); */
  position: absolute;
  top: -31px;
  top: -5px;
  left: -5px;
}
.compare--inventory:before {
  animation: inventory-pulse 2s linear infinite;
}

@keyframes inventory-pulse {
  0% {
    opacity: 0.5;
  }
  to {
    opacity: 0;
    transform: scale(2.5);
  }
  }

 .card-wrapper--product {
   border: 0px !important;
  }



  .card__heading--collection > a:before {
    background: linear-gradient(180deg, rgba(0, 181, 143, 0.1) 60%, rgba(51, 149, 206, 0.3) 70%, rgba(241, 145, 194, 0.3) 85%, rgba(248, 190, 0, 0.3) 100%);
    opacity: 0.5
  }

  .announcement-bar-custom > .content {
    z-index: 4;
  }


  .announcement-bar-custom { display: none;}
  
  a.transparent-gradient-text:hover {
    cursor: pointer;
  }

  #brand-footer-logo-svg {
    position: absolute;
    max-width: 350px;
  }

  .displayRow-Modal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
div.displayRow-Modal > div {
  display: flex;
  align-items: center;
}

.modal-body-content > h5, h6 {
  margin-bottom: 20px !important;
  margin-top: 20px !important;
}

.modal-body-content > h5 {
font-weight: 600;
text-align: center;
}

.modal-body-content > h6 {
font-weight: 500;
text-align: left;
}

a.store-location-link::after{
  content: "";
  width: 30px;
  height: 30px;
  background:red url("/cdn/shop/files/right-arrow-green.svg?v=1701285739") no-repeat -30px -50px fixed;
  top: 10px;
  right: 5px;
  position: absolute;
  display: inline-block;
}

@media screen and (min-width: 749px) {
  .spacer-fancy {
    height: 5vh
  }
.sticky-scroll-section {
transform: translateY(125px);
}
}

.image-with-text__heading--gradient {
  line-height: 1.2;
}

.details-double-title {
  font-size: large;
}


background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
font-weight: 600;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-decoration: underline !important;
border-bottom: solid 1px rgba((0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1));



a[href="#more"] {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
font-weight: 600;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-decoration: underline !important;
border-bottom: solid 1px rgba((0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1));
text-decoration: none !important;
}
.mega-menu__column--span2 {
  --total-columns: 6;
}

#shopify-section-template--21341140648233__2a5e3ebf-930e-499c-b318-dc744ced9ba3 > .page-width {
  padding: 0px !important;
}

@media screen and (max-width: 749px) {
 .menu-drawer__menu .list-menu {
    display: grid; 
    grid-template-columns: 1fr;
  }
  .menu-drawer summary.menu-drawer__menu-item {
    
  }
  #shopify-section-sections--21341141106985__c8771d96-51de-4cb3-9820-813275045b1a .newsletter__content.image-with-text__content {
    padding: 0px 10vw;
    }
  .tooltip-custom .bottom i {
  display: none;
    }   
  }
.displayRow {
  display: flex;
  flex-direction: row;
  align-items: center;
}    

.customer-support-image {
  width: 35px !important;
  height: 35px !important;
  margin-right: 10px;
}

.gradient-tab:hover {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.pxBLackLine {
  background: #262626;
  max-width: 32vw;
  height: 1px;
  margin-top: 8px !important;
    margin-bottom: 16px !important;
}

.mbt-8 {
  margin-bottom: 16px;
}

div.complementary__item__info > div.select {
  display: none;
}

.card__vendor {
  display: none;
}


p.subtitle > a {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  font-weight: 600;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: underline !important;
  border-bottom: solid 1px rgba((0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1))
}

a[title="Fan Club Signup"]:active {
  color: #333 !important;
}
a[title="Fan Club Signup"] {

}
.gradient_facet_collection {

}

#gradient_facet_collection {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  font-weight: 600;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.view-all-complementary {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  font-weight: 600;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-align: center;
}
.slider-button--next span:last-child {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.slider-button--prev span:first-child {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.slider-button--prev span:last-child {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.newsletter__override-color-template--21649741119785__f3363889-b80e-41dc-871f-7d76eefb3f93 > a {
  background: linear-gradient(90deg, rgba(0,181,143,1) 25%, rgba(51,149,207,1) 50%, rgba(242,145,194,1) 75%, rgba(248,190,0,1) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#color-change--1{
  color:#F291C2
}
#color-change--2{
  color:#3395CF
}
#color-change--3{
  color:#00B58F
}
#color-change--4{
  color:#F8BE00
}
#color-change--5{
  color:#F291C2
}
#color-change--6{
  color:#3395CF
}

.pb-10 {
  padding-bottom: 10px;
}

#MegaMenu-Content-1 {
  background-image: url( '/cdn/shop/files/logo-footer.svg?v=1701116111' );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 25vw;
}

#MegaMenu-Content-3 {
  background-image: url( '/cdn/shop/files/logo-footer.svg?v=1701116111' );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 35vw;
}
.rmz-label-text {
  display: none;
}
@media screen and (min-width: 749px) {
  .tooltip-custom {
    padding-bottom: 0px !important;
  } 
}


.slider-counter__link--dots:not(.slider-counter__link--active) .dot {
  background-color: #3333 !important;
}

.modal {
  border-radius: 8px;
}

#our-story-video {
  height: 73vh !important;
  width: 68vw;
}
@media screen and (max-width: 749px) {
  .border-ninety-six-gradient {
    display: none !important;
  }
  
#our-story-video {
 height: 20vh !important; 
}
}

a.green-link {
 color: rgba(0, 181, 143, 1); 
font-weight: 600; 
}
a.blue-link {
  color: rgba(51, 149, 207, 1);
font-weight: 600; 
}
a.yellow-link {
 color: rgba(248, 190, 0, 1);
font-weight: 600; 
}
a.pink-link {
color: rgba(242, 145, 194, 1);   
font-weight: 600;
}
/* ============================================================
   Glassy pill buttons — append to the end of your global CSS.
   Works alongside the v2 hover-gradient code already in place.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1) PILL SHAPE — fully rounded everywhere
   ───────────────────────────────────────────────────────────── */
.button,
.button--primary,
.button--secondary,
.button--tertiary,
.banner__button,
.shopify-challenge__button,
.shopify-payment-button__button--unbranded,
.shopify-payment-button [role="button"],
.customer button {
  border-radius: 999px !important;
}

/* The hover gradient overlay already uses `border-radius: inherit`
   from the v2 snippet, so it follows the pill shape automatically. */


/* ─────────────────────────────────────────────────────────────
   2) GLASSY BASE — primary button (the dark/colored ones)
      Translucent fill + backdrop blur + subtle hairline border.
   ───────────────────────────────────────────────────────────── */
.button:not(.button--secondary):not(.button--tertiary):not(:disabled),
.button--primary:not(:disabled),
.banner__button:not(.button--secondary):not(.button--tertiary):not(:disabled),
.shopify-payment-button__button--unbranded:not(:disabled) {
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(var(--color-button-text), 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,   /* glassy top sheen */
    0 4px 14px rgba(0, 0, 0, 0.06);            /* soft drop */
}


/* ─────────────────────────────────────────────────────────────
   3) GLASSY OUTLINE — secondary / tertiary buttons
      Frosted clear glass with a thin foreground-toned border.
   ───────────────────────────────────────────────────────────── */
.button--secondary:not(:disabled),
.button--tertiary:not(:disabled) {
  background: rgba(var(--color-foreground), 0.04) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(var(--color-foreground), 0.22) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 2px 10px rgba(0, 0, 0, 0.04);
}

/* ─────────────────────────────────────────────────────────────
   4) Make sure the ::before hover overlay still inherits the
      pill shape (defensive — your v2 code already has this).
   ───────────────────────────────────────────────────────────── */
.button:not(.ignore-effect):not(:disabled):before {
  border-radius: inherit !important;
}


/* ─────────────────────────────────────────────────────────────
   5) Tighten padding so pills don't look stubby on long labels.
      Optional — comment out if you like the current spacing.
   ───────────────────────────────────────────────────────────── */
.button,
.button--primary,
.button--secondary,
.button--tertiary,
.banner__button,
.shopify-challenge__button {
  padding-left: max(2.4rem, 1.4em) !important;
  padding-right: max(2.4rem, 1.4em) !important;
}
/* ============================================================
   Cart / Add-to-Cart button fix
   - Force pill shape
   - Force solid black bg (no green bleed-through)
   - Kill the rainbow gradient hover on these specifically
   - Keep white text
   Append AFTER the buttons-glassy-pill.css block.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1) PILL SHAPE on every cart-related button class
   ───────────────────────────────────────────────────────────── */
.product-form__submit,
.product-form__cart-submit,
.product-form__buttons .button,
.cart__checkout-button,
.cart__update-button,
.cart__dynamic-checkout-buttons .shopify-payment-button__button,
.shopify-payment-button__button,
.shopify-payment-button__button--branded,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__more-options,
button[name="add"],
button[name="checkout"],
button[name="update"] {
  border-radius: 999px !important;
}


/* ─────────────────────────────────────────────────────────────
   2) SOLID BLACK BG — no translucency, no green bleed
   ───────────────────────────────────────────────────────────── */
.product-form__submit:not(:disabled),
.product-form__cart-submit:not(:disabled),
.cart__checkout-button:not(:disabled),
.shopify-payment-button__button--unbranded:not(:disabled),
button[name="add"]:not(:disabled),
button[name="checkout"]:not(:disabled) {
  background: #000 !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}


/* ─────────────────────────────────────────────────────────────
   3) KILL the rainbow gradient ::before for cart buttons
      (the v2 hover effect doesn't apply here)
   ───────────────────────────────────────────────────────────── */
.product-form__submit:before,
.product-form__cart-submit:before,
.cart__checkout-button:before,
.shopify-payment-button__button--unbranded:before,
button[name="add"]:before,
button[name="checkout"]:before {
  display: none !important;
  content: none !important;
}


/* ─────────────────────────────────────────────────────────────
   4) Hover — subtle darken/lift instead of rainbow
   ───────────────────────────────────────────────────────────── */
.product-form__submit:not(:disabled):hover,
.product-form__cart-submit:not(:disabled):hover,
.cart__checkout-button:not(:disabled):hover,
.shopify-payment-button__button--unbranded:not(:disabled):hover,
button[name="add"]:not(:disabled):hover,
button[name="checkout"]:not(:disabled):hover {
  background: #1a1a1a !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}


/* ─────────────────────────────────────────────────────────────
   5) FOCUS — also no rainbow, just a clean black outline
   ───────────────────────────────────────────────────────────── */
.product-form__submit:focus,
.product-form__submit:focus-visible,
.product-form__cart-submit:focus,
.product-form__cart-submit:focus-visible,
.cart__checkout-button:focus,
.cart__checkout-button:focus-visible,
.shopify-payment-button__button--unbranded:focus,
.shopify-payment-button__button--unbranded:focus-visible,
button[name="add"]:focus,
button[name="add"]:focus-visible,
button[name="checkout"]:focus,
button[name="checkout"]:focus-visible {
  background: #000 !important;
  outline: 2px solid rgba(0, 0, 0, 0.35) !important;
  outline-offset: 3px !important;
}
/* ============================================================
   Mega menu — smooth tab-to-tab feel
   Kills the per-dropdown fade-in (which caused the flicker
   when sweeping across tabs) and replaces it with a quick
   fade on the inner content only.
   ============================================================ */

/* 1) Kill the open animation on the dropdown shell entirely.
      This was the source of the flicker — each tab's panel
      was re-running the 300ms fade-in every time. */
.js .mega-menu[open] > .header__submenu,
.js .mega-menu.open  > .header__submenu,
.js .mega-menu[open] > .mega-menu__content,
.js .header__submenu__last[open] .header__submenu {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  z-index: 4;
}

/* 2) Kill the slow 300ms transition on the submenu shell.
      Shell appears instantly — that's what makes consecutive
      tabs feel like the same panel. */
.header__submenu {
  transition: none !important;
}

/* 3) Soft 140ms fade on the INNER content only.
      You see "new content faded in" instead of "new panel opened". */
@keyframes mm-content-swap {
  from { opacity: 0.35; transform: translateY(-2px); }
  to   { opacity: 1;    transform: translateY(0); }
}

.js .mega-menu[open] > .mega-menu__content,
.js .mega-menu[open] > .header__submenu {
  animation: mm-content-swap 140ms ease-out;
}

/* 4) Optional: kill the caret rotation transition delay if it
      feels laggy when sweeping tabs. */
summary .icon-caret {
  transition: transform 180ms ease !important;
}
/* ============================================================
   iOS card text inflation fix
   Forces all text inside product cards to render at the size
   you authored — no per-element boosting on iPhone.
   ============================================================ */

.card,
.card *,
.card-wrapper,
.card-wrapper *,
.card__heading,
.card__heading *,
.card__information,
.card__information *,
.card-information,
.card-information *,
.product-grid .grid__item,
.product-grid .grid__item *,
.full-unstyled-link {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
 
}

/* Pin the actual sizes in pixels so Safari has nothing to "fix" */
@media (max-width: 749px) {
  .card__heading,
  .card__heading a,
  .card-information .card__heading {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .price,
  .price__regular .price-item,
  .price__sale .price-item {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .card__information .caption,
  .card__information .text-small,
  .card-information__text {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}/* ============================================================
   Card swatches row — make it actually scrollable
   The card has a full-link::after overlay covering everything.
   We need to lift the swatches row above it AND tell the
   browser this is a horizontal-pan area so taps on the swatches
   don't trigger the card link.
   ============================================================ */

.card__swatches-row,
.card__swatches,
.card-product-colors,
.card-product-colors__list,
.card-product__swatches,
[class*="swatches-row"],
[class*="card-product-colors"]:not([class*="__swatch"]):not([class*="__item"]) {
  position: relative !important;
  z-index: 3 !important;          /* above .full-link::after (z-index:1) */
  pointer-events: auto !important;
  touch-action: pan-x !important;  /* tells iOS / Android: horizontal scroll only */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.card__swatches-row:active,
.card-product-colors:active,
[class*="swatches-row"]:active {
  cursor: grabbing;
}

/* Prevent child elements from getting selected/dragged when
   user is swiping (otherwise iOS triggers text-selection mode) */
.card__swatches-row *,
.card-product-colors *,
[class*="swatches-row"] * {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The full-link overlay specifically — make it stop AT the
   swatches row so it doesn't cover swatch taps */
.card-wrapper--product .full-link:after,
.card-wrapper--product .card__heading a:after {
  pointer-events: none !important;
}