@media (pointer: coarse) { 
  
  /*
  On mobile we encounter 2 issues:
  
  1. A selected button briefly shows its correct colors (--bs-btn-bg, --bs-btn-border-color) 
     but then reverts to Bootstrap’s hover colors (--bs-btn-hover-bg, --bs-btn-hover-border-color).
  2. Touch interactions can create a “sticky” hover state.
  
  But if the hover state is identical to the base state, both problems disappear.
  */

  .move-btn:hover,
  .sub-btn:hover {
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
    color: var(--bs-btn-color) !important;
  }
    
}
 
 
 .square-btn {
     aspect-ratio: 1 / 1;
     /* makes them perfectly square */
     min-width: 0;
     /* ensures flex can shrink evenly */
     font-size: clamp(0.7rem, 3vw, 0.85rem);
     /* responsive! */
     line-height: 1.2;
     /* keeps multi-line labels tidy */
     white-space: normal;
     /* allow wrapping */
 }

 .square-btn i {
     display: block;
     font-size: 1.4rem;
     margin-bottom: 0.4rem;
 }

 .action-grid-4 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* equal widths */
     gap: .5rem;
     height: 100%;
     align-items: center;
     /* center children vertically */

 }

 .action-grid-4 .btn.square-btn {
     aspect-ratio: 1 / 1;
     /* ✅ enforce perfect square */
     height: auto;
     /* ✅ let aspect ratio control height */
 }

 .action-grid-4 .btn {
     height: 90%;
     /* each button fills the row height */
 }

 .subscription-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* 4 equal columns */
     gap: .5rem;
     width: 90%;
     margin: 0 auto;
     align-items: center;
     /* vertical centering */
 }

 .grid-span-2 {
     grid-column: span 2;
 }

 .subscription-grid .btn {
     height: 90%;
 }

 /* optional row fill */

 .action-grid-2 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: .5rem;
     align-items: start;
     /* instead of center or stretch */
 }