/* Order page /order/ (BNN, 2026-10-25). Same black scene, thin lines and margins as the cart page (--bc-m from banan-cart.css).
   Desktop: two columns (what you need to know | what you ordered and where it goes). Phone: one column in that order. */
.bo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--bc-m, 24px); row-gap: 0; align-items: start;
  grid-template-areas: "main order" "main ship" "cta .";
  min-height: 50vh; font: 300 14px/22px "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .02em; color: #fff; }
.bo-main { grid-area: main; min-width: 0; }
.bo-order { grid-area: order; min-width: 0; }
.bo-ship { grid-area: ship; min-width: 0; margin-top: 40px; }
.bo .bo-cta { grid-area: cta; margin-top: 56px; }
.bo-single { grid-template-columns: minmax(0, 560px); grid-template-areas: "main" "cta"; }

.bo-loading { color: rgba(255, 255, 255, .6); margin: 0; }

.bo-title { margin: 0; font: 300 32px/1.2 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .02em; color: #fff; }
.bo-title:focus { outline: none; }
.bo-lead { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.bo-meta { margin: 20px 0 48px; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

.bo-h { margin: 0 0 16px; font: 400 13px/1 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

.bo-steps { list-style: none; margin: 0; padding: 0; border-bottom: .5px solid rgba(255, 255, 255, .3); }
.bo-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 14px 0; border-top: .5px solid rgba(255, 255, 255, .3); font-size: 15px; line-height: 24px; }
.bo-n { font-size: 13px; color: rgba(255, 255, 255, .6); }
.bo-help { margin: 24px 0 0; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .6); }
.bo-help a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bo-help a:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

.bo-items { list-style: none; margin: 0; padding: 0; border-top: .5px solid rgba(255, 255, 255, .3); }
.bo-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; padding: 16px 0; border-bottom: .5px solid rgba(255, 255, 255, .3); align-items: start; }
.bo-item.no-img { grid-template-columns: minmax(0, 1fr) auto; }
.bo-img { display: block; width: 96px; aspect-ratio: 4 / 5; background: #111; overflow: hidden; }
.bo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bo-item-title { font-size: 14px; line-height: 20px; text-transform: uppercase; letter-spacing: .08em; overflow-wrap: anywhere; }
.bo-item-meta { font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .6); overflow-wrap: anywhere; }
.bo-item-price { font-size: 14px; line-height: 20px; white-space: nowrap; }

.bo-sum { margin: 16px 0 0; }
.bo-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 5px 0; }
.bo-sum dt, .bo-sum dd { margin: 0; font-size: 13px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; }
.bo-sum dd { white-space: nowrap; }
.bo-sum .bo-total { margin-top: 8px; padding-top: 14px; border-top: .5px solid rgba(255, 255, 255, .3); }
.bo-sum .bo-total dt, .bo-sum .bo-total dd { font-size: 16px; line-height: 24px; color: #fff; }

.bo-addr { display: flex; flex-direction: column; font-style: normal; font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, .8); padding-top: 16px; border-top: .5px solid rgba(255, 255, 255, .3); overflow-wrap: anywhere; }
.bo-addr-name { font-weight: 400; color: #fff; }

@media (min-width: 768px) { .bo-title { font-size: 40px; } }
@media (max-width: 800px) {
  .bo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "order" "ship" "cta"; }
  .bo-single { grid-template-areas: "main" "cta"; }
  .bo-meta { margin-bottom: 36px; }
  .bo-order { margin-top: 48px; }
  .bo-item { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; }
  .bo-img { width: 72px; }
  .bo .bo-cta { margin-top: 48px; }
}

/* online payment (monobank): the way to finish paying, and the hryvnia amount under the euro total */
.bo .bo-pay { margin-top: 28px; }
.bo-sum .bo-uah dt, .bo-sum .bo-uah dd { font-size: 13px; color: rgba(255, 255, 255, .6); }
.bo-fx { margin-top: 8px; }
/* back to the account, only when the order was opened from there (banan-order.js backLink) */
.bo-back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 20px; font: 400 13px/20px "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-decoration: none; }
.bo-back:hover { color: #fff; }
.bo-back:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.bo-back-arrow { font-size: 18px; line-height: 1; letter-spacing: 0; }