/* LAUNCH-SOON MODE, 2026-10-07. inc/launch-soon.php.
   The bottom sheet he picked (option B) and the disabled buy button (D).
   Sizes are read off the approved mockups B.html and D.html. Five mockup greys
   were not brand tokens, so each is the nearest locked token in tokens.json:
   sheet and field ground hp-card #131313, button ground and sheet edge
   hp-ring-track #1e1e1e, field edge charcoal #3a3a39, fine print caption grey
   #8a8a89. Orange is #df7127 only: the full stop and the one button. */

@font-face{font-family:Century;src:url('../fonts/v5p-century-bold-w2.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/v5p-inter-var-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* ---------- the buy button while the till is shut ----------
   2026-10-07, second pass: active, not grey. Orange outline and orange words on
   obsidian, so it can never be mistaken for a real buy button (which is filled). */
.vp-soon-wrap{position:relative;display:inline-block;flex:0 0 auto;vertical-align:middle}
.vp-soon{height:52px;padding:0 22px;border-radius:999px;border:1px solid #df7127;background:#0a0a0a;
  color:#df7127;font:700 16px/1 Inter,'Helvetica Neue',Helvetica,sans-serif;letter-spacing:0;text-transform:none;
  cursor:pointer;white-space:nowrap;text-align:center;display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;margin:0;box-shadow:none;transition:background .16s ease}
.vp-soon:hover{background:#131313}
.vp-soon:active{background:#1e1e1e}
.vp-soon:focus{outline:none}
.vp-soon:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px}
.vp-soon--stack{flex-direction:column;gap:3px;padding:0 20px}
.vp-soon--stack small{font:600 11px/1 Inter,'Helvetica Neue',Helvetica,sans-serif;color:#a3aaab;letter-spacing:.02em}
.vp-soon--stack span{font:700 15px/1 Inter,'Helvetica Neue',Helvetica,sans-serif}
.vp-soon--block{display:block;width:100%}
.vp-soon--block .vp-soon{width:100%;height:56px}
.vp-soon--bar .vp-soon{height:52px}

.vp-soon-tip{position:absolute;right:0;bottom:calc(100% + 10px);z-index:80;white-space:nowrap;
  background:#f5f5f5;color:#0a0a0a;font:600 13px/1.2 Inter,'Helvetica Neue',Helvetica,sans-serif;
  padding:9px 12px;border-radius:10px;letter-spacing:0;text-transform:none;
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.vp-soon--block .vp-soon-tip{right:auto;left:50%;transform:translate(-50%,4px)}
.vp-soon-wrap:hover .vp-soon-tip,.vp-soon:focus-visible + .vp-soon-tip,.vp-soon-wrap.is-tip .vp-soon-tip{opacity:1;transform:translateY(0)}
.vp-soon--block:hover .vp-soon-tip,.vp-soon--block .vp-soon:focus-visible + .vp-soon-tip,.vp-soon--block.is-tip .vp-soon-tip{transform:translate(-50%,0)}
@media (hover:none){.vp-soon-wrap:hover:not(.is-tip) .vp-soon-tip{opacity:0}}

/* the menu's cart button sits in the drawer's own padding */
.vp-soon--drawer{margin:16px 14px 0;width:auto}

/* the same bubble for the cart icon and any cart link, placed by the script */
.vp-soon-float{position:fixed;z-index:10000;white-space:nowrap;background:#f5f5f5;color:#0a0a0a;
  font:600 13px/1.2 Inter,'Helvetica Neue',Helvetica,sans-serif;padding:9px 12px;border-radius:10px;
  pointer-events:none;opacity:0;transition:opacity .16s ease}
.vp-soon-float.is-on{opacity:1}

/* nothing can be in a basket, so the floating basket never shows */
.vp-launch-soon .vcart{display:none!important}

/* ---------- the bottom sheet ---------- */
.vp-sheet-veil{position:fixed;inset:0;z-index:9998;background:rgba(10,10,10,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.vp-sheet-veil.is-open{opacity:1}
.vp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9999;margin:0 auto;max-width:520px;box-sizing:border-box;
  background:#131313;border-top:1px solid #1e1e1e;border-radius:28px 28px 0 0;
  padding:12px 20px calc(30px + env(safe-area-inset-bottom));
  font-family:Inter,'Helvetica Neue',Helvetica,sans-serif;color:#f5f5f5;
  transform:translateY(105%);transition:transform .42s cubic-bezier(.2,.8,.2,1);touch-action:pan-y;outline:none}
.vp-sheet.is-open{transform:translateY(0)}
.vp-sheet.is-drag{transition:none}
@media (min-width:560px){.vp-sheet{border-left:1px solid #1e1e1e;border-right:1px solid #1e1e1e}}
.vp-sheet *,.vp-sheet *::before,.vp-sheet *::after{box-sizing:border-box}
.vp-sheet[hidden],.vp-sheet-veil[hidden],.vp-sheet [hidden]{display:none!important}

.vp-sheet-grab{width:40px;height:5px;border-radius:3px;background:#3a3a39;margin:0 auto 24px}
.vp-sheet-x{position:absolute;top:4px;right:10px;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:rgba(245,245,245,.08);color:#f5f5f5;font:400 20px/36px Inter,sans-serif;text-align:center;cursor:pointer}
.vp-sheet-x:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px}

.vp-sheet-ask,.vp-sheet-done{display:grid;gap:14px}
.vp-sheet-head{display:flex;gap:14px;align-items:center}
.vp-sheet-head img{width:76px;height:76px;flex:0 0 76px;object-fit:cover;border-radius:14px;display:block;margin:0}
.vp-sheet h2{font:700 26px/1.05 Century,'Century Gothic','URW Gothic',sans-serif;color:#f5f5f5;margin:0;
  letter-spacing:-.01em;text-transform:none;text-align:left}
.vp-sheet .vp-o{color:#df7127}
.vp-sheet p{margin:0;font-family:Inter,'Helvetica Neue',Helvetica,sans-serif;letter-spacing:0;text-transform:none;text-align:left}
.vp-sheet .vp-sheet-meta{font-size:13px;line-height:1.45;color:#a3aaab;margin-top:4px}
.vp-sheet .vp-sheet-body{font-size:15px;line-height:1.45;color:#a3aaab}
.vp-sheet-form{display:grid;gap:14px;margin:0}
.vp-sheet input[type=email]{display:block;width:100%;height:52px;margin:0;border-radius:12px;border:1px solid #3a3a39;
  background:#131313;color:#f5f5f5;font:16px Inter,'Helvetica Neue',Helvetica,sans-serif;padding:0 16px;box-shadow:none;-webkit-appearance:none;appearance:none}
.vp-sheet input[type=email]::placeholder{color:#8a8a89;opacity:1}
.vp-sheet input[type=email]:focus{outline:none;border-color:#df7127}
.vp-sheet-go{display:block;width:100%;height:54px;margin:0;border:0;border-radius:999px;background:#df7127;color:#0a0a0a;
  font:700 17px Inter,'Helvetica Neue',Helvetica,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer}
.vp-sheet-go:focus-visible{outline:2px solid #f5f5f5;outline-offset:2px}
.vp-sheet-go[aria-busy=true]{opacity:.7;cursor:progress}
.vp-sheet .vp-sheet-err{font-size:14px;line-height:1.4;color:#f5f5f5}
.vp-sheet .vp-sheet-fine{font-size:12px;line-height:1.4;color:#8a8a89;text-align:center}
.vp-sheet-done{padding:6px 0 10px;cursor:pointer}
.vp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){.vp-sheet,.vp-sheet-veil,.vp-soon-tip,.vp-soon-float{transition:none}}
