@layer sections {
  cart-drawer { display: contents; }

  .cart-drawer {
    position: fixed; inset: 0 0 0 auto; margin: 0; width: min(100vw, 31rem); height: 100%; max-height: 100dvh; z-index: var(--z-drawer);
    background: var(--c-paper); color: var(--c-bark); box-shadow: -50px 0 90px -40px rgb(0 0 0 / 0.65);
    transform: translateX(105%);
    transition: transform 0.75s var(--ease-out), display 0.75s allow-discrete, overlay 0.75s allow-discrete;
  }
  .cart-drawer[open] { transform: none; }
  @starting-style { .cart-drawer[open] { transform: translateX(105%); } }
  .cart-drawer::backdrop { background: rgb(10 6 4 / 0.58); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.5s var(--ease-out), display 0.5s allow-discrete, overlay 0.5s allow-discrete; }
  .cart-drawer[open]::backdrop { opacity: 1; }
  @starting-style { .cart-drawer[open]::backdrop { opacity: 0; } }

  .cart-drawer__panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
  .cart-drawer__title { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 450; letter-spacing: -0.015em; font-variation-settings: 'SOFT' var(--heading-soft, 40); }
  .cart-drawer__count { display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding-inline: 0.45rem; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-cream); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; }

  .cart-drawer__form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .cart-drawer__lines { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0.5rem 1.5rem 1rem; overscroll-behavior: contain; scrollbar-width: thin; }

  /* ---- free delivery progress ---- */
  .cart-progress { padding: 1rem 1.5rem 1.15rem; background: color-mix(in oklab, var(--c-gold) 14%, var(--c-paper)); border-bottom: 1px solid var(--line); }
  .cart-progress__text { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; font-size: var(--fs-s); font-weight: 600; }
  .cart-progress__text .icon { color: var(--c-leaf); }
  .cart-progress__bar { height: 6px; border-radius: 6px; background: color-mix(in oklab, var(--c-bark) 14%, transparent); overflow: hidden; }
  .cart-progress__bar span { display: block; height: 100%; width: var(--pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--c-maroon), var(--c-gold), var(--c-honey)); transition: width 1s var(--ease-out); }

  /* ---- lines (shared with the cart page) ---- */
  .cart-line { display: grid; grid-template-columns: 5.75rem 1fr; gap: 1.1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); animation: line-in 0.7s var(--ease-out) both; }
  @keyframes line-in { from { opacity: 0; transform: translateY(14px); } }
  .cart-line__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-m); background: color-mix(in oklab, var(--c-bark) 8%, var(--c-paper)); }
  .cart-line__img { width: 100%; height: 100%; object-fit: cover; }
  .cart-line__body { display: grid; align-content: start; gap: 0.45rem; }
  .cart-line__top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
  .cart-line__title { flex: 1 1 8rem; min-width: 0; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; text-wrap: pretty; overflow-wrap: anywhere; }
  .cart-line__title:hover { color: var(--c-maroon); }
  .cart-line__price { flex: none; display: grid; justify-items: end; font-weight: 600; white-space: nowrap; }
  .cart-line__was { color: var(--fg-soft); font-weight: 400; font-size: var(--fs-s); }
  .cart-line__options { display: grid; gap: 0.1rem; margin: 0; font-size: var(--fs-s); color: var(--fg-soft); }
  .cart-line__options dt, .cart-line__options dd { display: inline; margin: 0; }
  .cart-line__options dt { font-weight: 600; }
  .cart-line__plan, .cart-line__discount { font-size: var(--fs-xs); color: var(--c-maroon); display: flex; align-items: center; gap: 0.4rem; }
  .cart-line__discount .icon { width: 1rem; height: 1rem; }
  .cart-line__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
  .cart-line__remove { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); transition: color var(--dur-s); }
  .cart-line__remove .icon { width: 1rem; height: 1rem; }
  .cart-line__remove:hover { color: var(--c-crimson); }
  .cart-line.is-removing { animation: line-out 0.45s var(--ease-in-out) forwards; }
  @keyframes line-out { to { opacity: 0; transform: translateX(40px); height: 0; padding-block: 0; border-width: 0; } }
  .cart-line.is-updating { opacity: 0.55; pointer-events: none; }

  /* ---- upsell ---- */
  .cart-upsell { margin-top: 1.25rem; padding: 1rem; border-radius: var(--radius-l); background: color-mix(in oklab, var(--c-gold) 12%, var(--c-paper)); border: 1px dashed color-mix(in oklab, var(--c-gold) 70%, transparent); display: grid; gap: 0.75rem; }
  .cart-upsell__card { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.9rem; align-items: center; }
  .cart-upsell__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); }
  .cart-upsell__info { display: grid; gap: 0.2rem; }
  .cart-upsell__title { font-family: var(--font-display); font-weight: 500; line-height: 1.2; text-decoration: none; }

  /* ---- footer ---- */
  .cart-drawer__foot { padding: 1.1rem 1.5rem max(1.25rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--c-paper); display: grid; gap: 0.9rem; box-shadow: 0 -24px 40px -32px rgb(21 12 8 / 0.4); }
  .cart-note summary { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.25rem; font-size: var(--fs-s); font-weight: 600; cursor: pointer; }
  .cart-note summary .icon { width: 1.15rem; height: 1.15rem; color: var(--c-maroon); }
  .cart-note__plus { margin-left: auto; position: relative; width: 0.9rem; height: 0.9rem; }
  .cart-note__plus::before, .cart-note__plus::after { content: ''; position: absolute; inset: 0; margin: auto; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease-out); }
  .cart-note__plus::after { transform: rotate(90deg); }
  .cart-note[open] .cart-note__plus::after { transform: rotate(0); }
  .cart-note__input { margin-top: 0.6rem; padding: 0.85rem 1rem; min-height: 5rem; }
  .cart-totals { display: grid; gap: 0.4rem; margin: 0; }
  .cart-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .cart-totals__row dt, .cart-totals__row dd { margin: 0; }
  .cart-totals__row--discount { color: var(--c-leaf); font-size: var(--fs-s); }
  .cart-totals__row--total { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
  .cart-drawer__fine { font-size: var(--fs-xs); color: var(--fg-soft); margin-top: -0.4rem; }
  .cart-drawer__express { display: grid; gap: 0.5rem; }
  .cart-drawer__continue { justify-self: center; font-size: var(--fs-s); font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; color: var(--fg-soft); }
  .cart-drawer__continue:hover { color: var(--c-maroon); }
  .cart-drawer__form.is-loading .cart-drawer__lines { opacity: 0.6; transition: opacity 0.3s; }

  /* ---- empty state ---- */
  .cart-empty { display: grid; justify-items: center; align-content: center; gap: 0.9rem; flex: 1; padding: 2rem 1.5rem 2.5rem; text-align: center; }
  .cart-empty__art { width: 8.5rem; margin-bottom: 0.5rem; filter: drop-shadow(0 16px 24px rgb(73 40 17 / 0.3)); }
  .cart-empty__logo { width: 100%; height: auto; }
  .cart-empty .btn { margin-top: 0.5rem; }
  .cart-empty__list { width: 100%; display: grid; gap: 0.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: left; }
  .cart-empty__item { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0.9rem; align-items: center; padding: 0.55rem; border-radius: var(--radius-m); text-decoration: none; transition: background var(--dur-s); font-family: var(--font-display); font-weight: 500; line-height: 1.2; }
  .cart-empty__item:hover { background: color-mix(in oklab, var(--c-bark) 7%, transparent); }
  .cart-empty__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); }
  .cart-empty__item .tnum { font-family: var(--font-body); font-size: var(--fs-s); font-weight: 600; }

  @media (prefers-reduced-motion: reduce) { .cart-drawer, .cart-drawer::backdrop { transition: none; } .cart-line { animation: none; } }
}