/* ─────────────────────────────────────────────────────────────────
   responsive.css
   Extracted from kurtezy-v2.html on 2026-04-19 (Item 7 of audit
   2026-04-19 — see docs/PLAYING-CARD-UNIFICATION-2026-04-19.md).
   Loaded from kurtezy-v2.html via <link rel="stylesheet">.
   ───────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — placed at end of <style> so these rules win
   over base declarations of #player-bar, .player-right, #cart-drawer
   which are declared later in the source (same specificity, later wins).
   Covers: hero 3D viewer, player bar, detail layout, cart drawer,
   weeknav horizontal scroll, product grid, header wrap.
   ════════════════════════════════════════════════════════════════ */

/* Tablet (<=768px) */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; min-height: 260px; }
  .hero-l { grid-column:1; grid-row:2; padding:20px; }
  .hero-r { grid-column:1; grid-row:1; min-height: 320px; aspect-ratio: 16 / 11; }
  .hero-r .viewer-slot[data-size="hero"] { width: 100%; height: 100%; min-height: 300px; }
  .detail-layout { grid-template-columns: 1fr; min-height: auto; }
  .detail-info { border-left: none; border-top: 1px solid var(--border); padding: 20px; }
  .detail-viewer-wrap { min-height: 340px; padding: 12px; }
  .detail-viewer-wrap .viewer-slot { max-width: 100%; min-height: 300px; aspect-ratio: 16 / 10; }
  .detail-viewer-wrap .vsp-disc { width: 200px; height: 200px; }
  .pgrid, .pgrid-pre { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 16px; }
  /* Player bar: 2-col, hide volume/queue, expand waveform */
  #player-bar { height: 72px; grid-template-columns: minmax(160px, 45%) minmax(0, 1fr); }
  .player-right { display: none; }
  .player-center { grid-template-columns: auto minmax(0, 1fr); padding: 0 14px; gap: 10px; min-width: 0; }
  .time-row { display: none; }
  .waveform-wrap { height: 44px; min-width: 0; overflow: hidden; }
  #waveform-canvas { height: 44px; width: 100%; max-width: 100%; min-width: 0; }
  .ctrl-play, .ctrl-next, .ctrl-prev, .ctrl-btn { min-width: 44px; min-height: 44px; }
  .np { padding: 0 12px; gap: 10px; }
  .np-art, .np-art-disc, .np-art-label { width: 40px !important; height: 40px !important; }
  /* Cart drawer: wider on tablet */
  #cart-drawer { width: 80vw; max-width: 380px; }
  /* Weeknav: horizontal scroll with iOS momentum, hidden scrollbar */
  #weeknav { padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #weeknav::-webkit-scrollbar { display: none; }
  .week-tab { min-height: 44px; padding: 0 14px; }
  .filter-bar { padding: 10px 16px; -webkit-overflow-scrolling: touch; }
  .topbar { padding: 0 16px; gap: 8px; }
  .topbar-r { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .lang-switch { margin-left: 4px; }
  .nav-link { padding: 0 12px; font-size: 10px; }
  header { padding: 0 16px; gap: 12px; flex-wrap: wrap; }
  .logo-wm { font-size: 42px; }
  .hdr-nav { gap: 14px; flex-wrap: wrap; }
  .hdr-search { width: 140px; }
}

/* Phone (<=480px) */
@media (max-width: 480px) {
  .pgrid, .pgrid-pre { grid-template-columns: 1fr; margin: 0 12px; }
  .hero-artist-name { font-size: 28px; }
  .hero-title { font-size: 16px; }
  .hero-l { padding: 16px; gap: 10px; }
  .hero-r {
    /* Clamp to viewport width so aspect-ratio doesn't force overflow */
    width: 100vw; max-width: 100vw; min-height: 300px; aspect-ratio: auto; height: 300px;
  }
  .hero-r .viewer-slot[data-size="hero"] { width: 100%; height: 100%; min-height: 280px; }
  .detail-title { font-size: 22px; }
  .detail-artist-lead { font-size: 28px; }
  .detail-info { padding: 16px; gap: 14px; }
  .detail-viewer-wrap { min-height: 280px; padding: 0; }
  .detail-viewer-wrap .viewer-slot { min-height: 280px; aspect-ratio: 4 / 3; }
  .detail-viewer-wrap .vsp-disc { width: 180px; height: 180px; }
  .detail-attrs { grid-template-columns: repeat(2, 1fr); }
  /* Cart drawer: full-width on phone */
  #cart-drawer { width: 100vw; max-width: 100vw; }
  .cart-head { padding: 14px 16px; }
  .cart-close { width: 44px; height: 44px; font-size: 22px; }
  .cart-item { padding: 12px 16px; }
  .cart-foot { padding: 14px 16px; }
  .btn-checkout { padding: 16px; font-size: 11px; min-height: 48px; }
  /* Player bar: compact, disc thumb + controls + waveform */
  #player-bar { height: 64px; grid-template-columns: 56px minmax(0, 1fr); }
  .np { padding: 0 10px; gap: 8px; border-right: none; }
  .np-info { display: none; }
  .np-label-tag { display: none; }
  .player-center { padding: 0 8px 0 0; gap: 6px; }
  .player-controls { gap: 4px; }
  .ctrl-play { width: 44px; height: 44px; }
  .ctrl-btn { width: 36px; height: 36px; }
  /* Weeknav compact */
  #weeknav { padding: 0 12px; }
  .week-tab { padding: 0 10px; font-size: 9px; }
  /* Topbar */
  .topbar { font-size: 9px; padding: 4px 12px; height: auto; min-height: var(--topbar-h); }
  .topbar > div:first-child { display: none; }
  .topbar-r { width: 100%; justify-content: center; gap: 8px; }
  .topbar-r a { padding: 4px 2px; }
  .tb-login { padding: 3px 8px; font-size: 8px; }
  .lang-switch { margin-left: 2px; font-size: 9px; }
  header { height: auto; padding: 12px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .logo-wm { font-size: 36px; }
  .hdr-nav { gap: 10px; justify-content: center; flex-wrap: wrap; }
  .hdr-r { flex-direction: row; gap: 8px; }
  .hdr-search { flex: 1; width: auto; min-width: 0; }
  /* Phase 5.D — full-width search dropdown + larger tap targets on phone */
  .search-wrap { flex: 1; min-width: 0; }
  .search-dropdown {
    position: fixed; left: 8px; right: 8px; top: auto;
    width: auto; min-width: 0; max-height: 60vh;
  }
  .search-item { padding: 10px 12px; min-height: 48px; }
  .search-thumb { width: 40px; height: 40px; }
  /* Shell grows (topbar + wrapped header) + compact player height */
  :root { --shell-h: 180px; --player-h: 64px; }
  /* Horizontal-scroll safety */
  body { overflow-x: hidden; }
  /* Related products block — smaller cards on phone */
  .d-related-card { width: 120px; }
  .d-related-card img { width: 120px; height: 120px; }
}