/* Phone and tablet fixes for the store and the admin.
   Loaded after bootstrap.min.css. */

/* images and embeds never wider than their column (many have width="600" etc.) */
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* store pages: the fixed top menu covered the page title */
header + main { padding-top: 3.5rem; }

/* header HTML from admin Settings is a 3-column table with 400px images */
.site-header table { width: 100% !important; }

/* rows with large gutters stuck out past the screen edge (clip, so dropdowns aren't cut off) */
main { overflow-x: clip; }

@media (max-width: 767.98px) {
  /* stack the settings header table: logo, title, second image */
  .site-header table, .site-header tbody, .site-header tr, .site-header td {
    display: block;
    width: 100% !important;
  }
  .site-header td { text-align: center !important; padding: .25rem 0; }

  /* g-4 / g-5 gutters are wider than the page padding on phones */
  .row.g-4, .row.g-5 { --bs-gutter-x: 1.5rem; }
  main > .row, .album > .row { margin-left: 0; margin-right: 0; }

  /* long titles wrap instead of running off screen */
  h1, h2, h3, h4, h5, h6, p, li, td { overflow-wrap: anywhere; }

  /* pagination and filter buttons wrap */
  .btn-group, .btn-toolbar { flex-wrap: wrap; gap: .25rem; }

  /* admin: "Sign out" sat under the menu button */
  header.navbar .navbar-nav { margin-right: 3.75rem; }

  /* admin: half-width search columns go full width */
  main .col-5 { width: 100%; }

  /* admin lists: one card per row, labels added by responsive.js */
  table.stack-sm tr.col-labels { display: none; }
  table.stack-sm tbody tr {
    display: block;
    padding: .5rem 0;
    border-bottom: 2px solid #dee2e6;
  }
  table.stack-sm tbody td {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    border: 0;
    padding: .25rem .5rem;
  }
  table.stack-sm tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    font-weight: 600;
  }
  table.stack-sm tbody td > * { min-width: 0; }
}

/* store menu on phones: logo left, Cart / Checkout buttons, then the ☰ button at the right edge
   (the cart buttons came after the ☰ button, which pushed it into the middle of the bar) */
@media (max-width: 767.98px) {
  .navbar > .container-fluid > .align-items-center { order: 2; margin-left: auto; margin-right: .5rem; }
  .navbar > .container-fluid > .navbar-toggler { order: 3; }
  .navbar > .container-fluid > .navbar-collapse { order: 4; }
  .navbar #div_refresh2 .btn { padding: .3rem .6rem; font-size: .875rem; }
}

/* store pager (pager.php): Prev · Page X of Y · Next on one line */
.store-pager { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }
.store-pager a.btn { color: #fff !important; text-decoration: none; }     /* the pages' a{color} rule */
.store-pager a.btn.disabled { opacity: .45; }
.store-pager .dropdown-menu { max-height: 60vh; overflow-y: auto; }       /* not 489 rows, 16,000px tall */
.store-pager .dropdown-item { color: #212529 !important; }
.store-pager .dropdown-item.active, .store-pager .dropdown-item:active { color: #fff !important; }
.bd-example > .d-flex.flex-wrap { gap: .5rem; row-gap: .6rem; align-items: center; }
@media (max-width: 575.98px) {
  .store-pager .pager-word { display: none; }                             /* "‹ Prev" / "Next ›" */
  .store-pager .btn { padding: .375rem .65rem; font-size: .9rem; white-space: nowrap; }
}