/* phone */
.v2 .v2-phone {
  position: relative; width: 320px; height: 640px;
  border-radius: 44px; background: #0d0d0d;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 6px #050505;
  overflow: hidden;
}
.v2 .v2-phone__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; background: #000; border-radius: 16px; z-index: 10;
}
.v2 .v2-phone__screen { position: absolute; inset: 12px; border-radius: 32px; background: var(--bg); overflow: hidden; }
.v2 .v2-phone__view { position: absolute; inset: 0; padding: 50px 18px 90px; opacity: 0; pointer-events: none; transition: opacity .35s; overflow-y: auto; }
.v2 .v2-phone__view.is-active { opacity: 1; pointer-events: auto; }
.v2 .v2-phone__view h4 { font-family: var(--f-display); font-weight: 300; font-size: 22px; letter-spacing: -0.02em; color: var(--bone); margin: 0 0 14px; }
.v2 .v2-tile { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: background .25s, border-color .25s; margin-bottom: 10px; }
.v2 .v2-tile:hover { background: rgba(212,255,58,0.06); border-color: var(--lime); }
.v2 .v2-tile .thumb { width: 60px; height: 60px; border-radius: 10px; background: linear-gradient(135deg, var(--lime), var(--coral)); }
.v2 .v2-tile .thumb.b { background: linear-gradient(135deg, var(--violet), var(--sky)); }
.v2 .v2-tile .thumb.c { background: linear-gradient(135deg, var(--coral), #ffd84a); }
.v2 .v2-tile .nm { font: 500 13px var(--f-sans); color: var(--bone); }
.v2 .v2-tile .pr { font: 11px var(--f-mono); color: var(--bone-3); margin-top: 2px; }
.v2 .v2-tile .arr { color: var(--bone-3); font-size: 14px; }
.v2 .v2-detail__hero { aspect-ratio: 1.2/1; background: linear-gradient(135deg, var(--lime), var(--coral)); border-radius: 14px; margin-bottom: 14px; }
.v2 .v2-detail__title { font-family: var(--f-display); font-weight: 300; font-size: 22px; color: var(--bone); margin: 0 0 4px; }
.v2 .v2-detail__price { font: 13px var(--f-mono); color: var(--lime); margin-bottom: 14px; }
.v2 .v2-detail__row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font: 12px var(--f-sans); color: var(--bone-2); }
.v2 .v2-cart__item { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.v2 .v2-cart__item .th { width: 50px; height: 50px; border-radius: 8px; background: var(--lime); }
.v2 .v2-cart__total { display: flex; justify-content: space-between; padding: 16px 0; border-top: 2px solid var(--bone); margin-top: 10px; font: 500 14px var(--f-sans); color: var(--bone); }
.v2 .v2-phone__back { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--f-mono); color: var(--bone-3); cursor: pointer; margin-bottom: 14px; }
.v2 .v2-phone__back:hover { color: var(--lime); }
.v2 .v2-phone__nav { position: absolute; bottom: 14px; left: 14px; right: 14px; height: 56px; background: rgba(20,20,20,0.95); backdrop-filter: blur(12px); border-radius: 18px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; z-index: 10; }
.v2 .v2-phone__nav button { background: none; border: 0; color: var(--bone-3); font: 10px var(--f-mono); cursor: pointer; padding: 6px; transition: color .2s; }
.v2 .v2-phone__nav button.active { color: var(--lime); }
.v2 .v2-ghost { position: absolute; pointer-events: none; z-index: 20; opacity: 0; transition: opacity .3s; }
.v2 .v2-ghost svg { width: 24px; height: 24px; }
.v2 .v2-ghost .lbl { display: block; margin-top: 6px; padding: 3px 7px; background: var(--lime); color: var(--lime-ink); font: 9px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; }

/* Audio waveform under phone */
.v2 .v2-proto__wave {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 30px; pointer-events: none;
}

/* ============================================================
   MOBILE FIXES (<=860px) — appended, page-scoped
   Bug 2 (cont.): the phone mock is a hard 320px wide (see .v2-phone
   above). On viewports where the content column is narrower than
   320px + gutters, that fixed width is what pushes Section 05 past
   the right edge. Cap the phone to the available width and let its
   height follow so the mock never overflows. The internal absolute
   layout is ratio-based, so scaling the frame keeps it intact.
   ============================================================ */
@media (max-width: 860px) {
  .v2 .v2-phone {
    width: 100%;
    max-width: 320px;   /* never larger than the design, never wider than the column */
    height: auto;
    aspect-ratio: 320 / 640;   /* preserve the original 320x640 phone proportions */
  }
  /* Keep the waveform aligned to the (now fluid) phone without spilling. */
  .v2 .v2-proto__wave { max-width: 100%; }
}