/* Sticky buy bar: section-level hooks on top of the ported design CSS.

   misfit/css/pdp.css draws .buy-bar, its slide-up transform, the truncating
   title and the price colour, and only shows it below 860px. <theme-misfit-buy-bar>
   is the bar itself, so it takes those styles directly. */

/* The bar is chrome, not a page band: .misfit-page's paper texture must not
   land on it. The backdrop colour is the merchant's setting, carried in at the
   design's own 95% opacity by the section so the blur behind it still reads. */
.buy-bar.misfit-page {
  background-color: var(--mm-buy-bar-bg, #0b0619f2);
  background-image: none;
}

/* The design reserves 78px at the foot of the page below 860px so the fixed bar
   cannot cover the last band (designhtml/pdp.css:485, body{padding-bottom:78px}).
   Every Misfit section root carries .misfit-page, so the clearance cannot live
   on that class — it would be applied once per section. It belongs to this bar
   and this bar only, so it is declared here, once, against the page itself. */
@media (max-width: 860px) {
  body:has(.buy-bar) {
    padding-bottom: 78px;
  }
}

/* App blocks (F-07): printed only when the merchant has added an app block, so
   the bar keeps its height when there are none. Inside the bar they sit after
   the button as one more flex item. public/misfit/css/app-blocks.css styles
   .mm-app-blocks as a full-width band and loads on the same page (from the
   other product sections), so this rule resets that for the bar. */
.buy-bar > .mm-app-blocks {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 40%;
  margin: 0;
}

/* Price and button widths (F-44): product-dark.css gives every .btn
   width:100% for the hero's buy row, which also lands on the bar's button, so
   it took the whole row and squeezed the title and price column to zero width
   (the price wrapped one character per line at 390). In the bar the button
   keeps its own width, the title still truncates, and the price never wraps. */
.buy-bar .btn {
  width: auto;
  flex: none;
}
.buy-bar-info {
  min-width: 4.5em;
}
.buy-bar-info [data-buy-bar-price] {
  white-space: nowrap;
}