/* eb-cart.css: the cart page (eb-cart-*) and the side cart (eb-cd-*), on
   the tokens and base components of eb-site.css: white, 1px silver rules,
   charcoal type, dark and primary buttons, red text links, no radius, no
   shadow. Linked by cart.html and by partials/cart_drawer.html (every page). */

/* ---- the page ---- */
.eb-cart { padding: var(--spacing-16) var(--gutter) var(--spacing-64); }
.eb-cart__title { margin-bottom: var(--spacing-32); }
.eb-cart__count { margin-left: var(--spacing-8); font-size: var(--text-body); font-weight: var(--font-weight-regular); color: var(--color-ash); }
.eb-cart__error, .eb-cd__error { margin-bottom: var(--spacing-16); color: var(--color-eibach-red); font-weight: var(--font-weight-bold); }
.eb-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--spacing-48); align-items: start; }
@media (max-width: 991.98px) { .eb-cart__layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); } }
.eb-cart__lines { border-bottom: 1px solid var(--color-silver); }
.eb-cart__line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: var(--spacing-24); align-items: center; padding: var(--spacing-24) 0; border-top: 1px solid var(--color-silver); }
.eb-cart__thumb { display: block; width: 96px; height: 96px; background: var(--color-fog); }
.eb-cart__thumb img, .eb-cd__thumb img { width: 100%; height: 100%; object-fit: contain; }
.eb-cart__name, .eb-cd__name { display: block; color: var(--color-charcoal); font-weight: var(--font-weight-bold); }
.eb-cart__meta, .eb-cd__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-12); margin-top: var(--spacing-4); color: var(--color-ash); }
.eb-cart__backordered, .eb-cd__backordered { color: var(--color-eibach-red); }
.eb-cart__unit { margin-top: var(--spacing-4); color: var(--color-ash); }
.eb-cart__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-8); min-width: 96px; }
.eb-cart__total, .eb-cd__total { font-weight: var(--font-weight-bold); }
.eb-cart__lines .eb-cart__continue { margin-top: var(--spacing-24); }
/* Remove, a line of text: a 40px touch target around it that moves nothing */
.eb-cart__remove, .eb-cd__remove { position: relative; }
.eb-cart__remove::before, .eb-cd__remove::before { content: ""; position: absolute; inset: -12px -8px; }
@media (max-width: 575.98px) {
  .eb-cart__line { grid-template-columns: 72px minmax(0, 1fr); gap: var(--spacing-16); }
  .eb-cart__thumb { width: 72px; height: 72px; }
  .eb-cart__qty, .eb-cart__end { grid-column: 2; }
  .eb-cart__qty { justify-self: start; } /* the stepper keeps its own width, not the column's */
  .eb-cart__end { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---- the quantity stepper, shared ---- */
.eb-cart__qty, .eb-cd__qty { display: inline-flex; height: 44px; border: 1px solid var(--color-muted); background: var(--color-snow); }
.eb-cart__qty button, .eb-cd__qty button { width: 40px; border: 0; background: none; color: var(--color-charcoal); font-size: var(--text-lead); font-weight: var(--font-weight-bold); cursor: pointer; }
.eb-cart__qty button:hover, .eb-cd__qty button:hover { background: var(--color-fog); }
.eb-cart__qty input, .eb-cd__qty input { width: 48px; border: 0; border-left: 1px solid var(--color-muted); border-right: 1px solid var(--color-muted); background: none; text-align: center; font-weight: var(--font-weight-bold); -moz-appearance: textfield; appearance: textfield; }
.eb-cart__qty input::-webkit-outer-spin-button, .eb-cart__qty input::-webkit-inner-spin-button,
.eb-cd__qty input::-webkit-outer-spin-button, .eb-cd__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- the summary ---- */
.eb-cart__summary { display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--spacing-24); background: var(--color-fog); }
.eb-cart__row, .eb-cd__row { display: flex; justify-content: space-between; gap: var(--spacing-16); font-size: var(--text-lead); }
.eb-cart__notice, .eb-cd__notice, .eb-cart__coming, .eb-cd__coming { font-weight: var(--font-weight-bold); }
.eb-cart-note summary { padding: var(--spacing-8) 0; margin: calc(-1 * var(--spacing-8)) 0; font-weight: var(--font-weight-bold); cursor: pointer; } /* a taller touch target in the same space */
.eb-cart-note textarea { height: auto; margin-top: var(--spacing-8); padding: var(--spacing-8); resize: vertical; }
.eb-cart-note__status { color: var(--color-ash); }
.eb-cart__empty, .eb-cd__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-24); padding: var(--spacing-32) 0; }
#eb-cart.htmx-request, .eb-cd__body.htmx-request { opacity: .6; }

/* ---- the drawer: slides in from the right over a scrim ---- */
.eb-cd-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--color-scrim); opacity: 0; transition: opacity 250ms ease; }
.eb-cd-overlay.is-open { opacity: 1; }
.eb-cd { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; width: min(100%, 440px); background: var(--color-snow); color: var(--color-charcoal); transform: translateX(100%); transition: transform 250ms ease; }
.eb-cd.is-open { transform: none; }
.eb-cd__body { display: flex; flex-direction: column; height: 100%; }
.eb-cd__head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-16) var(--spacing-24); border-bottom: 1px solid var(--color-silver); }
.eb-cd__title { font-size: var(--text-heading-sm); font-weight: var(--font-weight-bold); line-height: var(--leading-heading-sm); }
.eb-cd__count { font-weight: var(--font-weight-regular); color: var(--color-ash); }
.eb-cd__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: none; color: var(--color-charcoal); cursor: pointer; }
.eb-cd__lines { flex: 1; overflow: auto; padding: 0 var(--spacing-24); }
.eb-cd__line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--spacing-16); padding: var(--spacing-16) 0; border-bottom: 1px solid var(--color-silver); }
.eb-cd__thumb { display: block; width: 72px; height: 72px; background: var(--color-fog); }
.eb-cd__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); margin-top: var(--spacing-12); }
.eb-cd__remove { margin-top: var(--spacing-8); font-size: var(--text-caption); }
.eb-cd__foot { display: flex; flex-direction: column; gap: var(--spacing-12); padding: var(--spacing-16) var(--spacing-24) var(--spacing-24); border-top: 1px solid var(--color-silver); }
.eb-cd__error { padding: var(--spacing-16) var(--spacing-24) 0; margin: 0; }
.eb-cd .eb-cd__empty { padding: var(--spacing-32) var(--spacing-24); }

/* ---- the summary both carts share (partials/cart_summary.html): the discount
   code field and its chips, the money rows, the free-shipping line and bar ---- */
.eb-sum { display: flex; flex-direction: column; gap: var(--spacing-12); }
.eb-sum__fold summary { padding: var(--spacing-8) 0; margin: calc(-1 * var(--spacing-8)) 0; font-weight: var(--font-weight-bold); cursor: pointer; } /* a taller touch target in the same space */
.eb-sum__fold[open] summary { margin-bottom: 0; } /* its padding keeps the 8px over the field */
.eb-sum__code-label { display: block; margin-bottom: var(--spacing-4); font-weight: var(--font-weight-bold); }
.eb-sum__code-row { display: flex; gap: var(--spacing-8); }
.eb-sum__code-row .input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--spacing-12); text-transform: uppercase; background: var(--color-snow); }
.eb-sum__code-row .input::placeholder { text-transform: none; }
.eb-sum__code-row .btn { flex: none; min-width: 0; height: 44px; padding: 0 var(--spacing-16); }
.eb-sum__code-error { margin-top: var(--spacing-4); color: var(--color-eibach-red); font-size: var(--text-caption); font-weight: var(--font-weight-bold); }
.eb-sum__codes { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin: 0; padding: 0; list-style: none; }
.eb-sum__chip { display: inline-flex; align-items: center; gap: var(--spacing-8); height: 32px; padding: 0 var(--spacing-4) 0 var(--spacing-12); border: 1px solid var(--color-muted); border-radius: 16px; background: var(--color-snow); font-size: var(--text-caption); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; }
.eb-sum__chip-x { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--color-ash); cursor: pointer; }
.eb-sum__chip-x:hover { background: var(--color-fog); color: var(--color-charcoal); }
.eb-sum__rows { display: flex; flex-direction: column; gap: var(--spacing-8); margin: var(--spacing-4) 0 0; }
.eb-sum__row { display: flex; justify-content: space-between; gap: var(--spacing-16); }
.eb-sum__row dt, .eb-sum__row dd { margin: 0; }
.eb-sum__row--off dd { color: var(--color-eibach-red); font-weight: var(--font-weight-bold); }
.eb-sum__row--total { padding-top: var(--spacing-8); border-top: 1px solid var(--color-silver); font-size: var(--text-lead); font-weight: var(--font-weight-bold); }
.eb-sum__row--total small { font-size: var(--text-caption); font-weight: var(--font-weight-regular); color: var(--color-ash); }
.eb-sum__ship p { margin: 0 0 var(--spacing-8); font-weight: var(--font-weight-bold); }
.eb-sum__bar { height: 6px; border-radius: 3px; background: var(--color-silver); overflow: hidden; }
.eb-sum__bar span { display: block; height: 100%; background: var(--color-eibach-red); transition: width 250ms ease; }
.eb-sum__ship.is-free p { display: flex; align-items: center; gap: var(--spacing-8); margin: 0; }
.eb-sum__tax { margin: 0; color: var(--color-ash); }
.eb-cart__total s, .eb-cd__total s { margin-right: var(--spacing-4); color: var(--color-ash); font-weight: var(--font-weight-regular); }