/** Shopify CDN: Minification failed

Line 35:11 Expected ":"

**/
styles_Header__closeButtonIcon__ {
    /* fill: var(--upcart-internal-header-close-button-icon-color); */
    /* height: var(--upcart-internal-header-close-button-icon-size); */
    /* width: var(--upcart-internal-header-close-button-icon-size); */
    /* width: 27px !important; */
    /* font-weight: bold; */
    /* fill: #000; */
    /* padding: 0px; */
    background-color: #fff;
}

.upcart-rewards-message p strong{
  font-size: 2rem;
}

strong .upcart-rewards-message {
  font-size: 2rem;
}

/* Hide the "(in cart)" text */
.quantity__rules-cart,
.quantity__label .quantity__rules-cart {
  display: none !important;
}

/* Bulk message tooltip */
.bulk-price-message div:hover .bulk-tooltip {
  visibility: visible !important;
  opacity: 1 !important;
  font-size
}

@media screen and (min-width: 900px) {
  .product-social {
    z-index:3!important
  }
}
.section-template--19288973541507__product-grid-padding {
    padding-top: 1rem!important;
}

.parent-collection-link {
  margin-bottom: 20px;
}

.back-to-parent {
  display: inline-flex;
  align-items: center;
  font-size: 2rem;
  text-decoration: none;
  color: #333;
  transition: color 0.2s ease;
}

.back-to-parent:hover {
  color: #000;
  text-decoration: underline;
}

.back-to-parent svg {
  flex-shrink: 0;
}

@media screen and (max-width: 749px) {
  .parent-collection-link {
    margin-bottom: 15px;
  }
  
  .back-to-parent {
    font-size: 13px;
  }
}
.subcollection-separator img {
    height: 3rem;
    vertical-align: middle;
}

/* Adjust size for mobile if needed */
@media screen and (max-width: 749px) {
  .subcollection-separator img {
    width: 20px;
    height: 20px;
  }
}

.product__title {
  line-height: calc(1 + .25 / max(1, var(--font-heading-scale)));
  margin-bottom: 1rem!important;
}

.header__icon svg {
  height: 30px;
  width: 30px;
}

/* Anchor fade to the viewport wrapper */
.slider-component {
  position: relative;
  overflow: hidden; /* important: ensures the fade doesn't get clipped weirdly */
}

.quantity__input:focus {
  outline: none;
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  background-color: transparent;
  box-shadow: none;
}

/* Also remove any active state styling */
.quantity__input:active {
  outline: none;
  background-color: transparent;
  box-shadow: none;
}

/* Make the minus and plus icons thicker/heavier */
.quantity__button .icon-minus path,
.quantity__button .icon-plus path {
  stroke: currentColor;
  stroke-width: 1.5px;
}

/* Add vertical dividers on either side of the quantity number */
.quantity__input {
  min-width: 40px;
  border-right: 1px solid #ddd!important;
  border-left: 1px solid #ddd!important;
  margin-right: 2px;
  margin-left: 2px;
}

/* Optional: Add some padding to give the dividers breathing room */
.quantity__input {
  padding-left: 12px;
  padding-right: 12px;
}

.social-share-twitter {
    background-color: #000!important;
}

.product-form__buttons span {
  font-family: 'GTStandard-M';
}

.product__info-container .product-form {
  margin: 0 0 2rem;
}

@media (min-width: 950px){
  .product__info-container .product__description {
    margin-bottom: 2rem !important;
}
}

/*html, body, .page-width, .shopify-section, .content-for-layout {
  overflow: visible !important;
}

/* Prevent layout shift when variant options update */
variant-selects {
  min-height: 200px; /* Adjust based on your layout */
}

.product-form__input {
  min-height: 80px; /* Reserve space for each option group */
}

.selected-option-display {
  min-height: 24px; /* Reserve space for the selected text */
}

/* Smooth transition when options change */
variant-selects * {
  transition: opacity 0.15s ease;
}

#collection-template--19288973803651__featured_collection_MTGgm4
  .collection__title {
  text-align: center;
  font-size: 1.5em;
}
#collection-template--19288973803651__featured_collection_MTGgm4 strong {
  color: #333;
}
@media (max-width: 900px) {
  #collection-template--19288973803651__featured_collection_MTGgm4 .collection__title {font-size: 1rem;line-height: 2rem; margin-bottom: 2rem;
  }
}

/* SHOP ALL button at top of mobile drawer */
.shop-all-button {
  display: block;
  width: 56%;
  text-align: center;
  background-color: #28a45c;
  color: #fff;
  padding: .75rem 1rem;
  border-radius: 10px;
  font-size: 2rem;
  line-height: 1.25;
  text-decoration: none;
  margin-bottom: 1rem;
}

.shop-all-button:hover {
  opacity: 0.9;
}

/* --- PDP deal price styling (final) --- */

/* Row layout: align everything to the right */
.pdp-price-row {
  display: flex;
  justify-content: flex-end;   /* right-align the whole row */
  align-items: flex-end;       /* align baselines */
  gap: 0.35rem;                /* space between 9.99 and 6.99 */
}

/* Deal price: hidden until deal is unlocked */
.pdp-price-deal {
  display: none;
  color: #28a45c !important;   /* green deal price */
  font-size: inherit;          /* match size of regular price */
  font-weight: inherit;        /* match weight */
  line-height: inherit;
}

/* Make sure the cents in the deal price sit like the original */
.pdp-price-deal .price-cents {
  font-size: 0.5em;            /* similar to theme's sup scaling */
  position: relative;
  top: -0.4em;
}

/* Original price wrapper for diagonal slash */
.pdp-price-original .price-item--regular {
  position: relative;
}

/* When deal unlocked: show 6.99 and slash the original */
html.deal-unlocked .product--has-deal .pdp-price-deal {
  display: inline-flex;
}

html.deal-unlocked .product--has-deal .pdp-price-original .price-item--regular::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 5px;
  background: #cccccc;
  transform: rotate(-25deg);
  pointer-events: none;
}

/* price row layout */
.pdp-price-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
}

/* hidden until deal unlocked */
.pdp-price-deal {
  display: none;
}

/* color & emphasis for deal price */
.pdp-price-deal .price-item--regular,
.pdp-price-deal .price-item--sale {
  color: #28a45c !important;
  font-weight: 700 !important;
}

/* show deal price */
html.deal-unlocked .pdp-price-deal {
  display: inline-flex;
}

/* slash original price */
html.deal-unlocked .pdp-price-original .price-item--regular {
  position: relative;
}

html.deal-unlocked .pdp-price-original .price-item--regular::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5%;
  width: 110%;
  height: 5px;
  background: #cccccc;
  transform: rotate(-25deg);
}


/* Wrapper around price badge (keep this) */
.price-strike-target {
  position: relative;
}

/* Show diagonal slash ONLY when deal is unlocked AND style is part of the deal */
.deal-unlocked .price-tag-overlay[data-has-deal-style="true"] .price-strike-target::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10%;
  width: 125%;
  height: 4px;
  background: #cccccc;
  transform: rotate(-28deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 4;
}



product-info {
  margin-top: 1rem!important;
  padding-bottom: 0px!important;
}
.product__media-item {
  margin-bottom: 1rem;
}
.related-products__heading {
  font-size: 3rem!important;
  margin-bottom: 1rem!important;
}

.related-products {
  padding-top: 0px!important;
}

/* collapse to 1 column on mobile */
@media (max-width: 749px) {
  .style-category-link {
      font-size: 2rem!important;
  }
  .footer__blocks-wrapper .footer-block--menu:first-of-type ul {
    column-count: 1;
  }
}

/* Each footer section = one third of total width */
.footer__blocks-wrapper .footer-block {
  flex: 0 0 320%;
  max-width: 20%;
  box-sizing: border-box;
}

/* Stack on mobile */
@media (max-width: 749px) {
  .footer__blocks-wrapper .footer-block {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Align all icons in a fixed-width column */
.mega-col li a {
  display: flex;
  align-items: center;
  gap: 0.4em; /* space between icon and text */
  text-decoration: none;
}

/* Icon container */
.mega-col .menu-icon {
  display: inline-block;
  width: 1.5em;     /* fixed width for all icons */
  text-align: center;
  flex-shrink: 0;
}

/* Optional: slightly larger icons or uniform baseline */
.mega-col .menu-icon {
  font-size: 1.2em;   /* tweak to taste */
  line-height: 1;
}

/* Optional: hover style consistency */
.mega-col li a:hover .menu-icon {
  transform: scale(1.1);
}


/* Row spans full width; put qty left, price right */
.quantity-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* split ends */
  width: 100%;                    /* <- replace max-width:fit-content */
  gap: 12px;
}

/* allow children to shrink on small screens */
.quantity-price-row > * { min-width: 0; }

/* Quantity stays compact */
.quantity-price-row .product-form__quantity {
  flex: 0 0 auto;
}

/* Price hugs the right but can shrink/wrap */
.quantity-price-row .price,
.quantity-price-row [id^="price-"] {
  margin-left: auto;     /* pushes to the right edge */
  text-align: right;
  flex: 1 1 auto;        /* lets it shrink when space is tight */
  min-width: 0;
}

/* If badges/compare-price force a long line, let them wrap */
.quantity-price-row .price .price__container {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}


/* ✹ New & Featured (keep the original working selector) */
.collection__title .title.inline-richtext.h2 {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}
.collection__title .title.inline-richtext.h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: #28a45c;
  transition: width 0.3s ease;
}
.collection__title a:hover .title.inline-richtext.h2 {
  color: #28a45c;
}
.collection__title a:hover .title.inline-richtext.h2::after {
  width: 100%;
}

/* "View all" link */
.collection__title a.link.underlined-link {
  position: relative;
  display: inline-block;
  color: #222;
  text-decoration: none;
  transition: color 0.3s ease;
}
.collection__title a.link.underlined-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: #28a45c;
  transition: width 0.3s ease;
}
.collection__title a.link.underlined-link:hover {
  color: #28a45c;
}
.collection__title a.link.underlined-link:hover::after {
  width: 100%;
}


img, .banner,
button, .button, .shopify-payment-button, .product-form__submit {
  border-radius: 10px!important;
  border: none;               /* remove border if you don't need one */
  background-clip: padding-box; /* ensures background doesn’t bleed outside radius */
}
.banner {
  border-radius: 10px!important;
  overflow: hidden;
}

.banner__media {
  background: transparent;
}
.collection__title a span {
  display: inline-block; /* required for transform to work */
  transition: transform 0.3s ease;
  transform-origin: center;
}

.collection__title span:hover {
  transform: scale(1.1)!important;
}

.quantity {
  border: 1px solid #333;
  border-radius: 10px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}

.quantity__button,
.quantity__input {
 
  background: #fff;
  height: 42px;
}

.quantity__button {
  width: 42px;
  cursor: pointer;
}

.quantity__input {
  width: 64px;
  text-align: center;
  font: inherit;
  outline: none;
}


.quantity {
  display: inline-flex;
  align-items: center;
  border: 2px solid #333!important;
  border-radius: 10px!important;
  overflow: hidden; /* ensures rounded corners apply cleanly */
}

.quantity__button,
.quantity__input {
  background: #fff;
  height: 42px;
}

.quantity__button {
  width: 42px;
  cursor: pointer;
}




body {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0px;
} 
body, .header-wrapper, .product, product-info, .card__information {
  background: #FBF9F6!important;
}

.header__search {display: none!important;}

.custom-search-input {
  font-family: 'Courier New', sans-serif;
  line-height: normal;
}
.product__description {
  font-family: 'Oswald', sans-serif;
    line-height: 2.5rem;
    font-weight: 500;
    letter-spacing: 0.08rem; font-size: 2rem;
    margin-bottom: 0px;
}
.product__description li {
  font-size: 2rem;
}
.custom-search-input {
  border-radius: 10px 0 0 10px;
  padding-left: 5px;
  font-weight: bold;
}

/*natex*/
footer {
  background: url('/cdn/shop/files/shirt-stack.jpg?v=1762202855')!important;
  background-size: cover!important;  
}
footer h2, footer li {
  text-transform: uppercase;
}
.price-tag-overlay .price-item {
  font-weight: 700;
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}

/* Dollar sign — same small size as cents, raised, no underline */
.price-tag-overlay .price-symbol {
  font-size: 0.7em;
  vertical-align: super;
  margin-right: -10px;
}

/* Whole dollar amount */
.price-tag-overlay .price-whole {
  font-size: 1.2em;
  line-height: 1;
  margin-right: -5px;
}

/* Cents — small, raised, underlined */
.price-tag-overlay .price-cents {
  font-size: 0.7em;
  vertical-align: super;
  border-bottom: 1px solid currentColor;
}



.option-chip.is-hidden { display: none !important; }

@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__info-wrapper {
        padding: 0 0 0 2rem!important;
    }
}
.product-form__submit {
    font-size: 2.2rem!important;
    text-transform: uppercase;
    font-weight: bold !important;
}

/*section {    margin-bottom: 1rem;}*/
.color-scheme-2 {background-color: none;}

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

  .menu-drawer__menu {
    display: block !important;
  }

  .header__menu {
    display: block !important;
  }

  .menu-toggle {
    display: inline-flex !important;
  }
}

  .bulk-discount-active .bulk-price--hide { display: none !important; }
  .bulk-discount-active .bulk-price--show { display: inline !important; }
  .bulk-price__compare { text-decoration: line-through; opacity: .7; margin-right: .25rem; }

.discounts__discount {
    font-size: 1.5rem;
    text-shadow: 0 0 5px , 0 0 10px yellow, 0 0 20px yellow, 0 0 40px yellow, 0 0 80px yellow;
    animation: glow 1.0s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px yellow, 0 0 10px yellow, 0 0 20px yellow, 0 0 40px yellow, 0 0 80px yellow;
    }
    100% {
        text-shadow: 0 0 10px lightyellow, 0 0 20px lightyellow, 0 0 40px lightyellow, 0 0 80px lightyellow, 0 0 160px lightyellow;
    }
}


  .section-header, main {
    padding: 0 1rem!important;
}

@media (max-width: 749px) {
  .slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-padding-left: 1rem;
    gap: 0.75rem; /* optional spacing between slides */
  }

  .slider__slide {
    flex: 0 0 42%!important;
    scroll-snap-align: start;
    margin-right: 0; /* if you’re using gap above */
  }

  .slider__slide:last-child {
    margin-right: 0;
  }
}


@media (max-width: 749px) {
  .slider__slide {
    flex: 0 0 47%; /* show 2 full + partial */
    margin-right: 3%;
  }

  .slider {
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-padding-left: 1rem;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
  }
}


.banner {
  margin-bottom: 1rem;
}

.slider.dragging {
  cursor: grabbing;
  user-select: none;
}
.slider {
  cursor: grab;
}


.selected-option-display {
  opacity: 0;
  transition: opacity 0.25s ease-in;
  font-weight: 500;
  margin: 0.25rem 0 0.5rem;
  min-height: 1.2em;
}

.selected-option-display[data-loaded="true"] {
  opacity: 1;
}
/*prevent layout shift*/
.selected-option-display {
  min-height: 1.25em; /* reserves vertical space */
  color: #333;
}

/* hide any sold-out swatch labels */
.product-form__input--pill input.disabled + label {
  display: none !important;
}

/* --- ONLY announcement bar on mobile (leave other sliders alone) --- */
@media (max-width: 749px) {
  .announcement-bar .slider {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-padding-left: 1rem;
    gap: 0.75rem;
  }
  .announcement-bar .slider__slide,
  .announcement-bar .slideshow__slide {
    flex: 0 0 100% !important;   /* one message per view */
    min-width: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    scroll-snap-align: start;
  }
}

/* --- Product pages on mobile: full-width media + sensible related --- */
@media (max-width: 749px) {
   .product-form__input--pill input[type=radio][name*=color i]:checked+label {
    margin-left: 0!important;
  }
  /* product media track should not be a horizontal scroller */
  .product .slider {
    display: block !important;
    overflow: hidden !important;
    gap: 0 !important;
  }
  .product .slider__slide,
  .product .slideshow__slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
  }
  .product .product__media,
  .product .product__media .media {
    width: 100% !important;
    max-width: 100% !important;
  }
  .product .media img,
  .product .product__media img,
  .product .product__media picture img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* related products: pick ONE style you prefer */

  /* A) swipeable big cards (keep your homepage feel) */
  .product-recommendations .slider__slide,
  .related-products .slider__slide {
    flex: 0 0 80% !important;
    min-width: 80% !important;
  }

  /* OR B) clean 2-column grid on product page */
  /* 
  .product-recommendations .grid,
  .related-products .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--grid-mobile-horizontal-spacing, 1rem);
    row-gap: var(--grid-mobile-vertical-spacing, 1rem);
  }
  .product-recommendations .slider,
  .related-products .slider { display: block !important; overflow: visible !important; }
  */
}



/*natex*/
.logo-right-icons a img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.85;
}
.icon-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 25px;
  /*overflow-x: auto;*/
  margin-top: 5px;
}
@media screen and (max-width: 749px) {
  .icon-bar {display: none;}
}

.logo-right-icons {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.icon-with-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  color: inherit;
}

.icon-with-label img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.85;
}

.icon-with-label:hover img {
  transform: scale(1.1);
  opacity: 1;
}



.category-button {
  font-weight: 600;
  color: #f3f3f3;
  background-color: #28a45c;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  margin-bottom: 4px;
  padding: 8px;
}

.category-button:hover {
  padding: 10px;
}

.logo-right-icons a:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.logo-right-icons .icon-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 1rem;
  color: inherit;
}

.logo-right-icons .icon-with-label span {
  text-align: center;
  font-weight: bold;
  color: #333;
}

.logo-right-icons .icon-with-label:hover img {
  transform: scale(1.1);
  opacity: 1;
}

.page-width {
  max-width: 1200px!important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.logo-right-icons {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.icon-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.icon-label {
  font-size: 12px;
}


/* --- Make Header Search More Prominent --- */

/* Container for the search icon/trigger and the search bar itself */
.header__search {
  /* If the search is an icon that opens a modal,
     you might want to make the icon itself larger. */
  /* For example, if it's an SVG: */
  /* .header__search .icon-search {
    width: 24px;
    height: 24px;
  } */
}
.custom-search-button {
  border-radius: 0px 10px 10px 0px;
  background: #333;
}

/* This often targets the search input field directly,
   or the form that contains it. */
.header .search__input, /* Common class for the input field */
.header .search-modal__form .search__input, /* For search modals */
.header .search-form .search__input { /* Another common pattern */
  height: 44px; /* Increase height - adjust as needed */
  padding-top: 0.5rem; /* Adjust vertical padding */
  padding-bottom: 0.5rem; /* Adjust vertical padding */
  padding-left: 1rem; /* More horizontal padding */
  padding-right: 1rem; /* More horizontal padding */
  border: 1px solid #bbb; /* Make border more visible */
  border-radius: 6px; /* Slightly more rounded corners */
  background-color: #fff; /* Ensure a clear background */
  min-width: 250px; /* Give it a minimum width */
}

/* Placeholder text styling */
.header .search__input::placeholder,
.header .search-modal__form .search__input::placeholder,
.header .search-form .search__input::placeholder {
  font-size: 0.95rem; /* Adjust placeholder font size if needed */
  color: #777; /* Make placeholder text a bit more visible */
}

/* Focus state for the search input */
.header .search__input:focus,
.header .search-modal__form .search__input:focus,
.header .search-form .search__input:focus {
  border-color: #333; /* Darker border on focus */
  box-shadow: 0 0 0 1px #333; /* Optional: add a subtle focus ring */
}

/* If the search is part of a form, you might want to ensure the form takes up more space */
.header .search-form,
.header .search-modal__form {
  flex-grow: 1; /* Allow the form to take available space if it's in a flex container */
  max-width: 400px; /* Or set a max-width if you don't want it too wide on large screens */
  margin-left: auto; /* Often helps to push it to the right or center */
  margin-right: auto;
}

/* On smaller screens, you might want the search to take up more width */
@media screen and (max-width: 749px) {
  .header .search__input,
  .header .search-modal__form .search__input,
  .header .search-form .search__input {
    min-width: 0; /* Reset min-width */
    width: 100%; /* Make it full width within its container */
  }

  .header .search-form,
  .header .search-modal__form {
    width: 100%; /* Ensure form takes full width */
    max-width: none; /* Remove max-width constraint */
    margin-left: 0;
    margin-right: 0;
  }

  /* If search is revealed by clicking an icon on mobile,
     you might need to style the modal or drawer it appears in.
     This example assumes the input is directly visible or becomes visible. */
}

/* You might want to make the search more prominent.
   This requires knowing the specific classes for Dawn's search.
   Example (you'll need to inspect your theme for actual classes): */

/* --- Product Grid Enhancements --- */

/* Target the main list of products on collection pages */
.collection .product-grid {
  /* Adjust the number of columns for different screen sizes */
  --grid-desktop-columns: 4; /* Try 4 or 5 for a denser look */
  --grid-tablet-columns: 3;
  --grid-mobile-columns: 2;
}

/* On smaller screens, you might want to ensure it doesn't get too crowded */
@media screen and (min-width: 750px) {
  .collection .product-grid {
    /* Example: Force 4 columns on medium screens and up */
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 990px) {
  .collection .product-grid {
    /* Example: Force 5 columns on large screens and up */
    grid-template-columns: repeat(5, 1fr);
  }
}

.header__search .search-modal__toggle,
.header__search .search-form__input {
  border: 1px solid #ccc;
  border-radius: 4px;
}


body .page-width {
  max-width: 1200px !important;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
[class*="__main-padding"] {
  padding-top: 0 !important;
}
.product__media img {
  max-height: 800px;
  object-fit: contain;
}
section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.center-menu {
  display: flex;
  justify-content: center;}

.header__inline-menu {
  justify-content: center;
  width: 100%;
}
.header__menu-item span {
  font-size: 2em;
    text-transform: uppercase;
    font-weight: bold;
}

: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;*/
  padding-left: 0px!important;
  padding-right: 0px!important;
}

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;
    padding-right: 5rem;
  }

  .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);
    margin-bottom: 1rem;
  }
}

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

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

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

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

.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,
div: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.4rem;
  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: not-allowed;
}

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

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
      width: 1.3rem !important;
    color: #333
}

.footer__payment .list-payment {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  gap: 0.6rem;
}

.footer {
    margin-top: 5rem!important;
}

@media screen and (max-width: 767px) {
  footer .svg-wrapper {
    color: #fff!important;
  }
}

footer .svg-wrapper {
      width: 4rem !important;
    color: #333
}

.footer__list-social .icon {
  width: 3.6rem;
  height: 3.6rem;
}

footer .list-social__item .icon {
  width: initial;
  height: initial;
}

/* keep the tap target and spacing proportional */
.footer__list-social .list-social__link {
  padding: 1.4rem;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

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

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

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

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

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

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

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

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

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

.placeholder-svg {
  height: 100%;
  width: 100%;
}

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

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

/*natex added due to effect on search bar*/
.custom-header-search *:focus-visible {
  outline: none;
  outline-offset: none;
  box-shadow: none;
}
.custom-header-search {
  display: flex;
}
.icon-search {margin-top: 4px;}

*: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-wrapper {
  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(50% - 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: 750px) {
  .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) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

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

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

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

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

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

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

@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, shop-pay-wallet-button, shopify-amazon-wallet-button, shopify-paypal-button, shopify-google-pay-button {
  --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: 10px;
  position: relative;
}
:host([page-type="cart_page"]) .accelerated-checkout-button,
.amazonpay-button-view1,
.gravity-button {
  --gravity-button-border-radius: 10px; /* or delete this line entirely */
  border-radius: 10px !important;
}

.cart__checkout-button {
  background: #28a45c!important;
  font-size: 1.2em !IMPORTANT;
}
.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);
}

.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 {
  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__button--unbranded: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) {
  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;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* 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-wrapper {
  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 .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.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-wrapper {
  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-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

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

.customer .field .form__message .svg-wrapper {
  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: #333;
  position: relative;
  /*width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);*/
  width: min-content;
  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: 2rem;
  font-weight: 600;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
  width: 2rem;
}

.quantity__button {
  width: 20px;
  flex-shrink: 0;
  font-size: 1em;
  border: 0;
  background-color: transparent;
  font-weight: 600;
  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-wrapper {
  width: 1rem;
  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;
}

.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: #28a45c;
  color: rgb(var(--color-button-text));
  height: 1.8rem;
  width: 1.8rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  bottom: 23px;
  left: 2.4rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
  font-weight: bolder;
}

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

#shopify-section-sections--19288974065795__announcement-bar .span {
  font-family: "Oswald"!important;}

.announcement-bar .slider--everywhere {
  display: flex;            /* add */
  flex-wrap: nowrap;        /* add */
  overflow: hidden;         /* add */
  margin-bottom: 0;         /* you already have this */
  scroll-behavior: auto;    /* you already have this */
  list-style: none;         /* add (since it's a <ul>) */
  margin: 0;                /* add - reset default UL margin */
  padding: 0;               /* add - reset default UL padding */
  scroll-snap-type: x mandatory;              /* nice-to-have */
  -webkit-overflow-scrolling: touch;          /* nice-to-have */
}

/* Force Oswald on announcement bar, even if inline styles exist */
.announcement-bar,
.announcement-bar__message,
.announcement-bar * {
  font-family: 'Oswald', sans-serif !important;
}


.announcement-bar .slider__slide {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0;
  scroll-snap-align: start; /* optional */
}

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

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

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

@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 .svg-wrapper {
  width: 44px;
  height: 44px;
}

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

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  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: 1.2rem;
    padding-right: 1.2rem;
  }
}

.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-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    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);
  }
}

/*natex*/
.product__media-list .thumbnail {
  max-width: 80px; /* adjust as needed */
  max-height: 80px;
  flex: 0 0 auto;
}

.product__media-list .thumbnail img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

.price-tag-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #28a45c;
  padding: 0px 5px;
  border-radius: 15px 0 8px;
  font-weight: bold;
  z-index: 2;
}
.price-tag-overlay .price__regular, .price-tag-overlay .price__sale {
  color: white;
  font-size: 2em;
  font-style: italic;
}
.superscript-dollar {
    font-size: 1.7rem;
    margin-right: -2px;
}
.product .superscript-dollar {
    font-size: 4rem!important;
    margin-right: -2px;
}
.product .price__regular .price-item--regular {
  font-size: 4em!important;
  font-weight: bold;
}
.card__media {
  position: relative;
}
.cents-sup {
  font-size: 1.7rem;
  vertical-align: super;
  text-underline-offset: 0.1em;
  margin-left: 3px;
}
.product .cents-sup {
  font-size: 4rem!important;
  vertical-align: super;
  text-underline-offset: 0.1em;
  margin-left: 0px!important;
}
.product__info-container>*+* {
  margin: 0px!important;
}

/* Force 2-column product layout on mobile for Featured section */
@media screen and (max-width: 749px) {
    .card__heading {font-size: 0px!important;} 
    .product .superscript-dollar, .product .cents-sup {
        font-size: 3.3rem !important;
    }
      .superscript-dollar {
    font-size: 0.5em;
    }
}
/* Mobile: keep only the first announcement/utility bar */
@media screen and (max-width: 749px) {
  /* Dawn sections: collapse duplicate announcement-bar sections */
  .shopify-section.announcement-bar-section ~ .shopify-section.announcement-bar-section {
    display: none !important;
  }

  /* If an app (hello/promo/free shipping) injects another bar near the header */
  .utility-bar + .utility-bar,
  .header + .utility-bar,
  .utility-bar + .shopify-section.announcement-bar-section {
    display: none !important;
  }
}
@media (max-width: 749px) {
  .product-recommendations .grid,
  .related-products .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem;
  }
  .product-recommendations .slider,
  .related-products .slider {
    display: block !important;
    overflow: visible !important;
  }
  .product-recommendations .card__media,
  .related-products .card__media {
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 749px) {
  .custom-header-search {
    display: none;
  }
  .header__search {
    display: initial!important;
  }
}
/* --- Product page: full-width main media on mobile --- */
@media (max-width: 749px) {
  /* 1) stop the product media track from behaving like a multi-card carousel */
  .product .product__media-list.slider,
  .product .slider--product,
  .product .product__media-list.slider--mobile {
    display: block !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-left: 0 !important;
  }

  /* 2) force each slide to occupy the full viewport width */
  .product .product__media-list .slider__slide,
  .product .slider--product .slider__slide,
  .product .product__media-list .slideshow__slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* 3) make sure the media wrapper and image aren’t constrained */
  /* Product media wrapper and image should respect container width */
  .product .product__media-wrapper,
  .product .product__media,
  .product .product__media .media {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;    /* include padding in width calc */
    overflow: hidden;          /* prevent horizontal scrollbars */
  }

  .product .media img,
  .product .product__media img,
  .product .product__media picture img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}
/* --- Product page: anti-overflow clamp for main media (mobile) --- */
@media (max-width: 749px) {
  /* 0) Absolute safety net to stop horizontal scroll on the product page */
  html, body, .product { overflow-x: hidden; }

  /* 1) Kill any track spacing that can push beyond 100% */
  .product .product__media-list,
  .product .product__media-list.slider,
  .product .slider--product,
  .product .product__media-list.slider--mobile {
    display: block !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2) Each slide = exactly container width (no extra margins) */
  .product .product__media-list .slider__slide,
  .product .slider--product .slider__slide,
  .product .product__media-list .slideshow__slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3) Media wrappers and the image itself respect container and don't overflow */
  /* Keep the aspect ratio padding-bottom on .media */
  .product .product__media .media {
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* do NOT set padding-bottom here */
    height: auto !important;
  }
}

/* --- FIX: Collection & Search thumbnails (cards) --- */
/* Scope strictly to collection + search templates so nothing else is affected */
.template-collection .card__media,
.template-search .card__media {
  width: 100%;
}

/* Ensure the media box has height */
@supports (aspect-ratio: 1 / 1) {
  .template-collection .card__media .media,
  .template-search .card__media .media {
    position: relative;
    aspect-ratio: 1 / 1;           /* square thumbs; adjust if you prefer 3/4 etc. */
    padding: 0 !important;         /* we use aspect-ratio, not padding-bottom */
    overflow: hidden;
  }
}
/* Fallback for older browsers (no aspect-ratio support) */
@supports not (aspect-ratio: 1 / 1) {
  .template-collection .card__media .media,
  .template-search .card__media .media {
    position: relative;
    padding-bottom: 100% !important; /* square ratio */
    height: 0;
    overflow: hidden;
  }
}

/* Make the actual image fill the box */
.template-collection .card__media .media > img,
.template-collection .card__media .media > picture,
.template-collection .card__media .media > picture > img,
.template-search .card__media .media > img,
.template-search .card__media .media > picture,
.template-search .card__media .media > picture > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;               /* or 'contain' if you prefer letterboxing */
  display: block;
}
/* --- MOBILE RESET: Related products / Product recommendations --- */
@media (max-width: 749px) {
  /* Stop slider behavior in related-products so global .slider__slide rules don't shrink items */
  .product-recommendations .slider,
  .related-products .slider {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* Use a clean 2-column grid */
  .product-recommendations .grid,
  .related-products .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    margin: 0 !important;
  }

  /* Neutralize any peek/grid width hacks */
  .product-recommendations .grid__item,
  .related-products .grid__item {
    width: auto !important;
    max-width: none !important;
  }
  .product-recommendations .grid--peek,
  .related-products .grid--peek { margin: 0 !important; }
  .product-recommendations .grid--peek .grid__item,
  .related-products .grid--peek .grid__item { width: auto !important; }

  /* Ensure card media has real height */
  .product-recommendations .card__media .media,
  .related-products .card__media .media {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0 !important;     /* use aspect-ratio instead of padding-bottom */
    overflow: hidden;
  }

  /* Make the image fill the box */
  .product-recommendations .card__media .media > img,
  .product-recommendations .card__media .media > picture > img,
  .related-products .card__media .media > img,
  .related-products .card__media .media > picture > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
}
/* Mobile (product page): show Title + Description BELOW the Add to Cart */
@media (max-width: 749px) {
  /* make sure order works without changing the visual stack */
  .template-product .product .product__info-container {
    display: flex;
    flex-direction: column;
  }

  /* move just these two to the end, right after ATC */
  .template-product .product .product__info-container .product__title,
  .template-product .product .product__info-container h1.product__title {
    order: 99;
    margin-top: 0.5rem !important; /* breathing room below ATC */
  }

  .template-product .product .product__info-container .product__description {
    order: 100;
    margin-top: 0.5rem !important;
  }
  .product__info-container .product__description {
    margin: 0rem 0rem!important;
  }
  .related-products {
    padding-top: 0!important;
  }
  .related-products__heading {
    margin-bottom: 1rem!important;
  }
}
/* Mobile: put price (left) and quantity (right) on one line, just above Add to cart */
@media (max-width: 749px){
  .mobile-price-qty-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:10px 0 14px;
  }
  .mobile-price-qty-row [id^="price-"]{ margin:0; flex:1 1 auto; }
  .mobile-price-qty-row [id^="Quantity-Form-"]{ margin:0; flex:0 0 auto; }
  .mobile-price-qty-row [id^="Quantity-Form-"] .quantity__label{ display:none; }
  .mobile-price-qty-row [id^="Quantity-Form-"] .quantity{ max-width:160px; }
}
/* natex hide ShopPay installments on product page */
.product__info-container .installment,
.product__info-container .shopify-installments,
.product__info-container [data-shopify="payment-terms"] {
  display: none !important;
}

/* Optional: dim only Color options when disabled */
.product-form__input--pill input[type="radio"][name*="color" i].disabled + label,
.product-form__input--pill input[type="radio"][name*="color" i][disabled] + label {
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
}
.upcart-upsells-button, .upcart-checkout-button-container, button.UpcartDesignSettings__button, input.UpcartDesignSettings__button, .UpcartDesignSettings__button, .UpcartDesignSettings__button span, .UpcartDesignSettings__button:visited {
    background: #28a45c!important;
    color: #FFFFFF;
    border-radius: 10px!important;
}

/* ===================================================================
   SHOP BY CATEGORY — MEGA MENU (Dawn)
   Target markup wrapper:  <div id="shop-by-cat" class="logo-right-icons shop-by-cat"> … </div>
   =================================================================== */

/* --- 0) Safety: prevent header wrappers from clipping the overlay --- */
.icon-bar,
.header,
header,
.header__inline-menu {
  overflow: visible !important;
}

/* --- 1) Wrapper anchor (positions the dropdown) --- */
#shop-by-cat {
  position: relative;
  overflow: visible !important;
  line-height: normal;
  border: 2px solid #333;
  border-radius: 10px;
  padding: 6px;
  min-width: 65px;
  top: -3px; 
}

/* Optional: pointer cursor for the trigger label/button */
#shop-by-cat .mega-trigger { cursor: pointer; }

/* --- 2) Panel base: overlay box (NOT in normal flow) + look & feel --- */
#shop-by-cat > .mega-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;

  /* Box */
  min-width: 720px;
  max-width: min(92vw, 1100px);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  padding: 18px 22px;

  /* Transitions */
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  #shop-by-cat > .mega-panel {
    transition: none;
  }
}

/* --- 3) Visibility control — HIDDEN by default (failsafe) --- */
#shop-by-cat > .mega-panel {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- 4) Open state (JS adds .is-open to #shop-by-cat) --- */
#shop-by-cat.is-open > .mega-panel {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0);
}

/* --- 5) Inner layout: 3-column grid, tidy spacing --- */
#shop-by-cat .mega-grid {
  display: flex;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 8rem;
}

#shop-by-cat .mega-col {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 33%;
}

#shop-by-cat .mega-col li + li { margin-top: 8px; }

#shop-by-cat .mega-col a {
  display: block;
  font-size: 2rem;
  text-decoration: none;
  color: rgb(var(--color-foreground, 18, 18, 18));
}

#shop-by-cat .mega-col a:hover,
#shop-by-cat .mega-col a:focus {
  text-decoration: underline;
}

/* Optional: focus ring for accessibility if your theme lacks one */
#shop-by-cat .mega-col a:focus-visible {
  outline: 2px solid rgba(0,0,0,.4);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- 6) Optional caret (little triangle) under the trigger --- */
/* Comment out if you don't want the caret */
#shop-by-cat.is-open > .mega-panel::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,.08) transparent;
}
#shop-by-cat.is-open > .mega-panel::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 9px 9px 9px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

/* --- 7) Desktop hover-to-open (optional) ---
   Keep click/tap JS enabled; this only adds hover on pointer devices. */
@media (hover:hover) and (pointer:fine) {
  #shop-by-cat:hover > .mega-panel {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0);
  }
}

/* --- 8) Mobile treatment: full-width sheet overlay --- */
@media (max-width: 989px) {
  #shop-by-cat > .mega-panel {
    position: fixed;
    left: 0; right: 0;
    top: var(--header-height, 64px); /* adjust if your header is taller */
    transform: none !important;
    border-radius: 0;
    min-width: 0;
    max-width: none;
    padding: 16px 18px 24px;
  }

  #shop-by-cat .mega-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
}

/* --- 9) High z-index guard if your header uses higher stacking --- */
/* If the panel appears under sticky elements, bump these numbers: */
/*
.header, header { z-index: 90; }
#shop-by-cat > .mega-panel { z-index: 999; }
*/

#shop-by-cat > .mega-panel {
  position: absolute;          /* ← This removes it from layout flow */
  top: calc(100% + 10px);      /* positions below the trigger */
  left: 50%;                   /* centers it horizontally */
  transform: translateX(-50%); /* perfect centering */
  z-index: 99;                 /* sits above header elements */

  /* Style */
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  padding: 18px 22px;
  min-width: 720px;
  max-width: min(92vw, 1100px);

  /* Start hidden (even if inline display:none exists) */
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.mega-col ul {list-style: none;}
/* safer */
#shop-by-cat > .mega-panel {
  position: absolute !important;
  top: 54px;
  border-radius: 0 10px 10px 10px;
  list-style: none;
  background: rgb(251, 249, 246) !important;
  /* no display here — visibility is controlled by the open/hidden rules above */
}

/* --- Make hamburger menu lines thicker and #333 --- */
.header__icon--menu .icon-hamburger svg,
.header__icon--menu .icon-hamburger path {
  stroke: #333 !important;     /* darker color */
  stroke-width: 2.5px !important; /* thicker lines (default is ~1.5) */
  fill: none !important;       /* ensure no fill hides strokes */
}

/* Optional: hover effect for clarity */
.header__icon--menu:hover .icon-hamburger path {
  stroke: #000 !important;
}
.header__icon--menu .icon-hamburger {
  width: 26px !important;  /* increase icon size */
  height: 26px !important;
}
/* === HEADER MENU ICONS (Hamburger & Close) === */

/* Base: thicker, darker lines for both icons */
.header__icon--menu .icon-hamburger svg,
.header__icon--menu .icon-hamburger path,
.header__icon--menu .icon-close svg,
.header__icon--menu .icon-close path {
  stroke: #333 !important;         /* dark gray color */
  stroke-width: 2.5px !important;  /* thicker lines */
  fill: none !important;           /* remove fill, just strokes */
  vector-effect: non-scaling-stroke; /* keep stroke thickness consistent when resized */
}

/* Optional: make both icons slightly larger */
.header__icon--menu .icon-hamburger,
.header__icon--menu .icon-close {
  width: 26px !important;
  height: 26px !important;
}

/* Optional: hover/active state for clarity */
.header__icon--menu:hover .icon-hamburger path,
.header__icon--menu:hover .icon-close path {
  stroke: #000 !important;
}

/* === ENLARGED MOBILE SEARCH ICON === */
.header__icon--search .icon-search {
  width: 40px !important;   /* increase overall size */
  height: 40px !important;
}

.header__icon--search .icon-search svg,
.header__icon--search .icon-search path {
  stroke: #333 !important;
  stroke-width: 3px !important;   /* slightly thicker to match larger size */
  fill: none !important;
  vector-effect: non-scaling-stroke;
}

/* Optional: hover darken */
.header__icon--search:hover .icon-search path {
  stroke: #000 !important;
}
.header__search .header__icon .svg-wrapper {
    width: 25px !important;
}
/* === Open Search Bar Icons === */

/* make both icons larger & darker */
.search__button svg,
.search__button path,
.search-modal__close-button svg,
.search-modal__close-button path {
  stroke: #333 !important;
  stroke-width: 3px !important;
  fill: none !important;
  vector-effect: non-scaling-stroke;
}

/* increase icon size */
.search__button svg,
.search-modal__close-button svg {
  width: 28px !important;
  height: 28px !important;
}

/* optional hover effect */
.search__button:hover path,
.search-modal__close-button:hover path {
  stroke: #333 !important;
}

@media (max-width: 749px) {
  /* --- Overall footer --- */
  .footer {
    background: #333 !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 0.9em;
    line-height: 1.2 !important; /* tighter global line spacing */
    padding: 1.5rem 0 !important;
  }

  /* Remove any background pseudo-elements */
  .footer::before,
  .footer::after {
    background: none !important;
    content: none !important;
  }

  /* --- Section Headings --- */
  .footer h2,
  .footer h3,
  .footer h4,
  .footer-block__heading {
    position: relative;
    text-align: center;
    color: #fff !important;
    margin: 0.6rem 0 0.4rem 0 !important; /* minimal spacing between sections */
    font-weight: 600;
    font-size: 0.95em;
  }

  /* Add the “ - ” before and after each heading */
  .footer h2::before,
  .footer h3::before,
  .footer h4::before,
  .footer-block__heading::before {
    content: "- ";
  }

  .footer h2::after,
  .footer h3::after,
  .footer h4::after,
  .footer-block__heading::after {
    content: " -";
  }

  /* --- Footer menus --- */
  .footer-block--menu ul {
    display: inline-block;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  .footer-block--menu li {
    display: inline-block;
    margin: 0.15em 0.4em; /* very tight spacing between links */
  }

  /* --- Stack sections with less gap --- */
  .footer__blocks-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem; /* reduced gap between entire sections */
  }

  /* --- Links --- */
  .footer a {
    color: #fff !important;
    text-decoration: none;
  }

  .footer a:hover {
    text-decoration: underline;
    color: #ccc !important;
  }

  /* --- Bottom copyright area --- */
  .footer__content-bottom {
    text-align: center;
    margin-top: 0.8rem !important;
    line-height: 1.2 !important;
  }
}

/* The list itself */
.style-category-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.style-category-list li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* Row */
.style-category-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: rgb(var(--color-foreground, 18, 18, 18));
  font-size: 1rem;
  line-height: 1.3;
  padding: 0.25rem 0;
}

/* Style icons (images) */
.style-category-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
}

/* Category icons (emoji metafield) */
.style-category-emoji {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Hover */
.style-category-link:hover {
  opacity: 0.85;
}

/* Desktop: Custom footer layout (50% / 25% / 25%) */
@media (min-width: 750px) {

  .footer__blocks-wrapper {
    display: flex !important;
    width: 100% !important;
    gap: 0 !important;
  }
  .footer__blocks-wrapper .footer-block:nth-child(1) {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  .footer__blocks-wrapper .footer-block:nth-child(2) {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
  .footer__blocks-wrapper .footer-block:nth-child(3) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Remove Dawn grid padding so columns align perfectly */
  .footer__blocks-wrapper .grid__item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 750px) {
  .footer__blocks-wrapper > .footer-block:last-child .footer-block__heading {
    text-align: center;
    margin-left: -25%;
  }
}
@media screen and (max-width: 750px) {
    .footer-block__details-content>li {
        margin-right: 2rem;
    }
}
/* Desktop: Categories = 3 columns internally */
@media (min-width: 750px) {

  /* Target the Categories block ONLY (first footer block) */
  .footer__blocks-wrapper .footer-block:nth-child(3) .footer-block__details-content {
    column-count: 2 !important;
    column-gap: 2rem;   /* spacing between the 3 internal columns */
  }

  /* Remove list bullets and prevent break inside links */
  .footer__blocks-wrapper .footer-block:nth-child(3) .footer-block__details-content li {
    break-inside: avoid;       /* keeps items from splitting */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
}
@media screen and (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {
    .product__info-wrapper {
        padding: 0px 0 0 2rem!important;
    }
    .icon-bar {
      display: none!important;
    }
    .grid--2-col-tablet-down .grid__item {
        width: calc(24% - var(--grid-desktop-horizontal-spacing) / 2)!important;
    }
    footer {
    padding: 1rem;
}
}
@media (max-width: 900px) {
  header-drawer {
    margin-left: -1rem!important;
}
}
/* Landscape mobile drawer enhancements */
@media screen and (orientation: landscape) and (max-width: 900px) {

  /* Make drawer full width */
  header-drawer .menu-drawer {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
  }

  /* Increase menu item font size */
  header-drawer .menu-drawer__navigation .menu-drawer__menu-item {
    font-size: 2rem !important;
  }

  /* Three-column layout for top-level menu items */
  header-drawer .menu-drawer__navigation .menu-drawer__menu {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  .shop-all-button {
    width: 28%!important;
  }
  .style-category-link {
    font-size: 2rem;
  }
}
@media screen and (orientation: landscape) {
  header-drawer .style-category-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  header-drawer .style-category-list li {
    margin: 0;
  }

  header-drawer .style-category-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
  }

  header-drawer .style-category-icon,
  header-drawer .style-category-emoji {
    display: block;
    margin-bottom: 0.25rem;
  }
}
/* Allow absolute overlay inside the media wrapper */
.product-media-with-share {
  position: relative;
}

/* Floating Share button overlay */
.pdp-share-floating {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 40;
  
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  display: flex;
  align-items: center;
  gap: 6px;

  cursor: pointer;
}

/* Increase visibility of the share label and icon */
.pdp-share-floating .share-button,
.pdp-share-floating button,
.pdp-share-floating a {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333 !important;
}

/* Make the share icon slightly bigger */
.pdp-share-floating svg {
  width: 20px;
  height: 20px;
}
/* On product pages, use the product grid as the positioning context */
.template-product .product {
  position: relative;
}

/* ===== 6DollarShirts mobile menu sizing fixes ===== */
@media screen and (max-width: 749px) {

  /* 1. "Log in" text — override the .h5 utility so it matches menu items */
  .menu-drawer__utility-links .menu-drawer__account.h5 {
    font-size: 2rem;
  }
  /* 3. Social icons (X / Facebook / Instagram) — match emoji visual size */
  .menu-drawer__utility-links .list-social .icon,
  .menu-drawer__utility-links .list-social__link .svg-wrapper {
    width: 2.7rem !important;
  }
  .announcement-bar__message span {
    letter-spacing: 1px!important;
    font-size: 1em!important;
  }
}

input.UpcartDesignSettings__button, .UpcartDesignSettings__button {
    font-size: 1.4rem !important;  
}