/* Pending order: floating cart + come-back downsell modal (js/cart.js).
   Standalone on purpose: frames.html loads catalog.css instead of styles.css,
   so every token here carries its own fallback. */

.bco-cart {
  position: fixed; z-index: 85;
  left: calc(22px + env(safe-area-inset-left, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: stretch;
  max-width: min(440px, calc(100vw - 44px - 58px - 16px)); /* clears the 58px WhatsApp puck */
  border-radius: 14px; overflow: hidden;
  background: var(--carbon-dark, #2A2D31); color: #fff;
  box-shadow: 0 14px 40px rgba(20, 28, 31, .32);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  animation: bco-cart-in .45s cubic-bezier(.2, .9, .3, 1.15) both;
}
@keyframes bco-cart-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.bco-cart-main {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px 12px 16px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.bco-cart-icon { flex: none; color: var(--sky-blue, #8FD3F4); }
.bco-cart-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bco-cart-text strong { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.bco-cart-line { font-size: 13px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bco-cart-line s { opacity: .6; }
.bco-cart-line b { color: #fff; }
.bco-cart-line em { font-style: normal; color: var(--sky-blue, #8FD3F4); font-weight: 700; }
.bco-cart-cta {
  flex: none; margin-left: 4px; padding: 9px 14px; border-radius: 9999px;
  background: var(--accent-teal, #2f6f78); font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background .2s ease;
}
.bco-cart-main:hover .bco-cart-cta { background: var(--accent-teal-dark, #244f56); }
.bco-cart-main:focus-visible, .bco-cart-remove:focus-visible { outline: 3px solid var(--sky-blue, #8FD3F4); outline-offset: -3px; }
.bco-cart-remove {
  flex: none; width: 40px; border: 0; border-left: 1px solid rgba(255, 255, 255, .12);
  background: none; color: rgba(255, 255, 255, .6); cursor: pointer; display: grid; place-items: center;
}
.bco-cart-remove:hover { color: #fff; background: rgba(255, 255, 255, .06); }

@media (max-width: 560px) {
  .bco-cart { left: calc(12px + env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px - 58px - 20px); }
  .bco-cart-main { gap: 10px; padding: 10px 10px 10px 12px; }
  .bco-cart-icon { display: none; }
  .bco-cart-text strong { font-size: 13px; white-space: nowrap; }
  .bco-cart-line { font-size: 12px; }
  .bco-cart-line s, .bco-cart-line em { display: none; }
  .bco-cart-cta { padding: 8px 12px; margin-left: 0; }
  .bco-cart-cta span { display: none; }
  .bco-cart-remove { width: 30px; }
}

/* ---- Offer due: the downsell comes before the page ----
   js/cart-early.js sets html.bco-offer-due in <head>. The store stays hidden
   behind the offer's own backdrop colour until the buyer answers it, so the
   first thing on screen is the downsell. If js/cart.js never runs, the
   animation reveals the page anyway after 3s. */
html.bco-offer-due { background: #1b2428; }
html.bco-offer-due body { visibility: hidden; animation: bco-reveal 0s 3s forwards; }
html.bco-offer-due .bco-downsell { visibility: visible; }
@keyframes bco-reveal { to { visibility: visible; } }

/* ---- Downsell modal ---- */
.bco-downsell {
  position: fixed; inset: 0; margin: auto;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 32px 28px 24px; border: 0; border-radius: 14px;
  background: var(--bg-light, #FAFAF8); color: var(--ink-on-cream, #202a2d);
  box-shadow: 0 24px 80px rgba(5, 14, 23, .45);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
}
.bco-downsell::backdrop { background: rgba(5, 14, 23, .62); backdrop-filter: blur(4px); }
.bco-downsell-close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: none; color: #5b6468; cursor: pointer;
}
.bco-downsell-close:hover { background: rgba(32, 42, 45, .07); }
.bco-downsell-eyebrow {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-teal, #2f6f78);
}
.bco-downsell h2 {
  margin: 0 40px 10px 0; font-size: 26px; line-height: 1.15; font-weight: 800; text-transform: none;
  letter-spacing: -.01em; text-wrap: balance; color: inherit;
}
.bco-downsell-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: #3b4649; }
.bco-downsell-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 14px 16px; margin-bottom: 20px; border-radius: 10px;
  background: var(--accent-teal-soft, #d9eeed); font-variant-numeric: tabular-nums;
}
.bco-downsell-price s { font-size: 17px; color: #6a7477; }
.bco-downsell-now { font-size: 30px; font-weight: 800; color: var(--accent-teal-dark, #244f56); }
.bco-downsell-note { flex-basis: 100%; font-size: 12.5px; color: #4f5b5e; }
.bco-downsell-actions { display: flex; flex-direction: column; gap: 10px; }
.bco-downsell-buy, .bco-downsell-later {
  width: 100%; min-height: 50px; padding: 12px 18px; border-radius: 9999px;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.bco-downsell-buy { border: 0; background: var(--accent-teal, #2f6f78); color: #fff; }
.bco-downsell-buy:hover { background: var(--accent-teal-dark, #244f56); }
.bco-downsell-buy:disabled { opacity: .7; cursor: progress; }
.bco-downsell-later { border: 1.5px solid rgba(32, 42, 45, .22); background: none; color: inherit; }
.bco-downsell-later:hover { border-color: rgba(32, 42, 45, .5); }
.bco-downsell button:focus-visible { outline: 3px solid var(--steel-blue, #4A7FB5); outline-offset: 2px; }
.bco-downsell-foot { margin: 14px 0 0; font-size: 13px; text-align: center; color: #5b6468; }

@media (prefers-reduced-motion: reduce) {
  .bco-cart { animation: none; }
}