/* Cart drawer extras and checkout express wallets. Art tokens live in site.css (another agent); this file only
   adds layout for reserve, Klarna note, order bump and wallet buttons. */

.cd-reserve {
  margin: 0 20px 8px;
  padding: 8px 0 0;
  color: var(--muted, #5d6b73);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.cd-reserve.is-ended { color: var(--ink, #17131A); text-transform: none; letter-spacing: 0; font-size: 0.85rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.cart-klarna { margin: 4px 0 0; }

.cart-bump {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(23, 19, 26, 0.12);
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
}
.cart-bump img { width: 56px; height: 70px; object-fit: cover; display: block; }
.cart-bump-copy { min-width: 0; }
.cart-bump-copy strong { display: block; font-size: 0.92rem; }
.cart-bump-copy span { display: block; font-size: 0.82rem; color: var(--muted, #5d6b73); margin-top: 2px; }

.co-alt { display: grid; gap: 10px; margin-top: 12px; }
.co-or { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0.78rem; color: var(--muted, #5d6b73); }
.co-or::before, .co-or::after { content: ""; flex: 1; height: 1px; background: rgba(23, 19, 26, 0.15); }
.co-wallet {
  appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 0 16px; border: 0; border-radius: 6px;
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.co-wallet:disabled { opacity: 0.55; cursor: not-allowed; }
.co-wallet:focus-visible { outline: 2px solid var(--ink, #17131A); outline-offset: 2px; }
.co-paypal { background: #FFC439; color: #111; }
.co-paypal:hover:not(:disabled) { background: #F2BA36; }
.co-paypal-logo { display: block; flex: none; }
/* Express row at the top of checkout: Apple Pay and PayPal side by side, one full-width button when only one shows.
   No caption under the buttons (owner 2026-10-23). The row hides itself when no button is visible on this device. */
.co-express { margin: 0 0 20px; }
.co-express:not(:has(.ap-express:not([hidden]), .gp-express:not([hidden]), .co-paypal-express)) { display: none; }
.co-express-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
.co-express .co-or { margin-top: 14px; }
.co-express .co-wallet { height: 44px; min-height: 44px; padding: 0 8px; border-radius: 6px; }
.co-express .co-paypal-logo { width: 66px; height: 16px; }
.co-express .ap-btn { height: 44px; min-height: 44px; }
.co-express-msg { margin: 8px 0 0; color: var(--wine, #6B1B32); }
.co-express-msg[hidden] { display: none; }
/* Apple Pay express (applepay.js): Apple's own button where Safari draws it, a black stand-in elsewhere. */
.ap-express { display: grid; gap: 8px; margin: 0; min-width: 0; }
.ap-express[hidden] { display: none; }
.ap-btn {
  appearance: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; min-height: 48px;
  padding: 0 8px; border: 0; border-radius: 6px; background: #000; color: #fff; cursor: pointer; font: inherit;
}
.ap-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ap-btn:focus-visible { outline: 2px solid var(--ink, #17131A); outline-offset: 2px; }
.ap-btn svg { display: block; flex: none; max-width: 100%; }
@supports (-webkit-appearance: -apple-pay-button) {
  .ap-btn {
    -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: black;
    -apple-pay-button-padding: 0; -apple-pay-button-radius: 6px; padding: 0; background: none;
  }
  .ap-btn > *, .ap-btn svg { display: none; }   /* .ap-btn svg above outranked "> *": Apple text twice on iPhone (2026-11-03) */
}
.ap-msg { margin: 0; color: var(--wine, #6B1B32); }
/* Google Pay express (googlepay.js): Google draws its own button inside .gp-btn (createButton, fill mode). */
.gp-express { display: grid; gap: 8px; margin: 0; min-width: 0; }
.gp-express[hidden] { display: none; }
.gp-btn { height: 44px; min-height: 44px; min-width: 0; }
.gp-btn.is-waiting { opacity: 0.55; pointer-events: none; }
/* pay.js puts its button styles in <style> elements, which our CSP (style-src 'self') blocks; these rules are Google's
   own for a black "Buy with GPay" button in fill mode (pay.js 2026-11-03), so the button looks like Google's. The
   card-info variant (Chrome signed in with a saved card) draws inside Google's iframe; the last rules keep that
   iframe inside the 44 px box. */
.gp-btn .gpay-button-fill, .gp-btn .gpay-card-info-container-fill { display: block; width: 100%; height: 100%; }
.gp-btn .gpay-button.black {
  box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 40px; margin: 0; padding: 12px 15% 10px;
  border: 0; border-radius: 4px; cursor: pointer; outline: 1px solid #757575; outline-offset: -1px; box-shadow: none;
  background-color: #000; background-image: url(https://www.gstatic.com/instantbuy/svg/dark/en.svg);
  background-origin: content-box; background-position: center; background-size: contain; background-repeat: no-repeat;
}
.gp-btn .gpay-button.black:hover, .gp-btn .gpay-button.black.hover { background-color: #3c4043; }
.gp-btn .gpay-button.black:active, .gp-btn .gpay-button.black.active { background-color: #5f6368; }
.gp-btn .gpay-button.black:focus-visible { outline: 2px solid var(--ink, #17131A); outline-offset: 2px; }
.gp-btn .gpay-card-info-container { position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  border-radius: 4px; background: #000; outline: 1px solid #757575; outline-offset: -1px; cursor: pointer; }
.gp-btn .gpay-card-info-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gp-msg { margin: 0; color: var(--wine, #6B1B32); }
.gp-msg[hidden] { display: none; }
/* Three express buttons on a phone: Apple Pay full width on top, Google Pay and PayPal side by side below. */
@media (max-width: 599px) {
  .co-express-row:has(.ap-express:not([hidden])):has(.gp-express:not([hidden])):has(.co-paypal-express) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .co-express-row:has(.gp-express:not([hidden])):has(.co-paypal-express) > .ap-express:not([hidden]) { grid-column: 1 / -1; }
}
.co-wallet.is-picked { box-shadow: 0 0 0 2px var(--wine, #6B1B32); }
.co-bump { margin: 0 0 16px; }

/* Checkout fine print: terms sentence small and italic, field hints small and upright. */
.co-agree { font-size: 0.75rem; font-style: italic; }
.co-hint { font-size: 0.75rem; font-style: normal; }

/* Checkout add-on: priority processing + shipping protection (a tick box above the pay button). */
.co-protect { margin: 0 0 16px; padding: 12px; border: 1px solid rgba(23, 19, 26, 0.12); }
.co-protect .co-check { align-items: flex-start; }
.co-protect-price { font-weight: 600; white-space: nowrap; }
.co-protect-note { display: block; margin-top: 2px; }
.co-bump-img { width: 44px; height: 55px; object-fit: cover; flex: none; }