/* Lookbook — shared mobile styles. Link from every public HTML page. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* ── Global (640px and below) ─────────────────────────────── */
@media (max-width: 640px) {
  html[data-page="look-tuning"] body,
  html[data-page="style-characters"] body,
  html[data-page="runway-gallery"] body {
    padding: 12px !important;
  }

  html[data-page="catalog"] .container {
    padding: 16px 14px 48px !important;
  }

  html[data-page="menu"] .wrap {
    padding: 28px 0 40px;
  }

  html[data-page="menu"] h1 {
    font-size: 26px;
  }
}

/* ── Look tuning ──────────────────────────────────────────── */
@media (max-width: 768px) {
  html[data-page="look-tuning"] header {
    background: var(--bg) !important;
  }

  html[data-page="look-tuning"] .layout-photos {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-page="look-tuning"] .stage-title {
    font-size: 14px;
  }

  html[data-page="look-tuning"] .btn {
    min-height: 44px;
  }

  html[data-page="look-tuning"] .tag-matrix {
    font-size: 10px;
  }

  html[data-page="look-tuning"] .tag-matrix .item-head img {
    max-width: 72px;
  }

  html[data-page="look-tuning"] .zara-pool-section {
    margin-top: 16px;
  }
}

/* ── Catalog ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  html[data-page="catalog"] header.top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  html[data-page="catalog"] header.top .right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  html[data-page="catalog"] header.top .nav {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  html[data-page="catalog"] .import-bar {
    flex-direction: column;
  }

  html[data-page="catalog"] .import-bar button {
    width: 100%;
    padding: 12px;
  }

  html[data-page="catalog"] .kv {
    grid-template-columns: 1fr !important;
    gap: 2px 0;
  }

  html[data-page="catalog"] .kv dt {
    margin-top: 8px;
  }

  html[data-page="catalog"] .panel {
    width: 100vw !important;
  }

  html[data-page="catalog"] .section:has(.measure-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Style characters ─────────────────────────────────────── */
@media (max-width: 640px) {
  html[data-page="style-characters"] .save-indicator {
    margin-left: 0 !important;
    width: 100%;
  }

  html[data-page="style-characters"] .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-page="style-characters"] .toolbar select {
    width: 100%;
  }
}

/* ── Runway gallery ───────────────────────────────────────── */
@media (max-width: 640px) {
  html[data-page="runway-gallery"] .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-page="runway-gallery"] .toolbar input {
    min-width: 0 !important;
    width: 100%;
  }

  html[data-page="runway-gallery"] .count {
    margin-left: 0 !important;
  }

  html[data-page="runway-gallery"] .grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
}

/* ── Auth cards weights (minor polish) ────────────────────── */
@media (max-width: 480px) {
  html[data-page="auth-cards-weights"] body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}