/* Align Back to Set/My Collection + Next Comic Cut with the same
   desktop column structure used by the top pills and lower detail panels. */
@media (min-width: 901px){
  .card .comic-cut-nav.is-visible{
    display:grid !important;
    grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap:12px !important;
    align-items:stretch !important;
    width:100% !important;
    margin:10px 0 12px !important;
  }

  .card .comic-cut-nav-btn{
    width:100% !important;
    min-width:0 !important;
    flex:none !important;
    box-sizing:border-box !important;
  }

  .card .comic-cut-nav-btn:first-child{
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .card .comic-cut-nav-btn:last-child{
    justify-content:flex-end !important;
    text-align:right !important;
  }
}

/* Match the same collapse point as the pill grid and details panels. */
@media (min-width: 781px) and (max-width: 900px){
  .card .comic-cut-nav.is-visible{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  .card .comic-cut-nav-btn,
  .card .comic-cut-nav-btn:first-child,
  .card .comic-cut-nav-btn:last-child{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
}

@media (max-width: 780px){
  /* Restore the original mobile nav behavior. Desktop/tablet alignment above
     should not change the phone button layout. */
  .card .comic-cut-nav.is-visible{
    display:flex !important;
    grid-template-columns:none !important;
    gap:8px !important;
    width:100% !important;
    margin:0 0 10px !important;
    padding:0 !important;
  }

  .card .comic-cut-nav-btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    font-size:13px !important;
    min-height:38px !important;
    padding:8px !important;
  }

  .card .comic-cut-nav-btn:first-child{
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .card .comic-cut-nav-btn:last-child{
    justify-content:flex-end !important;
    text-align:right !important;
  }
}