@layer components {
  .mobile-purchase-bar { display: none; }
}

@media (max-width: 48rem) {
  html { scroll-padding-bottom: 6.5rem; }
  body:has(.mobile-purchase-bar) { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  body:has(.mobile-purchase-bar) .cart-toast { bottom: calc(5.75rem + env(safe-area-inset-bottom)); }

  .mobile-purchase-bar {
    position: fixed;
    z-index: 9;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(52 58 64 / 14%);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -.65rem 2rem rgb(52 58 64 / 12%);
    backdrop-filter: blur(1rem);
  }

  .mobile-purchase-bar form {
    position: relative;
    display: grid;
    width: min(100%, 40rem);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) 4.35rem minmax(8.8rem, 1.15fr);
    align-items: end;
    gap: .55rem;
  }
  .mobile-purchase-bar__line { display: grid; width: min(100%, 40rem); margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(10rem, 1.25fr); align-items: center; gap: .75rem; }
  .mobile-purchase-bar__line > a { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .4rem; border-radius: .7rem; background: #06c755; color: #fff; font-size: .875rem; font-weight: 850; line-height: 1.25; text-align: center; text-decoration: none; }
  .mobile-purchase-bar__line > a .ui-icon { width: 1.05rem; height: 1.05rem; }

  .mobile-purchase-bar__price { display: grid; min-width: 0; gap: .08rem; }
  .mobile-purchase-bar__price small { overflow: hidden; color: var(--color-muted); font-size: .75rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-purchase-bar__price strong { color: var(--color-brand-strong); font-size: 1rem; line-height: 1.2; white-space: nowrap; }
  .mobile-purchase-bar__quantity { display: grid; gap: .12rem; color: var(--color-muted); font-size: .64rem; font-weight: 750; }
  .mobile-purchase-bar__quantity select { width: 100%; min-height: 2.7rem; padding: .45rem; border: 1px solid var(--color-border); border-radius: .65rem; background: white; color: var(--color-text); font-weight: 750; }
  .mobile-purchase-bar button { display: inline-flex; min-height: 2.7rem; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .75rem; border: 0; border-radius: .7rem; background: var(--color-brand-strong); color: white; cursor: pointer; font-size: .82rem; font-weight: 800; white-space: nowrap; }
  .mobile-purchase-bar button .ui-icon { width: 1rem; height: 1rem; }
  .mobile-purchase-bar .ajax-inline-status { position: absolute; right: 0; bottom: calc(100% + .65rem); max-width: min(24rem, calc(100vw - 1.5rem)); padding: .55rem .75rem; border: 1px solid currentColor; border-radius: .7rem; background: white; box-shadow: var(--shadow-soft); }
}

@media (max-width: 22rem) {
  .mobile-purchase-bar form { grid-template-columns: minmax(0, 1fr) 3.75rem minmax(7.5rem, 1fr); gap: .35rem; }
  .mobile-purchase-bar button { padding-inline: .5rem; font-size: .75rem; }
  .mobile-purchase-bar button .ui-icon { display: none; }
}