.cart-drawer__body {
  width: clamp(460px, 40vw, 576px);
}

/* ==========================================================================
   Header
   ========================================================================== */

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 20px;
  border-bottom: 1px solid #f1f1f1;
}

.cart-drawer__header::after {
  display: none;
}

.cart-drawer__title {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  margin: 0;
}

.cart-drawer__count {
  font-size: var(--body6-font-size);
  font-weight: 400;
  vertical-align: top;
  position: relative;
  top: -4px;
  margin-inline-start: 5px;
}

.cart-drawer__close {
  --btn-fill-color: rgb(var(--color-text));
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(var(--color-entry-line));
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.cart-drawer__close .btn-fill {
  --btn-fill-color: #000;
  border-color: #000;
}

/* Fill enters on hover — same direction as checkout */
.cart-drawer__close:hover .btn-fill {
  --motion-translateY: 0%;
}

.cart-drawer__close svg {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer__close:hover svg {
  color: rgb(var(--color-background));
}

.sale_group_slot {
  margin-bottom: 20px;
}

/* ==========================================================================
   Body
   ========================================================================== */

.cart-drawer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
}

.cart-drawer__loading {
  position: absolute;
  inset: 0;
  height: auto;
}

.cart-drawer__coupon {
  padding-block: 16px 0;
}

/* Body — Platform-injected per-item promotion banners
   Each shows one line item's own discount (%, amount, or "lowest-priced item"
   threshold), not the cart total. Hidden only when the "Show total cart
   savings" theme setting is on — .cart-drawer__savings-banner above the items
   list replaces them with one cart-wide message. Setting off = native
   behavior, untouched.
   ========================================================================== */
.cart-drawer__items--consolidated-savings .cart-sku-list-promotion-module {
  display: none !important;
}

.cart-drawer__savings-banner {
  background-color: #f1f1f1;
  padding: 16px;
  margin-bottom: 16px;
  font-weight: 500;
  color: rgb(var(--color-text));
}

/* Body — App-injected free shipping bar
   ========================================================================== */
#cart-upsell-plugin {
  padding-bottom: 10px;
}

#cart-upsell-plugin > div {
  padding: 0px;
}

#cart-upsell-plugin [class*="_description_"] {
  font-size: var(--body2-font-size);
  font-family: var(--sort-body-font);
  line-height: 1.4 !important;
  margin-block-end: 10px !important;
  text-align: left;
}

#cart-upsell-plugin [class*="_warper_"] {
  padding: 8px 0 0 !important;
}

#cart-upsell-plugin [class*="_outer_"] {
  border-radius: 0;
  overflow: hidden;
}

#cart-upsell-plugin [class*="_inner_"] {
  border-radius: 0;
  overflow: hidden;
}

#cart-upsell-plugin [class*="_progress_"] {
  border-radius: 0;
  background: var(--progressFillColor);
}

.cart-checkout__btn--drawer [class*="_progress_"] {
  border-radius: 0;
  background: var(--progressFillColor);
}

/* Body — App-injected Save Later button
   ========================================================================== */

.cart-drawer [class*="_saveLaterContainer"] {
  bottom: 13px !important;
}

.cart-drawer [class*="_saveLaterContent"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #111111;
}

.cart-drawer [class*="_saveLaterContent"] > svg {
  display: none;
}

.cart-drawer [class*="_saveLaterContent"]::before {
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.00069543 7.04037C0.0396809 3.23784 3.0605 0 6.94314 0C9.32633 0 11.0793 1.17966 12.198 2.29037C12.5095 2.59962 12.7768 2.90811 13.0006 3.19255C13.2245 2.90811 13.4918 2.59962 13.8033 2.29037C14.9219 1.17966 16.675 0 19.0581 0C22.9408 0 25.9616 3.23784 26.0006 7.04037L26.0006 7.04066C26.0745 14.457 20.1155 19.5878 14.1256 23.6537C13.7939 23.8794 13.4019 24.0001 13.0006 24.0001C12.5994 24.0001 12.2074 23.8794 11.8756 23.6537C5.88522 19.5878 -0.0739251 14.457 0.000693522 7.04056L0.00069543 7.04037ZM13.8938 5.44967C13.724 5.78703 13.3785 6 13.0006 6C12.6228 6 12.2773 5.78705 12.1075 5.44972C12.1073 5.4493 12.1069 5.4485 12.1062 5.44733C12.105 5.44497 12.103 5.44108 12.1002 5.43573C12.0987 5.43289 12.097 5.42964 12.095 5.426C12.0838 5.40494 12.0651 5.37062 12.0389 5.32494C11.9865 5.23344 11.9047 5.09717 11.7936 4.93108C11.5703 4.59723 11.2346 4.15217 10.7889 3.70963C9.8932 2.82034 8.61746 2 6.94314 2C4.23085 2 2.02921 4.27955 2.00059 7.06069M13.8938 5.44967C13.8941 5.44925 13.8945 5.44846 13.895 5.44733C13.8969 5.44371 13.9007 5.43652 13.9063 5.426C13.9175 5.40494 13.9362 5.37062 13.9624 5.32494C14.0147 5.23344 14.0965 5.09717 14.2077 4.93108C14.431 4.59723 14.7667 4.15217 15.2124 3.70963C16.1081 2.82034 17.3838 2 19.0581 2C21.7704 2 23.972 4.2795 24.0007 7.06059C24.063 13.3101 19.0439 17.898 13.0015 21.9995L13.0006 22.0001L12.9997 21.9995C6.95677 17.898 1.93782 13.3102 2.00059 7.06088' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.00069543 7.04037C0.0396809 3.23784 3.0605 0 6.94314 0C9.32633 0 11.0793 1.17966 12.198 2.29037C12.5095 2.59962 12.7768 2.90811 13.0006 3.19255C13.2245 2.90811 13.4918 2.59962 13.8033 2.29037C14.9219 1.17966 16.675 0 19.0581 0C22.9408 0 25.9616 3.23784 26.0006 7.04037L26.0006 7.04066C26.0745 14.457 20.1155 19.5878 14.1256 23.6537C13.7939 23.8794 13.4019 24.0001 13.0006 24.0001C12.5994 24.0001 12.2074 23.8794 11.8756 23.6537C5.88522 19.5878 -0.0739251 14.457 0.000693522 7.04056L0.00069543 7.04037ZM13.8938 5.44967C13.724 5.78703 13.3785 6 13.0006 6C12.6228 6 12.2773 5.78705 12.1075 5.44972C12.1073 5.4493 12.1069 5.4485 12.1062 5.44733C12.105 5.44497 12.103 5.44108 12.1002 5.43573C12.0987 5.43289 12.097 5.42964 12.095 5.426C12.0838 5.40494 12.0651 5.37062 12.0389 5.32494C11.9865 5.23344 11.9047 5.09717 11.7936 4.93108C11.5703 4.59723 11.2346 4.15217 10.7889 3.70963C9.8932 2.82034 8.61746 2 6.94314 2C4.23085 2 2.02921 4.27955 2.00059 7.06069M13.8938 5.44967C13.8941 5.44925 13.8945 5.44846 13.895 5.44733C13.8969 5.44371 13.9007 5.43652 13.9063 5.426C13.9175 5.40494 13.9362 5.37062 13.9624 5.32494C14.0147 5.23344 14.0965 5.09717 14.2077 4.93108C14.431 4.59723 14.7667 4.15217 15.2124 3.70963C16.1081 2.82034 17.3838 2 19.0581 2C21.7704 2 23.972 4.2795 24.0007 7.06059C24.063 13.3101 19.0439 17.898 13.0015 21.9995L13.0006 22.0001L12.9997 21.9995C6.95677 17.898 1.93782 13.3102 2.00059 7.06088' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ==========================================================================
   Cart Item — Card
   ========================================================================== */

.cart-drawer .cart-item {
  display: flex;
  align-items: stretch;
  background-color: #e9e9e9;
  border-radius: 0;
  overflow: hidden;
  margin-block: 12px;
  padding: 10px;
  gap: 20px;
}

/* Cart Item — Image
   ========================================================================== */

.cart-drawer-item__image {
  display: block;
  flex: 0 0 100px;
  background-color: #fff;
  border-radius: 0;
  overflow: hidden;
  align-self: center;
}

.cart-drawer-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cart Item — Info
   ========================================================================== */

.cart-drawer-item__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.cart-drawer-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 500;
  font-size: var(--body2-font-size);
  line-height: 1.3;
  color: rgb(var(--color-text));
  text-decoration: none;
}

.cart-drawer-item__options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cart-drawer-item__option {
  color: rgb(var(--color-light-text));
  font-size: var(--body6-font-size);
}

.cart-drawer-item__price {
  font-size: var(--body3-font-size);
  font-weight: 300;
}

/* Cart Item — Quantity stepper & Remove
   ========================================================================== */

.cart-drawer-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
  flex: 0 0 auto;
}

/*
 * Override base theme-input-number inline-flex layout.
 * Base uses: [minus][input][plus] horizontal.
 * We need: [input | plus↑ ] grid (number left, arrows right stacked).
 *          [      | minus↓]
 * Since base CSS is in @layer component, our unlayered rules win without !important.
 */
.cart-drawer-item__qty {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 24px 24px;
  width: 90px;
  height: 48px;
  background-color: #e4e4e4;
  overflow: hidden;
}


.cart-drawer-item__qty input[type="number"] {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  text-align: center;
  border: none;
  background: transparent;
  font-size: var(--body3-font-size);
  padding: 0 0 0 8px;
  outline: none;
  -moz-appearance: textfield;
  cursor: default;
}

.cart-drawer-item__qty input[type="number"]::-webkit-outer-spin-button,
.cart-drawer-item__qty input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-drawer-item__qty button[data-action] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-text));
  transition: opacity 0.15s ease;
}

.cart-drawer-item__qty button[data-action="plus"] {
  grid-column: 2;
  grid-row: 1;
  align-items: flex-end;
  padding-block-end: 3px;
}

.cart-drawer-item__qty button[data-action="minus"] {
  grid-column: 2;
  grid-row: 2;
  align-items: flex-start;
  padding-block-start: 3px;
}

.cart-drawer-item__qty button[data-action]:hover:not(:disabled) {
  opacity: 0.6;
}

.cart-drawer-item__qty button[data-action]:active:not(:disabled) {
  opacity: 0.4;
}

.cart-drawer-item__qty button[data-action]:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.cart-drawer-item__qty button[data-action]:focus-visible {
  outline: 2px solid rgb(var(--color-text));
  outline-offset: -2px;
  border-radius: 2px;
}

/* Qty — Loading state
   ========================================================================== */

.cart-drawer-item__qty[loading] {
  opacity: 0.45;
  pointer-events: none;
}

/* Remove — hide during load, show spinner in its place
   ========================================================================== */

.cart-drawer-item__actions:has(st-qty-stepper[loading]) .cart-drawer-item__remove {
  visibility: hidden;
}

.cart-drawer-item__actions:has(st-qty-stepper[loading]) .cart-drawer-item__remove::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-top-color: #000;
  border-radius: 50%;
  animation: st-qty-spin 0.65s linear infinite;
  visibility: visible;
}

@keyframes st-qty-spin {
  to { transform: rotate(360deg); }
}

.cart-drawer-item__qty-static {
  font-size: var(--body3-font-size);
}

.cart-drawer-item__remove {
  position: relative;
  display: block;
  font-size: var(--body6-font-size);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  color: rgb(var(--color-text));
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.cart-drawer-item__remove:hover {
  opacity: 0.5;
}

.cart-item__fail {
  margin-block-start: 0;
}

.cart-item__fail-tip:empty {
  display: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cart-drawer__footer {
  background-color: #f5f5f5;
  padding: 20px;
  border-block-start: 1px solid rgb(var(--color-entry-line));
}

/* Footer — Taxes & Subtotal
   ========================================================================== */

.cart-drawer__footer-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  margin-block-end: 16px;
}

.cart-drawer__footer-taxes .cart-taxes {
  text-align: left;
  font-size: var(--body4-font-size);
  line-height: 1.4;
  color: rgb(var(--color-text));
}

.cart-drawer__footer-taxes .cart-taxes > a {
  font-size: var(--body4-font-size);
}

.cart-drawer__footer-subtotal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-drawer__subtotal-label {
  font-size: var(--body4-font-size);
  color: rgb(var(--color-text));
}

.cart-drawer__subtotal-value {
  font-size: var(--body1-font-size);
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--color-text));
  white-space: nowrap;
}

/* Footer — Checkout button
   ========================================================================== */
.paypal-button.paypal-button-shape-rect {
  border-radius: 0px !important;
}
.cart-drawer__footer-checkout .cart-checkout {
  width: 100%;
}

.cart-drawer__footer-checkout .cart-checkout form {
  width: 100%;
}

.cart-drawer__footer-checkout .cart-checkout__btn--drawer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background-color: rgb(var(--color-button-background));
  color: rgb(var(--color-button-text));
  border: 2px solid transparent;
  padding: 8px 24px;
  font-size: var(--body2-font-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-checkout__lock-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   Empty cart — message
   ========================================================================== */

.cart-empty__tips {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}

/* ==========================================================================
   Empty cart — collections list
   ========================================================================== */
.cart-empty__body {
  padding-block-start: 24px;
  padding-block-end: 18px;
}

.cart-empty-collections {
  padding-inline: 4px;
}

.cart-empty-collections__hint {
  font-size: var(--body4-font-size);
  color: rgb(var(--color-light-text));
  margin-block-end: 30px;
  text-align: center;
}

.cart-empty-collections__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-empty-collections__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: var(--body3-font-size);
  color: rgb(var(--color-text));
  text-decoration: none;
  background-color: #fafafa;
  border-radius: 0;
  transition: opacity 0.15s ease;
}

.cart-empty-collections__link:hover {
  opacity: 0.7;
}

.cart-empty-collections__link svg {
  flex-shrink: 0;
  width: 16px;
}

/* ==========================================================================
   Overlay cursor
   ========================================================================== */

.cart-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
  z-index: calc(var(--z-index-modal, 1000) + 10);
}

.cart-cursor--visible {
  opacity: 1;
}

/* Hide native cursor over the overlay when drawer is open */
.cart-drawer[open]::before {
  cursor: none;
}

/* ==========================================================================
   Desktop (min-width: 960px)
   ========================================================================== */

@media (min-width: 960px) {
  .cart-drawer [class*="_saveLaterContainer"] {
    bottom: 24px !important;
  }

  .cart-drawer__inner {
    padding: 20px 48px;
  }

  .cart-drawer__header {
    padding: 24px 48px 20px;
  }

  .cart-empty__body {
    padding-block-start: 34px; 
    padding-block-end: 24px;
  }

  .cart-empty__tips {
    font-size: 34px;
  }

  .cart-empty-collections__hint {
    font-size: 20px;
  }
}

/* ==========================================================================
   Mobile (max-width: 959px)
   ========================================================================== */

@media (max-width: 959px) {
  /* Bottom sheet */
  .cart-drawer__body--sheet {
    --modal-animation-name: animation-slide-in-bottom;
    inset-inline: 0;
    width: 100%;
    min-height: 90vh;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }

  /* Drag handle indicator */
  .cart-drawer__body--sheet::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  /* Side panel */
  .cart-drawer__body--side {
    --modal-animation-name: animation-slide-in-right;
    inset-inline: auto 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Hide scrollbar visually but keep functionality */
.cart-drawer__inner {
  scrollbar-width: none;
}

.cart-drawer__inner::-webkit-scrollbar {
  display: none;
}

/* Enforce square aspect ratio on product image */
.cart-drawer-item__image {
  aspect-ratio: 1 / 1;
}