.AddedToBagMSG {
	display: none;
	position: fixed;
	bottom: 16px;
	right: 16px;
	background-color: var(--color1);
	color: var(--background1);
	padding: 10px 20px;
	z-index:900000;
	border-radius: 40px;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
	box-shadow: var(--box-shadow-img);
}

.AddedToBagMSG-checkout {
    font-weight: var(--fontweight_heavy);
    text-decoration: underline;
}

.cart-btn::part(base) {
  background: #311462CC;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  position: fixed;
  z-index: 4;
  right: 5%;
  bottom: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--btnBackground);
  box-sizing: border-box;
}

.cart-btn::part(label) {
  padding: 0;
  height: 28px;
}

.cart-btn svg {
  stroke: #FBF9FC;
  height: 28px;
  width: 28px;
}

.cd-cart__count::part(base) {
  background: var(--Pink);
  height: 24px;
  width: 24px;
  border-color: var(--Pink);
  box-sizing: border-box;
  font-weight: var(--fontweight_max);
  color: var(--searchBar);
  margin-left: -18px;
  margin-bottom: -18px;
}

.cd-cart__content::part(panel) {
  background: var(--background);
}
sl-drawer.cd-cart__content::part(panel) {
  background: var(--background);
  border-radius: 24px 24px 0 0;
}

.cd-cart__content::part(header) {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--menu);
}
.cd-cart__content::part(title) {
  font-size: var(--font_title);
  color: var(--textMain);
  text-align: center;
  font-weight: var(--fontweight_heavy);
}

.cd-cart__content::part(body) {
  padding: 16px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  max-height:60vh;
  overflow: hidden;
}

.clear_cart {
    flex: 0 0 110px;
}

.checkout_cart {
  flex: 1 1 180px;
}

sl-button.clear_cart::part(base) {
    font-size: var(--font_large);
    background: transparent;
    border: transparent;
    color: var(--textSupport);
    height: 48px;
    display: flex;
    align-items: center;
}

.cd-cart__content::part(footer) {
  display: flex;
  border-top: 1px solid var(--menu);
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

sl-button.checkout_cart::part(base) {
    background: var(--Purple);
    color: var(--searchBar);
    border-radius: 31px;
    border: none;
    height: 48px;
    display: flex;
    align-items: center;
}

.cd-cart__layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.cd-cart__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

#cart_all {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.cd-cart__product {
  max-width: 100%;
  width: 100%;
}

sl-card.cd-cart__footer::part(base), 
sl-card.cd-cart__product::part(base) {
  background: var(--searchBar);
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  padding: 16px 12px;
  border: none;
  box-shadow: none;
  justify-content: space-evenly;
  box-sizing: border-box;
  max-width: 100%;
}

sl-card.cd-cart__product::part(body) {
  padding: 0;
  /* height: 100px; */
  width: 393px;
}

.cd-cart__product:not(.cd-cart__gift-product) .cd-cart__image,
.cd-cart__product:not(.cd-cart__gift-product) .cd-cart__image img,
sl-card.cd-cart__product:not(.cd-cart__gift-product)::part(image) {
  height: 60px;
  width: 60px;
  border-radius: 16px;
  max-width: 60px;
  min-width: 60px;
  object-fit: cover;
}

.cd-cart__details {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
}

.cd-cart__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display:none; /* don't show sku number */
}

.cd-cart__sku {
  color: var(--textSupport);
  font-family: var(--fontInter);
  font-size: var(--font_second);
  line-height: 1.2;
  white-space: nowrap;
}

.cd-details_header {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  flex-direction: row;
}

.cd-cart__details .truncate {
  font-weight: var(--fontweight_500);
  line-height: 20px;
  color: var(--textMain);
  font-size: var(--font_main);
  width: 175px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.cd-cart__delete-item {
  height: 20px;
  width: 20px;
  color: var(--textSecondary);
}

.cd-product__footer {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.cd-variant {
  width: max-content;
  font-size: var(--font_main);
  min-width: 0;
  max-width: 120px;
}
.cd-variant::part(base) {
  border-radius: 24px;
  color: var(--textMain);
  background: var(--background);
  max-width: 120px;
  border: none;
  font-size: var(--font_second);
  height: max-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--fontInter);
  line-height: 17px;
  padding: 5px;
}

.cd-variant::part(content) {
  font-size: var(--font_second);
  width: 120px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95px;
  height: 32px;
  border: 1px solid var(--menu);
  border-radius: 31px;
  padding: 5px;
  box-sizing: border-box;
  font-size: var(--font_main);
}

.cd-qty__btn {
  height: 20px;
  width: 20px;
}

.cd-qty__inc svg,
.cd-qty__dec svg{
  height: 20px;
  width: 20px;
  opacity:40%;
  color: var(--textSecondary);
}

.cd-qty {
  background: none;
  color: var(--textSecondary);
  font-weight: var(--fontweight_heavy);
  text-align: center;
  font-family: var(--fontInter);
}

.cd-price {
    display: flex;
    flex-direction: row;
    gap: 4px;
    height: 22px;
    align-items: end;
}

.cd-cart__price {
  color: var(--textSupport);
  font-size: var(--font_second);
  line-height: 14.52px;
  font-family: var(--fontInter);
}

.cd-price .cd-cart__price.no-sale {
  color: var(--textMain);
  font-weight: var(--fontweight_heavy);
}

.cd-price .cd-cart__price.no-sale .dollars{
  font-size: var(--font_large);
}

.cd-art__sale {
  color: var(--Pink);
  font-weight: var(--fontweight_heavy);
  font-size: var(--font_main);
  display: flex;
  align-items: baseline;
  height: 22px;
  font-family: var(--fontInter);
}

.cd-art__sale .dollars {
  font-size: var(--font_title);
}

.cd-cart__footer,
sl-card.cd-cart__footer::part(body) {
  width: -webkit-fill-available;
}

sl-card.cd-cart__footer::part(base) {
  width: -webkit-fill-available;
  padding: 0;
  background: none;
}

sl-card.cd-cart__footer::part(body) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.checkout_sum_contain {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkout_total {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 6px;
    border-radius: 18px;
}

.checkout_total__meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.checkout_total__line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.shipping_title {
    font-size: var(--font_second);
    color: var(--textSupport);
    font-family: var(--fontInter);
}

.dispatch_note {
    display: inline-block;
    font-size: var(--font_second);
    color: var(--textSupport);
    line-height: 1.3;
    font-family: var(--fontInter);
    font-weight: var(--fontweight_main);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#cart_all .currency-symbol,
#cart_all .dollars,
#cart_all .cents,
#cart_all .cd-cart__price,
#cart_all .cd-art__sale,
#cart_all .cd-qty {
    font-family: var(--fontInter);
}

.checkout_security {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.checkout_security__label {
    display: inline-flex;
    gap: 6px;
    font-size: var(--font_main);
    color: var(--textSecondary);
    font-weight: var(--fontweight_heavy);
    justify-content: center;
    font-family: var(--fontInter);
    flex-wrap: wrap;
    align-items: center;
}

.checkout_security__separator {
    color: var(--textSupport);
    font-weight: var(--fontweight_main);
}

.checkout_security__icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--textSupport);
}

.checkout_security__icon svg {
    width: 16px;
    height: 16px;
}

.checkout_security__methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--Purple) 6%, var(--searchBar));
}

.checkout_security__chip {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--textSupport);
    font-size: var(--font_second);
    font-weight: var(--fontweight_main);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.checkout_security__brand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--textMain);
    font-family: var(--fontInter);
    font-size: var(--font_second);
    line-height: 1;
    white-space: nowrap;
}

.checkout_security__brand--visa {
    letter-spacing: 0.08em;
    font-weight: var(--fontweight_max);
}

.checkout_security__brand--apple,
.checkout_security__brand--gpay {
    font-weight: var(--fontweight_heavy);
}

.checkout_security__brand--mc {
    font-weight: var(--fontweight_main);
}

.checkout_security__mc-icon {
    width: 26px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkout_security__mc-icon svg {
    width: 26px;
    height: 16px;
}

.checkout_security--footer {
    order: 4;
    padding-top: 2px;
}

.total_header {
    font-weight: var(--fontweight_heavy);
    color: var(--textMain);
    font-family: var(--fontInter);
}

.total_price, .cd-cart__price {
    font-weight: var(--fontweight_heavy);
    font-size: var(--font_large);
    color: var(--textMain);
    display: flex;
    flex-direction: row;
    align-items: baseline;
    font-family: var(--fontInter);
}

.total_price .dollars {
    font-size: var(--font_title);
}

.total_savings,
.savings_title {
    color: var(--textSecondary);
    font-size: var(--font_main);
}

.checkout_sale {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--menu);
}

.cd-top {
    font-size: var(--font_main);
}

/*Remove cart items*/
.remove_alert_msg img {
height: 32px;
width: 32px;
border-radius: 6px;
object-fit: cover;
}

.remove_alert_msg {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
font-weight: var(--fontweight_heavy);
font-size: var(--font_main);
line-height: 20px;
}

#undo_removal {
margin-left: 4px;
font-weight: var(--fontweight_heavy);
font-size: var(--font_main);
line-height: 20px;
text-decoration: underline;
cursor: pointer;
}

.cart_gems_row {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(164, 113, 251, 0.22);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(164, 113, 251, 0.1), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,244,252,0.98));
}

.cart_discount_row {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 0;
    width: 100%;
}

.cart_discount_label {
    font-size: var(--font_second);
    color: var(--textSupport);
    font-family: var(--fontInter);
}

.cart_discount_value {
    font-size: var(--font_main);
    font-weight: var(--fontweight_heavy);
    color: #198754;
    font-family: var(--fontInter);
}

.cart_coupon_entry {
    margin: 0;
}

.cart_coupon_entry::part(base) {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cart_coupon_entry::part(header) {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.cart_coupon_entry::part(summary) {
    gap: 4px;
    border: none;
    box-shadow: none;
    background: transparent;
}

.cart_coupon_entry::part(summary-icon) {
    display: none;
}

.cart_coupon_entry::part(content) {
    padding: 6px 0 4px;
    border: none;
    box-shadow: none;
    background: transparent;
}

.cart_coupon_entry__summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font_main);
    font-weight: var(--fontweight_main);
    color: var(--textSupport);
    line-height: 1.2;
    font-family: var(--fontInter);
}

.cart_coupon_entry__summary::after {
    content: "›";
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
    text-decoration: none;
}

.cart_coupon_entry__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.cart_coupon_entry__label {
    font-size: var(--font_main);
    font-weight: var(--fontweight_heavy);
    color: var(--textMain);
}

.cart_coupon_entry__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart_coupon_entry__input {
    flex: 1;
}

.cart_coupon_entry__submit::part(base) {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--menu);
    background: var(--background1);
    color: var(--textMain);
}

.cart_coupon_feedback {
    min-height: 16px;
    font-size: var(--font_second);
    color: var(--textSupport);
}

.cart_coupon_feedback.success {
    color: #198754;
}

.cart_coupon_feedback.error {
    color: #d64545;
}

.cart_gift_progress {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--Pink) 18%, var(--menu));
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(230, 51, 115, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,246,250,0.98));
}

.cart_gift_progress__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cart_gift_progress__title {
    font-size: var(--font_main);
    font-weight: var(--fontweight_heavy);
    color: var(--textMain);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart_gift_progress__amount {
    font-size: var(--font_main);
    color: var(--textSupport);
    white-space: nowrap;
    text-align: right;
    margin-left: auto;
    font-family: var(--fontInter);
}

.cart_gift_progress__emoji,
.cart_gift_progress__gift {
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

.cart_gift_progress__bar_wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart_gift_progress__bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(230, 51, 115, 0.12);
    overflow: hidden;
    position: relative;
}

.cart_gift_progress__fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--Pink) 0%, color-mix(in srgb, var(--Pink) 76%, white) 100%);
    box-shadow: 0 0 16px rgba(230, 51, 115, 0.22);
    transition: width 0.22s ease;
}

.cart_gift_progress__gift {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: rgba(230, 51, 115, 0.12);
    color: var(--Pink);
    border: 1px solid rgba(230, 51, 115, 0.16);
}

.cart_gift_progress__text {
    font-size: var(--font_main);
    color: var(--textSupport);
    line-height: 15px;
    font-family: var(--fontInter);
}

.cart_gift_progress__text strong {
    color: var(--Pink);
}

.cart_gift_rows {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.cart_gift_rows__title {
    color: var(--textSupport);
    font-size: var(--font_second);
    font-weight: var(--fontweight_heavy);
    margin: 2px 2px 0;
}

.cd-cart__gift-product {
    position: relative;
}

.cd-cart__gift-product::part(base) {
    background: #FFF7EE;
    gap: 10px;
    padding: 10px;
    align-items: flex-start;
}

.cd-cart__gift-product::part(image),
.cd-cart__gift-product .cd-cart__image,
.cd-cart__gift-product .cd-cart__image img {
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    border-radius: 12px;
}

.cd-cart__gift-note {
    font-size: var(--font_second);
    color: var(--textSupport);
    line-height: 15px;
}

.cd-cart__gift-free {
    color: #C34D1A;
    font-weight: var(--fontweight_heavy);
    font-size: var(--font_main);
    line-height: 1.1;
}

.cd-cart__gift-icon {
    height: 50px;
    width: 50px;
    min-width: 50px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFEFD7 0%, #FFD7C6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-cart__gift-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.cd-cart__gift-product .cd-cart__details {
    gap: 4px;
    justify-content: flex-start;
}

.cd-cart__gift-product .cd-details_header {
    gap: 8px;
    align-items: flex-start;
}

.cd-cart__gift-product .cd-cart__details .truncate {
    width: auto;
    line-height: 18px;
}

.cart_gems_left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}

.cart_gems_primary {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.cart_gem_crystal {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--Purple) 12%, var(--searchBar)), color-mix(in srgb, var(--Purple) 4%, var(--searchBar)));
}

.cart_gem_crystal img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(67, 128, 248, 0.2));
    position: relative;
    z-index: 1;
}

.cart_gem_crystal__halo {
    position: absolute;
    inset: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--Purple) 18%, transparent);
    filter: blur(6px);
}

.cart_gems_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart_gems_kicker {
    font-size: var(--font_main);
    color: var(--textSecondary);
    font-weight: var(--fontweight_heavy);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: var(--fontInter);
}

.cart_gems_helper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--textSupport);
    font-size: var(--font_second);
    font-family: var(--fontInter);
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.cart_gems_helper::after {
    content: "›";
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
    text-decoration: none;
}

.cart_gems_value {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.cart_gem_count {
    font-weight: var(--fontweight_max);
    color: var(--textMain);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s;
    display: inline-block;
    line-height: 1;
    font-family: var(--fontInter);
}

.cart_gem_unit {
    font-size: var(--font_large);
    color: var(--textSecondary);
    font-weight: var(--fontweight_heavy);
}

.cart_gem_bonus {
    display: none;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(245, 176, 62, 0.16);
    border: 1px solid rgba(245, 176, 62, 0.08);
    color: #B86700;
    font-size: var(--font_second);
    font-weight: var(--fontweight_heavy);
    white-space: nowrap;
    line-height: 1;
    align-self: flex-end;
}

.cart_gems_meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: 46%;
    flex: 0 0 auto;
}

.cart_gems_legend {
    font-size: var(--font_second);
    color: var(--textMain);
    text-align: right;
    line-height: 1;
    font-family: var(--fontInter);
}

.cart_gems_plus {
    font-size: var(--font_main);
    color: var(--Purple);
    font-weight: var(--fontweight_heavy);
    text-align: right;
    line-height: 1.25;
    font-family: var(--fontInter);
}

.cart_guest_note {
    font-size: 10px;
    color: var(--textSupport);
    text-align: center;
    padding: 4px 8px 0;
    opacity: 0.7;
    width: 100%;
    order: 1;
}

.clear_cart,
.checkout_cart {
    order: 2;
}

.materials-checkout-popup::part(panel) {
    background: var(--background);
}

sl-dialog.materials-checkout-popup::part(panel) {
    border-radius: 24px;
    width: min(960px, calc(100vw - 32px));
}

sl-drawer.materials-checkout-popup::part(panel) {
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
}

.materials-checkout-popup::part(body) {
    padding: 0;
}

.materials-checkout-popup::part(header) {
    display: none;
}

.materials-checkout-popup::part(title) {
    font-size: var(--font_title);
    color: var(--textMain);
    font-weight: var(--fontweight_heavy);
}

.materials-checkout-popup__content {
    display: flex;
    flex-direction: column;
    padding: 16px;
    position: relative;
}

.materials-checkout-popup__close {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 4;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--textMain);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.materials-checkout-popup__close:hover,
.materials-checkout-popup__close:focus-visible {
    background: #fff;
    outline: none;
}

.materials-checkout-popup__frame {
    min-height: clamp(560px, 76vh, 760px);
    background: var(--searchBar);
    border: 1px solid var(--menu);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.materials-checkout-popup__mount {
    min-height: clamp(560px, 76vh, 760px);
}

.materials-checkout-popup__loading,
.materials-checkout-popup__error {
    padding: 22px;
    color: var(--textSupport);
    font-size: var(--font_main);
}

.materials-checkout-popup__loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--searchBar);
    z-index: 1;
}

.materials-checkout-popup__loading-inner {
    display: inline-grid;
    justify-items: center;
    gap: 14px;
    width: min(100%, 420px);
    padding: 28px 26px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(32, 23, 43, 0.08);
    color: var(--textSupport);
    font-size: var(--font_main);
    text-align: center;
}

.materials-checkout-popup__spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #e8e0ef;
    border-top-color: var(--Purple);
    animation: materialsCheckoutSpin 0.85s linear infinite;
}

.materials-checkout-popup__loading-title {
    color: var(--textMain);
    font-size: var(--font_large);
    font-weight: var(--fontweight_heavy);
    line-height: 1.25;
}

.materials-checkout-popup__loading-subtext {
    color: var(--textSupport);
    font-size: var(--font_small);
    line-height: 1.45;
    max-width: 320px;
}

@keyframes materialsCheckoutSpin {
    to {
        transform: rotate(360deg);
    }
}

.materials-checkout-popup__error {
    display: none;
    color: #7a1622;
    position: absolute;
    inset: auto 0 0;
    background: rgba(255, 255, 255, 0.98);
}

.gem-plus-hint {
    display: block;
    color: var(--Purple);
    opacity: 0.85;
    font-weight: var(--fontweight_heavy);
}

.sl-toast-stack sl-alert#removeAlert::part(base) {
background: #080114B2;
border: none;
color: #FBF9FC;
border-radius: 16px;
box-sizing:border-box;
}

.sl-toast-stack sl-alert#removeAlert::part(message) {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
}

@media screen and (min-width: 1024px) {
    sl-dialog.cd-cart__content::part(panel) {
        border-radius: 24px;
        width: 625px;
    }

    .cd-cart__content::part(body) {
        padding: 16px 40px;
    }

    .cd-cart__body {
        gap: 12px;
    }

    #cart_all {
        gap: 8px;
    }

    sl-card.cd-cart__footer::part(base), sl-card.cd-cart__product::part(base) {
        gap: 20px;
    }

    .cd-cart__details {
        max-width: none;
    }

    .cd-cart__details .truncate {
    width: 100%;
    }

    .cd-price, .total_price {
        height: 24px;
    }

    .total_savings,
    .cd-cart__price {
        font-size: var(--font_main);
        line-height: 16.94px;
    }

    .total_price,
    .cd-art__sale,
    .cd-price .cd-cart__price.no-sale {
        font-size: var(--font_large);
        height: 24px;
    }
    .total_price .dollars,
    .cd-art__sale .dollars,
    .cd-price .cd-cart__price.no-sale .dollars {
        font-size: 20px;
    }

    .materials-checkout-popup__content {
        padding: 24px;
    }

    .materials-checkout-popup__close {
        top: 34px;
        right: 34px;
    }
}

@media screen and (min-width: 1280px){
	.cart-btn::part(base) {
		bottom: 120px;
	}
}

@media only screen and (max-width: 767px) {
    sl-dialog.cd-cart__content::part(panel),
    sl-drawer.cd-cart__content::part(panel) {
        height: min(95vh, 95dvh);
        max-height: min(95vh, 95dvh);
    }

    .cd-cart__content::part(body) {
        padding: 12px 12px 0;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
    }

    .cd-cart__content::part(footer) {
        position: sticky;
        bottom: 0;
        z-index: 2;
        gap: 10px;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        background: transparent;
        align-items: center;
    }

    .cd-cart__body {
        gap: 6px;
    }

    #cart_all {
        gap: 6px;
    }

    .checkout_sum_contain {
        gap: 10px;
    }

    .checkout_total {
        align-items: flex-start;
    }

    .checkout_total__meta {
        width: 100%;
    }

    .checkout_security__label {
        gap: 4px;
    }

    .shipping_title,
    .dispatch_note,
    .checkout_security__label,
    .cart_coupon_entry__summary,
    .cart_gems_kicker,
    .cart_gems_helper,
    .cart_gems_legend,
    .cart_gems_plus,
    .cart_gift_progress__amount,
    .cart_gift_progress__text {
        font-size: var(--font_main);
    }

    .checkout_security {
        gap: 8px;
    }

    .checkout_security__icon,
    .checkout_security__icon svg {
        width: 14px;
        height: 14px;
    }

    .checkout_security__methods {
        gap: 4px;
        padding: 5px 9px;
    }

    .checkout_security__chip {
        font-size: var(--font_second);
    }

    .checkout_security__brand {
        font-size: 11px;
    }

    .cart_gems_row {
        align-items: center;
        gap: 8px;
        padding: 9px 10px;
        border-radius: 16px;
    }

    .cart_gems_left {
        width: auto;
        min-width: 0;
        gap: 8px;
    }

    .cart_gem_crystal {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 12px;
    }

    .cart_gem_crystal img {
        width: 20px;
        height: 20px;
    }

    .cart_gem_unit {
        font-size: var(--font_large);
    }

    .cart_gems_meta {
        max-width: 50%;
        align-items: flex-end;
        gap: 3px;
    }

    .cart_gems_legend,
    .cart_gems_plus {
        text-align: right;
        font-size: 11px;
    }

    .cart_gem_bonus {
        align-self: flex-end;
        font-size: var(--font_second);
        min-height: 18px;
        padding: 0 7px;
    }

    .cart_gift_progress {
        gap: 4px;
        padding: 7px 9px;
        border-radius: 12px;
    }

    .cart_gift_progress__head {
        align-items: center;
        gap: 8px;
    }

    .cart_gift_progress__title {
        font-size: var(--font_main);
        gap: 5px;
    }

    .cart_gift_progress__bar_wrap {
        gap: 5px;
    }

    .cart_gift_progress__bar {
        height: 8px;
    }

    .cart_gift_progress__gift {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 13px;
    }

    .cart_gift_progress__text {
        line-height: 13px;
    }

    .materials-checkout-popup__content {
        padding: 14px;
    }

    .materials-checkout-popup__close {
        top: 18px;
        right: 18px;
    }

    .materials-checkout-popup__frame,
    .materials-checkout-popup__mount {
        min-height: clamp(500px, 72vh, 680px);
    }
}