/* The cart is one of the four pages excluded from components.css's generic
   `.page` shell padding (it's traced against its own rebuilt line-item
   layout, not the generic account/registration shape), so its padding lives
   here instead of being inherited silently. Title styling is NOT excluded —
   it's identical to the generic `.page > .page-title h1` rule and would just
   duplicate it — so only padding is restated. */
.shopping-cart-page {
  min-width: 0;
  padding-block: var(--space-3xl) var(--space-5xl);
}

.shopping-cart-page .no-data {
  min-height: var(--tile-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  background-color: var(--color-brand-soft);
  color: var(--color-ink);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.shopping-cart-page .message-error,
.shopping-cart-page .message-failure {
  color: var(--color-danger);
}

.shopping-cart-page .message-success {
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
}

/* ---- Line items ---------------------------------------------------------- */

/* The Figma cart frame (25:1356) sets the whole list in one surface-toned
   panel with a caption row, rather than per-row borders reaching edge to
   edge. */
.cart-panel {
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
}

.cart-list__header {
  display: grid;
  grid-template-columns: var(--cart-cover-width) minmax(0, 1fr) var(--cart-quantity-width) var(--cart-price-width) var(--tap-target);
  gap: var(--space-md);
  padding-bottom: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.cart-list__header span:nth-child(3) {
  text-align: center;
}

.cart-list__header span:nth-child(4) {
  text-align: right;
}

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

/* One row per book: cover, detail, quantity, subtotal, remove. The old layout
   was an 8-column table with 120x160 covers and 24px vertical padding, which
   made a single-item cart 1806px tall. */
.cart-item {
  display: grid;
  grid-template-columns: var(--cart-cover-width) minmax(0, 1fr) var(--cart-quantity-width) var(--cart-price-width) var(--tap-target);
  align-items: center;
  gap: var(--space-md);
  /* The cover (--cart-cover-width, up to 96px wide at a 3/4 aspect = 128px
     tall) sets the row height; padding stays minimal so the row itself does,
     matching the <=140px budget the row-height test enforces. */
  padding-block: var(--space-3xs);
  border-bottom: 1px solid var(--color-border);
}

.cart-item:last-child {
  border-bottom: 0;
}

.cart-item__cover {
  width: var(--cart-cover-width);
  aspect-ratio: var(--cart-cover-aspect);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
}

.cart-item__cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.cart-item__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.cart-item__title {
  color: var(--color-ink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  text-decoration: none;
}

/* Favourites rows: the wishlist page lists its books with this same line-item
   component. Cover and book read as in the cart; add to cart (the card's
   amber icon circle) and the heart take the place of quantity, total and
   remove. */
.cart-item.cart-item--wishlist {
  grid-template-columns: var(--cart-cover-width) minmax(0, 1fr) auto auto;
}

.cart-item__buy,
.cart-item__favorite {
  display: flex;
  align-items: center;
}

.cart-item__unit-price {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

/* Figma pairs the number with plus/minus buttons (25:1356, Group 97/98)
   instead of relying on the browser's own spinner. */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* The button hit area meets the 44px tap-target floor even though the glyph
   itself stays Figma-small - the same pattern as .remove-btn below. */
.qty-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap-target);
  height: var(--tap-target);
  border: 0;
  background-color: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.qty-stepper__btn::before {
  content: "";
  width: var(--stepper-icon-size);
  height: var(--stepper-icon-size);
  background-color: currentColor;
  -webkit-mask: url("../../../images/figma/icon-plus.svg") no-repeat center / contain;
  mask: url("../../../images/figma/icon-plus.svg") no-repeat center / contain;
}

.qty-stepper__btn--down::before {
  -webkit-mask-image: url("../../../images/figma/icon-minus.svg");
  mask-image: url("../../../images/figma/icon-minus.svg");
}

.shopping-cart-page .qty-input {
  min-height: var(--tap-target);
  border: 0;
  background: transparent;
  text-align: center;
  /* Custom steppers replace the native up/down control. */
  appearance: none;
  -moz-appearance: textfield;
}

/* The input is the shared field control (controls.css), which is full width
   by default; inside the stepper it keeps a fixed two-digit width so the
   plus button stays beside it at every viewport. The number is centred, so it
   gives part of the field's side padding back as room for WebKit's caret and
   the wider digits. */
.shopping-cart-page .qty-stepper .qty-input {
  flex: none;
  width: var(--cart-quantity-input-width);
  padding-inline: var(--space-2xs);
}

.shopping-cart-page .qty-input::-webkit-inner-spin-button,
.shopping-cart-page .qty-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.cart-item__subtotal {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-align: right;
  white-space: nowrap;
}

.cart-item.is-updating {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--motion-card) var(--ease-in);
}

.shopping-cart-page .remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.shopping-cart-page .remove-btn::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;
  -webkit-mask: url("../../../images/figma/icon-trash.svg") no-repeat center / contain;
  mask: url("../../../images/figma/icon-trash.svg") no-repeat center / contain;
}

.shopping-cart-page input[name="removefromcart"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Footer: coupons beside a sticky summary ----------------------------- */

.shopping-cart-page .cart-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--filter-column-width), var(--card-home-width));
  align-items: start;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.cart-coupons {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
}

.cart-coupons__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  list-style: none;
  cursor: pointer;
}

.cart-coupons__summary::-webkit-details-marker {
  display: none;
}

.cart-coupons__summary::after {
  content: "";
  flex: 0 0 auto;
  width: var(--status-icon-size);
  height: var(--status-icon-size);
  background-color: currentColor;
  -webkit-mask: url("../../../images/figma/icon-plus.svg") no-repeat center / contain;
  mask: url("../../../images/figma/icon-plus.svg") no-repeat center / contain;
  transition: transform var(--motion-switch) var(--ease-out);
}

.cart-coupons[open] .cart-coupons__summary::after {
  transform: rotate(45deg);
}

/* One flat panel: each code is a labelled field with its apply button beside
   it, and the two are separated by a hairline rather than nested in cards. */
.cart-coupons__body {
  display: flex;
  flex-direction: column;
  padding-inline: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.shopping-cart-page .coupon-box,
.shopping-cart-page .giftcard-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
}

.shopping-cart-page .coupon-box ~ .giftcard-box {
  border-top: 1px solid var(--color-border);
}

.shopping-cart-page .coupon-box .title,
.shopping-cart-page .giftcard-box .title,
.shopping-cart-page .coupon-box .message-failure,
.shopping-cart-page .coupon-box .message-success,
.shopping-cart-page .giftcard-box .message-failure,
.shopping-cart-page .giftcard-box .message-success {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.shopping-cart-page .coupon-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--space-2xs);
}

.shopping-cart-page .coupon-code .discount-coupon-code,
.shopping-cart-page .coupon-code .gift-card-coupon-code {
  min-width: 0;
}

/* An applied code reads as a removable chip. Upstream's remove button is
   empty markup, so its X is drawn here, the same glyph as the toast close. */
.shopping-cart-page .current-code {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-3xs);
  padding-left: var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-soft);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.shopping-cart-page .remove-discount-button {
  position: relative;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.shopping-cart-page .remove-discount-button::before,
.shopping-cart-page .remove-discount-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-sm);
  height: var(--stroke-hairline);
  background-color: currentColor;
  content: "";
}

.shopping-cart-page .remove-discount-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.shopping-cart-page .remove-discount-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* The summary follows the page: with a long cart the checkout action used to
   start at y=1010 on a 900px viewport and at y=1621 on a phone. */
.shopping-cart-page .totals {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  padding: var(--space-md);
  border-top: var(--space-3xs) solid var(--color-action);
  background-color: var(--color-surface);
}

.shopping-cart-page .cart-total {
  width: 100%;
  border-collapse: collapse;
}

.shopping-cart-page .cart-total td {
  padding-block: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
}

.shopping-cart-page .cart-total-right {
  text-align: right;
}

.shopping-cart-page .order-total td {
  padding-top: var(--space-md);
  border-bottom: 0;
  font-size: var(--font-size-xl);
}

.order-total__shipping-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--status-icon-size);
  height: var(--status-icon-size);
  margin-left: var(--space-3xs);
  color: var(--color-muted);
  vertical-align: middle;
  cursor: help;
}

.order-total__shipping-note::after {
  position: absolute;
  z-index: var(--toast-z);
  right: 0;
  bottom: calc(100% + var(--space-2xs));
  width: min(var(--info-note-max-width), calc(100vw - var(--gutter) - var(--gutter)));
  content: attr(data-tooltip);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-3xs));
  transition: opacity var(--motion-card) var(--ease-out),
              transform var(--motion-card) var(--ease-out);
}

.order-total__shipping-note:hover::after,
.order-total__shipping-note:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* The approximate euro total follows the total on a row of its own (see the
   theme's OrderTotals view), close under it and right-aligned with it, in the
   cart and the checkout summary alike. Its note opens at the row's end. */
.cart-total tr.order-total-approx td {
  padding-top: 0;
  border-bottom: 0;
}

.order-total-approx .price-approx__note {
  margin-inline-start: auto;
}

/* The "please accept" copy is only ever shown as the jQuery UI dialog, which
   moves it out of the page and sets its own inline display when it opens. */
.terms-of-service__warning {
  display: none;
}

.shopping-cart-page .terms-of-service {
  display: grid;
  grid-template-columns: var(--space-md) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3xs) var(--space-2xs);
  margin-top: var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-canvas);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.shopping-cart-page .terms-of-service input {
  width: var(--space-md);
  height: var(--space-md);
  margin: var(--space-3xs) 0 0;
  accent-color: var(--color-action);
}

.shopping-cart-page .terms-of-service__copy {
  grid-column: 2;
}

.shopping-cart-page .terms-of-service .read {
  display: inline;
  margin-left: var(--space-3xs);
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
  text-underline-offset: var(--space-3xs);
  cursor: pointer;
}

.shopping-cart-page .checkout-buttons {
  margin-top: var(--space-md);
}

.shopping-cart-page .checkout-button {
  width: 100%;
}

/* Checkout keeps the same pill sizing as every other primary action (Add to
   cart, home hero) instead of stretching to the sidebar's width - one
   control, one appearance. */
.shopping-cart-page .rfq-button-2 {
  width: 100%;
  margin: var(--space-2xs) 0 0;
}

@media (hover: hover) and (pointer: fine) {
  .shopping-cart-page .remove-btn:hover {
    background-color: var(--color-border-hover);
  }

  .qty-stepper__btn:hover {
    color: var(--color-ink-hover);
  }
}

@media (max-width: 61.9375rem) {
  .shopping-cart-page {
    padding-block: var(--space-xl) var(--space-3xl);
  }

  /* The caption row only labels the desktop columns; the mobile layout below
     already puts a label role on each stacked field. */
  .cart-list__header {
    display: none;
  }

  /* Two lines per book. The top line is what the book is: cover, title with
     unit price, remove. The bottom line is what the shopper changes and what
     it costs: the stepper on the left and the line total on the right, across
     the full width of the row, so neither is squeezed into the narrow column
     beside the cover (which clipped the quantity to an unreadable sliver). */
  .cart-item {
    grid-template-columns: var(--cart-cover-width) minmax(0, 1fr) auto var(--tap-target);
    grid-template-areas:
      "cover detail detail remove"
      "quantity quantity subtotal subtotal";
    align-items: center;
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-sm);
  }

  .cart-item__cover {
    grid-area: cover;
  }

  .cart-item__detail {
    grid-area: detail;
  }

  .cart-item__remove {
    grid-area: remove;
    align-self: start;
  }

  .cart-item__quantity {
    grid-area: quantity;
  }

  .cart-item__subtotal {
    grid-area: subtotal;
    justify-self: end;
  }

  /* A favourites row keeps the heart level with the title and puts add to
     cart under it, so the book's name keeps the width the cart gives it. */
  .cart-item.cart-item--wishlist {
    grid-template-columns: var(--cart-cover-width) minmax(0, 1fr) auto;
    grid-template-areas:
      "cover detail favorite"
      "cover detail buy";
  }

  .cart-item--wishlist .cart-item__favorite {
    grid-area: favorite;
    align-self: start;
  }

  .cart-item--wishlist .cart-item__buy {
    grid-area: buy;
    align-self: end;
  }

  .shopping-cart-page .cart-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sticky costs more than it gives when the summary is the last thing on a
     single-column page. */
  .shopping-cart-page .totals {
    position: static;
  }
}

@media (max-width: 36.25rem) {
  .cart-panel {
    padding-inline: var(--space-sm);
  }

  .qty-stepper {
    gap: var(--space-3xs);
  }
}