/** Shopify CDN: Minification failed

Line 313:1 Expected "}" to go with "{"

**/
.type-banner {
  flex: 1 0 100%;
}

.footer__title {
  font-weight: bold;
  font-size: var(--type-base-size);
}
.site-header .site-nav__link {
  letter-spacing: 0.1em !important;
}
@media screen and (min-width: 990px) {
  .site-header .site-nav__link {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* === Promotion Grid: respect PNG transparency on product tiles === */

/* Nuke background on the product-image zone and its wrappers */
.promo-grid__container .type-product__image,
.promo-grid__container .type-product__image .image-wrap,
.promo-grid__container .type-product__image .rimage-outer-wrapper,
.promo-grid__container .type-product__image .rimage-wrapper,
.promo-grid__container .type-product__image picture,
.promo-grid__container .type-product__image img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Some builds paint the tile/image via the color scheme class */
.promo-grid__container.color-scheme-1 .type-product__image,
.promo-grid__container.color-scheme-2 .type-product__image,
.promo-grid__container.color-scheme-3 .type-product__image {
  background-color: transparent !important;
}

/* Remove lazy placeholders / overlays drawn with ::before */
.promo-grid__container .type-product__image .image-wrap::before,
.promo-grid__container .type-product__image .rimage-outer-wrapper::before {
  content: none !important;
  background: transparent !important;
}

/* If the tile wrapper itself adds a background, clear those too */
.promo-grid__container .promo-grid__product-images,
.promo-grid__container .type-product__wrapper,
.promo-grid__container .promo-grid__product {
  background: transparent !important;
}
/* === Promo Grid: make the product tile less tall (no cropping) === */

/* Desktop: use a shallower aspect ratio for the image container */
@media (min-width: 900px) {
  .promo-grid__container .type-product__image .image-wrap {
    /* neutralize the inline padding trick the theme uses */
    height: auto !important;
    padding-bottom: 0 !important;

    /* shallower than a square; tweak to taste:
       4/3 (1.33) = shorter; 3/2 (1.5) = even shorter */
    aspect-ratio: 4 / 3;

    border-radius: inherit;            /* keeps your rounded edges if any */
    overflow: hidden;                  /* keeps everything tidy */
    background: transparent !important;
  }

  /* Make the actual image fit inside that ratio without cropping */
  .promo-grid__container .type-product__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;    /* no cropping */
    background: transparent !important;
  }
}

/* Mobile: keep the familiar square tile so it doesn’t look odd */
@media (max-width: 899.98px) {
  .promo-grid__container .type-product__image .image-wrap {
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 1 / 1;               /* square on mobile */
  }
  .promo-grid__container .type-product__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* Optional: Reduce vertical padding/whitespace of the promo block itself */
.promo-grid__container {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Optional: tighten spacing around the product image/text area if present */
.promo-grid__container .type-product__wrapper,
.promo-grid__container .promo-grid__product-images,
.promo-grid__container .promo-grid__text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* rounded variant/quantity pills (expanse - variant__button-label) */
:root { --pill-radius: 25px; } /* use 9999px for full pills */

/* base buttons */
fieldset.variant-button-wrap label.variant__button-label {
  border-radius: var(--pill-radius) !important;
  overflow: hidden; /* clip inner edges */
}

/* selected state (theme toggles via :checked + label and/or is-selected class) */
fieldset.variant-button-wrap input[type="radio"]:checked + label.variant__button-label,
fieldset.variant-button-wrap label.variant__button-label.is-selected,
fieldset.variant-button-wrap label.variant__button-label--selected {
  border: 2px solid currentColor;
box-shadow: none !important;
}

/* make any pseudo-element borders/outlines rounded too */
fieldset.variant-button-wrap label.variant__button-label::before,
fieldset.variant-button-wrap label.variant__button-label::after {
  border-radius: var(--pill-radius) !important;
}

/* keyboard focus: keep it visible but rounded */
fieldset.variant-button-wrap label.variant__button-label:focus,
fieldset.variant-button-wrap label.variant__button-label:focus-visible {
  outline: none !important;                 /* remove square outline */
  border-radius: var(--pill-radius) !important;
  box-shadow: 0 0 0 2px currentColor;       /* rounded focus ring */
}
/* US price adjust badge */
.grid-product__tag--us-adjust {
  background:#444;
  color:#fff;
  display:inline-block;
  padding:.25rem .75rem;
  font-size:.75rem;
  line-height:1.2;
  border-radius:9999px;
  font-weight:600;
  text-transform:uppercase;
  margin-right:.5rem;
  vertical-align:middle; /* aligns with price text */
}

/* Micro-adjust only on desktop */
@media (min-width: 768px) {
  .grid-product__tag--us-adjust {
    position: relative;
    top: 2px; /* tweak this value to taste */
  }
}
/* COLLECTION GRID: match US PRICE ADJUST to SALE badge look */
.product-grid-item .grid-product__tag--us-adjust {
  background:#D84C4C;        /* same red */
  color:#fff;
  display:inline-block;
  padding:.25rem .5rem;
  font-size:.75rem;
  line-height:1;
  border-radius:0 4px 4px 0; /* square left, rounded right */
  font-weight:700;           /* bolder text to match SALE */
  text-transform:uppercase;

  position:static;
  top:auto;
  transform:none;
  margin:0;
}
/* SALE badge spacing fix */
.grid-product__tag--sale {
  display:inline-block;
  margin-right:.5rem;       /* match US PRICE ADJUST */
  vertical-align:middle;    /* align with price text */
}

/* Optional micro-adjust on desktop */
@media (min-width: 768px) {
  .grid-product__tag--sale {
    position: relative;
    top: 2px; /* tweak to visually align perfectly with text */
  }
}
/* Game-changer supplies — 5 per row on desktop ONLY */
@media (min-width: 1024px) {
  /* Replace the section id if Shopify regenerates it */
  #shopify-section-template--19513505874060__main-collection {

    /* FLEX version (many Archetype layouts use this in product grids) */
    /* Target the *product grid container* only */
    /* Try these in order; keep the one that matches your markup */
    /* 1) */
    /* .product-grid is common */
    /* 2) fallback class names seen in Archetype/Dawn variants */
  }
    /* 1) If the page has .product-grid */
  #shopify-section-template--19513505874060__main-collection .product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--grid-gutter, 24px);
  }
  #shopify-section-template--19513505874060__main-collection .product-grid > .grid__item {
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--grid-gutter, 24px) * 4)) / 5) !important;
    max-width: calc((100% - (var(--grid-gutter, 24px) * 4)) / 5) !important;
    min-width: 0; /* prevents overflow */
  }

  /* 2) If your container is .grid--collection (keep this block only if it exists) */
  #shopify-section-template--19513505874060__main-collection .grid--collection {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--grid-gutter, 24px);
  }
  #shopify-section-template--19513505874060__main-collection .grid--collection > .grid__item {
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--grid-gutter, 24px) * 4)) / 5) !important;
    max-width: calc((100% - (var(--grid-gutter, 24px) * 4)) / 5) !important;
    min-width: 0;
  }

  /* GRID fallback (if your product grid is actually CSS grid) */
  #shopify-section-template--19513505874060__main-collection .product-grid,
  #shopify-section-template--19513505874060__main-collection .grid--collection,
  #shopify-section-template--19513505874060__main-collection .collection-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: var(--grid-gutter, 24px);
  }
  #shopify-section-template--19513505874060__main-collection .product-grid > *,
  #shopify-section-template--19513505874060__main-collection .grid--collection > *,
  #shopify-section-template--19513505874060__main-collection .collection-grid > * {
    min-width: 0; /* cards don't stretch */
  }
/* --- your existing overrides (unchanged) --- */

.type-banner { flex: 1 0 100%; }
.footer__title { font-weight: bold; font-size: var(--type-base-size); }
.site-header .site-nav__link { letter-spacing: 0.1em !important; }
@media screen and (min-width: 990px){ .site-header .site-nav__link{ padding-left:12px!important; padding-right:12px!important; } }

/* ... (all your existing CSS blocks exactly as you shared) ... */

/* === Helpers: guarantee single-image products render === */
.template-product .has-single-media .product-slideshow--single,
.template-product .has-single-media .product-slideshow--single .product-main-slide{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  height:auto!important;
}
.template-product .has-single-media .image-wrap--single{
  padding:0!important;
  height:auto!important;
  background:transparent!important;
}
.template-product .has-single-media img.image-element--single{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  margin:0!important;
}
/* DEBUG: force show single product image */
.image-wrap--single,
.image-wrap--single img {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  width:100% !important;
  max-width:100% !important;
  position:relative !important;
  z-index:99 !important;
  background:#fff !important;
}
/* Single-image product path – keep */
.template-product .has-single-media .product-slideshow--single,
.template-product .has-single-media .product-slideshow--single .product-main-slide {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
}

.template-product .has-single-media .image-wrap--single {
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
}

.template-product .has-single-media img.image-element--single {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}