/*
 * Phones and small tablets (<= 900px), every page.
 * - Shared header controls (cart, messages, account menu) used by the home page's
 *   mobile header and by the site header on all other pages.
 * - The site header collapses to: logo + controls on one row, search underneath.
 */
.header-mobile-actions { display: none; }

@media (max-width: 900px) {
  /* The desktop body is a centred grid (place-items: start center); in block layout that
     centring would shrink-wrap the header and sections, so reset it on small screens. */
  body { display: block; place-items: normal; overflow-x: hidden; }
  .catalog, .site-footer { width: auto; }

  .m-header-actions { display: flex; align-items: center; gap: 6px; }
  .m-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
  }
  .m-icon:active { background: rgba(255, 255, 255, .1); }
  .m-icon .icon { width: 22px; height: 22px; }
  .m-badge {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #031033;
    border-radius: 999px;
    background: #ff3b47;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
  }
  .m-badge[hidden] { display: none; }
  .m-signin { padding: 9px 14px; border-radius: 999px; background: linear-gradient(90deg, #0a5dff, #0091ff); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }

  /* Account menu (details/summary: works without JavaScript) */
  .m-account { position: relative; }
  .m-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: #f2f7ff;
    color: #06194c;
    list-style: none;
    cursor: pointer;
  }
  .m-avatar::-webkit-details-marker { display: none; }
  .m-avatar .icon { width: 20px; height: 20px; }
  .m-account[open] .m-avatar { box-shadow: 0 0 0 3px rgba(0, 145, 255, .55); }
  .m-account-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: min(290px, calc(100vw - 32px));
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(3, 16, 51, .3);
  }
  .m-account-menu::before { content: ""; position: absolute; top: -6px; right: 14px; width: 12px; height: 12px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
  .m-account-menu a,
  .m-account-menu button { display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: none; color: #06194c; font: 600 15px/1.2 Inter, system-ui, sans-serif; text-align: left; text-decoration: none; }
  .m-account-menu a:active,
  .m-account-menu a:hover { background: #f0f5ff; }
  .m-account-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid #edf0f5; }
  .m-account-menu button { color: #e5484d; cursor: pointer; }


  /* ---------- Site header (all pages except the home hero) ---------- */
  .site-header { position: sticky; top: 0; z-index: 50; width: auto; }
  .site-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 16px 12px;
  }
  .site-header .brand { min-width: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-nav { display: none; }
  .header-mobile-actions { display: flex; }
  .header-search { grid-column: 1 / -1; order: 3; flex-basis: auto; width: 100%; max-width: none; }
  .header-search input { height: 42px; font-size: 15px; }
}

@media (max-width: 380px) {
  .site-header .brand { font-size: 16px; }
}

/* Product gallery on phones: thumbnails in one swipeable row instead of wrapping. */
@media (max-width: 900px) {
  .gallery-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 76px;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumb { aspect-ratio: 1 / 1; }
}

/* ---------- Dashboard pages on phones ---------- */
@media (max-width: 760px) {
  /* Logo upload: let the file input and help text shrink instead of overflowing. */
  .logo-upload { align-items: flex-start; gap: 14px; padding: 14px; }
  .logo-preview { flex-basis: 56px; width: 56px; height: 56px; font-size: 22px; }
  .logo-upload-body { flex: 1; }
  .logo-upload-body input[type="file"] { width: 100%; max-width: 100%; font-size: 13px; }

  /* Tab bars (orders, products, payments…): one row that scrolls sideways. */
  .tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > a, .tabs > button { flex: 0 0 auto; white-space: nowrap; }

  /* Payouts card: icon + text on top, full-width button underneath. */
  .connect-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 12px 14px; padding: 16px; }
  .connect-card > div { min-width: 0; }
  .connect-card strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .connect-card .payout-badge { margin-left: 0; }
  .connect-card > a { grid-column: 1 / -1; justify-content: center; width: 100%; }
}