.cart-amount > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 10px;
}

.cart-amount > li em {
  font-style: normal;
}

.cart-amount > li span {
  font-weight: bold;
}
.cart-amount__flex-end > li {
  justify-content: flex-end;
}
.cart-amount__flex-end > li span {
  margin-inline-start: 12px;
}
@media (max-width: 959px) {
  .cart-amount__flex-end > li {
    justify-content: space-between;
  }

  .cart-amount__flex-end > li span {
    margin-inline-start: 0;
  }
}
.cart-amount .cart-amount__discount-label {
  display: flex;
  gap: 4px;
  align-items: center;
  color: rgb(var(--color-light-text));
}
.cart-amount .cart-amount__discount-label svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.cart-amount .cart-amount__discount span {
  color: rgb(var(--color-discount));
  white-space: nowrap;
}
.cart-coupon--disabled {
  pointer-events: none;
}
.cart-coupon__form {
  display: flex;
  gap: 6px;
}
.cart-coupon__form .field {
  margin-block-end: 0;
}
.cart-coupon__error {
  margin-block: 8px 0;
}
.cart-coupon__dividing-line {
  height: 0;
  margin-block-start: -7px;
  overflow: hidden;
  border-block-start: 1px solid rgb(var(--color-entry-line));
}
.cart-coupon__list {
  display: flex;
  flex-wrap: wrap;
  margin-block-end: 15px;
}
.cart-coupon__list-warning {
  padding-block-start: 8px;
  margin-block-end: 0;
  color: rgb(var(--color-sale));
}
.cart-coupon__list-item {
  display: flex;
  align-items: center;
  padding-block: 5px;
  padding-inline: 8px;
  margin-block-start: 8px;
  margin-inline-end: 6px;
  background-color: rgba(var(--color-text), 0.1);
  border-radius: 4px;
}
.cart-coupon__list theme-popover {
  align-items: center;
}
.cart-coupon__list-tag {
  display: flex;
  align-items: center;
  margin-inline-end: 6px;
  opacity: 0.3;
}
.cart-coupon__list-tag svg {
  width: 20px;
  height: 20px;
}
.cart-coupon__list-tag--wraning {
  opacity: 1;
}
.cart-coupon__list-close {
  display: flex;
  align-items: center;
  margin-inline-start: 15px;
  cursor: pointer;
}
.cart-empty {
  text-align: center;
}
.cart-empty__body {
  padding-block: 80px;
}
@media (max-width: 959px) {
  .cart-empty__body {
    padding-block: 130px;
  }
}
.cart-fixed-checkout {
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: var(--z-index-fixed);
  display: none;
  width: 100%;
  background-color: rgb(var(--color-background));
  opacity: 0;
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-out;
  transform: translateY(100%);
}
@media (max-width: 959px) {
  .cart-fixed-checkout {
    display: block;
  }
}
.cart-fixed-checkout__container {
  box-shadow: 0 -4px 20px 0 rgba(var(--color-text), 0.05);
}
.cart-fixed-checkout__dropdown {
  text-align: center;
}
.cart-fixed-checkout__dropdown span {
  cursor: pointer;
}
.cart-fixed-checkout .cart-fixed-checkout__inner {
  max-height: 500px;
  overflow: hidden;
  opacity: 1;
  transition:
    max-height 0.2s ease-out,
    opacity 0.2s ease-out;
}
.cart-fixed-checkout__sub-info {
  padding-block: 0 12px;
  padding-inline: 12px;
}
.cart-fixed-checkout .cart-taxes {
  padding-block: 6px;
}
.cart-fixed-checkout__main-info {
  padding: 12px;
  border-block-start: 1px solid rgb(var(--color-entry-line));
}
.cart-fixed-checkout__total {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.cart-fixed-checkout__total-amount {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  column-gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.cart-fixed-checkout__total-saved {
  color: rgb(var(--color-discount));
}
.cart-fixed-checkout__arrow svg {
  transition: transform 0.2s ease-out;
  transform: rotate(180deg);
}
.cart-fixed-checkout__buttons {
  margin-block-start: 10px;
  text-align: center;
}
.cart-fixed-checkout--collapsed .cart-fixed-checkout__inner {
  max-height: 0;
  opacity: 0;
}
.cart-fixed-checkout--collapsed .cart-fixed-checkout__arrow svg {
  transform: rotate(0);
}
.cart-fixed-checkout--visible {
  opacity: 1;
  transform: translateY(0);
}
.cart-item__amount-operator {
  display: flex;
  gap: 20px;
  align-items: center;
}
.cart-item__amount .cart-item__volume-pricing {
  margin-block-start: 10px;
}
.cart-item__remove {
  cursor: pointer;
}
.cart-item__fail {
  display: flex;
  align-items: center;
}
.cart-item__fail > * {
  margin-block-start: 20px;
}
.cart-item__fail-tip {
  order: 1;
  margin-inline-start: 8px;
  color: rgb(var(--color-error-message));
}
.cart-item__fail-tip:empty,
.cart-item__fail-tip:empty + svg {
  display: none;
}
.cart-item__total {
  position: relative;
}
.cart-item__total-loading {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
}
.cart-item__total-loading.loading {
  display: flex;
  animation: animation-circling linear 1s infinite;
}
.cart-item__total-loading.loading ~ * {
  visibility: hidden;
}
.cart-item__total-final {
  display: inline-block;
  color: rgb(var(--color-text));
}
.cart-item__total-original {
  display: inline-block;
  color: rgb(var(--color-light-text));
  text-decoration: line-through;
}
.cart-item__volume-pricing theme-popover-content {
  z-index: 5;
  width: 245px;
  max-height: 240px;
  padding: 10px 0;
  overflow-y: scroll;
  background-color: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-entry-line));
}
.cart-item__volume-pricing-title {
  display: flex;
  align-items: center;
}
.cart-item__volume-pricing-title > span {
  margin-inline-start: 8px;
}
.cart-item__volume-pricing-rules {
  padding-block: 0 4px;
  padding-inline: 20px;
}
.cart-item__volume-pricing-list li {
  display: flex;
  justify-content: space-between;
  padding-block: 8px;
  padding-inline: 20px;
}
.cart-item__volume-pricing-list li:nth-child(odd) {
  background: rgba(var(--color-text), 0.03);
}
.cart-item__product {
  display: flex;
  column-gap: 30px;
  align-items: flex-start;
}
.cart-item__product-info {
  word-break: break-all;
}
.cart-item__picture {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 140px;
}
@media (max-width: 959px) {
  .cart-item__picture {
    width: 80px;
  }
}
.cart-item__picture a {
  display: block;
  width: 100%;
}
.cart-item__picture img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.cart-item__picture .placeholder {
  flex-grow: 1;
  background-color: rgb(var(--color-image-background));
}
.cart-item__total {
  margin-block-start: 8px;
}
.cart-item__option {
  margin-block-start: 4px;
}
.cart-item__property {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-block-start: 4px;
}
.cart-item__property-name {
  margin-inline-end: 3px;
}
.cart-item__property-text {
  display: block;
  max-width: 100%;
  word-break: break-all;
}
.cart-item__property-images {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.cart-item__property-link {
  display: block;
}
.cart-item__property-image {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.cart-item__discount {
  margin-block: 4px;
  color: rgb(var(--color-discount));
}
.cart-item__discount > li {
  display: flex;
  align-items: center;
}
.cart-item__discount > li svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-inline-end: 4px;
  color: rgb(var(--color-tag-background));
}
.cart-item__amount {
  margin-block-start: 8px;
}
.cart-drawer__body {
  display: flex;
  flex-direction: column;
  width: 440px;
  color: rgb(var(--color-text));
}
@media (max-width: 959px) {
  .cart-drawer__body {
    width: 90%;
  }
}
.cart-drawer__header {
  position: relative;
  padding: 20px;
}
.cart-drawer__header::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: rgb(var(--color-entry-line));
}
.cart-drawer__close {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-end: 16px;
  padding: 6px;
  cursor: pointer;
  background: none;
  border: 0;
}
.cart-drawer__close svg {
  width: 12px;
  height: 12px;
}
.cart-drawer__loading {
  position: sticky;
  inset: 0;
  z-index: var(--z-index-popover);
  display: none;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgb(var(--color-background));
}
.cart-drawer__loading-inn {
  padding-block-start: 120px;
}
.cart-drawer__loading-inn .loading--rotator {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}
.cart-drawer__loading-inn .loading--rotator svg {
  width: 100%;
  height: 100%;
}
.cart-drawer__loading-inn p {
  margin-block-start: 12px;
}
.cart-drawer .cart-item {
  padding-block: 20px;
}
.cart-drawer .cart-item__disabled {
  pointer-events: none;
}
.cart-drawer__payment {
  position: relative;
  padding-block-start: 20px;
}
.cart-drawer__payment::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -20px;
  width: calc(100% + 40px);
  height: 1px;
  content: "";
  background-color: rgb(var(--color-entry-line));
}
.cart-drawer__payment .cart-amount {
  margin-block-start: 15px;
}
.cart-drawer__inner {
  position: relative;
  flex: 1;
  padding-inline: 20px;
  overflow-y: scroll;
  background-color: rgb(var(--color-background));
}
.cart-drawer__inner--loading {
  overflow: hidden;
}
.cart-drawer__inner--loading .cart-drawer__payment::before {
  inset-inline-start: 0;
  width: 100%;
}
.cart-drawer__inner--loading .cart-coupon__form {
  overflow: hidden;
}
.cart-drawer__inner--loading .cart-drawer__loading {
  display: flex;
}
.cart-drawer .cart-fixed-checkout {
  position: static;
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Backporch cart presentation. Bottle retains ownership of cart data, line-item
 * updates, checkout, modal focus, backdrop, and Escape handling. */
@keyframes migration-cart-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Sep 3 #48: "the close button is sometimes not visible" on a phone, and
   "sometimes" was the whole clue — nothing covers it and it is a 44px target
   since #21, so the panel itself was moving.

   The modal component lays this element out as position:fixed with inset:0 and
   margin:auto, which centres it. Given an explicit height taller than the
   containing block, those auto margins resolve to equal values and the excess
   hangs off the top and bottom in equal measure. On iOS 100vh is the *large*
   viewport — the height with the browser chrome retracted — so with the URL bar
   expanded the panel stood ~90px taller than the screen and half of that ate
   the top of the drawer, which is where the close button lives. Chrome
   retracted, 100vh was right and the button was there. Hence intermittent.

   dvh is the viewport as it currently is, so the panel matches the screen in
   both states. The nav drawer already carries this pair (header.css) and the
   cart never got it. Pinning the block margins to 0 is the belt to that
   braces: if anything ever makes this taller than the screen again, it
   overflows downward into the scrolling area rather than upward over the
   control that closes it. */
.cart-drawer__body {
  width: min(420px, 100vw);
  height: 100vh;
  height: 100dvh;
  margin-block: 0;
  color: #222;
  background: #fff;
  animation: migration-cart-slide 0.34s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 63px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(33, 78, 52, 0.14);
}

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

.cart-drawer__header h2 {
  margin: 0;
  color: #214e34;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
}

.cart-drawer__close {
  position: static;
  display: grid;
  width: 28px;
  height: 24px;
  padding: 6px;
  color: #214e34;
  place-items: center;
}

.cart-drawer__close svg {
  width: 12px;
  height: 12px;
}

.migration-cart-progress {
  padding: 16px 24px;
  color: #173824;
  background: #dde7e0;
}

.migration-cart-progress p {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
}

.migration-cart-progress__track {
  height: 6px;
  overflow: hidden;
  background: rgba(33, 78, 52, 0.18);
  border-radius: 999px;
}

/* The fill, addressed by its own hook. As `… span` this also matched the
   checkpoint markers the meter appends to this track, at a higher specificity
   than their own class — so every marker inherited width:0 and the fill's
   green, and rendered as a 4x7 sliver in the colour of the bar behind it. */
.migration-cart-progress__track > [data-cart-shipping-fill] {
  display: block;
  width: 0;
  height: 100%;
  background: #214e34;
  transition: width 0.25s ease;
}

/* Aug 31: with more than one checkpoint the track carries stage markers taller
   than its own 6px box, so overflow:hidden clipped them away — the meter
   rendered as a single unmarked bar however many checkpoints were configured.
   Lifting the clip lives in migration/index.css alongside the marker styles,
   so the cart page gets the same treatment; this only reserves the room the
   legend row needs underneath. */
.migration-cart-progress__track.has-stages {
  margin-bottom: 4px;
}

.cart-drawer__inner {
  flex: 1 1 0;
  padding: 8px 24px;
  overflow: auto;
  background: #fff;
}

.cart-empty__body {
  padding: 44px 4px;
  text-align: center;
}

.cart-empty__body h3 {
  margin: 0 0 8px;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
}

.cart-empty__tips {
  margin: 0 0 18px;
  color: #5c6b60;
  font-size: 13px;
  line-height: 1.6;
}

.cart-empty a.cart-empty__button,
.cart-empty a.cart-empty__button:hover,
.cart-empty a.cart-empty__button:focus-visible {
  display: inline-block;
  padding: 13px 22px;
  color: #f7f4ec;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #214e34;
  border-radius: 999px;
}

.migration-cart-upsell {
  padding: 16px;
  margin: 20px 0;
  background: #f7f4ec;
  border: 1px dashed rgba(33, 78, 52, 0.35);
  border-radius: 8px;
}

.migration-cart-upsell__eyebrow {
  margin: 0 0 8px;
  color: #214e34;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.migration-cart-upsell__product {
  display: flex;
  gap: 12px;
  align-items: center;
}

.migration-cart-upsell__product img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.migration-cart-upsell__copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.migration-cart-upsell__copy strong {
  font-weight: 600;
}

.migration-cart-upsell__product button {
  padding: 10px 16px;
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #214e34;
  border: 0;
  border-radius: 999px;
}

.migration-cart-upsell__product button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.65;
}

.migration-cart-upsell__status {
  margin: 8px 0 0;
  color: #9d2424;
  font-size: 11px;
}

.migration-cart-upsell__status:empty {
  display: none;
}

.migration-cart-footer {
  padding: 20px 24px;
  background: #fff;
  border-top: 1px solid rgba(33, 78, 52, 0.14);
}

.migration-cart-footer__subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.migration-cart-footer a.migration-cart-footer__checkout,
.migration-cart-footer a.migration-cart-footer__checkout:hover,
.migration-cart-footer a.migration-cart-footer__checkout:focus-visible,
.migration-cart-footer .cart-checkout .button {
  display: block;
  width: 100%;
  min-height: 49px;
  padding: 16px;
  color: #f7f4ec;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  background: #214e34;
  border: 0;
  border-radius: 999px;
}

.migration-cart-footer > p {
  margin: 10px 0 0;
  color: #5c6b60;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
}

.cart-drawer .cart-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(33, 78, 52, 0.1);
}

.cart-drawer .cart-item__product {
  gap: 14px;
}

.cart-drawer .cart-item__picture {
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: #f7f4ec;
  border-radius: 6px;
}

.cart-drawer .cart-item__picture img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.cart-drawer .cart-item__picture .placeholder {
  display: block;
  width: 72px;
  height: 72px;
  color: transparent;
  background: transparent var(--migration-cart-pods-image) center / contain no-repeat;
}

.cart-drawer .cart-item__picture .placeholder * {
  display: none;
}

.cart-drawer .cart-item:has(a[href*="/products/starter-kits"]) .cart-item__picture .placeholder {
  background-image: var(--migration-cart-starter-image);
}

.cart-drawer .cart-item__product-infos {
  flex: 1 1 0;
  min-width: 0;
}

.cart-drawer .cart-item__title,
.cart-drawer .cart-item__total {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.cart-drawer .cart-item__amount-operator {
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cart-drawer theme-input-number {
  overflow: hidden;
  border: 1px solid rgba(33, 78, 52, 0.3);
  border-radius: 999px;
}

.cart-drawer theme-input-number button {
  width: 34px;
  height: 34px;
  color: #214e34;
  background: none;
  border: 0;
}

.cart-drawer theme-input-number input {
  width: 28px;
  min-width: 28px;
  height: 34px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: 0;
}

.cart-drawer .cart-item__remove {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 6px 2px;
  color: #5c6b60;
  font-size: 12px;
  cursor: pointer;
}

.cart-drawer .cart-item__remove svg {
  width: 13px;
  height: 13px;
}

.cart-drawer .cart-item__remove span {
  text-decoration: underline;
}

@media (max-width: 959px) {
  .cart-drawer__body {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__body {
    animation-duration: 0.001ms;
  }
}

/* Aug 31 #21: reported as "there is no close button for the cart" on a phone.
   There is one — but it was a 10px glyph in a 28x24 box tucked in the corner,
   which at arm's length is not a control anyone finds. Nothing was covering it
   and it worked when clicked; it simply could not be seen. A 44px target with
   a glyph you can actually aim at, phone only, so the desktop drawer keeps its
   quieter corner treatment. */
@media (max-width: 749px) {
  .cart-drawer__close {
    width: 44px;
    height: 44px;
    margin-inline-end: -10px;
    padding: 0;
  }

  .cart-drawer__close svg {
    width: 18px;
    height: 18px;
  }

  /* Sep 3 #48: the notch and the home indicator are inside dvh, so the header
     needs to clear the one and the footer to sit above the other. Without this
     the close button is on screen but under the status bar on a notched
     phone, which reads the same as missing. */
  .cart-drawer__header {
    padding-block-start: max(20px, env(safe-area-inset-top));
  }

  .migration-cart-footer {
    padding-block-end: max(20px, env(safe-area-inset-bottom));
  }
}