/* Paid product mobile purchase block.
   Loaded only by the two paid product pages. */

.mobile-product-purchase {
  display: block;
  margin-top: 24px;
}

@media (min-width: 641px) {
  .mobile-product-purchase {
    display: none;
  }
}

@media (max-width: 640px) {
  .mobile-product-purchase .product-price-tag {
    margin-top: 0;
    margin-bottom: 14px;
  }

  .mobile-product-purchase .hero-actions {
    width: 100%;
    gap: 12px;
    margin-bottom: 16px;
  }

  .mobile-product-purchase .hero-actions .variant-btn {
    width: 100%;
    min-width: 0;
  }

  .mobile-product-purchase .hero-meta {
    margin: 0;
  }
}