/* Only the enhanced script can reveal this optional mobile purchase control. */
.purchase-bar[hidden], .purchase-bar { display: none; }
@media (max-width: 700px) {
  html.purchase-bar-active { scroll-padding-bottom: 10rem; }
  .purchase-bar:not([hidden]) {
    position: fixed; z-index: 35; left: 12px; right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: minmax(0,1fr) auto 36px; gap: 10px;
    align-items: center; max-width: 676px; margin: 0 auto;
    padding: 12px; background: #fffef9; color: #253b35;
    border: 1px solid #b6c0b4; border-radius: 14px;
    box-shadow: 0 4px 20px #253b3526;
  }
  .purchase-bar-info { min-width: 0; }
  .purchase-bar-info strong { display: block; font-size: 13px; line-height: 1.3; }
  .purchase-bar-info small { display: block; font-size: 11px; line-height: 1.3; margin-top: 3px; }
  .purchase-bar .button { min-height: 44px; padding: 10px 12px; font-size: 13px; line-height: 1.25; text-align:center; max-width: 145px; }
  .purchase-bar-dismiss { min-width: 36px; min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #253b35; font-size: 26px; cursor: pointer; }
  .purchase-bar-dismiss:focus-visible { outline: 3px solid #31544a; outline-offset: 2px; }
}
@media (max-width: 359px) {
  .purchase-bar:not([hidden]) { gap: 6px; padding: 8px; left: 8px; right: 8px; }
  .purchase-bar-info small { display: none; }
  .purchase-bar .button { max-width: 122px; font-size: 12px; }
}