/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 434:0 Unexpected "<"

**/
<style>
/* =========================================================
   HAPEEBUM CART DONATION
   Primary Green: #129677
   Black: #000000
   White: #FFFFFF
   ========================================================= */

.cart-donation {
  display: block;
  flex-basis: 100%;
  width: 100%;
  padding: 0 0 1.5rem;

  --donation-green: #129677;
  --donation-black: #000000;
  --donation-white: #ffffff;
}

.cart-donation[hidden] {
  display: none;
}


/* =========================================================
   CARD
   ========================================================= */

.cart-donation__card {
  border: 0.1rem solid #000000;
  border-radius: 2.2rem;
  background: #ffffff;
  padding: 2.5rem;
  color: #000000;
  box-shadow: none;
}


/* =========================================================
   BRAND / LOGOS
   ========================================================= */

.cart-donation__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 5.6rem;
}

.cart-donation__partner-logo,
.cart-donation__hapeebum-logo {
  display: block;
  width: auto;
  max-width: min(42%, 16rem);
  height: 5.6rem;
  object-fit: contain;
}

.cart-donation__brand-divider {
  color: #000000;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
}


/* =========================================================
   HEADINGS + TEXT
   ========================================================= */

.cart-donation__heading-row,
.cart-donation__heading,
.cart-donation__prompt,
.cart-donation__description,
.cart-donation__supporting-text,
.cart-donation__trust-message {
  margin: 0;
}

.cart-donation__heading {
  color: #000000;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
}

.cart-donation__heading-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 2.3rem;
}


/* =========================================================
   REMOVE HEART ICON
   ========================================================= */

.cart-donation__heart-icon {
  display: none !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.cart-donation__description,
.cart-donation__supporting-text {
  margin-top: 1.6rem;
  color: #000000;
  font-size: 1.55rem;
  line-height: 1.48;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.cart-donation__divider {
  height: 0.1rem;
  margin: 2.5rem 0;
  background: #129677;
}


/* =========================================================
   PROMPT
   ========================================================= */

.cart-donation__prompt {
  color: #000000;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.35;
}


/* =========================================================
   DONATION OPTIONS
   ========================================================= */

.cart-donation__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}

.cart-donation__option {
  display: flex;
  min-height: 4.7rem;
  align-items: center;
  justify-content: center;

  padding: 0.6rem;

  border: 0.15rem solid #129677;
  border-radius: 1.5rem;

  background: #ffffff;
  color: #000000;

  font: inherit;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;

  cursor: pointer;

  box-shadow: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


/* =========================================================
   OPTION HOVER
   ========================================================= */

.cart-donation__option:hover:not(:disabled):not(.is-selected) {
  border-color: #000000;
  background: #000000;
  color: #ffffff;
}


/* =========================================================
   SELECTED DONATION
   ========================================================= */

.cart-donation__option.is-selected {
  border-color: #129677;
  background: #129677;
  color: #ffffff;
  box-shadow: none;
}

.cart-donation__option.is-selected:hover:not(:disabled) {
  border-color: #129677;
  background: #129677;
  color: #ffffff;
}


/* =========================================================
   ACCESSIBILITY FOCUS
   ========================================================= */

.cart-donation__option:focus-visible,
.cart-donation__remove:focus-visible {
  outline: 0.2rem solid #129677;
  outline-offset: 0.25rem;
}


/* =========================================================
   DISABLED OPTION
   ========================================================= */

.cart-donation__option:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


/* =========================================================
   REMOVE DONATION
   ========================================================= */

.cart-donation__remove {
  min-height: auto;
  margin: 1.5rem 0 0;
  padding: 0.2rem 0;

  border: 0;
  background: transparent;

  color: #129677;

  text-decoration: underline;
  text-underline-offset: 0.25rem;

  cursor: pointer;
}

.cart-donation__remove:hover {
  color: #000000;
}


/* =========================================================
   TRUST MESSAGE
   ========================================================= */

.cart-donation__trust-message {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;

  margin-top: 2.7rem;

  color: #129677;

  font-size: 1.45rem;
  line-height: 1.4;
}

.cart-donation__trust-message strong,
.cart-donation__trust-message span,
.cart-donation__trust-message p {
  color: inherit;
}


/* =========================================================
   TRUST ICON
   ========================================================= */

.cart-donation__trust-icon {
  display: inline-flex;
  flex: 0 0 auto;

  width: 2.2rem;
  margin-top: 0.05rem;

  color: #129677;
}

.cart-donation__trust-icon svg {
  width: 100%;
  height: auto;
  color: #129677;
}

.cart-donation__trust-icon svg path,
.cart-donation__trust-icon svg circle,
.cart-donation__trust-icon svg rect {
  fill: currentColor;
}


/* =========================================================
   STATUS / ERROR MESSAGE
   Keep readable but use black to maintain palette
   ========================================================= */

.cart-donation__status {
  min-height: 1.8rem;
  margin: 0.9rem 0 0;

  color: #000000;

  font-size: 1.3rem;
  line-height: 1.4;
}


/* =========================================================
   LOADING / BUSY STATE
   ========================================================= */

.cart-donation[aria-busy='true'] .cart-donation__card {
  opacity: 0.65;
}


/* =========================================================
   FORCE COMPONENT TEXT TO BLACK
   Prevent theme purple from leaking in
   ========================================================= */

.cart-donation__card,
.cart-donation__card p,
.cart-donation__card h1,
.cart-donation__card h2,
.cart-donation__card h3,
.cart-donation__card h4,
.cart-donation__card h5,
.cart-donation__card h6 {
  color: #000000;
}


/* =========================================================
   LINKS
   ========================================================= */

.cart-donation__card a {
  color: #129677;
}

.cart-donation__card a:hover {
  color: #000000;
}


/* =========================================================
   REMOVE THEME PURPLE SHADOWS / VARIABLES
   ========================================================= */

.cart-donation {
  --color-foreground: 0, 0, 0;
  --color-link: 18, 150, 119;

  --color-button: 18, 150, 119;
  --color-button-text: 255, 255, 255;

  --color-secondary-button: 255, 255, 255;
  --color-secondary-button-text: 0, 0, 0;

  --color-shadow: 0, 0, 0;
}


/* =========================================================
   BUTTON THEME OVERRIDES
   ========================================================= */

.cart-donation button {
  --color-button: 18, 150, 119;
  --color-button-text: 255, 255, 255;
  --color-shadow: 0, 0, 0;
}

.cart-donation button::before,
.cart-donation button::after {
  box-shadow: none !important;
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

.cart-donation ::selection {
  background: #129677;
  color: #ffffff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 374px) {

  .cart-donation__card {
    padding: 1.8rem;
  }

  .cart-donation__options {
    gap: 0.5rem;
  }

  .cart-donation__option {
    min-height: 6.6rem;
    font-size: 1.8rem;
  }

}
</style>