/* Purchase bar of the product page on mobile (views/product/partials/buy-bar.phtml, buy-bar.js): at the bottom while
   the form is off screen; the footer makes room for it */
.buy-bar { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .25s ease-out; }
.buy-bar[hidden] { display: none; }
.buy-bar.on { transform: none; }
.buy-bar > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.buy-bar strong { overflow: hidden; font-size: 1.36rem; text-overflow: ellipsis; white-space: nowrap; }
.buy-bar-price { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.buy-bar .action.primary { gap: .8rem; min-height: 4.8rem; padding: 0 2rem; font-size: 1.6rem; }
.buy-bar .i { width: 2rem; height: 2rem; }
@media (min-width: 48rem) { .buy-bar { display: none !important; } }
@media (max-width: 47.99rem) { body:has(.buy-bar) .foot { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); } }
@media print { .buy-bar { display: none !important; } }