/* Cart button, "Added to cart" toast, cart page, order page (BNN, 2026-10-25). Black scene, white text, thin lines.
   Everything is scoped to .bc-*, so with the shop off nothing here has any effect.
   One horizontal grid for the cart and order pages: --bc-m is the margin left, the margin right and the gap between the
   columns, and the same value the theme gives the BANAN logo (70 px desktop, 40 px tablet, 24 px phone). */
:root { --bc-m: 70px; }
@media (max-width: 1200px) { :root { --bc-m: 40px; } }
@media (max-width: 767px) { :root { --bc-m: 24px; } }

.bc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* cart button (a link to /cart/), top right, only after the first item */
.bc-btn { position: fixed; top: 22px; right: var(--bc-m); z-index: 1001; padding: 8px 4px; color: #fff; text-decoration: none; cursor: pointer;
  font: 400 13px/1 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; mix-blend-mode: difference; }
.bc-btn[hidden] { display: none; }
.bc-btn:hover .bc-btn-label { text-decoration: underline; text-underline-offset: 4px; }
.bc-btn:focus-visible, .bc-x:focus-visible, .bc-qty button:focus-visible, .bc-rm:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

/* the line-row button of the site (as JOIN in the footer and ADD TO CART on the product page, banan-action.css) */
.bc-cta { display: flex; align-items: center; justify-content: space-between; position: relative; box-sizing: border-box; width: 100%; height: 48px; padding: 0 28px 0 0;
  background: transparent; color: #fff; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .5); border-radius: 0; box-shadow: none; text-decoration: none; text-align: left; cursor: pointer;
  font: 400 16px/24px "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.bc-cta::after { content: "\2192"; content: "\2192" / ""; position: absolute; right: 6px; transition: transform .2s ease; }
.bc-cta:focus { outline: none; }
.bc-cta:active { color: rgba(255, 255, 255, .6); border-bottom-color: rgba(255, 255, 255, .6); box-shadow: 0 1px 0 0 rgba(255, 255, 255, .6); }
.bc-cta:focus-visible { border-bottom-color: #fff; box-shadow: 0 1px 0 0 #fff; }
.bc-cta:disabled, .bc-cta[aria-busy="true"] { color: rgba(255, 255, 255, .4); border-bottom-color: rgba(255, 255, 255, .3); box-shadow: none; cursor: default; pointer-events: none; }
@media (hover: hover) {
  .bc-cta:hover:not(:active):not(:disabled):not([aria-busy="true"]) { border-bottom-color: #fff; box-shadow: 0 1px 0 0 #fff; }
  .bc-cta:hover:not(:active):not(:disabled):not([aria-busy="true"])::after { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { .bc-cta, .bc-cta::after { transition: none; } .bc-cta:hover::after { transform: none; } }

/* product page: the button keeps the look of JOIN THE LIST */
.shop-on #coming-soon-btn:disabled { opacity: .5; cursor: default; }

/* "Added to cart" toast */
.bc-toast { position: fixed; top: 64px; right: var(--bc-m); z-index: 1001; width: min(380px, calc(100vw - 2 * var(--bc-m))); box-sizing: border-box; padding: 16px 20px 20px; background: #000; color: #fff;
  border: 1px solid #444; font: 300 14px/1.5 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .02em; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transition: transform .3s ease, opacity .3s ease; }
.bc-toast.is-drag { transition: none; cursor: grabbing; }
.bc-toast.is-leaving { transform: translateX(calc(100% + var(--bc-m) + 20px)); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .bc-toast { animation: bc-in .3s ease-out; } @keyframes bc-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } }
.bc-toast-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font: 400 13px/1 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bc-x { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px; }
.bc-toast-item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; margin-bottom: 18px; }
.bc-toast-item img, .bc-toast-noimg { width: 72px; height: 90px; object-fit: cover; background: #111; display: block; }
.bc-toast-btns { display: grid; gap: 4px; }
.bc-toast-btns .bc-cta { font-size: 14px; }

/* lists, quantity, lines (cart page, order page, toast) */
.bc-note { color: #999; font-size: 12px; margin: 10px 0 16px; }
.bc-empty { color: #999; padding: 24px 0; margin: 0; }
.bc-list { list-style: none; margin: 0; padding: 0; }
.bc-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid #222; }
.bc-line:last-child { border-bottom: 0; }
.bc-img { display: block; width: 72px; aspect-ratio: 4 / 5; background: #111; overflow: hidden; }
.bc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bc-title { color: #fff; text-decoration: none; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
a.bc-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.bc-meta { color: #999; font-size: 12px; }
.bc-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.bc-price { font-size: 14px; }
.bc-rm { background: none; border: 0; color: #999; font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.bc-rm:hover { color: #fff; }
.bc-qty { display: inline-flex; align-items: center; border: 1px solid #444; align-self: flex-start; margin-top: 6px; }
.bc-qty button { width: 32px; height: 32px; background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.bc-qty button:disabled { color: #555; cursor: default; }
.bc-n { min-width: 28px; text-align: center; font-size: 13px; }

/* cart page and order page */
/* The logo stays on screen on every page and may run over the text as the page scrolls, with no band behind it
   (decision of Leo, 2026-10-25). */
.bc-logo.fixed-logo { position: fixed; left: var(--bc-m); top: 20px; z-index: 1000; }
.bc-page { background: #000; color: #fff; min-height: 70vh; padding: 128px var(--bc-m) 96px; font: 300 14px/1.5 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .02em; }
.bc-wrap { max-width: none; margin: 0; }
.bc-h1 { color: #fff; margin: 0 0 32px; font: 400 13px/1 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bc-lead { font-size: 18px; line-height: 1.5; max-width: 560px; margin: 0 0 32px; }
.bc-sub { color: #fff; margin: 32px 0 8px; font: 400 13px/1 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bc-addr { white-space: pre-line; color: #ccc; margin: 0 0 28px; }
.bc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bc-m); align-items: start; }
.bc-page .bc-line { grid-template-columns: 140px 1fr auto; gap: 24px; }
.bc-page .bc-img { width: 140px; }
.bc-sum { margin: 24px 0 0; border-top: 1px solid #333; padding-top: 16px; }
.bc-sum div { display: flex; justify-content: space-between; padding: 4px 0; }
.bc-sum dt, .bc-sum dd { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.bc-total { border-top: 1px solid #333; margin-top: 8px; padding-top: 12px !important; font-size: 15px; }
.bc-form h2 { color: #fff; margin: 0 0 20px; font: 400 13px/1 "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bc-field { margin-bottom: 18px; }
.bc-field label { display: block; color: #999; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.bc-field input, .bc-field select, .bc-field textarea { width: 100%; box-sizing: border-box; background: transparent; color: #fff; border: 0; border-bottom: 1px solid #555; border-radius: 0; padding: 8px 0;
  font: 300 14px/24px "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .02em; -webkit-appearance: none; appearance: none; }
.bc-field select { background-image: none; }
.bc-field select option { color: #000; }
.bc-field input:focus, .bc-field select:focus, .bc-field textarea:focus { outline: 0; border-bottom-color: #fff; }
.bc-field input[aria-invalid="true"], .bc-field select[aria-invalid="true"] { border-bottom-color: #ff6b6b; }
.bc-field input:-webkit-autofill { -webkit-text-fill-color: #fff !important; box-shadow: 0 0 0 1000px #000 inset !important; transition: background-color 9999s ease-out 0s; }
.bc-two { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.bc-err { color: #ff6b6b; font-size: 12px; margin: 6px 0 0; }
.bc-err[hidden], .bc-status[hidden] { display: none; }
.bc-status { color: #ff6b6b; margin: 0 0 16px; }
.bc-terms { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 8px 0 24px; font-size: 13px; line-height: 20px; color: #ccc; }
/* Own checkbox (Leo: on the phone it looked untickable, and the native grey box with a white tick vanished on black):
   24 px (WCAG 2.2 target size), empty = thin white frame, ticked = white square with a black tick. The label beside it
   ticks it too, so the whole line is a target. */
.bc-terms input { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 24px; height: 24px; margin: -2px 0 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 0; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bc-terms input:checked { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bc-terms input:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.bc-terms input[aria-invalid="true"] { border-color: #ff6b6b; }
.bc-terms label { cursor: pointer; touch-action: manipulation; }
.bc-terms a { color: #fff; }
.bc-terms .bc-err { grid-column: 2; }
.is-empty .bc-cols { display: block; }
.bc-page .bc-cta { margin-top: 24px; }
.bc-form .bc-cta { margin-top: 0; }

@media (max-width: 800px) {
  .bc-page { padding: 104px var(--bc-m) 64px; }
  .bc-cols { grid-template-columns: 1fr; gap: 40px; }
  .bc-page .bc-line { grid-template-columns: 96px 1fr auto; gap: 16px; }
  .bc-page .bc-img { width: 96px; }
  .bc-two { grid-template-columns: 1fr 1.4fr; }
}


/* order page: lines without a picture */
.bc-line-plain { grid-template-columns: 1fr auto; }
/* empty cart: suggestions */
.bc-cta-inline { display: inline-block; width: auto; padding: 16px 40px; margin-top: 8px; }
.bc-like { margin-top: 64px; }
.bc-tiles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.bc-tile { display: block; color: #fff; text-decoration: none; }
.bc-tile-img { display: block; aspect-ratio: 3 / 4; background: #111; overflow: hidden; }
.bc-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.bc-tile:hover .bc-tile-img img { opacity: .8; }
.bc-tile-name { display: block; margin-top: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.bc-tile-price { display: block; color: #999; font-size: 12px; margin-top: 2px; }
.bc-tile:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
@media (max-width: 800px) { .bc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* free shipping from €200: one quiet line above the sums */
.bc-free { margin: 0 0 12px; color: rgba(255, 255, 255, .6); font-size: 13px; letter-spacing: .02em; text-transform: none; }