.cart-lines { min-inline-size: 0; }
.cart-lines__items { display: grid; gap: 20px; min-inline-size: 0; }
.cart-line {
  --cart-media-width: 155px;
  --cart-media-ratio: 155 / 189;
  --cart-image-width: 76%;
  --cart-body-padding: 20px;
  --cart-body-border: 1px;
  --cart-row-gap: 27px;
  --cart-details-gap: 12px;
  --cart-details-inset: 27px;
  --cart-title-size: 18px;
  --cart-price-size: 20px;
  --cart-remove-display: grid;
  display: grid;
  grid-template-columns: var(--cart-media-width) minmax(0, 1fr);
  column-gap: 16px;
  min-inline-size: 0;
}
.cart-line:focus-visible, .cart-lines:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.cart-line__media { align-self: start; display: grid; place-items: center; aspect-ratio: var(--cart-media-ratio); background: var(--color-surface); overflow: hidden; }
.cart-line__image { inline-size: var(--cart-image-width); }
.cart-line__body { min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: var(--cart-row-gap) 10px; padding-block: var(--cart-body-padding); border-block: var(--cart-body-border) solid #e0d7d2; }
.cart-line__details { grid-column: 1 / -1; grid-row: 1; display: grid; align-content: start; gap: var(--cart-details-gap); min-inline-size: 0; padding-inline-end: var(--cart-details-inset); }
.cart-line__title { color: inherit; font-family: var(--font-display); font-size: var(--cart-title-size); line-height: 1.1; font-weight: 500; text-decoration: none; text-transform: uppercase; }
.cart-line__title:hover, .cart-line__title:focus-visible { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.cart-line__options { min-inline-size: 0; color: var(--color-secondary); font-size: 14px; line-height: 25px; font-weight: 500; }
.cart-line__option { display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; }
.cart-line__swatch { flex: none; display: inline-block; inline-size: 19px; aspect-ratio: 1; }
.cart-line__swatch--c1 { background: #291c13; }
.cart-line__swatch--c2 { background: #4d4236; }
.cart-line__swatch--c3 { background: #8b8079; }
.cart-line__swatch--c4 { background: #b5a18d; }
.cart-line__quantity { grid-column: 1; grid-row: 2; align-self: end; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; inline-size: 109px; max-inline-size: 100%; border: 1px solid #e0d7d2; text-align: center; }
.cart-line__quantity-button { border: 0; padding: 4px 12px; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 25px; }
.cart-line__quantity-button:hover:not(:disabled), .cart-line__quantity-button:focus-visible { background: var(--color-surface); }
.cart-line__quantity-button:disabled { color: var(--color-secondary); cursor: default; }
.cart-line__quantity-value { min-inline-size: 0; font-size: 14px; line-height: 25px; font-weight: 500; }
.cart-line__price { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; font-family: var(--font-display); font-size: var(--cart-price-size); line-height: 1.1; font-weight: 500; text-align: end; }
.cart-line__remove { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; display: var(--cart-remove-display); place-items: center; border: 0; padding: 0; background: transparent; color: var(--color-secondary); }
.cart-line__remove:disabled { cursor: default; }
.cart-line__remove:hover:not(:disabled) { opacity: .65; }
.cart-line__remove-icon { inline-size: 23px; }
.cart-line--summary { --cart-media-width: 121px; --cart-media-ratio: 121 / 131; --cart-image-width: 70%; --cart-body-padding: 0; --cart-body-border: 0px; --cart-row-gap: 26px; --cart-details-gap: 3px; --cart-details-inset: 0px; --cart-price-size: 18px; --cart-remove-display: none; }
@media (max-width: 639px) {
  .cart-line { --cart-media-width: 117px; --cart-media-ratio: 117 / 150; --cart-title-size: 16px; --cart-price-size: 18px; --cart-body-padding: 14px; --cart-row-gap: 21px; --cart-details-gap: 7px; column-gap: 6px; }
  .cart-line__options { line-height: 19px; }
  .cart-line__swatch { inline-size: 14px; }
  .cart-line__remove-icon { inline-size: 17px; }
}
/* A 109px stepper and price need separate rows below this content-fit boundary. */
@media (max-width: 369px) {
  .cart-line__body { row-gap: 14px; }
  .cart-line__quantity { grid-column: 1 / -1; }
  .cart-line__price { grid-column: 1 / -1; grid-row: 3; }
}