/* The cart and its checkout (Slice C, tasks/plan-2026-10-03-slice-c.md): the
   tray's cart, the Cart window, and the button on a piece. Its own module, like
   showroom.css, so the shared stylesheet stays the desktop's. Plain chrome
   throughout: pumpkin is the drop's call to action, and nothing here is the
   drop. */

/* Author display rules beat the hidden attribute, and .btn sets display. */
[data-cart][hidden],
#cart-btn[hidden],
.cart__form[hidden],
.cart__ship[hidden],
.cart__empty[hidden] { display: none !important; }

/* The cart needs script, so its button does too. */
html:not(.js) [data-add-to-cart] { display: none !important; }

/* The tray's cart: the clock's sunken bevel, with a count. */
#cart-btn {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--chrome);
  color: var(--ink);
  cursor: pointer;
}
#cart-btn:focus-visible { outline: 2px dotted var(--ink); outline-offset: -5px; }
.tray__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.tray__count { font-weight: 700; }

/* A chosen delivery is navy, the selection colour, never the drop's pumpkin. */
.chips--plain input:checked + span {
  background: var(--titlebar);
  color: var(--paper);
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px 0 var(--bevel-deep), inset -1px -1px 0 var(--chrome-lit);
}

/* Each piece in the cart: its photo framed on white, its name and price. */
.cart__lines, .cart__notes { list-style: none; margin: 0 0 .9rem; padding: 0; }
.cart__line {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: .5rem .75rem;
  align-items: center;
  padding: .4rem 0;
  border-bottom: 1px dotted var(--bevel-lo);
}
/* A square whatever the photo, as on the shelves (showroom.css): the photo is
   placed inside the frame, drawn whole and centred, never bigger than taken.
   Sized by the photo, a phone's tall one pushed the frame out of shape. */
.cart__thumb {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--paper);
  border: 2px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
.cart__thumb img {
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: calc(100% - .4rem);
  height: calc(100% - .4rem);
  object-fit: scale-down;
}
.cart__what { display: grid; gap: .1rem; min-width: 0; font-family: var(--ui); }
.cart__what a { overflow-wrap: anywhere; }
.cart__price { font-family: var(--data); font-weight: 700; }
.cart__held { font-size: .78rem; }
.cart__notes li { font-family: var(--ui); font-size: .84rem; margin: 0 0 .3rem; }

/* PayPal's buttons are a third party's and take no styling from us: framed in a
   sunken well, never bled, like a photograph or the bot check. */
.cart__pay { display: grid; gap: .6rem; padding: .75rem; min-height: 1rem; }
/* Apple Pay and Google Pay (Slice C2): each wallet's own button, in the black
   Apple's and Google's rules ask for, at the size PayPal fixes its own two
   (225 by 45, measured live 2026-10-03), so the three line up. At 15rem the
   wallet stood 15px wider than PayPal's. */
.cart__wallet { display: block; width: 100%; max-width: 225px; height: 45px; }
apple-pay-button.cart__wallet {
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 45px;
  --apple-pay-button-border-radius: 4px;
}
.cart__pay:empty { display: none; }

/* A full title never widens the window on a phone. */
.win--cart .win__body { overflow-wrap: anywhere; }

/* On a desktop the cart is its full size when it opens. desktop.js places a
   window by its height at that moment, and the cart's pieces arrive after: sized
   by them, it grew under the taskbar, its pay buttons out of reach. Its body
   scrolls instead. Phones maximise every window, and so does the maximise
   button, so this keeps out of both. */
@media (min-width: 701px) {
  .js .win--cart:not(.win--max) { height: min(42rem, calc(100% - 4rem)); }
}