/** Shopify CDN: Minification failed

Line 6956:31 Unexpected "*"
Line 7572:0 Unexpected "}"
Line 7848:0 Unexpected "}"

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

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

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

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

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

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

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

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

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

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

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

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

@media screen and (min-width: 750px) {
  #CartDrawer table.cart-items tr[id^="CartDrawer-Item"] > td.cart-item__quantity > quantity-popover {
    display: block !important;
    position: relative !important;

    /* keep the right shift */
    left: 25px !important;

    /* IMPORTANT: remove the layout-reserving vertical offset */
    top: 0 !important;

    /* pull it up WITHOUT leaving dead space below */
    margin-top: -25px !important;
  }
}


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

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

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

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

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

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

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

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

.hidden {
  display: none !important;
}

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

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

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

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

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

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

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

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

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

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

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

table:not([class]) td,
table:not([class]) th {
  padding: 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;
}

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

*: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(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

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

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

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

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

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

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

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

@media screen and (min-width: 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 {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

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

.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: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

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

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

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*WHERE CUSTOM START**************************************************************/

/************************************************************************************/

/* Mobile: pin + shrink banner buttons */
@media screen and (max-width: 749px) {
  .banner {
    position: relative !important;
  }
  .banner__content,
  .banner__box {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .banner__buttons {
    margin: 0 !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .banner__buttons .button {
    max-width: 260px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}
/************************************************************************************/

/* Header gradient stripe + shadow */
.header-wrapper {
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 50;
}
.shopify-section-header-sticky .header-wrapper::after,
.header-wrapper::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #ff4500, #f4d03f);
  z-index: 1;
}

/* Dropdown above gradient stripe */
.header__submenu,
.header__menu-item .header__submenu {
  position: relative;
  z-index: 9999 !important;
}

predictive-search,
.predictive-search {
  position: relative;
  z-index: 9999 !important;
}

/************************************************************************************/
/* =========================
   CONFIG
   ========================= */
:root { --nav-gold:#d49a00; --u-h:2px; --u-gap:3px; }

/* =========================
   TOP-LEVEL ANCHORS (HOME, TEES, etc.)
   ========================= */
.header__inline-menu a.header__menu-item.link.link--text {
  color:#333 !important;
  font-weight:400 !important;
  text-decoration:none !important;
  transition:color .2s ease, font-weight .2s ease;
}
.header__inline-menu a.header__menu-item.link.link--text:hover {
  color:var(--nav-gold) !important;
  font-weight:700 !important;
}
/* active page */
.header__inline-menu a.header__menu-item.link.link--text[aria-current="page"],
.header__inline-menu a.header__menu-item.link.link--text[aria-current="true"],
.header__inline-menu a.header__menu-item.link.link--text.is-active {
  color:var(--nav-gold) !important;
  font-weight:700 !important;
}

/* remove Dawn underline on top-level anchors */
.header__inline-menu .list-menu__item > a.link.link--text::before,
.header__inline-menu .list-menu__item > a.link.link--text::after {
  content:none !important; display:none !important;
}

/* underline on the text span (exact text width) */
.header__inline-menu a.header__menu-item.link.link--text > span {
  position:relative; display:inline-block;
}
.header__inline-menu a.header__menu-item.link.link--text > span::after {
  content:""; position:absolute; left:0; right:0;
  bottom:calc(-1 * var(--u-gap)); height:var(--u-h);
  background:var(--nav-gold);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.header__inline-menu a.header__menu-item.link.link--text:hover > span::after,
.header__inline-menu a.header__menu-item.link.link--text[aria-current="page"] > span::after,
.header__inline-menu a.header__menu-item.link.link--text[aria-current="true"] > span::after,
.header__inline-menu a.header__menu-item.link.link--text.is-active > span::after {
  transform:scaleX(1);
}

/* =========================
   DROPDOWN PARENTS (CHARACTERS / ABOUT)
   ========================= */

/* base: black by default */
.header__inline-menu summary.header__menu-item.list-menu__item.link.focus-inset {
  color:#333 !important;
  font-weight:400 !important;
  text-decoration:none !important;
  transition:color .2s ease, font-weight .2s ease;
}

/* hover: gold/bold + underline */
.header__inline-menu summary.header__menu-item.list-menu__item.link.focus-inset:hover {
  color:var(--nav-gold) !important;
  font-weight:700 !important;
}
.header__inline-menu summary.header__menu-item:hover span::after {
  transform: scaleX(1) !important;
}

/* force open state to stay black unless a child is active */
.header__inline-menu details[open] > summary.header__menu-item.list-menu__item.link.focus-inset {
  color:#333 !important;
  font-weight:400 !important;
}

/* only turn parent gold/bold/underline if a child link is active */
.header__inline-menu details:has(.header__submenu a[aria-current="page"]) > summary.header__menu-item,
.header__inline-menu details:has(.header__submenu a.is-active) > summary.header__menu-item {
  color:var(--nav-gold) !important;
  font-weight:700 !important;
}
.header__inline-menu details:has(.header__submenu a[aria-current="page"]) > summary.header__menu-item span::after,
.header__inline-menu details:has(.header__submenu a.is-active) > summary.header__menu-item span::after {
  transform: scaleX(1) !important;
}

/* parent underline element */
.header__inline-menu summary.header__menu-item span {
  position: relative;
  display: inline-block;
}
.header__inline-menu summary.header__menu-item span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--u-gap));
  height: var(--u-h);
  background: var(--nav-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

/* caret follows text color */
.header__inline-menu summary.header__menu-item .icon-caret {
  color: currentColor;
  fill: currentColor;
}

/* =========================
   SUBMENU LINKS (dropdown options)
   ========================= */

/* Tune these if your theme padding changes */
:root {
  --submenu-pad-x: 2rem;   /* Dawn default horizontal padding */
  --submenu-pad-y: .8rem;  /* Dawn default vertical padding   */
}

/* Remove Dawn's before underline on submenu anchors */
.header__submenu a.header__menu-item.link.link--text::before {
  content: none !important;
  display: none !important;
}

/* Base submenu anchor: keep padding/spacing, but shrink box to text width */
.header__submenu a.header__menu-item.link.link--text {
  color: #333 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color .2s ease, font-weight .2s ease, background-size .25s ease;

  display: inline-flex !important;      /* shrink to content width */
  align-items: center;
  padding: var(--submenu-pad-y) var(--submenu-pad-x) !important;
  position: relative;

  /* Animated underline drawn via background so it matches text width exactly */
  background-image: linear-gradient(var(--nav-gold), var(--nav-gold));
  background-repeat: no-repeat;
  background-origin: content-box;        /* confine to text (excludes padding) */
  background-position: left bottom;
  background-size: 0 var(--u-h);         /* start hidden */
  overflow: visible;
}

/* Hover: gold + bold + underline grows to full text width */
.header__submenu a.header__menu-item.link.link--text:hover {
  color: var(--nav-gold) !important;
  font-weight: 700 !important;
  background-size: 100% var(--u-h);
}

/* Active/current: keep underline visible */
.header__submenu a.header__menu-item.link.link--text[aria-current="page"],
.header__submenu a.header__menu-item.link.link--text[aria-current="true"],
.header__submenu a.header__menu-item.link.link--text.is-active {
  color: var(--nav-gold) !important;
  font-weight: 700 !important;
  background-size: 100% var(--u-h);
}

/* =========================
   MISC CLEANUP
   ========================= */
.header__active-menu-item { text-decoration:none; }
.header__menu-item:hover span { text-decoration:none; }

/* =========================
   NAV HEADER HEIGHT
   ========================= */

/* Reduce height of top navigation bar in Dawn */
.header {
  padding-top: 0.5rem !important;   /* adjust smaller */
  padding-bottom: 0.5rem !important;
}

.header__inline-menu {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Make dropdown parent (summary) space out text + caret */
.header__inline-menu summary.header__menu-item {
  display: inline-flex;       /* text + arrow in one row */
  align-items: center;        /* vertical centering */
  gap: 0.4rem;                /* space between text and arrow */
}

/* Reset caret sizing so it’s readable */
.header__inline-menu summary.header__menu-item svg.icon-caret {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;             /* prevent collapsing */
}

/* =========================
   PRODUCT CARD HOVER
   ========================= */


.card-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
}

.card-wrapper img {
  transition: transform 0.3s ease;
}

.card-wrapper:hover img {
  transform: scale(1.05);
}
/* Add horizontal breathing room inside product cards */
.card-wrapper,
.card {
  padding-left: .5rem;
  padding-right: .5rem;
  box-sizing: border-box;
}

/* Optional: tighten vertical spacing if it feels too tall */
.card-wrapper,
.card {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.card-wrapper {
  border: 1px solid transparent;
  transition: all 0.3s ease;
}


.card-wrapper {
  background: #fff;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.card-wrapper:hover {
  border: 2px solid var(--nav-gold);
  box-shadow: 0 8px 20px rgba(212,154,0,0.25);
  transform: translateY(-6px);
}

/* Kill extra padding around image block */
.card__inner {
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================
   Formatting titles with gradient and udnerlines
   ========================= */

/* Global headings: NORMAL (avoid collisions with apps that reuse .title) */
.shopify-section .title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}


/* Homepage: gradient headings only (featured collection + similar) */
#MainContent .shopify-section[id*="__featured_collection"] .title,
#MainContent .shopify-section[id*="__featured_collection"] .collection__title .title,
#MainContent .shopify-section[id*="__featured_collection"] h2.title {
  background: linear-gradient(90deg, #ff7a18, #ffb347);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  display: inline-block;
  position: relative;
}

/* Optional: the orange underline bar under homepage headings */
#MainContent .shopify-section[id*="__featured_collection"] .title::after,
#MainContent .shopify-section[id*="__featured_collection"] h2.title::after {
  content: "";
  display: block;
  height: 4px;
  width: 70%;
  margin-top: 6px;
  background: linear-gradient(90deg, #ff7a18, #ffb347);
  border-radius: 999px;
}
/* Homepage featured collection heading: underline matches text width */
#MainContent .shopify-section[id*="__featured_collection"] h2.title {
  display: inline-block;            /* shrink-wrap to text width */
  position: relative;
}

#MainContent .shopify-section[id*="__featured_collection"] h2.title::after {
  content: "";
  display: block;
  width: 100%;                      /* FULL text width */
  height: 4px;
  margin-top: 6px;
  background: linear-gradient(90deg, #ff7a18, #ffb347);
  border-radius: 999px;
}
/* Exclude Launchit upsell product titles from the global gradient heading rule */
.shopify-section #launchitup_upsell_wrapper .details a.detail_title > span.title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #000 !important; /* THIS is what makes it visible */
  color: #000 !important;
  text-decoration: none !important;
}

/* Underline spans full text width */
.shopify-section .title::after {
  content: "";
  display: block;
  width: 100%; /* full text width */
  height: 3px;
  margin: 0.25rem 0 0;
  background: linear-gradient(90deg, #ff7a18, #ffb347);
  border-radius: 2px;
}
/* Underline ONLY real section headings (Dawn), not generic .title used by apps */
.shopify-section .title-wrapper-with-link > .title::after,
.shopify-section .collection__title > .title::after,
.shopify-section .rich-text__heading.title::after,
.shopify-section .multicolumn-list__item .title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin: 0.25rem 0 0;
  background: linear-gradient(90deg, #ff7a18, #ffb347);
  border-radius: 2px;
}

/* And remove the old broad rule */
.shopify-section .title::after { 
  content: none;
  display: none;
}
/* Featured collection headings: larger, bold, spaced */
.shopify-section[id*="__featured_collection"] .title-wrapper-with-link .title,
.shopify-section[id*="__featured_collection"] h2.title {
  font-weight: 800 !important;
  font-size: 2.25rem !important; /* bigger than before */
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 1rem; /* gives breathing room above underline */
  color: #000 !important; /* keep text solid */
}

/* Keep the gradient underline intact */


/* Mission statement heading with gradient + underline */
.shopify-section[id*="__rich_text"] h2,
.shopify-section[id*="__rich_text"] .rich-text__heading {
  font-weight: 800 !important;
  font-size: 2rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 1rem;

  /* Gradient text */
  background: linear-gradient(to right, #ff7a18, #ffb347);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  position: relative;
}

/* Underline effect */
.shopify-section[id*="__rich_text"] h2::after,
.shopify-section[id*="__rich_text"] .rich-text__heading::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 0.25rem;
  background: linear-gradient(to right, #ff7a18, #ffb347);
}

/* Mission statement body text back to black */
.shopify-section[id*="__rich_text"] .rich-text__text {
  color: #000 !important;
  font-weight: 400;
  line-height: 1.6;
}

/* Match "The Mission" heading size to "Trending Now" */
.shopify-section[id*="__rich_text"] h2,
.shopify-section[id*="__rich_text"] .rich-text__heading {
  font-size: 2.25rem !important;   /* adjust to match Trending Now */
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  line-height: 1.2;
}

/* =========================
   Rounded Edges for Buttons
   ========================= */


/* Smooth rounded buttons */


/* Keep border if you want it, but rounded */



/* =========================
   Rounded Edges for All Buttons (Product + CTAs)
   ========================= */
/* Smooth rounded buttons */
.button,
.shopify-section .button,
button,
.shopify-payment-button__button {
  border-radius: 8px !important;   /* smooth corners */
  overflow: hidden;               /* clip inner edges */
  border: none !important;        /* remove square outline if unwanted */
}

/* Keep border if you want it, but rounded */
.button:focus,
button:focus {
  outline: none !important;       /* kill square focus outline */
  box-shadow: 0 0 0 2px rgba(212,154,0,0.4); /* optional soft gold glow */
}

/* =========================
   Product Grid Buttons — True Rounded Outline (no clipped corners)
   ========================= */
/* Make the actual button use a real border + radius */
.card__content .button,
.card__content button {
  border-radius: 8px !important;                 /* smooth corners */
  border: 2px solid #111 !important;             /* draw the outline explicitly */
  box-shadow: none !important;                   /* kill Dawn’s faux border via shadows */
  background: transparent;                       /* keep your current look */
}

/* Remove Dawn’s pseudo-element border that causes the cut-off effect */
.card__content .button::before,
.card__content .button::after,
.card__content button::before,
.card__content button::after {
  content: none !important;
}

/* Ensure wrappers don’t clip the rounded edges */
.card,
.card__information,
.card__content {
  overflow: visible !important;
  clip-path: none !important;
}

/* =========================
   Product Card Elevation
   ========================= */
.card {
  background: #fff;              /* Ensure solid white behind products */
  padding: 1.25rem;              /* Add breathing room inside the card */
  border-radius: 6px;            /* Slightly soften corners */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);  /* Soft shadow for depth */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);   /* Lift on hover */
  box-shadow: 0 6px 16px rgba(0,0,0,0.12); /* Stronger shadow on hover */
}
/* =========================
   Rounded Corners for Product Card Hover Border
   ========================= */
.card-wrapper:hover,
.card-wrapper:focus-within {
  border-radius: 12px !important;   /* adjust to taste */
  overflow: hidden;                 /* prevents clipping on child elements */
}



/* =========================
   Balance Gold Hover Border & Shadow
   ========================= */
.card-wrapper {
  position: relative;
  border-radius: 12px; /* keep rounded corners */
  overflow: visible;   /* let shadow + border breathe */
}

.card-wrapper:hover,
.card-wrapper:focus-within {
  border: 2px solid #d49a00; /* your gold */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  padding: 8px; /* even breathing room on all sides */
  background-color: #fff; /* make sure card interior is solid white */
}
/* =========================
   Product Card Hover Effect
   ========================= */
.card-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
}

.card-wrapper:hover,
.card-wrapper:focus-within {
  border: 2px solid #d49a00; /* gold border */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: scale(1.03); /* slightly larger on hover */
  background-color: #fff;
}
/* =========================
   Global Section Headers (Mission, Trending, Favorites)
   ========================= */
.shopify-section .title,
.shopify-section .rich-text__heading {
  font-size: 2.25rem;         /* ~36px desktop */
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #000;
}

/* Mobile scaling */
@media (max-width: 749px) {
  .shopify-section .title,
  .shopify-section .rich-text__heading {
    font-size: 1.75rem;       /* ~28px */
    letter-spacing: 0.04em;
  }
}



/* =========================================
   TRUST BADGES (product page) — force black, bold, no underline
   (Overrides global .shopify-section .title gradient + ::after underline)
   ========================================= */
div[data-banner][data-type="product-page"] .title,
div[data-banner][data-type="product-page"] .title a {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #000 !important;
  color: #000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Kill the pseudo underline your global rule adds */
div[data-banner][data-type="product-page"] .title::after {
  content: none !important;
  display: none !important;
}

/* If the app renders the label as a link, remove any underline/border styles */
div[data-banner][data-type="product-page"] a,
div[data-banner][data-type="product-page"] a:link,
div[data-banner][data-type="product-page"] a:visited {
  text-decoration: none !important;
  border-bottom: 0 !important;
}


/* =========================
   Mission Section Title Styling
   ========================= */
.rich-text__heading {
  font-size: 2.5rem !important;   /* match Trending Now size */
  font-weight: 900 !important;    /* extra bold */
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
}
/* ================================
   Variant Pills — White Fill + Black Text + Gradient Border
   ================================ */

.product-form__input input[type="radio"] + label {
  display: inline-block;
  position: relative;
  border-radius: 999px; /* pill shape */
  padding: 0.5rem 1.2rem;
  font-weight: 500;
  color: #222; /* default black text */
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1.5px solid #ccc; /* neutral border */
  background: #fff; /* default fill */
  background-clip: padding-box; /* text unaffected */
  z-index: 1;
}

/* Hover */
.product-form__input input[type="radio"] + label:hover {
  box-shadow: 0 0 12px rgba(230,166,0,.45);
  transform: scale(1.05);
  font-weight: 600;
}

/* Selected */
.product-form__input input[type="radio"]:checked + label {
  font-weight: 700;
  color: #000 !important; /* force black text */
  border: 2px solid transparent; /* needed for gradient border */
  background-image: linear-gradient(#fff, #fff), 
                    linear-gradient(90deg, #ff6600, #ffaa00);
  background-origin: border-box;
  background-clip: padding-box, border-box; 
  box-shadow: none;
}
/* =========================
   Add to Cart Button — Force Rounded Corners
   ========================= */

.product-form__buttons .product-form__submit {
  border-radius: 10px !important;   /* force rounded */
  overflow: visible !important;     /* prevent clipping */
  clip-path: none !important;       /* undo any square clipping */
  -webkit-clip-path: none !important;
}
/* =========================
   Add to Cart Button Rounded Corners
   ========================= */


/* Add to Cart — single, even 1px outline with rounded corners */

/* Kill Dawn's pseudo-element background/border so it can't double up */
[id^="ProductSubmitButton-"].product-form__submit::before {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Draw ONE outline via inset shadow (works perfectly with border-radius) */
[id^="ProductSubmitButton-"].product-form__submit {
  border: 0 !important;                                /* no CSS border */
  box-shadow: inset 0 0 0 1px #000 !important;         /* uniform 1px outline */
  border-radius: 12px !important;                      /* rounded corners */
  background: #fff !important;                         /* white fill */
  color: #000 !important;                              /* black text */
  overflow: hidden !important;                         /* clip to radius */
  position: relative;
}

/* Optional: brand hover (keeps 1px thickness) */

[id^="ProductSubmitButton-"].product-form__submit:hover {
  box-shadow: inset 0 0 0 1px #e6a600, 0 0 18px rgba(230,166,0,.65);
  transform: scale(1.02);
}


/* Add to Cart — swipe animation (keeps your existing styles) */
[id^="ProductSubmitButton-"].product-form__submit {
  /* swipe setup */
  background-image: linear-gradient(90deg, #ff6600, #ffaa00) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 0% 100% !important;        /* hidden by default */
  transition: background-size 0.5s ease, color 0.3s ease !important;
}

/* Hover — wipe in, then revert on mouseout */
[id^="ProductSubmitButton-"].product-form__submit:hover {
  background-size: 100% 100% !important;       /* expands left → right */
  color: #fff !important;
}
/* Add to Cart — bold black outline + bold text on hover (keeps swipe) */
[id^="ProductSubmitButton-"].product-form__submit {
  transition: background-size 0.5s ease, color 0.3s ease,
              box-shadow 0.25s ease, font-weight 0.2s ease !important;
}

[id^="ProductSubmitButton-"].product-form__submit:hover {
  box-shadow: inset 0 0 0 2px #000 !important;  /* thicker BLACK outline */
  font-weight: 700 !important;                  /* bolder text */
}
/* --- OPTION B (fallback): Keep purple but demote it visually --- */
.product-form__buttons .shopify-payment-button__button--branded {
  border-radius: 12px !important;
  overflow: hidden !important;
  filter: saturate(.65) brightness(.95) contrast(.95) !important;
  transform: none !important;
  box-shadow: none !important;
  margin-top: .6rem !important;
  transition: filter .2s ease, transform .15s ease !important;
}
.product-form__buttons .shopify-payment-button__button--branded:hover {
  filter: saturate(.9) brightness(1) contrast(1) !important; /* full color only on hover */
  transform: translateY(-1px);
}

/* “OR” divider above Shop Pay */
.product-form__buttons .shopify-payment-button {
  position: relative;
  margin-top: .9rem !important;
}
.product-form__buttons .shopify-payment-button::before {
  content: "or";
  display: block;
  text-align: center;
  color: #666;
  font-size: 1.5rem;
  margin: .6rem 0 .6rem;
}
/* =========================
   Product gallery — card look
   ========================= */

/* Main media frame (image/video) */
.product__media,
.product__media-item,
.product__media-wrapper .media,
.product__media-wrapper img {
  border-radius: 8px !important;
}

.product__media-wrapper .media,
.product__media-item .media,
.product__media-wrapper img {
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;            /* light-grey border */
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;/* soft drop shadow */
  overflow: hidden;                                  /* clip rounded corners */
}

/* Prevent zoom controls from inheriting hover/glow rules */
.product__media-wrapper .product__media-icon { box-shadow: none !important; }

/* =========================
   Thumbnails
   ========================= */

.thumbnail-list__item .thumbnail,
.thumbnail-list__item button,
.thumbnail-list__item img {
  border-radius: 8px !important;
}

/* Hover (gradient border + subtle lift) */
.thumbnail-list__item .thumbnail:hover {
  border: 2px solid transparent !important; /* transparent border to hold gradient */
  background-image: linear-gradient(#fff, #fff), 
                    linear-gradient(90deg, #ff6600, #ffaa00) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 6px 14px rgba(230,166,0,.25) !important;
  transform: translateY(-1px);
  border-radius: 8px !important; /* match existing */
}

/* Active/Selected (gradient border + stronger shadow) */
.thumbnail[aria-current="true"],
.thumbnail.is-active,
.thumbnail[aria-selected="true"],
.thumbnail[aria-pressed="true"] {
  border: 2px solid transparent !important;
  background-image: linear-gradient(#fff, #fff), 
                    linear-gradient(90deg, #ff6600, #ffaa00) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 8px 18px rgba(230,166,0,.35) !important;
  border-radius: 8px !important;
}





/* ===== Related products heading: gradient text + text-width underline ===== */
/* Target both common Dawn shapes: plain .title/h2 and when text is wrapped in .inline-richtext */

/* Gradient text */
.product-recommendations :is(h2.title, .title, .inline-richtext),
.related-products       :is(h2.title, .title, .inline-richtext),
#shopify-section-product-recommendations :is(h2.title, .title, .inline-richtext) {
  display: inline-block !important;            /* shrink to text width */
  position: relative;
  margin-bottom: 0.6rem;
  background-image: linear-gradient(90deg, #ff6600, #ffaa00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  overflow: visible;                            /* ensure underline shows */
}

/* Gradient underline (matches the element's text width) */
.product-recommendations :is(h2.title, .title, .inline-richtext)::after,
.related-products       :is(h2.title, .title, .inline-richtext)::after,
#shopify-section-product-recommendations :is(h2.title, .title, .inline-richtext)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;                                  /* = text width */
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6600, #ffaa00) !important;
  pointer-events: none;
}

/* Shop Pay — fix cut-off bottom corners (round without cropping) */
.product-form__buttons shopify-accelerated-checkout,
.product-form__buttons shop-pay-wallet-button {
  display: block !important;
  border-radius: 12px !important;
  overflow: visible !important;                 /* stop cutting bottom */
  clip-path: inset(0 round 12px) !important;    /* still clip children to radius */
  transform: translateZ(0);                     /* avoids subpixel artifacts */
}
/* ensure the wrapper doesn't crop either */
.product-form__buttons { overflow: visible !important; }

/* Related products: section as a clean card panel (no top gradient bar) */
#shopify-section-product-recommendations .product-recommendations,
.related-products {
  position: relative;
  margin-top: 3rem;                   /* breathing room from product details */
  padding: 2rem 1rem 2.2rem;          /* inner spacing */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  overflow: hidden;                   /* clip rounded corners */
}

/* kill any previously-added top accent line */
#shopify-section-product-recommendations .product-recommendations::before,
.related-products::before {
  content: none !important;
}

@media (max-width: 768px) {
  #shopify-section-product-recommendations .product-recommendations,
  .related-products {
    padding: 1.25rem 0.75rem 1.5rem;
    border-radius: 14px;
  }
}
/* Extra space between the “Other Drops” section and the footer */
:where(
  section[id*="product-recommendations"],
  section[id*="related-products"],
  .shopify-section.product-recommendations
) {
  padding-bottom: clamp(28px, 4vw, 30px) !important; /* adjustable gap */
}

/* 3) Consistent vertical rhythm in the buy box */
.product .price { margin: .35rem 0 .75rem !important; }
.product .product-form__input { margin: .75rem 0 !important; }
.product .product-form__buttons { margin-top: .9rem !important; }

/* 4) Clear focus states (brand-friendly, no layout shift) */
:where(
  .product-form__submit,
  .product-form__input input[type="radio"] + label,
  .shopify-payment-button__button--branded
):focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #e6a600, 0 0 0 2px transparent !important;
}

/* 5) Related product cards — stable height & neat spacing */
.product-recommendations .card,
.related-products .card {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;          /* media | content | price */
}
.product-recommendations .card .card__content {
  padding-top: 1rem;                           /* breathe under image */
}
.product-recommendations .card .card__information {
  min-height: 3.2rem;                          /* keeps titles aligned across row */
}

/* --- Description-only gradient dividers ------------------------------ */
/* Works whether the description node is .product__description,
   .product__description.rte, or .product__description > .rte           */

.product .product__info-wrapper .product__description {
  position: relative;
  padding-bottom: 1rem; /* space before the bottom rule */
}

/* TOP line */
.product .product__info-wrapper .product__description::before,
.product .product__info-wrapper .product__description.rte::before,
.product .product__info-wrapper .product__description > .rte::before {
  content: "" !important;                 /* override any previous 'none' */
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin: 0 0 1rem !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #ff6600, #ffaa00) !important;
  opacity: .25 !important;
}

/* BOTTOM line */
.product .product__info-wrapper .product__description::after,
.product .product__info-wrapper .product__description.rte::after,
.product .product__info-wrapper .product__description > .rte::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin: 1rem 0 0 !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #ff6600, #ffaa00) !important;
  opacity: .25 !important;
}

@media (max-width: 768px) {
  .product .product__info-wrapper .product__description::before,
  .product .product__info-wrapper .product__description.rte::before,
  .product .product__info-wrapper .product__description > .rte::before,
  .product .product__info-wrapper .product__description::after,
  .product .product__info-wrapper .product__description.rte::after,
  .product .product__info-wrapper .product__description > .rte::after {
    height: 2px !important;
  }
}
@media (min-width: 990px){
  .thumbnail-list__item .thumbnail{ width: 108px !important; height: 108px !important; }
  .thumbnail-list__item .thumbnail img{
    width:100%!important;height:100%!important;object-fit:contain!important;
  }
  .thumbnail-slider{ margin-top: .75rem !important; } /* trims space under hero */
}
.product .product__info-wrapper .rte p{ line-height:1.65; margin:0 0 .8rem; }
.product .product__info-wrapper .rte ul li{ margin:.4rem 0; }

:where(.product-form__submit,
       .product-form__input input[type="radio"] + label,
       .shopify-payment-button__button--branded):focus-visible{
  outline:none;
  box-shadow: inset 0 0 0 2px #e6a600, 0 0 0 2px transparent !important;
}
/* === Quantity: single rounded pill, [+] never overflows, no inner seams === */

/* The wrapper may be too narrow in the theme — give it room */
.product-form__quantity quantity-input.quantity {
  min-width: 200px !important;                    /* 56 + 84 + 56 = 196 → safe */
}

/* One clean outer ring + rounded corners */
.product-form__quantity quantity-input.quantity,
.product-form__quantity .quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;

  height: 48px !important;
  border: 0 !important;
  border-radius: 12px !important;                 /* match Add to cart */
  box-shadow: inset 0 0 0 1px #000 !important;    /* single 1px outline */
  background: #fff !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

/* Some themes draw separators with pseudo-elements — kill them */
.product-form__quantity quantity-input.quantity::before,
.product-form__quantity quantity-input.quantity::after { content: none !important; }

/* Inner parts: no borders/radii/shadows that create seams */
.product-form__quantity .quantity__button,
.product-form__quantity .quantity__input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* Buttons: fixed width so [+] and [–] always fit inside the pill */
.product-form__quantity .quantity__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 48px !important;
  flex: 0 0 56px !important;
  line-height: 1 !important;
}

/* Keep explicit order just in case theme reorders */
.product-form__quantity .quantity__button[name="minus"] { order: 0 !important; }
.product-form__quantity .quantity__input                { order: 1 !important; }
.product-form__quantity .quantity__button[name="plus"]  { order: 2 !important; }

/* Centered value with comfortable width */
.product-form__quantity .quantity__input {
  width: 84px !important;
  height: 48px !important;
  text-align: center !important;
  font-weight: 700 !important;
  -moz-appearance: textfield;
}
.product-form__quantity .quantity__input::-webkit-outer-spin-button,
.product-form__quantity .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Brand focus ring on the whole control */
.product-form__quantity quantity-input.quantity:focus-within,
.product-form__quantity .quantity:focus-within {
  box-shadow: inset 0 0 0 2px #e6a600 !important;
}
/* Quantity — compact (≈25% shorter) */
.product-form__quantity quantity-input.quantity {
  min-width: 150px !important;                  /* was ~200px */
}

.product-form__quantity .quantity__button {
  width: 42px !important;                       /* was 56px */
  flex: 0 0 42px !important;
}

.product-form__quantity .quantity__input {
  width: 63px !important;                       /* was 84px */
}


/* =========================
   Global CTA Button Hover Glow + Enlarge (Gold)
   ========================= */
.button,
.shopify-section .button,
.btn,
.product-form__submit,
.card__content .button {
  transition: all 0.3s ease !important;
}

/* Hover effect ONLY on CTA buttons (not product image zoom/slider buttons) */
.button:hover,
.shopify-section .button:hover,
.btn:hover,
.product-form__submit:hover,
.card__content .button:hover {
  border: 2px solid #e6a600 !important;
  box-shadow: 0 0 18px rgba(230, 166, 0, 0.65) !important;
  transform: scale(1.05) !important;
}

/* Explicitly remove the effect from product media/gallery controls */
.product__media button:hover,
.media button:hover,
.product__media-toggle:hover {
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}


/* Tighten space between description, share button, and related products */
.product__info-container {
  margin-bottom: 0rem !important; /* reduce default spacing */
}

.product__description {
  margin-bottom: 0rem !important; /* reduce spacing below description */
}

.share-button {
  margin-top: 0rem !important;  /* pull it closer to description */
  margin-bottom: 0rem !important; /* pull it closer to related products */
}

/* Story page header gradient + underline */
.image-with-text__heading.inline-richtext {
  background: linear-gradient(to right, #ff6600, #e6a600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  display: inline-block;
  position: relative;
  margin-bottom: 0.5rem;
}

.image-with-text__heading.inline-richtext::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  margin-top: .5px !important; /* force closer underline */
  background: linear-gradient(to right, #ff6600, #e6a600);
  border-radius: 2px;
}


/* Story page body text */
.image-with-text__text.rte.body {
  color: #000 !important;
}


/* Hide the Shop app "Follow on Shop" button in the footer */
.footer__follow-on-shop,
footer shop-follow-button,
shop-follow-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 0 !important;
}
/* ===== Footer: tighten overall vertical spacing ===== */

/* 1) Kill the large section padding Dawn injects on the footer */
.shopify-section-group-footer-group footer.footer[class*="__footer-padding"] {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* 2) Trim the internal wrappers */
.shopify-section-group-footer-group .footer__content-top {
  padding-top: 6px !important;
  padding-bottom: 10px !important;
}

.shopify-section-group-footer-group .footer__content-bottom {
padding-top: 30px !important;  /* down 20px */
  padding-bottom: 6px !important;
}

/* 3) Soften block/element margins inside the footer */
.shopify-section-group-footer-group .footer-block__heading {
  margin: 0 0 8px !important;
}

.shopify-section-group-footer-group .footer-block--newsletter {
  margin-bottom: 10px !important;
}

.shopify-section-group-footer-group .list-social {
  margin: 8px 0 !important;
}

.shopify-section-group-footer-group .footer__content-bottom .list-payment {
  margin: 8px 0 !important;
}

.shopify-section-group-footer-group .footer__copyright,
.shopify-section-group-footer-group .footer__legal {
  margin-top: 6px !important;
}
/* Product card active/hover gradient border */
.card-wrapper:focus-within,
.card-wrapper:hover,
.card-wrapper.is-active {
  border: 2px solid transparent !important;
  border-radius: 12px; /* match your existing rounding */
  background-image: linear-gradient(#fff, #fff), 
                    linear-gradient(90deg, #ff6600, #ffcc00);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 18px rgba(230,166,0,0.25); /* keep subtle glow */
}
/* Bump size of Featured collection titles (e.g., TRENDING NOW, FIRST CHAIR FAVORITES) */
.shopify-section[id*="__featured_collection"] .collection__title .title,
.shopify-section[id*="__featured_collection"] .title-wrapper .title,
.shopify-section[id*="__featured_collection"] h2.title {
  /* 25% larger than the current 2.25rem */
  font-size: 2.8125rem !important; /* 2.25rem * 1.25 */
  line-height: 1.2 !important;
}

/* Optional: slightly smaller on mobile so it doesn't wrap awkwardly */
@media (max-width: 749px) {
  .shopify-section[id*="__featured_collection"] .collection__title .title,
  .shopify-section[id*="__featured_collection"] .title-wrapper .title,
  .shopify-section[id*="__featured_collection"] h2.title {
    font-size: 2.2rem !important;
  }
}
/* Slightly larger Mission header */
.rich-text__heading.rte.inline-richtext.h0 {
  font-size: 145% !important;
}

/* Character subheaders */
.image-with-text__text h3 {
  color: #000 !important;
  font-weight: 700 !important;
}
/* Character page: gradient links in the feature list + custom underline */
.image-with-text__text.rte ul li a {
  position: relative;
  font-weight: 700;
  background: linear-gradient(90deg, #ff6600, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none !important;   /* avoid native underline conflicts */
  transition: background 0.25s ease, opacity 0.25s ease;
}

/* Draw a gradient underline */
.image-with-text__text.rte ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;                       /* underline offset */
  height: 2px;                        /* underline thickness */
  background: linear-gradient(90deg, #ff6600, #ffcc00);
  border-radius: 2px;
  transform-origin: left;
  transition: background 0.25s ease;
}

/* Darken the gradient on hover/focus */
.image-with-text__text.rte ul li a:hover,
.image-with-text__text.rte ul li a:focus-visible {
  background: linear-gradient(90deg, #cc5200, #cc9900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.image-with-text__text.rte ul li a:hover::after,
.image-with-text__text.rte ul li a:focus-visible::after {
  background: linear-gradient(90deg, #b34700, #b38600);
}

/* Optional: slightly thicker underline on keyboard focus */
.image-with-text__text.rte ul li a:focus-visible::after {
  height: 3px;
  }
/* STORY PAGE ONLY — gradient on 2nd-to-last paragraph */
body.template-page--story 
  #MainContent .image-with-text__text.rte p:nth-last-of-type(2) {
  display: inline-block;
  background-image: linear-gradient(90deg, #ff6600, #ffaa00);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800;
}

/* CHARACTER PAGES — explicitly remove gradient */
body.template-page--characters 
  #MainContent .image-with-text__text.rte p:nth-last-of-type(2),
body.template-page--daffy-don 
  #MainContent .image-with-text__text.rte p:nth-last-of-type(2),
body.template-page--slick-rick 
  #MainContent .image-with-text__text.rte p:nth-last-of-type(2) {
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-weight: inherit !important;
}
/* ———————————————————————————————
   STORY PAGE ONLY: gradient on the
   second-to-last paragraph
   (scoped so characters pages stay plain)
   ——————————————————————————————— */

/* Try common page-handle/body class patterns first */
body[class*="page-the-story"] #MainContent .image-with-text__text.rte p:nth-last-of-type(2),
body[class*="page-story"]      #MainContent .image-with-text__text.rte p:nth-last-of-type(2),
body[data-page-handle="the-story"] #MainContent .image-with-text__text.rte p:nth-last-of-type(2),
/* Fallback to the Story section id (safe to keep even if ids change later) */
#shopify-section-template--19879524368635__image_with_text_zdUzwx .image-with-text__text.rte p:nth-last-of-type(2) {
  display: inline-block;
  background-image: linear-gradient(90deg, #ff6600, #ffaa00);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800;
}

/* Optional utility if you ever want to force a gradient line somewhere */
.gradient-text {
  background-image: linear-gradient(90deg, #ff6600, #ffaa00);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800;
}

/* MOBILE ONLY: add breathing room between header and the first image */
@media (max-width: 749px) {
  
}
/* ===========================================================
   1) Remove old global gradient rule everywhere
=========================================================== */
#MainContent .image-with-text__text.rte p:nth-last-of-type(2) {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}

/* ===========================================================
   2) STORY PAGE ONLY
   Apply gradient to the <strong> inside the GEAR UP… line
=========================================================== */
#ImageWithText--template--19879524368635__image_with_text_zdUzwx
.image-with-text__text.rte p strong {
  display: inline-block;
  background-image: linear-gradient(90deg, #ff6600, #ffaa00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800;
}

/* ===========================================================
   3) Mobile breathing room above image
=========================================================== */
@media (max-width: 749px) {
  .image-with-text__media img {
    margin-top: 16px; /* tweak to taste */
  }
}
/* Target the featured collection on character pages */
#shopify-section-template--19879316455675__featured_collection_jawr4h {
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 2.5rem 1.5rem !important;
  margin: 3rem auto !important;
  max-width: 1400px !important;
}

/* Style the product cards inside */
#shopify-section-template--19879316455675__featured_collection_jawr4h .card-wrapper {
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

#shopify-section-template--19879316455675__featured_collection_jawr4h .card-wrapper:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}


/* Collection Page Titles: Gradient Text + Underline */
h1.collection-hero__title {
  position: relative;
  display: inline-block;
}

/* Gradient lives on an inner span holding only the visible title text.
   Putting background-clip: text on the h1 itself makes Chrome paint the
   visually-hidden "Collection:" prefix over the first letter. */
.collection-hero__title-text {
  background: linear-gradient(90deg, #ff6600, #ffaa00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Gradient underline closer to text */
h1.collection-hero__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  margin-top: -0.50rem; /* reduced spacing */
  background: linear-gradient(90deg, #ff6600, #ffaa00);
  border-radius: 2px;
}

/* CONTACT PAGE — remove Dawn's wrapper border */
#ContactForm .field::before,
#ContactForm .field::after {
  content: none !important;        /* remove the pseudo-element entirely */
  border: 0 !important;
  box-shadow: none !important;
}
#ContactForm .field:focus-within::before {
  content: none !important;        /* stop focus border/shadow */
  border: 0 !important;
  box-shadow: none !important;
}

/* CONTACT PAGE — gradient outline + rounded corners on inputs */
#ContactForm .field__input,
#ContactForm textarea {
  border: 2px solid transparent !important;     /* no native border */
  border-radius: 12px !important;
  outline: none !important;
  box-shadow: none !important;                   /* kill any input shadow */
  background-image:
    linear-gradient(#fff, #fff),                 /* inner fill */
    linear-gradient(90deg, #ff6600, #ffaa00);    /* gradient border */
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: box-shadow .2s ease, background-image .2s ease;
}

/* Focus: brighter gradient + soft glow */
#ContactForm .field__input:focus,
#ContactForm textarea:focus {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #ffaa00, #ff6600);
  box-shadow: 0 0 12px rgba(255,166,0,.45);
}

/* Optional: keep consistent height/appearance across browsers */
#ContactForm .field__input,
#ContactForm textarea {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff; /* ensure solid fill */
}
/* Contact page – "DROP US A LINE" title: +50% */
#shopify-section-template--19529996206331__rich_text_z7ec8k h2.rich-text__heading.inline-richtext.hxxl {
  font-size: 3.375rem !important;  /* 2.25rem × 1.5 */
  line-height: 1.2 !important;
}

/* Optional: slightly smaller on mobile so it doesn't wrap awkwardly */
@media (max-width: 749px) {
  #shopify-section-template--19529996206331__rich_text_z7ec8k h2.rich-text__heading.inline-richtext.hxxl {
    font-size: 3rem !important;    /* ~2.0rem × 1.5 */
  }
}


/* Contact page title adjustments */
#shopify-section-template--19529996206331__rich_text_z7ec8k h2.rich-text__heading.inline-richtext.hxxl {
  margin-top: 2rem !important;   /* pushes title down from the black header */
}

/* Underline closer to text */
#shopify-section-template--19529996206331__rich_text_z7ec8k h2.rich-text__heading.inline-richtext.hxxl::after {
  margin-top: 0.0rem !important; /* default was ~0.35rem */
}

/* Kill ALL borders around the newsletter field wrapper */
footer .newsletter-form .field,
footer .newsletter-form .field::before,
footer .newsletter-form .field::after {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Piste Out — Footer newsletter: hide label when typing + fix submit arrow */
footer .newsletter-form .field {
  position: relative;
}

/* Hide the floating label once user types OR when focused */
footer .newsletter-form .field__input:focus ~ .field__label,
footer .newsletter-form .field__input:not(:placeholder-shown) ~ .field__label {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* iOS/Safari edge-case: if placeholder-shown doesn’t behave, still hide on focus */
@media (max-width: 749px) {
  footer .newsletter-form .field__input:focus ~ .field__label {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Make the submit arrow visible (SVG usually uses currentColor) */
footer .newsletter-form__button,
footer .newsletter-form__button svg,
footer .newsletter-form__button svg * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}

/* Input itself — rounded + gradient outline */
footer .newsletter-form .field__input {
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background-color: #fff !important;

  /* gradient border trick */
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #ff6600, #ffaa00);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: box-shadow .25s ease, background-image .25s ease;
}

/* Focus glow */
footer .newsletter-form .field__input:focus {
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #ffaa00, #ff6600);
  box-shadow: 0 0 0 4px rgba(255,166,0,.25);
}
/* Restyle floating label instead of hiding */
footer .newsletter-form .field__label {
  color: #000 !important;
  font-size: 1.5rem !important;
    top: 14px !important;    /* align with placeholder */
  left: 16px !important;
  pointer-events: none;
}
/* ================================
   GLOBAL FIX — Chrome gradient flicker
   ================================ */

/* Apply to all gradient-border elements */
.card-wrapper:hover,
.card-wrapper:focus-within,
.product-form__input input[type="radio"]:checked + label,
.thumbnail[aria-current="true"],
.thumbnail.is-active,
.thumbnail[aria-selected="true"],
.thumbnail[aria-pressed="true"],
footer .newsletter-form .field__input:focus,
.contact .field__input:focus {
  /* keep your gradient border rendering stable */
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: box-shadow, transform; /* not background-image */
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
/* FROM THE LIFTLINE — gradient text + underline (keep existing size/weight) */
section[id*="__featured_blog"] h2[class*="__title"].inline-richtext {
  background: linear-gradient(90deg, #ff6600, #ffcc00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  position: relative;
  display: inline-block;
}

section[id*="__featured_blog"] h2[class*="__title"].inline-richtext::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 4px;                  /* distance from text; tweak to taste */
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6600, #ffcc00) !important;
}
section[id*="__featured_blog"] h2[class*="__title"].inline-richtext::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 0px;   /* closer to text (was 4px) */
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6600, #ffcc00) !important;
}

/* Blog card titles — gold */
.blog .card__information h3.card__heading a {
  background: linear-gradient(90deg,  #d49a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Blog card body/excerpt — black */
.blog .card__information .article-card__excerpt {
  color: #000 !important;
}

/* ==============================
   Blog Post Styling (single post)
   ============================== */

/* Blog post main title (gradient + underline) */
.article-template h1.article__title {
  background: linear-gradient(90deg, #ff6600, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  position: relative;
  display: inline-block;
}

.article-template h1.article__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 2px; /* closer underline */
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6600, #ffcc00);
}

/* Subheaders inside blog post (gold #d49a00) */
.article-template h2,
.article-template h3 {
  color: #d49a00 !important;
  font-weight: 700;
}

/* Body text (paragraphs, lists, spans) — black */
.article-template p,
.article-template li,
.article-template span {
  color: #000 !important;
}
/* Blog post title: gradient text + underline (keep size/weight) */
body.template-article h1.article-template__title,
article.article-template h1.article-template__title {
  background-image: linear-gradient(90deg, #ff6600, #ffcc00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;           /* beats any color overrides */
  display: inline-block;
  position: relative;
}

body.template-article h1.article-template__title::after,
article.article-template h1.article-template__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 0px;                          /* closer underline */
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6600, #ffcc00);
}

/* Blog back button */
.article-template__back .article-template__link {
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
  padding: 0.5rem 1.25rem; /* reduced top/bottom padding */
  border-radius: 6px; /* keep consistent rounding */
  font-weight: 600;
  font-size: 0.95rem; /* slightly smaller text */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Hover glow */
.article-template__back .article-template__link:hover {
  box-shadow: 0 0 18px rgba(230, 166, 0, 0.65); /* gold glow */
  transform: scale(1.05);
}
/* Blog back button */
.article-template__back .article-template__link.link.animate-arrow {
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;

  padding: 6px 18px !important;       /* compact button padding */

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  display: inline-flex !important;    /* shrink to content width */
  align-items: center !important;     /* vertical centering */
  justify-content: center !important; /* horizontal centering */

  width: fit-content !important;      /* prevent full-width expansion */
  max-width: 100% !important;         /* safeguard */

  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* Hover glow */
.article-template__back .article-template__link.link.animate-arrow:hover {
  box-shadow: 0 0 18px rgba(230, 166, 0, 0.65) !important;
  transform: scale(1.05) !important;
}
/* Back-to-blog button: force the arrow to white in all implementations */
.article-template__back .article-template__link.link.animate-arrow {
  color: #fff !important;                    /* if the icon uses currentColor */
}

/* 1) SVG icon cases */
.article-template__back .article-template__link.link.animate-arrow .icon-arrow,
.article-template__back .article-template__link.link.animate-arrow svg.icon-arrow,
.article-template__back .article-template__link.link.animate-arrow svg,
.article-template__back .article-template__link.link.animate-arrow svg * {
  stroke: #fff !important;
  fill: #fff !important;
}

/* 2) Pseudo-element chevron cases */
.article-template__back .article-template__link.link.animate-arrow::after {
  border-color: #fff !important;             /* border-drawn chevron */
  background-color: #fff !important;         /* masked SVG chevron */
  /* Fallback if it's a dark PNG/SVG background */
  filter: invert(1) brightness(200%) !important;
}

/* Optional: make the arrow go gold on hover to match your glow */
.article-template__back .article-template__link.link.animate-arrow:hover,
.article-template__back .article-template__link.link.animate-arrow:hover .icon-arrow,
.article-template__back .article-template__link.link.animate-arrow:hover svg,
.article-template__back .article-template__link.link.animate-arrow:hover svg * {
  color: #e6a600 !important;
  stroke: #e6a600 !important;
  fill: #e6a600 !important;
}
/* Cart drawer: kill Dawn's extra button border layer */
.cart-notification .button::before,
.cart-notification .button::after,
.cart-notification__links .button::before,
.cart-notification__links .button::after {
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Also remove any native border/outline */
.cart-notification .button,
.cart-notification__links .button {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* Keep your intended styles */
.cart-notification .button--secondary {         /* View cart */
  background: #fff !important;
  color: #000 !important;
  box-shadow: inset 0 0 0 2px #d49a00 !important;  /* gold outline only */
  border-radius: 12px !important;
}

.cart-notification .button--primary {           /* Checkout */
  background: #000 !important;
  color: #fff !important;
  border-radius: 12px !important;
}
/* CART PAGE — bump the H1 title size by ~50% */
.shopify-section[id*="cart-items"] .title.title--primary {
  font-size: calc(1.7 * var(--font-heading-scale) * 2rem) !important;
  line-height: 1.15 !important;
}

/* Optional: tweak on small screens */
@media (max-width: 749px) {
  .shopify-section[id*="cart-items"] .title.title--primary {
    font-size: calc(1.35 * var(--font-heading-scale) * 2rem) !important;
  }
}
.cart__row {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
/* Free-shipping bar: animated flowing gradient that ignores inline styles */
.pb-bar {
  position: relative;                 
  background: none !important;        
  overflow: hidden;                   
}

.pb-bar::before {
  content: "";
  position: absolute;
  inset: 0;                           
  border-radius: inherit;             
  /* Piste Out gradient */
  background: linear-gradient(90deg, #ff7a18, #ffb347, #ffd700, #ff7a18);
  background-size: 400% 100%;
  animation: po-gradient-move 12s linear infinite reverse;
  pointer-events: none;               
}

/* Smooth flowing motion — right to left */
@keyframes po-gradient-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-bar::before { animation: none; }
}
/* Subtle shadow for all product/cart images */
.cart-item__image,
.product__media img,
.card__media img {
  border-radius: 8px; /* match brand rounded style */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); /* soft shadow */
  transition: box-shadow 0.25s ease;
}

/* Slightly stronger on hover */
.cart-item__image:hover,
.product__media img:hover,
.card__media img:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
/* Hide duplicate header only on empty cart page */
.template-cart.cart--empty 
  .shopify-section.shopify-section-group-header-group {
  display: none !important;
}

/* Collapse the white gap left behind */
.template-cart.cart--empty #MainContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* === Fix broken divider lines in Cart Drawer === */

/* Make sure table uses full width */
#CartDrawer .cart-items,
.cart-drawer .cart-items {
  width: 100%;
  border-collapse: collapse;
}

/* Apply a clean bottom border to each product row */
#CartDrawer tr.cart-item,
.cart-drawer tr.cart-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure borders go full width, not just per cell */
#CartDrawer tr.cart-item td,
.cart-drawer tr.cart-item td {
  border: none !important;   /* remove any cell-only borders */
  padding-bottom: 8px;      /* adds breathing room above the line */
}

/* Remove border on the very last row if needed */
#CartDrawer tr.cart-item:last-child,
.cart-drawer tr.cart-item:last-child {
  border-bottom: none;
}
/* Bump up "Your cart" heading */
.drawer__header .drawer__heading {
  font-size: 170% !important;  /* 25% larger than current */
}

/* Bump up the free shipping progress message */
.pb-text {
  font-size: 100% !important;  /* 25% larger than current */
}

/* Force larger product images in cart drawer */
.cart-drawer .cart-item__image {
  width: 110px !important;
  height: 110px !important;
  max-width: none !important;
  max-height: none !important;
}



.cart-drawer__upsell {
  margin-top: 1.5rem;
  padding: 1rem;
  border-top: 1px solid #e5e5e5;
}

.cart-drawer__upsell-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .75rem;
}

.cart-drawer__upsell-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}

.cart-drawer__upsell-item {
  flex: 0 0 auto;
  width: 140px;
  scroll-snap-align: start;
  text-align: center;
}

.cart-drawer__upsell-item img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: .5rem;
}

.cart-drawer__upsell-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: .4rem .8rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cart-drawer__upsell-btn:hover {
  background: #333;
}

/* Cart drawer width – desktop */
#CartDrawer.drawer {
  --drawer-width: 420px;   /* ~25% on a normal laptop screen */
}

#CartDrawer .drawer__inner {
  width: var(--drawer-width) !important;
  max-width: 30vw !important; /* keeps it proportional on very large screens */
  right: 0;
  left: auto;
}

/* Overlay stays correct */
#CartDrawer .cart-drawer__overlay {
  right: min(var(--drawer-width), 30vw);
  left: 0;

}

/* Tablet */
@media (max-width: 1024px) {
  #CartDrawer .cart-drawer__overlay {
    right: min(var(--drawer-width), 45vw);
    left: 0;
  }
}

/* Mobile – keep it compact, not full width */
@media (max-width: 768px) {
  #CartDrawer.drawer {
    --drawer-width: 85vw;   /* not 100vw, leaves a margin */
  }
  #CartDrawer .drawer__inner {
    max-width: 85vw !important;
  }
  #CartDrawer .cart-drawer__overlay {
    right: 85vw;
  }
}
/* Upsell block wrapper */
.cart-drawer__upsell {
  padding: 0.5rem 1rem;
  border-top: 1px solid #eee;
  margin-top: 1rem;
}

/* Title */
.cart-drawer__upsell-title {
  font-size: 1.1rem; /* larger */
  font-weight: 700;
  color: #000;
  margin: 0 0 0.5rem;
}

/* Carousel container */
.upsell-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Scroll row */
.upsell-items {
  flex: 1;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0; /* reduce white space */
}
.upsell-items::-webkit-scrollbar { display: none; }

/* Card */
.upsell-item {
  flex: 0 0 auto;
  width: 150px;            /* desktop width */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
}

.upsell-item img {
  width: 100%;
  height: auto; /* keep natural aspect ratio (width/height attrs are only a pre-layout hint) */
  border-radius: 6px;
  margin-bottom: 0.4rem;
}

/* Typography + vertical rhythm */
.upsell-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #000;
  margin: 0 0 0.25rem;
  min-height: 2.6em;       /* keep titles aligned */
  line-height: 1.3;
}

.upsell-price {
  font-size: 0.95rem;
  color: #000;
  margin: 0 0 0.4rem;
}

/* Add button aligned to bottoms */
.upsell-button {
  background: #000;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  margin-top: auto;        /* aligns buttons across cards */
}

/* Arrows */
.carousel-arrow {
  background: #000;
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Responsive widths */
@media (max-width: 480px) {
  .upsell-item { width: 120px; }
  .carousel-arrow { width: 26px; height: 26px; }
}
.upsell-carousel {
  display: block !important;  /* kills flex column issue */
  position: relative;
  margin-top: 1rem;
}

.upsell-items {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #000;
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.carousel-arrow.left {
  left: -14px; /* nudge into place */
}

.carousel-arrow.right {
  right: -14px;
}
/* Section title */
.cart-drawer__upsell-title {
  font-size: 1.5rem;   /* +15% bump */
  font-weight: 700;
  color: #000;
  margin-bottom: 0.0rem;  /* reduce gap above products */
}

/* Product card container */
.upsell-item {
  flex: 0 0 auto;
  width: 140px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* same drop shadow you used elsewhere */
  padding: 0.2rem;
}

/* Product image */
.upsell-item img {
  width: 80%;
  height: auto; /* keep natural aspect ratio (width/height attrs are only a pre-layout hint) */
  border-radius: 6px;
  margin-bottom: 0.25rem; /* tighten space below image */
}

/* Product title */
.upsell-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.15rem; /* tighten space below title */
  min-height: 2rem; /* keep aligned across cards */
}

/* Product price */
.upsell-price {
  font-size: 1.2rem; /* +15% bump */
  color: #000;
  margin-bottom: 0.25rem; /* tighten below price */
}

/* Add button */
.upsell-button {
  background: black;
  color: white;
  font-size: 1.1rem; /* +15% bump */
  padding: 0.35rem 0.85rem;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  margin-top: auto;
}
/* Tighten space between the upsell carousel and "Estimated total"  */
#CartDrawer .cart-drawer__upsell {
  margin-bottom: .5rem !important;   /* was larger */
  padding-bottom: 0 !important;
}

/* Just in case the carousel wrapper adds its own spacing */
#CartDrawer .cart-drawer__upsell .upsell-carousel {
  margin-bottom: .25rem !important;
}

/* The actual footer you highlighted in DevTools */
#CartDrawer .drawer__footer {
  padding-top: .5rem !important;     /* was 1.5rem */
  /* keep the border if you like; remove next line to drop it */
  border-top: 1px solid rgba(0,0,0,.12) !important;
}

/* Remove any extra top margins inside totals */
#CartDrawer .drawer__footer .totals,
#CartDrawer .drawer__footer .totals__subtotal,
#CartDrawer .drawer__footer .totals__subtotal-value {
  margin-top: 0 !important;
}
/* Reduce vertical space between "Your cart" header and progress bar */
#CartDrawer .drawer__header {
  padding-top: 0.5rem !important;   /* tighten from 1.5rem */
  padding-bottom: 0.5rem !important;
}
/* Light grey background for Complete the Look section */
.cart-drawer__upsell {
  background: #f9f9f9; /* very light grey */
  padding: 1rem;       /* keep breathing room inside */
  margin-top: 1rem;    /* spacing from products above */
  border-radius: 8px;  /* optional: soften edges */
}

/* === RESET anything we tried earlier on the row === */
.cart-drawer table.cart-items tr[id^="CartDrawer-Item"] {
  display: table-row !important;
}
.cart-drawer table.cart-items tr[id^="CartDrawer-Item"] > td {
  border: 0;
  vertical-align: top;
  padding: 0;             /* erase odd padding that crept in */
}
/* Lock predictable widths so nothing overlaps */
.cart-drawer td.cart-item__media { width: 96px; }
.cart-drawer td.cart-item__totals { width: 120px; text-align: right; white-space: nowrap; }
/* Dawn (and many themes) render a 'price' inside the details cell too — hide it */
.cart-drawer .cart-item__details .cart-item__price-wrapper,
.cart-drawer .cart-item__details .price--end,
.cart-drawer .cart-item__details .cart-item__price {
  display: none !important;
}
/* Give each row a positioning context + some bottom room for the inline qty line */
.cart-drawer table.cart-items tr[id^="CartDrawer-Item"] {
  position: relative;
  padding-bottom: 0px; /* space for the qty row we're placing inline */
}

/* Reposition the qty cell under the details column */
.cart-drawer td.cart-item__quantity {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}


/* Make the qty line tidy */
.cart-drawer td.cart-item__quantity .quantity {
  margin-right: 10px;
}
.cart-drawer td.cart-item__quantity .cart-remove,
.cart-drawer td.cart-item__quantity .cart-remove-button,
.cart-drawer td.cart-item__quantity [data-cart-remove] {
  margin-left: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Small screens: nudge the line a bit tighter */
@media (max-width: 480px) {
  .cart-drawer td.cart-item__quantity {
    left: calc(96px + 12px);
    right: 120px;
    top: 3.2rem;
  }
}
/* Ensure the image link overlay stays contained (fixes Safari redirect on close) */
.cart-drawer td.cart-item__media {
  position: relative !important;
  z-index: 0;
}

.cart-drawer td.cart-item__details {
  position: relative !important;
  z-index: 1;
}
/* Keep the header controls above any row overlays */
#CartDrawer .drawer__header {
  position: relative;
  z-index: 5;
}

#CartDrawer .drawer__close {
  position: relative;
  z-index: 6;
}


/* Keep details pushed right of the thumbnail */
.cart-drawer .cart-item__details {
  margin-left: 1rem;
  display: block;
}

/* Force qty + trash to the right side */
.cart-drawer .cart-item__quantity {
  display: flex;
  justify-content: flex-end;   /* push all the way right */
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* Align price above them on the far right */
.cart-drawer .cart-item__totals {
  text-align: right;
  padding-right: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Quantity + trash aligned but pulled in 20% */
.cart-drawer .cart-item__quantity {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  width: 100%;          /* pull it in from 100% → 80% */
  margin-left: auto;   /* keeps it right-aligned */
}


.cart-item__quantity {
  position: relative;
}

.cart-item__quantity-controls {
  /* leave this alone so selector stays where it is */
}
/* Cart drawer total line */
#CartDrawer .cart-item__total-line {
  text-align: center;
  font-weight: 700;
  margin-top: 6px;
  width: 100%;
}

@media (min-width: 750px) {
  #CartDrawer .cart-item__total-line {
    transform: none !important;
  }
}


/* Add breathing room above the first cart item */
#CartDrawer-CartItems .drawer__cart-items-wrapper {
  padding-top: 18px; /* adjust spacing above all cart items */
}


#CartDrawer-CartItems .cart-items tbody {
  display: table-row-group !important;
}



/* Desktop cart drawer: reduce space between products */
@media (min-width: 750px) {
  #CartDrawer .cart-items tr.cart-item {
    border-bottom: 1px solid #e5e5e5 !important;
  }

  #CartDrawer tr.cart-item td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  #CartDrawer tr.cart-item + tr.cart-item td {
    padding-top: 4px !important;
  }
}


/* Style the progress bar */
#CartDrawer .pb-container {
  border-radius: 8px;          /* Rounded corners */
  width: 95%;                  /* Shrink slightly so it avoids scrollbar */
  margin: 0 auto;              /* Center horizontally */
  overflow: hidden;            /* Keep fill inside rounded corners */
}

/* Ensure the inner fill also respects rounded corners */
#CartDrawer .pb-container div {
  border-radius: 8px 0 0 8px;  /* Rounded on left side */
}
/* === Cart Drawer Quantity Styling Override === */

/* Kill original outer border */
#CartDrawer .cart-item__quantity .quantity-popover-container {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* New rounded pill container */
#CartDrawer .cart-item__quantity quantity-input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #222 !important;   /* darker border */
  border-radius: 12px !important;
  overflow: hidden !important;
  height: 44px !important;             /* match product page height */
  min-width: 120px !important;         /* gives it balance */
  background: #fff !important;
}

/* Minus / Plus buttons */
#CartDrawer .cart-item__quantity .quantity__button {
  flex: 0 0 40px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;          /* larger, balanced */
  border: none !important;
  background: transparent !important;
  cursor: pointer;
}

/* Input field */
#CartDrawer .cart-item__quantity .quantity__input {
  flex: 1 !important;
  height: 100% !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 500;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  -moz-appearance: textfield;
}
#CartDrawer .cart-item__quantity .quantity__input::-webkit-outer-spin-button,
#CartDrawer .cart-item__quantity .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* === Cart Drawer: make quantity pill identical to product page === */

/* Give the wrapper enough room (matches compact variant you used) */
#CartDrawer .cart-item__quantity quantity-input.quantity {
  min-width: 150px !important;                /* compact version */
}

/* One clean outer ring + rounded corners (no inner seams) */
#CartDrawer .cart-item__quantity quantity-input.quantity,
#CartDrawer .cart-item__quantity .quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;

  height: 48px !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px #000 !important;   /* single 1px outline */
  background: #fff !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

/* Sometimes themes draw extra borders on these wrappers — remove all */
#CartDrawer .cart-item__quantity .cart-item__quantity-wrapper,
#CartDrawer .cart-item__quantity .quantity-popover-wrapper,
#CartDrawer .cart-item__quantity .quantity-popover-container {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Kill pseudo-element separators anywhere inside the control */
#CartDrawer .cart-item__quantity quantity-input.quantity::before,
#CartDrawer .cart-item__quantity quantity-input.quantity::after,
#CartDrawer .cart-item__quantity .quantity__button::before,
#CartDrawer .cart-item__quantity .quantity__button::after {
  content: none !important;
}

/* Inner parts: no borders/radii/shadows that create seams */
#CartDrawer .cart-item__quantity .quantity__button,
#CartDrawer .cart-item__quantity .quantity__input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* Buttons: fixed width so +/– always fit inside the pill (compact widths) */
#CartDrawer .cart-item__quantity .quantity__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;           /* compact (was 56px) */
  height: 48px !important;
  flex: 0 0 42px !important;
  line-height: 1 !important;
}

/* Keep explicit order just in case */
#CartDrawer .cart-item__quantity .quantity__button[name="minus"] { order: 0 !important; }
#CartDrawer .cart-item__quantity .quantity__input                { order: 1 !important; }
#CartDrawer .cart-item__quantity .quantity__button[name="plus"]  { order: 2 !important; }

/* Centered value with compact width (matches your product page) */
#CartDrawer .cart-item__quantity .quantity__input {
  width: 63px !important;           /* compact (was 84px) */
  height: 48px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  -moz-appearance: textfield !important;
}

/* Remove number spinners */
#CartDrawer .cart-item__quantity .quantity__input::-webkit-outer-spin-button,
#CartDrawer .cart-item__quantity .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none !important; margin: 0 !important;
}

/* Brand focus ring on the whole control (like product page) */
#CartDrawer .cart-item__quantity quantity-input.quantity:focus-within,
#CartDrawer .cart-item__quantity .quantity:focus-within {
  box-shadow: inset 0 0 0 2px #e6a600 !important;
}
/* === Upsell "Add" Buttons (Cart Drawer & Drops on the Hill) === */
.cart-drawer__upsell .upsell-button,
.upsell-button {
  min-width: 100px !important;   /* wider */
  height: 28px !important;       /* taller */
  padding: 0 1.5rem !important;  /* horizontal breathing room */
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  border-radius: 12px !important; /* match rounded style */
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

/* Hover: Glow + Enlarge */
.cart-drawer__upsell .upsell-button:hover,
.upsell-button:hover {
  border: 2px solid #e6a600 !important;  /* softer gold border */
  box-shadow: 0 0 18px rgba(230, 166, 0, 0.65) !important;
  transform: scale(1.05) !important;
}
/* Hover: Glow +  */
.cart-drawer__upsell .carousel-arrow:hover {
  border: 2px solid #e6a600 !important;  /* gold outline */
  box-shadow: 0 0 18px rgba(230, 166, 0, 0.65) !important;
  
}
/* === Global Quantity Selector Controls === */
.quantity__button {
  transition: transform 0.25s ease, color 0.25s ease !important;
}

/* Hover: Enlarge + Optional Gold Accent */
.quantity__button:hover {
  transform: scale(1.25) !important;   /* enlarge the icon */
  color: #e6a600 !important;           /* optional: gold on hover */
}


/* Keep drawer layout stable */



/* Right-hand column (qty + trash + total) */
#CartDrawer td.cart-item__quantity,
#CartDrawer td[headers="CartDrawer-ColumnQuantity"] {
  flex-direction: row !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: 358px !important;         /* 🔒 fixed width column */
  padding-right: 8px !important;
  
  box-sizing: border-box !important;
}

/* Group selector + trash neatly */
#CartDrawer .cart-item__quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px;
}

/* Trash button reset */


/* Totals stay neatly below */


/* Make product row dividers span the full drawer width */






/* Keep drawer layout stable (kept) */


/* Stop drawer from overflowing (duplicate kept for safety) */
#CartDrawer .drawer__inner {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (min-width: 750px) {
  /* Right-hand column (qty + trash + total) — desktop only 🔒*/
  #CartDrawer td.cart-item__quantity,
  #CartDrawer td[headers="CartDrawer-ColumnQuantity"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 260px !important;         /* 🔒 fixed width column */
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
}





/* Qty + trash: keep them on one line, but reserve a fixed “trash column”
   so TOTAL can center under the qty pill (not under qty+trash). */
#CartDrawer td.cart-item__quantity .cart-item__quantity-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 48px !important; /* 48px = trash area */
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Qty pill sits centered in column 1 */
#CartDrawer td.cart-item__quantity quantity-input.quantity,
#CartDrawer td.cart-item__quantity .quantity-input.quantity {
  grid-column: 1 !important;
  justify-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

/* Trash sits in column 2 */
#CartDrawer td.cart-item__quantity .cart-remove-button,
#CartDrawer td.cart-item__quantity cart-remove-button,
#CartDrawer td.cart-item__quantity [data-cart-remove] {
  grid-column: 2 !important;
  justify-self: end !important;
  margin: 0 !important;
  transform: none !important;
  position: static !important;
}

/* Trash button reset — kept */
#CartDrawer .cart-remove-button {
  margin: 0 !important;
  position: static !important;
}

/* Totals stay neatly below — kept */
#CartDrawer .cart-item__totals {
  text-align: right !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Full-width row dividers — kept */
#CartDrawer .cart-item {
  border-bottom: 1px solid #e5e5e5 !important; /* grey line */
}
#CartDrawer .cart-item:last-child {
  border-bottom: none !important; /* no line after the last item */
}
/* ==== Title-only glow for newly added cart items ==== */
@keyframes cartTitleGlow {
  0%, 100% {
    text-shadow: none;
  }
  30%, 60% {
    text-shadow: 0 0 8px rgba(230,166,0,0.9),
                 0 0 12px rgba(230,166,0,0.7);
  }
}

/* Only animate the title inside a "glowing" cart item */
.cart-item--glow .cart-item__name,
.cart-item--glow .cart-item__name a {
  animation: cartTitleGlow 1.2s ease;
}
/* ✅ Only when the drawer is empty */
#CartDrawer.is-empty .drawer__inner { /* DO NOT cap width here; just padding */
  padding-inline: 20px !important; /* same inner padding feel as full cart */
}

#CartDrawer.is-empty .cart__empty,
#CartDrawer.is-empty .cart__empty-state,
#CartDrawer.is-empty .drawer__empty,
#CartDrawer.is-empty .drawer__empty-state,
#CartDrawer.is-empty .cart-empty,
#CartDrawer.is-empty cart-drawer-items > .cart__empty,
#CartDrawer.is-empty cart-drawer-items > .cart__empty-state {
  max-width: none !important;   /* remove narrow cap */
  width: 100% !important;       /* stretch to drawer’s width */
  margin: 0 !important;
}

/* Make the inner pieces obey the full width as well */
#CartDrawer.is-empty .cart__empty > *,
#CartDrawer.is-empty .cart__empty-state > *,
#CartDrawer.is-empty .drawer__empty > *,
#CartDrawer.is-empty .drawer__empty-state > * {
  max-width: none !important;
  width: 100% !important;
}

/* Keep the "Continue shopping" button centered but not constraining width */
#CartDrawer.is-empty .cart__empty .button,
#CartDrawer.is-empty .cart__empty-state .button,
#CartDrawer.is-empty .drawer__empty .button,
#CartDrawer.is-empty .drawer__empty-state .button {
  display: inline-block !important;
}


/* === Cart drawer: single-line "Estimated total" === */
#CartDrawer .drawer__footer .totals,
#CartDrawer .cart__footer .totals,
#CartDrawer .totals {
  display: flex !important;
  align-items: baseline !important;      /* keeps the $ aligned nicely with text */
  justify-content: space-between !important;
  flex-wrap: nowrap !important;          /* prevent wrapping to a new line */
  gap: 12px !important;
}

/* Make both parts bold and prevent weird wrapping */
#CartDrawer .totals h3,
#CartDrawer .totals__subtotal,
#CartDrawer .totals__subtotal-label,
#CartDrawer .totals__subtotal-value {
  font-weight: 700 !important;
  margin: 0 !important;
  white-space: nowrap !important;        /* stop “Estimated” splitting to multiple lines */
}

/* Make sure the amount hugs the right edge */
#CartDrawer .totals__subtotal-value,
#CartDrawer .totals > *:last-child {
  margin-left: auto !important;
  text-align: right !important;
}
/* === Add padding for empty cart state === */
#CartDrawer.drawer.is-empty .drawer__inner {
  padding-left: 1.5rem;   /* adjust as needed */
  padding-right: 1.5rem;  /* adjust as needed */
}

/* Force label + value inline and bold */
#CartDrawer .totals {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#CartDrawer .totals h2,
#CartDrawer .totals__total-value {
  font-weight: 700 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}


/* ============== Drawer width (same when empty or filled) ============== */
/* Root is <cart-drawer class="drawer">, not #CartDrawer */
cart-drawer.drawer { --drawer-width: 510px; }

/* The sliding panel is .drawer__inner (sibling of #CartDrawer) */
cart-drawer .drawer__inner {
  width: var(--drawer-width) !important;     /* override inline 166px */
  max-width: var(--drawer-width) !important; /* keep fixed width */
  right: 0;
  left: auto;
}

/* Tablet */
@media (max-width: 1024px) {
  cart-drawer.drawer { --drawer-width: 360px; }
}

/* Mobile */
@media (max-width: 768px) {
  cart-drawer.drawer { --drawer-width: 85vw; }
}

/* ============== Empty state side padding only ============== */
/* The empty UI wrapper in Dawn is .cart-drawer__warnings.center */
cart-drawer.is-empty .cart-drawer__warnings {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Footer (totals/checkout) padding only when empty */
cart-drawer.is-empty .drawer__footer {
  padding-left: 20px !important;
  padding-right: 20px !important;
}




/* Checkout button — gradient with true rounded corners */
#CartDrawer-Checkout.cart__checkout-button.button {
  border: none !important;                  /* kill native border */
  border-radius: 12px !important;           /* or your --buttons-radius */
  background: linear-gradient(90deg, #ff7a00, #ffcc00) !important;
  color: #fff !important;
  font-weight: 700 !important;
  overflow: hidden !important;

  /* simulate the border evenly inside rounded corners */
  box-shadow: inset 0 0 0 1px #000 !important;
}

/* Remove Dawn pseudo-element border entirely */
#CartDrawer-Checkout.cart__checkout-button.button::before,
#CartDrawer-Checkout.cart__checkout-button.button::after {
  content: none !important;
}


/* Normalize cart drawer close (X) button */
#CartDrawer .drawer__close {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;              /* perfectly round */
  box-shadow: inset 0 0 0 1px #d49a00 !important; /* gradient border substitute */
  background: #fff !important;                /* solid white inside */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Ensure the SVG/X icon stays centered */
#CartDrawer .drawer__close svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #000 !important;
}
/* Shrink cart drawer quantity selector */
#CartDrawer .cart-item__quantity .quantity_input {
  width: 48px !important;  /* 25% smaller than 63px */
}

#CartDrawer .cart-item__quantity .quantity {
  max-width: 150px !important; /* shrink container */
  justify-content: center !important; /* keep centered */
  align-items: center !important;
  gap: 0 !important; /* keep spacing tight */
}

#CartDrawer .cart-item__quantity .quantity_button {
  width: 36px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}








@media (max-width: 749px) {
  /* Drawer full width */
  #CartDrawer .drawer__inner {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Row is the positioning context */
  #CartDrawer .cart-item {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #eee !important;
  }
  #CartDrawer .cart-item__media  { flex: 0 0 6px !important; }
  #CartDrawer .cart-item__details{ flex: 1 1 auto !important; min-width: 0 !important; }

  /* Our wrapper is positioned by JS; make sure it can sit above details */
  #CartDrawer .po2-qty-wrap {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: fit-content !important;
    z-index: 5 !important;                 /* ← sit above details */
  }

  /* Force compact pill size (no theme snap-back) */
  #CartDrawer .po2-qty-wrap .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 9px !important;
    min-width: 9px !important;
    height: 33px !important;
    min-height: 33px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px #000 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  #CartDrawer .po2-qty-wrap .quantity__button {
    width: 33px !important;
    height: 33px !important;
    font-size: 16px !important;
    line-height: 33px !important;
    padding: 0 !important;
  }
  #CartDrawer .po2-qty-wrap .quantity__input {
    width: 42px !important;
    height: 33px !important;
    font-size: 15px !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* TOTAL: directly below pill, centered; JS sets absolute coords */
  #CartDrawer .po2-inline-total {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    z-index: 4 !important;
  }

  /* Hide theme duplicates */
  #CartDrawer .cart-item__totals,
  #CartDrawer .cart-item__price-wrapper,
  #CartDrawer .cart-item__final-price,
  #CartDrawer .cart-item__line-price {
    display: none !important;
  }
}

/* === po2 mobile cart fixes (keep at END to win specificity) === */
@media (max-width: 749px) {
  /* Stop previous left-shift rule from dragging the total */
  .cart-item__total-line,
  #CartDrawer .po2-inline-total { transform: none !important; }

  /* Make sure our pill & total render as intended */
  #CartDrawer .po2-qty-wrap .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 108px !important;
    height: 33px !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px #000 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  #CartDrawer .po2-inline-total {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
  }
}
/* === po2 mobile cart total cleanup (keep at END) === */
@media (max-width: 749px) {
  /* Our pill & total */
  #CartDrawer .po2-inline-total,
  .cart-items .po2-inline-total {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    transform: none !important;
  }

  /* Hide any theme totals on mobile; we render our own */
  #CartDrawer .cart-item [class*="total"]:not(.po2-inline-total),
  .cart-items .cart-item [class*="total"]:not(.po2-inline-total),
  #CartDrawer .cart-item__totals,
  #CartDrawer .cart-item__price-wrapper,
  #CartDrawer .cart-item__final-price,
  #CartDrawer .cart-item__line-price,
  .cart-items .cart-item__totals,
  .cart-items .cart-item__price-wrapper,
  .cart-items .cart-item__final-price,
  .cart-items .cart-item__line-price {
    display: none !important;
  }

  /* If the theme left-shifts totals, neutralize it */
  .cart-item__total-line,
  #CartDrawer .cart-item__total-line {
    transform: none !important;
    margin-left: 0 !important;
    text-align: center !important;
  }
}
/* PO2 — NEVER hide price that we moved inside our inline total (CartDrawer only) */
#CartDrawer .po2-inline-total,
#CartDrawer .po2-inline-total *,
#CartDrawer .po2-inline-total .price,
#CartDrawer .po2-inline-total .price-item,
#CartDrawer .po2-inline-total .cart-item__final-price,
#CartDrawer .po2-inline-total .cart-item__line-price,
#CartDrawer .po2-inline-total .cart-item__price-wrapper {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* === Cart Drawer (mobile only) — position + size + look === */
@media (max-width: 749px) {
  

  /* Your tuned position — nudge these 3 values only if you want to fine-tune */
  #CartDrawer .po2-qty-wrap {
    position: absolute !important;
    left: calc(60% + 5px) !important;         /* move right/left */
    top: 54% !important;           /* move up/down */
    transform: translate(-170px, -26px) !important; /* final nudge (X,Y) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    z-index: 2 !important;
  }

  /* Make the pill look like one piece + shrink a touch */
  #CartDrawer .po2-qty-wrap .quantity {
    transform: scale(0.82) !important;           /* smaller selector */
    transform-origin: center center !important;
    border-radius: 9999px !important;            /* clean pill */
    border: 1px solid #111 !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  #CartDrawer .po2-qty-wrap .quantity__button,
  #CartDrawer .po2-qty-wrap .quantity__input {
    border: 0 !important;                        /* remove inner seams */
    box-shadow: none !important;
  }

  /* TOTAL: centered right under the selector */
  
}

/* === PO2: neutralize conflicting cart rules on MOBILE ONLY (≤ 749px) === */
@media (max-width: 749px) {
  /* Don’t let the native qty cell use absolute/fixed columns on mobile */
  #CartDrawer td.cart-item__quantity,
  #CartDrawer td[headers="CartDrawer-ColumnQuantity"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    transform: none !important;
    display: block !important;
  }

  /* Ensure the row can host our absolutely positioned mobile wrapper */
  

  /* Make the drawer actually span the screen on phones */
  #CartDrawer .drawer__inner {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Stop any earlier “shift total line” tricks from affecting mobile */
  #CartDrawer .cart-item__total-line {
    transform: none !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  /* Do NOT hide theme totals globally on mobile — let JS decide after it renders */
  #CartDrawer .cart-item__totals,
  #CartDrawer .cart-item__price-wrapper,
  #CartDrawer .cart-item__final-price,
  #CartDrawer .cart-item__line-price {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* === PO2: mobile cart layout — selector smaller + placed, total centered under it === */
@media (max-width: 749px) {
  /* Our mobile wrapper (created by your JS) positions the selector */
  #CartDrawer .po2-qty-wrap {
    position: absolute !important;
    left: 65% !important;                 /* ← horizontal base */
    top: 50% !important;                  /* ← vertical base */
    transform: translate(-220px, -25px) !important; /* ← fine nudge (X,Y) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    z-index: 2 !important;
  }

  /* Make selector ~20% smaller, keep +/- and number centered */
  #CartDrawer .po2-qty-wrap .quantity {
    transform: scale(0.7) !important;           /* 20% smaller */
    transform-origin: center center !important;
    border-radius: 9999px !important;
    border: 1px solid #111 !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  #CartDrawer .po2-qty-wrap .quantity__button,
  #CartDrawer .po2-qty-wrap .quantity__input {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* “TOTAL: $…” centered directly under the selector */
  #CartDrawer .po2-qty-wrap .po2-inline-total {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 8px !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 749px) {
  #CartDrawer .drawer__inner { width:100vw !important; max-width:100vw !important; }
  #CartDrawer .cart-item { position: relative !important; }

  #CartDrawer .po2-qty-wrap {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    z-index: 3 !important;
  }

  #CartDrawer .po2-qty-wrap .quantity {
    transform: scale(0.8) !important;        /* 20% smaller */
    transform-origin: center center !important;
    border-radius: 9999px !important;
    box-shadow: inset 0 0 0 1px #000 !important;
    background: #fff !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  #CartDrawer .po2-qty-wrap .po2-inline-total {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 8px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* Do NOT hide the details price; only hide the totals cell we copied from */
  #CartDrawer .cart-item__totals { display: none !important; }
}
/* PO2 – Cart Drawer quantity: hard kill duplicate borders/shadows */
#CartDrawer .po2-qty-wrap .quantity,
#CartDrawer .po2-qty-wrap quantity-input.quantity {
  border: 1px solid #111 !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* remove Dawn separators / fake rings */
#CartDrawer .po2-qty-wrap .quantity::before,
#CartDrawer .po2-qty-wrap .quantity::after,
#CartDrawer .po2-qty-wrap .quantity__button::before,
#CartDrawer .po2-qty-wrap .quantity__button::after {
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* the outer popover wrapper also draws a border in some versions */
#CartDrawer .cart-item__quantity .quantity-popover-container {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#CartDrawer .cart-item__quantity .quantity-popover-container::before,
#CartDrawer .cart-item__quantity .quantity-popover-container::after {
  content: none !important;
}
/* Make sure the trash and qty buttons are always clickable */
#CartDrawer .po2-inline-total { pointer-events: none !important; }    /* label can't steal taps */
#CartDrawer .cart-remove-button,
#CartDrawer .po2-qty-wrap .quantity__button,
#CartDrawer .po2-qty-wrap .quantity__input {
  position: relative !important;
  z-index: 70 !important;
  pointer-events: auto !important;
}
#CartDrawer .po2-inline-total { display: inline-block !important; }

/* ===== Mobile: hide upsell carousel arrows in Cart Drawer ===== */
@media screen and (max-width: 749px) {
  #CartDrawer .cart-drawer__recommendations .slider-buttons,
  #CartDrawer .cart-drawer__recommendations .slider-button,
  #CartDrawer .product-recommendations .slider-buttons,
  #CartDrawer .product-recommendations .slider-button,
  #CartDrawer [class*="recommend"] .slider-buttons,
  #CartDrawer [class*="recommend"] .slider-button {
    display: none !important;
  }
}

/* === PILL SHAPES OVERRIDE — paste at the very end === */

/* 1) Add to Cart (keeps your single-outline + swipe) */
[id^="ProductSubmitButton-"].product-form__submit,
#ProductSubmitButton-template--*__main {
  border-radius: 999px !important;            /* pill */
  overflow: hidden !important;                 /* clip to pill */
}

/* 2) Quick add buttons on cards */
.card__content .button,
.quick-add__submit {
  border-radius: 999px !important;
}

/* 3) Accelerated checkout / Shop Pay wrapper (round without cropping) */
.product-form__buttons shopify-accelerated-checkout,
.product-form__buttons shop-pay-wallet-button {
  border-radius: 999px !important;
  overflow: visible !important;
  clip-path: inset(0 round 999px) !important;
}

/* 4) Variant options (already pills — ensure they stay that way) */
.product-form__input input[type="radio"] + label {
  border-radius: 999px !important;
}

/* 5) Quantity control — single outer pill, no inner seams */
.product-form__quantity quantity-input.quantity,
.product-form__quantity .quantity {
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px #000 !important; /* keep the neat 1px ring */
}
.product-form__quantity .quantity__button,
.product-form__quantity .quantity__input {
  border-radius: 0 !important;   /* inner pieces sit inside the pill */
}

/* 6) Branded payment button itself */
.shopify-payment-button__button--branded,
button.shopify-payment-button__button--unbranded {
  border-radius: 999px !important;
}




/* Mobile — Cart Drawer: make the upsell collapsible with a caret */
@media (max-width: 749px) {
  /* Heading row with caret on the right */
  
  #CartDrawer .po2-upsell-toggle {
    margin-left: auto;
    width: 28px; height: 28px;
    border: 0; background: transparent; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #CartDrawer .po2-upsell-toggle .po2-caret::before {
    content: "▾";
    font-size: 18px;
    line-height: 1;
    transition: transform .2s ease;
  }
  /* Rotate caret when collapsed */
  #CartDrawer .po2-upsell-collapsed .po2-upsell-toggle .po2-caret::before {
    transform: rotate(-90deg);
  }
  /* Hide the product strip when collapsed (keep heading visible) */
  #CartDrawer .po2-upsell-collapsed [data-po2-upsell-body] {
    display: none !important;
  }
}
/* Mobile — force upsell caret visible & black */
@media (max-width: 749px) {
  #CartDrawer .po2-upsell-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #CartDrawer .po2-upsell-toggle {
    margin-left: auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0;
    color: #000 !important;               /* drives SVG stroke via currentColor */
  }
  #CartDrawer .po2-upsell-toggle .po2-caret { display: block; }
  /* rotate the chevron when collapsed */
  #CartDrawer .po2-upsell-collapsed .po2-upsell-toggle .po2-caret {
    transform: rotate(-90deg);
    transition: transform .2s ease;
  }
}
/* === PO2 | Upsell carousel arrows === */
/* Hard-hide on mobile no matter what JS does */
@media (max-width: 749px) {
  
}

/* Desktop: make sure they sit above content and are clickable */
@media (min-width: 750px) {
  
  #CartDrawer .upsell-carousel .carousel-arrow {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    z-index: 10;
  }
}

/* === PO2 | Upsell carousel arrows — desktop positioning + clickability === */
@media (min-width: 750px) {
  #CartDrawer .upsell-carousel { position: relative; }
  #CartDrawer .upsell-carousel .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    width: 28px;
    height: 28px;
    z-index: 10;
  }
  #CartDrawer .upsell-carousel .carousel-arrow.left  { left: -14px; }
  #CartDrawer .upsell-carousel .carousel-arrow.right { right: -14px; }
}

/* Mobile stays hidden */
@media (max-width: 749px) {
  #CartDrawer .upsell-carousel .carousel-arrow { display: none !important; }
}
/* === PO2 — Cart Drawer upsell arrows: desktop clickability === */
@media (min-width: 750px) {
  #CartDrawer .upsell-carousel,
  #CartDrawer .cart-drawer__recommendations,
  #CartDrawer .product-recommendations { position: relative; }

  /* raise above any overlays inside the drawer */
  #CartDrawer .upsell-carousel .carousel-arrow,
  #CartDrawer .cart-drawer__recommendations .slider-button,
  #CartDrawer .product-recommendations .slider-button {
    z-index: 1001 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* keep hidden on mobile only (your current rule, retained) */
@media (max-width: 749px) {
  #CartDrawer .upsell-carousel .carousel-arrow,
  #CartDrawer .cart-drawer__recommendations .slider-buttons,
  #CartDrawer .cart-drawer__recommendations .slider-button,
  #CartDrawer .product-recommendations .slider-buttons,
  #CartDrawer .product-recommendations .slider-button,
  #CartDrawer [class*="recommend"] .slider-buttons,
  #CartDrawer [class*="recommend"] .slider-button {
    display: none !important;
  }
}


/* === PO2 | Mobile cart drawer: lock background scroll === */
@media (max-width: 749px) {
  body.po2-scroll-locked {
    position: fixed !important;
    overflow: hidden !important;
    width: 100% !important;
    top: var(--po2-lock-top, 0) !important; /* preserves scroll position */
  }
}

/* Prevent scroll chaining from the drawer to the page on mobile */
/* Prevent scroll chaining from the drawer to the page on mobile */
#CartDrawer .drawer__inner { overscroll-behavior: contain; }

/* PO2 — ensure background cannot scroll on mobile while drawer is open */
@media (max-width: 749px) {
  html.po2-scroll-locked { 
    overflow: hidden !important; 
    height: 100% !important; 
  }
  body.po2-scroll-locked {
    position: fixed !important;
    overflow: hidden !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--po2-lock-top, 0) !important; /* preserve scroll position */
  }
}
/* === PO2 | Mobile drawer: final minimal rules === */
@media (max-width: 749px) {
  /* Lock background when requested */
  html.po2-lock { overflow: hidden !important; height: 100% !important; }
  body.po2-lock {
    position: fixed !important;
    overflow: hidden !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--po2-top, 0) !important; /* preserve scroll position */
  }

  /* Stop scroll from “leaking” out of the drawer */
  #CartDrawer .drawer__inner { overscroll-behavior: contain; }

  /* When the drawer is CLOSED, never leave the page dimmed */
  html:not(.po2-drawer-open) body,
  html:not(.po2-drawer-open) #MainContent,
  html:not(.po2-drawer-open) .content-for-layout,
  html:not(.po2-drawer-open) .shopify-section {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* When the drawer is CLOSED, ensure any overlays are hidden */
  html:not(.po2-drawer-open) #CartDrawer-Overlay,
  html:not(.po2-drawer-open) .cart-drawer__overlay,
  html:not(.po2-drawer-open) .drawer__overlay,
  html:not(.po2-drawer-open) .drawer__overlay-background,
  html:not(.po2-drawer-open) .overlay[data-drawer-overlay] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
  }
}
/* PO2 – Mobile: never show Dawn's header overlay */
@media (max-width: 749px) {
  details[open] .modal-overlay,
  details[open] .modal-overlay::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* PO2 — Desktop only: hide upsell when cart is empty */
@media (min-width: 990px) {
  /* Dawn adds `is-empty` on <cart-drawer-items> when there are no items */
  #CartDrawer cart-drawer-items.is-empty ~ .cart-drawer__upsell {
    display: none !important;
  }
  /* belt & suspenders if something inlines display on children */
  #CartDrawer cart-drawer-items.is-empty ~ .cart-drawer__upsell * {
    display: none !important;
  }
}
/* Host overlay */
.shopify-payment-button { position: relative !important; }

/* Make the Shop Pay button a rectangle (not pill) */
shop-pay-wallet-button {
  --gravity-button-border-radius: 12px !important; /* pick any px value you like */
}
/* === Shop Pay: match Add to cart shape (12px radius) & keep purple === */

/* 1) Make the host element clip its children to a 12px rounded rectangle */
.product-form__buttons shopify-accelerated-checkout,
.product-form__buttons shop-pay-wallet-button {
  display: block !important;
  width: 100% !important;
  border-radius: 12px !important;
  overflow: visible !important;
  clip-path: inset(0 round 12px) !important;
}

/* 2) Tell the shadow-DOM button inside Shop Pay to use 12px corners */
.product-form__buttons shop-pay-wallet-button {
  --gravity-button-border-radius: 12px !important; /* key line */
  /* (optional) if it ever renders too tall/short, uncomment the next line */
  /* --gravity-button-min-height: 56px !important; */
}

/* 3) If your theme ever falls back to the legacy branded button, keep full purple */
.product-form__buttons .shopify-payment-button__button--branded {
  border-radius: 12px !important;
  filter: none !important;               /* kill any desaturation/brightness filter */
}
/* Hide the Quantity label above the selector (PDP only) */
.product .product-form__input.product-form__quantity > .form__label,
.product .product-form__input.product-form__quantity > .quantity__label {
  display: none !important;
}
/* === Cart page only: make Featured collection behave like the upsell carousel === */
.template-cart .featured-collection .grid {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  padding: 8px 2px 2px !important;
  scroll-snap-type: x mandatory !important;
}

.template-cart .featured-collection .grid > * {
  min-width: 200px !important;      /* card width */
  scroll-snap-align: start !important;
}

/* Card polish to match your outline style */
.template-cart .featured-collection .card,
.template-cart .featured-collection .card-wrapper {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 6px 18px rgba(0,0,0,0.08) !important;
}

/* Media rounding + crop */
.template-cart .featured-collection .media,
.template-cart .featured-collection .media > img {
  border-radius: 14px 14px 0 0 !important;
  object-fit: cover !important;
  height: 180px !important;          /* consistent thumbnail height */
}

/* Optional: hide "View all" on cart upsell */
.template-cart .featured-collection .collection__view-all {
  display: none !important;
}



/* === Cart Drawer: remove stray horizontal scrollbar on container === */
#CartDrawer cart-drawer-items,
cart-drawer cart-drawer-items,
#CartDrawer .drawer__cart-items,
#CartDrawer .cart-drawer__items {
  overflow-x: hidden !important;      /* or 'clip' if supported */
  overscroll-behavior-x: contain;
}

/* Keep the upsell carousel scrollable */
#CartDrawer .cart-drawer_upsell .cart-upsell-row,
#CartDrawer .cart-drawer_upsell .upsell-row,
#CartDrawer .cart-drawer_upsell .grid {
  overflow-x: auto !important;
}
/* PO2 – Mobile: never show the cart drawer overlay (prevents stuck grey layer) */
@media (max-width: 749px) {
  #CartDrawer-Overlay,
  .cart-drawer__overlay,
  .drawer__overlay,
  .drawer__overlay-background,
  .overlay[data-drawer-overlay] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* === Piste Out: Rounded outline fix for the Alternate Colors button === */
.alternate-colorway .button.button--secondary {
  /* kill Dawn’s native border + any mask/clip that chops corners */
  border: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  overflow: visible !important;

  /* make it a proper pill and ensure the outline draws evenly */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--color-foreground, #111) !important;

  /* the locked-in outline method */
  box-shadow: inset 0 0 0 1px currentColor !important;

  /* spacing + weight to match your buttons */
  padding: 0.9rem 1.6rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* make Dawn’s pseudo-elements inherit the same radius so nothing peeks out */
.alternate-colorway .button.button--secondary::before,
.alternate-colorway .button.button--secondary::after {
  border-radius: 9999px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

/* optional hover, safe */
.alternate-colorway .button.button--secondary:hover {
  opacity: .9;
  transform: translateY(-1px);
}
/* === Piste Out: Alternate Colors button (match Add to Cart shape + clean outline) === */
.alternate-colorway .button.button--secondary {
  border: none !important;
  border-radius: 12px !important; /* matches Add to cart button curve */
  box-shadow: inset 0 0 0 1px var(--color-foreground, #111) !important;
  background: transparent !important;
  color: var(--color-foreground, #111) !important;
  font-weight: 600;
  text-decoration: none !important;
  padding: 0.9rem 1.6rem !important;
  transition: all 0.25s ease;
  overflow: visible !important;
}

.alternate-colorway .button.button--secondary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ensure pseudo elements follow the same curvature */
.alternate-colorway .button.button--secondary::before,
.alternate-colorway .button.button--secondary::after {
  border-radius: 12px !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}
/* Piste Out — kill border/outline on "View Alternate Colors" button */
.alternate-colorway .button.button--secondary,
.alternate-colorway .button.button--secondary:hover,
.alternate-colorway .button.button--secondary:focus,
.alternate-colorway .button.button--secondary:focus-visible,
.alternate-colorway .button.button--secondary:active,
.alternate-colorway .button.button--secondary::before,
.alternate-colorway .button.button--secondary::after {
  box-shadow: none !important;   /* Dawn uses inset box-shadow for the outline */
  border: 0 !important;          /* just in case */
  outline: 0 !important;         /* focus ring off for this element */
  background: transparent !important;
}

/* keep it compact */
.alternate-colorway .button.button--secondary {
  font-size: 1.1rem !important;
  padding: 0.55rem 1rem !important;
  border-radius: 8px !important;
  color: var(--color-foreground, #111) !important;
}

/* optional hover so it still feels interactive */
.alternate-colorway .button.button--secondary:hover {
  text-decoration: underline;
  opacity: .9;
}

/* pull the “View Alternate Colors” link closer to Color (visual shift only) */
.alternate-colorway {
  margin: 0 !important;
  transform: translateY(-1.5rem);   /* increase to -.5rem if you want tighter */
}

/* also pull the Size row up a bit */
.alternate-colorway + .product-form__input.product-form__input--pill {
  margin-top: 0 !important;
  transform: translateY(-2rem);
}
/* Hide the old alt-colors link that sits as a direct child of the info container */
.product__info-container > .alternate-colorway { display: none !important; }
:root { --po-accent: 255,124,0; } /* your orange as r,g,b */

/* base: borderless, no box glow */
.product__info-container .alternate-colorway .button.button--secondary {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--color-foreground, #111) !important;
}

/* text-only glow on hover/focus */
.product__info-container .alternate-colorway .button.button--secondary:hover,
.product__info-container .alternate-colorway .button.button--secondary:focus-visible {
  text-decoration: none !important;
  text-shadow:
    0 0 6px rgba(var(--po-accent), .55),
    0 0 14px rgba(var(--po-accent), .35),
    0 2px 6px rgba(0,0,0,.15); /* subtle depth */
  box-shadow: none !important;   /* ensure no box glow sneaks back */
}

/* === Piste Out — Product card corner fix (Dawn) ===
   Purpose: keep ratio placeholder, remove decorative corner "bites",
   clip media to the card radius, and use inset outline (your standard).
*/

/* 0) Ensure the ratio box exists so images have height */
.product-card-wrapper .card__inner { position: relative; }
.product-card-wrapper .card__inner.ratio::before {
  content: "";
  display: block;
  padding-bottom: var(--ratio-percent);
}

/* 1) Kill the corner-mask layer that cuts the tiny triangles */
.product-card-wrapper .card__inner::after,
.product-card-wrapper .card__content::before,
.product-card-wrapper .card__content::after,
.product-card-wrapper .card__media::before,
.product-card-wrapper .card__media::after,
.product-card-wrapper .media::before,
.product-card-wrapper .media::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 2) Card owns the rounding; everything inside is clipped to it */
.product-card-wrapper .card,
.product-card-wrapper .card__inner {
  border-radius: var(--product-card-corner-radius, .8rem);
  overflow: hidden;
  background: rgb(var(--color-background));
}

/* 3) Put the media stack back to Dawn’s absolute-fill, no masks */
.product-card-wrapper .card__media,
.product-card-wrapper .media {
  position: absolute;
  inset: 0;
  -webkit-mask: none !important; mask: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  clip-path: none !important;
  box-shadow: none !important;
}

/* 4) Image is square; parent clipping provides rounded look */
.product-card-wrapper .media > img,
.product-card-wrapper .media > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* keeps the full product visible */
  border-radius: 0;
  display: block;
  opacity: 1;
  visibility: visible;
}

/* 5) Remove inner padding so nothing peeks at the corners */
.product-card-wrapper { --product-card-image-padding: 0; }

/* 6) Even outline instead of native border (your locked-in fix) */
.product-card-wrapper .card {
  border: 0;
  box-shadow:
    inset 0 0 0 var(--product-card-border-width, 1px)
      rgba(0,0,0, var(--product-card-border-opacity, 0.08)),
    0 2px 12px rgba(0,0,0,0.06);
}
/* Fix mobile fullscreen product image zoom without affecting normal gallery */
@media screen and (max-width: 749px) {
  #MediaGallery-modal,
  .media-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Only target images inside the modal */
  #MediaGallery-modal img,
  .media-modal img {
    width: auto !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    transform: none !important;
  }

  #MediaGallery-modal .media-modal__dialog,
  .media-modal__dialog {
    max-width: 100vw !important;
    max-height: 100vh !important;
  }
}
  /* Thumbnail + title should start at the same top edge */
  #CartDrawer table.cart-items tr[id^="CartDrawer-Item"] > td.cart-item__media,
  #CartDrawer table.cart-items tr[id^="CartDrawer-Item"] > td.cart-item__details {
    vertical-align: top !important;
  }


  /* Kill the absolute positioning that causes the “too high” shift */
  #CartDrawer td.cart-item__quantity {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
  }

  /* Keep the quantity pill + trash aligned nicely */
  #CartDrawer .cart-item__quantity {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* Keep totals aligned with the thumbnail row */
  #CartDrawer td.cart-item__totals {
    vertical-align: middle !important;
    padding-top: 0 !important;
  }

  /* If your custom TOTAL line exists, keep it from drifting up */
  #CartDrawer .cart-item__total-line {
    margin-top: 0 !important;
    align-self: center !important;
  }
}
/* PO2 — Cart drawer scroll fix (Safari + Windows) */
#CartDrawer .drawer__inner {
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* header/footer stay fixed, content scrolls */
}

/* Dawn uses one of these as the scrollable body depending on version */
#CartDrawer .drawer__inner .drawer__content,
#CartDrawer .cart-drawer__content,
#CartDrawer .drawer__inner .cart-drawer__items {
  flex: 1 1 auto;
  min-height: 0;                 /* critical for Safari scrolling in flex */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* PO2 — Desktop: reserve scrollbar space so layout never shifts */
@media (min-width: 750px) {
  #CartDrawer .drawer__inner .drawer__content,
  #CartDrawer .cart-drawer__content,
  #CartDrawer .drawer__inner .cart-drawer__items {
    overflow-y: scroll !important;               /* always reserve scrollbar */
    scrollbar-gutter: stable both-edges;         /* modern browsers */
  }
}


/* Footer should not steal scroll height */
#CartDrawer .drawer__footer {
  flex: 0 0 auto;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (min-width: 750px) {
/* PO2 — Cart drawer width: more resilient across Windows scaling */
#CartDrawer.drawer {
  --drawer-width: clamp(360px, 32vw, 440px);
}

#CartDrawer .drawer__inner {
  width: var(--drawer-width) !important;
  max-width: none !important;
}

#CartDrawer .cart-drawer__overlay {
  right: var(--drawer-width);
}
@media (min-width: 750px) {
  /* Make the whole cart line item align from the top */
  #CartDrawer .cart-item {
    align-items: flex-start !important;
  }

  /* Force thumbnail cell to sit at the top */
  #CartDrawer .cart-item__media {
    align-self: flex-start !important;
    margin-top: 0 !important;
  }

  /* Remove any top padding that pushes details down */
  #CartDrawer .cart-item__details {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
@media (min-width: 750px) {
  #CartDrawer .cart-item__quantity-wrapper {
    position: relative !important;
    top: opx !important;
  }
}
@media screen and (min-width: 750px) {
  /* Cart drawer line items: make cells top-aligned so image + title align */
  #CartDrawer tr.cart-item > td {
    vertical-align: top !important;
  }

  #CartDrawer .cart-item__media {
    align-self: flex-start !important; /* harmless if not flex, useful if it is */
  }

  #CartDrawer .cart-item__details {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Quantity column: remove the padding that makes it feel left and pushed down */
  #CartDrawer td[headers="CartDrawer-ColumnQuantity"],
  #CartDrawer td.cart-item__quantity {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-left: 10px !important; /* right 10px */
padding-right: 0 !important;

    text-align: right !important;
  }

  /* If your JS created the pack, keep it hugging the right edge */
  #CartDrawer .po2-desktop-qty-pack {
    margin-left: auto !important;
    width: auto !important;
  }

  #CartDrawer .po2-desktop-qty-top {
    justify-content: flex-end !important;
  }
}
/* Mobile: never allow the cart overlay to linger when the drawer is closed */
@media (max-width: 749px) {
  html:not(.po-cart-open) #CartDrawer-Overlay,
  html:not(.po-cart-open) .cart-drawer__overlay,
  html:not(.po-cart-open) .drawer__overlay,
  html:not(.po-cart-open) .drawer__overlay-background,
  html:not(.po-cart-open) .overlay[data-drawer-overlay] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
  }
}
/* PO — Mobile: kill any lingering dim/backdrop pseudo-elements when cart is closed */
@media (max-width: 749px) {
  html:not(.po-cart-open) body::before,
  html:not(.po-cart-open) body::after,
  html:not(.po-cart-open) #MainContent::before,
  html:not(.po-cart-open) #MainContent::after,
  html:not(.po-cart-open) main::before,
  html:not(.po-cart-open) main::after,
  html:not(.po-cart-open) .content-for-layout::before,
  html:not(.po-cart-open) .content-for-layout::after {
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
#CartDrawer .drawer__inner,
#CartDrawer .drawer__inner-inner {
  -webkit-overflow-scrolling: touch;
}
/* PO2 — failsafe: if the cart drawer is not open, the overlay cannot remain */
@media (max-width: 749px) {
  #CartDrawer[aria-hidden="true"] #CartDrawer-Overlay,
  #CartDrawer[aria-hidden="true"] .drawer__overlay,
  #CartDrawer:not(.active):not(.is-active):not(.open):not([open]) #CartDrawer-Overlay,
  #CartDrawer:not(.active):not(.is-active):not(.open):not([open]) .drawer__overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
.drawer, .modal-overlay::after {
    background-color: transparent !important;
    opacity: 1;
}

/* PO — iOS Safari: force cart drawer overlay to fully disappear when closed */
cart-drawer.drawer:not(.active) #CartDrawer-Overlay,
cart-drawer.drawer:not(.active) .cart-drawer__overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

cart-drawer.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* PO2 — Cart drawer desktop: stable 3-column layout, controls always aligned */
@media (min-width: 750px) {
  /* easy tuning knobs */
  #CartDrawer {
    --po2-controls-x: -50px; /* negative = LEFT, positive = RIGHT */
    --po2-controls-y:  60px; /* positive = DOWN, negative = UP */
  }

  /* each cart row becomes: [thumb] [details] [controls stacked] */
  #CartDrawer table.cart-items tr[id^="CartDrawer-Item"] {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) 190px !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }

  /* prevent random table-cell padding from shifting things */
  #CartDrawer table.cart-items tr[id^="CartDrawer-Item"] > td {
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
  }

  /* thumbnail */
  #CartDrawer td.cart-item__media {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  /* details */
  #CartDrawer td.cart-item__details {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
  }

  /* stop the “one letter per line” wrapping */
  #CartDrawer td.cart-item__details .cart-item__name {
    max-width: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* quantity + trash (row 1 of the controls column) */
  #CartDrawer td.cart-item__quantity,
  #CartDrawer td[headers="CartDrawer-ColumnQuantity"] {
    grid-column: 3 !important;
    grid-row: 1 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    transform: translate(var(--po2-controls-x), var(--po2-controls-y)) !important;
    position: relative !important;
    z-index: 6 !important;
  }

  /* keep selector + trash centered on the same horizontal line */
  #CartDrawer td.cart-item__quantity .cart-item__quantity-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* totals (row 2 of the controls column) */
  #CartDrawer td.cart-item__totals {
    grid-column: 3 !important;
    grid-row: 2 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 0 !important;
    text-align: center !important;

transform: translate(calc(var(--po2-controls-x) + 500px), calc(var(--po2-controls-y) +500px)) !important;
    position: relative !important;
    z-index: 6 !important;
  }

  /* nuke any old transform nudges that may still exist */
  #CartDrawer td.cart-item__quantity .quantity,
  #CartDrawer td.cart-item__quantity .cart-remove-button,
  #CartDrawer td.cart-item__quantity [data-cart-remove],
  
}
@media (min-width: 750px) {
  /* Move ONLY the TOTAL line */
  #CartDrawer .cart-item__total-line,
  #CartDrawer cart-drawer .cart-item__total-line {
    position: relative !important;
    top: -15px !important;   /* + = down, - = up */
    left: -20px !important;   /* + = right, - = left */
  }
}
@media (min-width: 750px) {
  #CartDrawer img.cart-item__image {
    margin-left: 5px !important;
  }
}

/* MEDIA (product image) modal close button — force border + black X on mobile + desktop */
modal-dialog[aria-label="Media gallery"] button[aria-label="Close"],
modal-dialog[aria-label="Media gallery"] button[id^="ModalClose-"],
modal-dialog.product-media-modal button[aria-label="Close"],
modal-dialog.product-media-modal button[id^="ModalClose-"],
.product-media-modal button[aria-label="Close"],
.product-media-modal button[id^="ModalClose-"] {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  /* Even border thickness on rounded corners */
  border: 0 !important;
  box-shadow: inset 0 0 0 2px #111 !important;

  background: #fff !important;
  color: #000 !important; /* forces SVG currentColor */
  opacity: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Force the X to render black (SVG stroke-based) */
modal-dialog[aria-label="Media gallery"] button[aria-label="Close"] svg *,
modal-dialog[aria-label="Media gallery"] button[id^="ModalClose-"] svg *,
modal-dialog.product-media-modal button[aria-label="Close"] svg *,
modal-dialog.product-media-modal button[id^="ModalClose-"] svg * {
  stroke: #000 !important;
  opacity: 1 !important;
}

/* Fallback if the X is fill-based */
modal-dialog[aria-label="Media gallery"] button[aria-label="Close"] svg path,
modal-dialog[aria-label="Media gallery"] button[id^="ModalClose-"] svg path,
modal-dialog.product-media-modal button[aria-label="Close"] svg path,
modal-dialog.product-media-modal button[id^="ModalClose-"] svg path {
  fill: #000 !important;
  opacity: 1 !important;
}
/* Trust badges: force black/bold */
div[data-banner][data-type="product-page"] .title,
div[data-banner][data-type="product-page"] a,
div[data-banner][data-type="product-page"] a:visited {
  color: #000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: #000 !important;
}

/* Desktop underline is almost certainly on the TEXT node via pseudo-element */
div[data-banner][data-type="product-page"] .title::after,
div[data-banner][data-type="product-page"] .title::before {
  /* don't kill icons — only touches the title pseudo-elements */
  content: none !important;
  display: none !important;
}

/* If the underline is implemented as a "fake underline" on the title */
div[data-banner][data-type="product-page"] .title {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
/* Trust badge app: stop sitewide .shopify-section .title gradient from hijacking badge text (esp mobile) */
.shopify-section div[data-banner][data-type="product-page"] .icon-block-container span.title,
.shopify-section div[data-banner][data-type="product-page"] .icon-block-container .title,
.shopify-section div[data-banner][data-type="product-page"] .icon-block-container a,
.shopify-section div[data-banner][data-type="product-page"] .icon-block-container a:visited {
  /* force black + bold */
  color: #000 !important;
  font-weight: 700 !important;

  /* kill gradient-text technique */
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #000 !important;

  /* kill underline / underline-like styles */
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* If the underline is drawn via pseudo-element on the badge title text */
.shopify-section div[data-banner][data-type="product-page"] .icon-block-container span.title::before,
.shopify-section div[data-banner][data-type="product-page"] .icon-block-container span.title::after {
  content: none !important;
  display: none !important;
}
/* ===== Piste Out: Trust badges — FORCE black on mobile (overrides .shopify-section .title gradient) ===== */
@media (max-width: 749px) {
  /* app wrapper from your DOM */
  div[data-banner][data-type="product-page"] .icon-block-container .title,
  div[data-banner][data-type="product-page"] .icon-block-container .title a,
  div[data-banner][data-type="product-page"] .icon-block-container a,
  div[data-banner][data-type="product-page"] .icon-block-container a:visited {
    /* kill the gradient-text rule */
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #000 !important;

    /* force normal text */
    color: #000 !important;
    font-weight: 700 !important;

    /* remove underline (all common methods) */
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* If the underline is being drawn as a pseudo underline on the badge text */
  div[data-banner][data-type="product-page"] .icon-block-container .title::after,
  div[data-banner][data-type="product-page"] .icon-block-container .title::before {
    content: none !important;
    display: none !important;
  }
}

/* Piste Out — Footer newsletter: hide label when typing + make arrow visible */
footer.footer .newsletter-form .field {
  position: relative;
}

/* 1) Make sure the label isn’t “stuck” on top once there’s text */
footer.footer .newsletter-form .field__input:focus ~ .field__label,
footer.footer .newsletter-form .field__input:not(:placeholder-shown) ~ .field__label {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Optional: also keep it from ever blocking clicks */
footer.footer .newsletter-form .field__label {
  pointer-events: none;
}

/* 2) Make the submit arrow/button visible (black) */
footer.footer .newsletter-form__button {
  color: #000 !important;
}

/* In case the arrow is an SVG icon */
footer.footer .newsletter-form__button .icon,
footer.footer .newsletter-form__button svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Mobile-only: Dawn floating label can get stuck on top of typed text */
@media screen and (max-width: 749px) {
  footer.footer .newsletter-form .field__label {
    display: none !important;
  }

  /* Make sure placeholder is readable on mobile */
  footer.footer .newsletter-form .field__input::placeholder {
    color: #000 !important;
    opacity: 1 !important;
  }

  /* Keep the arrow visible on mobile too */
  footer.footer .newsletter-form__button {
    color: #000 !important;
  }
  footer.footer .newsletter-form__button svg,
  footer.footer .newsletter-form__button .icon {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}
/* Desktop: left-align the Klaviyo footer form with the newsletter heading */
@media screen and (min-width: 750px) {
  .footer-block--newsletter {
    text-align: left;
  }

  .footer-block--newsletter .footer-block__newsletter {
    align-items: flex-start;
  }

  /* The Klaviyo embed wrapper inside the footer */
  .footer-block--newsletter .klaviyo-form {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
  }
}
/* Move the Klaviyo footer form up ~15px (desktop + mobile) */
.footer-block--newsletter .klaviyo-form,
.footer-block--newsletter [class*="klaviyo-form"]{
  margin-top: -23px !important;
}

/* Shop the Look hero only */
#shopify-section-template--21165454065915__image_banner_wPEFyY .banner__media img {
  object-fit: cover;
  object-position: 50% 20%; /* adjust if you want more/less sky */
}

/* Desktop: prevent hero from taking over the whole first screen */
@media screen and (min-width: 990px) {
  #shopify-section-template--21165454065915__image_banner_wPEFyY .banner {
    min-height: 520px;      /* tweak */
    max-height: 70vh;       /* tweak */
    height: 75vh;           /* tweak */
  }
}

/* Mobile: keep it tall enough to feel like a hero */
@media screen and (max-width: 989px) {
  #shopify-section-template--21165454065915__image_banner_wPEFyY .banner {
    min-height: 360px;      /* tweak */
    height: 55vh;           /* tweak */
  }
}
/* Shop the Look hero – anchor image to top */
#shopify-section-template--21165454065915__image_banner_wPEFyY .banner__media img {
  object-position: 50% 2.5% !important;
}


/* --- Piste Out: Judge.me stars orange gradient (desktop + mobile) --- */

/* Apply gradient to any star shown in Judge.me preview badge / widgets */
.jdgm-widget .jdgm-star,
.jdgm-preview-badge .jdgm-star,
.jdgm-prev-badge .jdgm-star,
.jdgm-all-reviews-widget .jdgm-star {
  background: linear-gradient(90deg, #ff3b00 0%, #ffb000 50%, #ffd56a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;

  /* These two are what usually break on mobile */
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Turn empty/off stars into a subtle gray (so only filled stars look “hot”) */
.jdgm-widget .jdgm-star.jdgm--off,
.jdgm-preview-badge .jdgm-star.jdgm--off,
.jdgm-prev-badge .jdgm-star.jdgm--off,
.jdgm-all-reviews-widget .jdgm-star.jdgm--off {
  background: none !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.25) !important;
  color: rgba(0, 0, 0, 0.25) !important;
}
/* PO2 — SVG stars (mobile Judge.me fix) */
.po2-jdgm-star {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}
@media (max-width: 749px) {
  .po2-stars-row { display: inline-flex !important; flex-direction: row !important; }
  .po2-stars-row svg { width: 18px !important; height: 18px !important; display: block !important; }
}
/* ==============================
   Launchit Upsell — Title styling only
   (Scoped to the app wrapper)
================================ */
/* ==============================
   Launchit Upsell — Title styling only
   (Scoped to the app wrapper)
================================ */

/* Kill Dawn gradient title styling AND any link underline inside the widget */
#launchitup_upsell_wrapper a.detail_title,
#launchitup_upsell_wrapper a.detail_title:link,
#launchitup_upsell_wrapper a.detail_title:visited,
#launchitup_upsell_wrapper a.detail_title:hover,
#launchitup_upsell_wrapper a.detail_title:focus,
#launchitup_upsell_wrapper a.detail_title:active {
  color: #000 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
}

/* The span.title inside that link is what Dawn is turning into gradient text */
#launchitup_upsell_wrapper a.detail_title .title {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #000 !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* If the app draws an underline bar using pseudo-elements anywhere in its title area */
#launchitup_upsell_wrapper .dynamic_title_upsell_section::before,
#launchitup_upsell_wrapper .dynamic_title_upsell_section::after,
#launchitup_upsell_wrapper .dynamic_title_upsell_section *::before,
#launchitup_upsell_wrapper .dynamic_title_upsell_section *::after {
  content: none !important;
  display: none !important;
}

/* LaunchitUp Upsell — force plain black title, no underline (scoped) */
#launchitup_upsell_wrapper a.detail_title,
#launchitup_upsell_wrapper a.detail_title:link,
#launchitup_upsell_wrapper a.detail_title:visited,
#launchitup_upsell_wrapper a.detail_title:hover,
#launchitup_upsell_wrapper a.detail_title:focus {
  color: #000 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* This is the exact node Dawn is turning into gradient text */
#launchitup_upsell_wrapper a.detail_title .title {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-decoration: none !important;
}

/* Kill Dawn’s underline bar (it’s a pseudo-element) */
#launchitup_upsell_wrapper a.detail_title .title::before,
#launchitup_upsell_wrapper a.detail_title .title::after,
#launchitup_upsell_wrapper .title::before,
#launchitup_upsell_wrapper .title::after {
  content: none !important;
  display: none !important;
}

/* PO2 — Launchit upsell title/link styling (now that we removed .title) */
#launchitup_upsell_wrapper .po2-upsell-title {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#launchitup_upsell_wrapper a.po2-upsell-link {
  color: #000 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* Launchit upsell — remove underline bar (scoped) */
#launchitup_upsell_wrapper .title::after,
#launchitup_upsell_wrapper .title::before,
#launchitup_upsell_wrapper .details.upline::after,
#launchitup_upsell_wrapper .details.upline::before,
#launchitup_upsell_wrapper a.detail_title::after,
#launchitup_upsell_wrapper a.detail_title::before {
  content: none !important;
  display: none !important;
}

/* In case the line is coming from border/box-shadow styling */
#launchitup_upsell_wrapper a.detail_title,
#launchitup_upsell_wrapper a.detail_title .title {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* LaunchTip upsell — card styling (desktop + mobile IDs) */
/* LaunchTip upsell — card styling (mobile + desktop) */
#launchtip_upsell_wrapper {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px !important;

  /* slightly reduced shadow */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06) !important;

  overflow: hidden !important;
  display: block !important;
}

/* LaunchTip upsell — prevent nested sub-cards ONLY (do NOT touch wrapper) */
#launchtip_upsell_wrapper .productbox,
#launchtip_upsell_wrapper .complete-the-look-generic.productbox {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* LaunchTip upsell — outer card */
#launchtip_upsell_wrapper {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px !important;

  /* slightly reduced shadow */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06) !important;

  overflow: hidden !important;
  display: block !important;
}

/* LaunchTip upsell — outer card (handles #launchtip_upsell_wrapper, #launchtip_upsell_wrapper1, etc.) */
div[id^="launchtip_upsell_wrapper"] {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 14px !important;

  /* reduced shadow */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06) !important;

  overflow: hidden !important;
  display: block !important;
}

/* Prevent nested “sub-cards” ONLY inside LaunchTip (do not touch wrapper) */
div[id^="launchtip_upsell_wrapper"] .productbox,
div[id^="launchtip_upsell_wrapper"] .complete-the-look-generic.productbox {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
/* PO2 footer polish (2026-08): remove hairline between footer top and payment
   row; make Klaviyo footer Subscribe button black (overrides Klaviyo inline styles) */
.footer .footer__content-bottom {
  border-top: none;
}

.footer .klaviyo-form-T53pMn button {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.footer .klaviyo-form-T53pMn button:hover {
  background-color: #1a1a1a !important;
}

/* PO2 footer mobile tightening (2026-08): the Klaviyo embed carries ~32px
   built-in padding above/below its input row, and Dawn stacks its own gaps on
   top. Desktop is untouched. */
@media screen and (max-width: 749px) {
  .footer .klaviyo-form-T53pMn [data-testid='form-component'] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Klaviyo pins a 120px min-height on the form wrapper, which keeps the
     saved padding as empty space — release it */
  .footer .klaviyo-form-T53pMn form > div {
    min-height: 0 !important;
  }

  .footer .footer-block__heading {
    margin-bottom: 0.6rem;
  }

  .footer .footer-block--newsletter {
    gap: 1.2rem;
  }

  .footer .footer__content-bottom {
    padding-top: 0.4rem !important;
  }

  .footer .footer__list-social.list-social {
    margin-bottom: 0 !important;
    margin-block-end: 0 !important;
  }
}

/* PO2: compact announcement bar (mobile) — half height, single line with
   horizontal swipe scroll. Auto margins on the message children keep the
   text centered when it fits and fully reachable (scrolls from the true
   start) when it overflows — plain text-align:center would clip the left
   edge of overflowing centered content. */
@media screen and (max-width: 749px) {
  .announcement-bar-section .announcement-bar__message {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0.5rem 0;
    scrollbar-width: none;
    /* the auto-scroll in global.js drives scrollLeft frame by frame — smooth
       scrolling would fight it, and it must not rubber-band the page */
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
  }

  .announcement-bar-section .announcement-bar__message::-webkit-scrollbar {
    display: none;
  }

  .announcement-bar-section .announcement-bar__message > *:first-child {
    margin-left: auto;
  }

  .announcement-bar-section .announcement-bar__message > *:last-child {
    margin-right: auto;
  }

  .announcement-bar-section .announcement-bar__message .icon-arrow {
    flex-shrink: 0;
  }

  /* the bar is a grid item (min-width:auto) and the link a flex parent —
     both must be allowed to shrink or the message can never overflow-scroll */
  .announcement-bar-section .announcement-bar,
  .announcement-bar-section .announcement-bar__link {
    min-width: 0;
    max-width: 100%;
  }
}

/* PO2: tighten the mobile PDP above the fold — drop the gallery's prev/next
   + "1 of 5" control row and close the gap it left, lifting the title, reviews
   and price by 42px on first paint. The gallery still peeks the next image
   (~34px), which keeps the swipe affordance without the counter.
   To keep the counter and hide only the arrows, replace the first rule with
   .product__media-wrapper .slider-button { display: none; } */
@media screen and (max-width: 749px) {
  .product__media-wrapper .slider-buttons {
    display: none;
  }

  /* the 1rem here comes from component-slider.css, which the section injects
     into the body — later in the cascade than base.css — so matching its two
     classes plus the wrapper is what wins, not !important */
  .product__media-wrapper .product__media-list.slider.slider--mobile {
    margin-bottom: 1.2rem;
  }
}

/* PO2: bolder PDP price. Unlike the other above-the-fold work this one is
   deliberately not mobile-scoped — it applies at every width. Kept inside the
   product info column so collection cards, cart and drawer keep the theme's
   lighter price weight. */
.product__info-container .price,
.product__info-container .price .price-item {
  font-weight: 700;
}

/* PO2: tighten the mobile gap between the title and the price. The visible
   whitespace is ~27px ink-to-ink; 15px of that is the margin between the two
   blocks and the rest is line-height leading, so dropping the margin to 6px
   takes the gap to ~18px — a third less. Both sides have to come down because
   adjacent block margins collapse to the larger of the two, so lowering only
   the title's would leave the price's 15px winning. Mobile only. */
@media screen and (max-width: 749px) {
  .product__info-container > .product__title {
    margin-bottom: 0.2rem;
  }

  .product__info-container > div[id^='price-'] {
    margin-top: 0.2rem;
  }

  /* .price sits inside that wrapper with no border or padding between them, so
     its own top margin collapses through and becomes the effective gap — the
     wrapper's smaller value never wins. This is the number that actually moves
     the price up. !important is required only because an earlier custom rule,
     `.product .price`, already sets this margin with !important. */
  .product__info-container .price {
    margin-top: 0.2rem !important;
  }

  /* Title 15% down from Dawn's mobile h1 (3rem). Scaling the same expression
     rather than hardcoding 2.55rem keeps it tied to the heading-scale theme
     setting; desktop sizes off a separate min-width:750px rule and is unaffected.
     Line-height is a unitless ratio, so the leading shrinks along with it. */
  .product__info-container > .product__title h1 {
    font-size: calc(var(--font-heading-scale) * 2.55rem);
  }
}