/* ============================================================================
 * Mobile / tablet adaptive overrides
 *
 * Loaded AFTER styles.css (and after each page's inline <style> block) on
 * every public HTML, so the rules below win over the desktop layout via a
 * mix of higher specificity, source order and surgical !important.
 *
 * Two breakpoints:
 *   - ≤ 900px  : tablet / large phone — most multi-column grids collapse
 *   - ≤ 600px  : phone — tighter padding, smaller type, hidden nav links,
 *                horizontal scroll for tab strips and filter pills.
 * ========================================================================== */


/* =========================================================================
 * Tablet ≤ 900px
 * ========================================================================= */
@media (max-width: 900px) {
  /* Universal: shell padding stays centered but tighter */
  .shell { padding: 0 20px !important; }

  /* Hero — stack the 1.4fr/1fr grid into one column */
  .hero { padding: 40px 0 32px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Catalog — sidebar above the grid */
  .catalog {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 0 16px !important;
  }
  /* Filter list becomes horizontal pills with snap-scroll */
  .filters h3 { margin-bottom: 8px !important; }
  .filter-list {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 0 14px !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter-list li { flex-shrink: 0; scroll-snap-align: start; }
  .filter-list button { width: auto !important; white-space: nowrap; padding: 8px 14px !important; }

  /* Catalog header */
  .catalog-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .sort {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .sort::-webkit-scrollbar { display: none; }

  /* Card grid: 2 columns on tablets */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Product page */
  .product { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px 0 32px !important; }
  .showcase { grid-template-columns: 1fr !important; padding: 22px !important; min-height: 240px !important; }
  .buybox { position: static !important; padding: 22px !important; }

  /* Cart / checkout — sidebar below items */
  .layout { grid-template-columns: 1fr !important; gap: 20px !important; padding: 24px 0 !important; }
  .summary { position: static !important; padding: 22px !important; }

  /* Account / developer / admin — multi-col grids collapse */
  .stat-grid { grid-template-columns: 1fr !important; }
  .pay-dashboard { grid-template-columns: 1fr !important; }
  .pay-side { grid-template-columns: 1fr !important; gap: 14px !important; }
  .breakdown { grid-template-columns: 1fr !important; }
  .field-grid { grid-template-columns: 1fr !important; }
  .field-grid .field.full { grid-column: span 1 !important; }
  .profile-grid { grid-template-columns: 1fr !important; }

  /* Earnings hero (developer) */
  .earn-hero { grid-template-columns: 1fr !important; padding: 24px !important; gap: 20px !important; }
  .earn-num { font-size: 48px !important; letter-spacing: -1.6px !important; }
  .earn-meta { gap: 18px !important; flex-wrap: wrap; }

  /* Pay summary card compact on tablet */
  .pay-summary { padding: 20px !important; }
  .pay-summary .num { font-size: 40px !important; letter-spacing: -1px !important; }

  /* Tabs row — never wrap, scroll instead */
  .tabs, .tabs-main, .acct-tabs, .a-tabs, .ptabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar,
  .tabs-main::-webkit-scrollbar,
  .acct-tabs::-webkit-scrollbar,
  .a-tabs::-webkit-scrollbar,
  .ptabs::-webkit-scrollbar { display: none; }
  .tab, .acct-tab, .a-tab, .ptab { white-space: nowrap; flex-shrink: 0; }

  /* Footer — single column */
  .foot { padding: 36px 0 28px !important; margin-top: 56px !important; }
  .foot-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .foot-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .foot-bottom .right { gap: 12px !important; flex-wrap: wrap; }

  /* Page head: slightly smaller h1 */
  .page-head h1 { font-size: clamp(34px, 7vw, 48px) !important; letter-spacing: -1.2px !important; }
}


/* =========================================================================
 * Phone ≤ 600px
 * ========================================================================= */
@media (max-width: 600px) {
  /* Tighter shell — content gets every horizontal pixel */
  .shell { padding: 0 16px !important; }

  /* === Header === */
  .nav-inner { gap: 10px !important; height: 56px !important; }
  /* Hide desktop primary links and the search box on phones — chip dropdown
     and the brand-as-home cover the same ground */
  .nav-links, .nav-search, .nav-spacer { display: none !important; }
  .brand { font-size: 14px !important; gap: 8px !important; }
  .brand-mark { width: 26px !important; height: 26px !important; }
  .brand-mark .ico { width: 14px !important; height: 14px !important; }
  .nav-actions { gap: 4px !important; margin-left: auto; }
  .icon-btn { width: 36px !important; height: 36px !important; }
  .icon-btn .ico { width: 16px !important; height: 16px !important; }

  /* User chip — keep compact, allow long emails to ellipsize */
  .nav-user { padding: 7px 10px !important; gap: 6px !important; margin-left: 4px !important; }
  .nav-user .em { max-width: 110px !important; font-size: 11px !important; }
  .nav-user .caret { width: 10px !important; height: 10px !important; }

  /* Lang toggle slightly smaller */
  [data-lang-toggle] { transform: scale(.9); transform-origin: right center; }

  /* Hide the .btn-primary "Войти" CTA in nav (auth-trigger still works
     via the chip / it's only relevant when signed out) */
  .nav-actions .btn-primary { padding: 6px 10px !important; font-size: 12px !important; }

  /* === Hero === */
  .hero { padding: 28px 0 24px !important; }
  .hero-title { font-size: clamp(34px, 9vw, 52px) !important; letter-spacing: -1.4px !important; }
  .hero-sub { font-size: 14px !important; line-height: 1.55 !important; margin-top: 14px !important; }
  .hero-cta { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; margin-top: 22px !important; }
  .hero-cta .btn { width: 100% !important; justify-content: center !important; }
  .hero-meta { padding: 16px !important; }
  .hero-meta-row .val { font-size: 12px !important; }

  /* === Strip === */
  .strip { padding: 12px 0 !important; }
  .strip-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 28px !important;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .strip-row::-webkit-scrollbar { display: none; }
  .strip-row > span { flex-shrink: 0; }

  /* === Catalog === */
  .grid { grid-template-columns: 1fr !important; }
  .card { padding: 16px !important; }
  .card-art { height: 120px !important; }

  /* === Page heads === */
  .page-head { padding: 24px 0 18px !important; }
  .page-head h1 { font-size: clamp(28px, 8vw, 40px) !important; letter-spacing: -.8px !important; }
  .page-head .sub { font-size: 12px !important; }

  /* === Account === */
  .ref-hero {
    grid-template-columns: 1fr !important;
    padding: 22px !important;
    gap: 18px !important;
  }
  .ref-hero h2 { font-size: 24px !important; }
  .acct-card-head h3 { font-size: 13px !important; }
  .acct-card-head .meta { display: none; }
  /* License rows / pay rows — collapse the multi-column grid into stacked blocks */
  .lic-row,
  .pay-row,
  .ref-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  /* === Developer === */
  .pay-summary { padding: 18px !important; gap: 12px !important; }
  .pay-summary .num { font-size: 36px !important; }
  .pay-summary .actions { flex-direction: column !important; }
  .pay-summary .actions .btn { width: 100% !important; }
  .feed-row { padding: 14px 16px !important; gap: 10px !important; }
  .feed-row .f-art { width: 36px !important; height: 36px !important; }
  .feed-row .f-main { flex: 1 1 100% !important; }
  .feed-row .f-amount { font-size: 13px !important; }
  .role-switch { width: 100%; }
  .role-switch a { flex: 1; text-align: center; }

  /* === Cart === */
  .citem {
    grid-template-areas:
      'art ttl ttl ttl remove'
      'art meta meta meta meta'
      'qty qty price price price' !important;
    grid-template-columns: 56px auto 1fr 1fr auto !important;
    gap: 8px 12px !important;
    padding: 14px !important;
  }
  .citem-art { width: 56px !important; height: 56px !important; }

  /* === Checkout === */
  .form-section { padding: 20px !important; }
  .pay-method { grid-template-columns: 24px 1fr; padding: 14px !important; }
  .pay-method .badge { display: none; }

  /* === Product page === */
  .p-head h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .p-head .sub { font-size: 15px !important; }
  .showcase { padding: 18px !important; min-height: 200px !important; }
  .showcase-left .big { font-size: 26px !important; }
  .term { font-size: 10.5px !important; padding: 12px !important; }
  .feats { grid-template-columns: 1fr !important; }
  .spec-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 16px !important;
    gap: 4px !important;
  }
  .spec-row .k { width: auto !important; }

  /* === Auth modal === */
  #auth-modal .modal {
    width: calc(100% - 24px) !important;
    padding: 24px !important;
    max-height: 92vh;
    overflow-y: auto;
  }

  /* === Admin === */
  .a-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 14px 16px !important; }
  .a-card-head { flex-wrap: wrap; gap: 10px; }
  .a-stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* === Docs === */
  .docs { grid-template-columns: 1fr !important; gap: 24px !important; }
  .docs-toc { position: static !important; }

  /* === Footer === */
  .foot { padding: 28px 0 22px !important; margin-top: 40px !important; }
  .foot-tag { max-width: none !important; }
}


/* =========================================================================
 * Recent additions — mobile tightening
 * ========================================================================= */

/* ---- Affiliates sidebar widget ---- */
/* On tablet the .filters aside flips above the product grid (full-width).
   Without a cap, each affiliate card stretches to ~700px and looks like an
   oversized banner. Pin the widget to a sane width and align right so it
   reads as a compact callout next to the filters, not a hero block. */
@media (max-width: 900px) and (min-width: 601px) {
  #affiliates-wrap {
    margin-top: 18px !important;
    max-width: 360px;
  }
  #affiliates-list { gap: 10px !important; }
}
@media (max-width: 600px) {
  /* Phone: widget stacks below the filter pills, full width but compact. */
  #affiliates-wrap { margin-top: 18px !important; }
  .aff-card { padding: 12px 14px !important; }
  .aff-card .aff-desc { -webkit-line-clamp: 5 !important; }
  .aff-card .aff-title { font-size: 14px !important; }
}

/* ---- License card update banner ---- */
/* The red "🆕 v1.X" banner spans the lic-row grid via grid-column:1/-1.
   On phone the row collapses to 1fr; banner still spans correctly but its
   inner flex content can overflow (long version + date together). Allow it
   to wrap and shrink the CTA text. */
@media (max-width: 600px) {
  [data-update-trigger] {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  [data-update-trigger] > span:nth-child(2) {
    font-size: 12px !important;
    flex-basis: 100%;
    order: 2;
  }
  [data-update-trigger] > span:last-child {
    margin-left: auto !important;
    order: 3;
  }
}

/* ---- Guide tab step cards ---- */
/* The "Как пользоваться" pane uses 44px+1fr grids for numbered cards. On
   phone the right column is tight (~280px). Make sure long inline
   .mono chips and continuous strings wrap instead of pushing the layout. */
@media (max-width: 600px) {
  section[data-pane="guide"] .acct-card > div > div {
    /* Numbered step container — relax horizontal padding */
    padding: 12px !important;
  }
  section[data-pane="guide"] p,
  section[data-pane="guide"] h4 {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  section[data-pane="guide"] .mono {
    white-space: normal;
    word-break: break-all;
  }
  section[data-pane="guide"] details summary {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ---- Multi-wallet profile fields ---- */
/* Address strings are long monospace blobs. Inputs handle horizontal scroll
   natively, but on tiny screens the label-above-input pattern needs a touch
   of breathing room so two side-by-side fields don't compete. The base
   .field-grid → 1fr override above already stacks them; this just keeps the
   long addresses readable. */
@media (max-width: 600px) {
  .profile-card input[id^="prof-wallet-"] {
    font-size: 12px !important;
    letter-spacing: 0;
    font-family: var(--font-mono);
  }
  /* Status + save buttons row: allow wrap if all three don't fit. */
  #prof-status { flex-basis: 100%; order: 3; margin-right: 0 !important; text-align: right; }
  .profile-card .btn { padding: 10px 16px !important; }
}

/* ---- Update changelog modal ---- */
/* 640px max-width already shrinks but on phone we want full-bleed padding,
   smaller h3, and the close × big enough to tap (44x44 target). */
@media (max-width: 600px) {
  #close-updates-modal,
  #close-creds-modal {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
  }
}

/* ---- Admin Партнёрки pane row ---- */
/* admin rows already collapse to 1fr via the existing .a-row override;
   just ensure the inline action buttons stack neatly without sticking out. */
@media (max-width: 600px) {
  [data-pane="affiliates"] .a-row [style*="text-align:right"] {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
}

/* =========================================================================
 * Tiny phone ≤ 380px — last-resort tightening
 * ========================================================================= */
@media (max-width: 380px) {
  .shell { padding: 0 12px !important; }
  .hero-title { font-size: 30px !important; }
  .nav-user .em { max-width: 80px !important; }
  [data-lang-toggle] { display: none !important; }   /* prefer cart + chip, drop lang toggle */
}