#shop-cart-open {
  position: relative;
  flex: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

#shop-cart-open:hover { background: var(--cream); }
#shop-cart-open [data-cart-count] {
  position: absolute;
  inset-block-start: -.25rem;
  inset-inline-end: -.25rem;
  min-inline-size: 1.15rem;
  padding-inline: .2rem;
  border: 1px solid var(--paper);
  border-radius: 1rem;
  color: var(--paper);
  background: var(--clay);
  font-size: .72rem;
  line-height: 1.1rem;
}

.shop-cart {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(100%, 28rem);
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.5 var(--body);
}

.shop-cart::backdrop { background: #21140eb3; }
html:has(.shop-cart[open]) { overflow: hidden; }

.shop-cart__surface {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  block-size: 100%;
}

.shop-cart__header, .shop-cart__footer {
  padding: 1.2rem clamp(1rem, 4vw, 1.65rem);
  background: var(--cream);
}

.shop-cart__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 1px solid var(--line);
}

.shop-cart__header h2 { font-size: 2.5rem; }
.shop-cart__brand { color: var(--clay); font-size: .9rem; font-weight: 600; margin-block-end: .45rem; }

.shop-cart__close {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}

.shop-cart__close:hover,
.shop-cart__stepper button:hover:not(:disabled) { background: var(--cream); }

.shop-cart__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline: clamp(1rem, 4vw, 1.65rem);
}

.shop-cart__list { list-style: none; margin: 0; padding: 0; }

.shop-cart__item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: start;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--line);
}

.shop-cart__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: .25rem;
  background: var(--cream);
}

.shop-cart__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.shop-cart__name, .shop-cart__line-price { font-weight: 600; }
.shop-cart__name { overflow-wrap: anywhere; }
.shop-cart__line-price { white-space: nowrap; }
.shop-cart__size, .shop-cart__note { color: var(--muted); font-size: .9rem; }
.shop-cart__controls { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-block-start: .5rem; }

.shop-cart__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: .25rem;
}

.shop-cart__stepper span {
  min-inline-size: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.shop-cart__stepper button {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}

.shop-cart button:disabled { opacity: .5; cursor: default; }

.shop-cart__remove {
  min-block-size: 2.4rem;
  padding-inline: .3rem;
  border: 0;
  background: transparent;
  color: var(--clay);
  cursor: pointer;
  font-size: .9rem;
}

.shop-cart__remove:hover { text-decoration: underline; }

.shop-cart__footer {
  padding-block-end: max(1.2rem, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
}

.shop-cart__footer[hidden] { display: none; }
.shop-cart__total { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.shop-cart__total strong { white-space: nowrap; }
.shop-cart__note { margin-block-start: .55rem; }

.shop-cart__checkout,
.shop-cart__continue,
.shop-detail__cart {
  min-block-size: 2.85rem;
  padding: .5rem 1.2rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  background: var(--ink);
  color: var(--paper);
  font: 600 1rem/1.4 var(--body);
  cursor: pointer;
}

.shop-cart__checkout { width: 100%; margin-block-start: .9rem; }
.shop-cart__checkout:hover:not(:disabled), .shop-cart__continue:hover, .shop-detail__cart:hover:not(:disabled) { background: var(--clay); }
.shop-cart__message:not(:empty) { margin-block-start: .65rem; color: var(--clay); font-weight: 600; font-size: .9rem; }
.shop-detail__cart { margin-block-start: .9rem; }
.shop-detail__cart:disabled { opacity: .5; cursor: default; }
.shop-detail__cart[hidden] { display: none; }

.shop-cart__empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .65rem;
  min-block-size: 100%;
  padding-block: 2rem;
  text-align: center;
}

.shop-cart__empty > span {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: .45rem;
  border-radius: 50%;
  color: var(--clay);
  background: var(--cream);
}

.shop-cart__empty h3 { font-size: 2.1rem; }
.shop-cart__empty p { color: var(--muted); }
.shop-cart__continue { margin-block-start: .7rem; }
.shop-cart__contact { padding-block: .4rem; color: var(--green); text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 360px) {
  .shop-cart__item { grid-template-columns: 3.1rem minmax(0, 1fr) auto; gap: .55rem; }
  .shop-cart__line-price { font-size: .88rem; }
}

.shop-cart [hidden] { display: none; }
.shop-cart__lines { min-block-size: 100%; }
.shop-cart__delivery { padding-block: 1.15rem 1.45rem; }
.shop-cart__delivery h3 { margin-block-end: .4rem; font-size: 2.05rem; }
.shop-cart__delivery p { margin-block-end: 1.15rem; color: var(--muted); font-size: .92rem; }

.shop-cart__delivery label {
  display: block;
  margin-block: .7rem .3rem;
  font-size: .94rem;
  font-weight: 600;
}

.shop-cart__delivery input,
.shop-cart__delivery select,
.shop-cart__delivery textarea {
  display: block;
  width: 100%;
  min-block-size: 2.8rem;
  padding: .45rem .65rem;
  border: 1px solid var(--line);
  border-radius: .25rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.shop-cart__delivery textarea { resize: vertical; }
.shop-cart__delivery input[type="tel"] { unicode-bidi: bidi-override; }
.shop-cart__submit {
  min-block-size: 2.85rem;
  width: 100%;
  margin-block-start: .9rem;
  padding: .5rem 1.2rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  background: var(--ink);
  color: var(--paper);
  font: 600 1rem/1.4 var(--body);
  cursor: pointer;
}

.shop-cart__submit:hover:not(:disabled) { background: var(--clay); }
.shop-cart__back {
  min-block-size: 2.5rem;
  width: 100%;
  margin-block-start: .4rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.shop-cart__back:hover:not(:disabled) { text-decoration: underline; }

@media (max-height: 530px) {
  .shop-cart__header, .shop-cart__footer { padding-block: .6rem; }
  .shop-cart__header h2 { font-size: 1.95rem; }
}