/* 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;
}
