/* Bully Blast theme - reactive page. Ported from the approved Build 263 prototype (app/views/public.js "reactive" view stylesheet),
   scoped to main.bb-p-reactive. The prototype's own page nav, footer and prototype/simulation panels are not carried over. */
.bb-p-reactive{--char:#1c1c1e; --char-deep:#141416; --char-raise:#242427;
    --paper:#f4f3ee; --paper-dim:#a7a7a3; --yellow:#f3ea22; --yellow-hot:#f8f26b;
    --pouch:url('../../img/site/pouch.png'); --ink:#0c0c0d;
    --line:rgba(244,243,238,.14);}
.bb-p-reactive *{margin:0;padding:0;box-sizing:border-box;}
.bb-p-reactive{background:var(--char);color:var(--paper);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.bb-p-reactive .display{font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.92;}
.bb-p-reactive button{font-family:inherit;cursor:pointer;}
.bb-p-reactive a{color:inherit;text-decoration:none;}
.bb-p-reactive .wrap{max-width:1120px;margin:0 auto;padding:0 5vw;}
.bb-p-reactive .kick{color:var(--yellow);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;font-weight:800;}
.bb-p-reactive .hero{position:relative;min-height:88vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:20px;overflow:hidden;background:radial-gradient(120% 90% at 78% 42%,#26262b 0%,#161618 46%,#0f0f11 100%);}
.bb-p-reactive .hero .in{padding:120px 0 60px 5vw;position:relative;z-index:2;max-width:640px;}
.bb-p-reactive .hero h1{font-size:clamp(3rem,8vw,6.6rem);margin:14px 0 18px;}
.bb-p-reactive .hero h1 em{font-style:normal;color:var(--yellow);}
.bb-p-reactive .hero p{color:#d7d7d2;font-size:1.15rem;line-height:1.5;max-width:44ch;margin-bottom:28px;}
.bb-p-reactive .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.bb-p-reactive .btn{background:var(--yellow);color:var(--ink);border:none;border-radius:3px;padding:15px 28px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.86rem;}
.bb-p-reactive .btn:hover{background:var(--yellow-hot);}
.bb-p-reactive .btn.ghost{background:transparent;color:var(--paper);border:1.5px solid var(--line);}
.bb-p-reactive .btn.ghost:hover{border-color:var(--yellow);color:var(--yellow);}
.bb-p-reactive .hero .pouchwrap{position:relative;height:100%;min-height:60vh;}
.bb-p-reactive .hero .spot{position:absolute;inset:0;background:radial-gradient(closest-side,rgba(243,234,34,.16),transparent 70%);}
.bb-p-reactive .hero .pouch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(38vw,420px);aspect-ratio:480/623;background:var(--pouch) center/contain no-repeat;filter:drop-shadow(0 30px 44px rgba(0,0,0,.6));}
@media(max-width:820px){.bb-p-reactive .hero{grid-template-columns:1fr;min-height:auto;}
.bb-p-reactive .hero .pouchwrap{min-height:44vh;order:2;}
.bb-p-reactive .hero .in{order:1;padding-bottom:0;}}
.bb-p-reactive section{border-top:1px solid var(--line);}
.bb-p-reactive h2.sec{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3rem);margin:10px 0 8px;}
.bb-p-reactive .lead{color:var(--paper-dim);font-size:1.02rem;max-width:60ch;line-height:1.6;margin-bottom:40px;}
.bb-p-reactive .pad{padding:88px 0;}
.bb-p-reactive .how .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.bb-p-reactive .hstep{padding:0 26px;position:relative;}
.bb-p-reactive .hstep:not(:last-child)::after{content:"";position:absolute;right:-1px;top:14%;bottom:14%;width:1px;background:var(--line);}
.bb-p-reactive .hstep .art{height:120px;display:grid;place-items:center;margin-bottom:18px;}
.bb-p-reactive .hstep h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.25rem;margin-bottom:9px;}
.bb-p-reactive .hstep h3 .num{color:var(--yellow);margin-right:8px;}
.bb-p-reactive .hstep p{color:#cfcfca;font-size:.95rem;line-height:1.6;}
.bb-p-reactive .art .tub{width:44px;height:52px;border-radius:6px 6px 8px 8px;background:linear-gradient(#3a3a40,#2a2a2f);border:1px solid rgba(244,243,238,.16);position:relative;}
.bb-p-reactive .art .tub::before{content:"";position:absolute;left:8px;right:8px;top:-6px;height:8px;border-radius:4px;background:#45454c;}
.bb-p-reactive .art .two{display:flex;gap:12px;}
.bb-p-reactive .art .two .tub:nth-child(2){background:linear-gradient(#403a24,#2c2a1c);}
.bb-p-reactive .art .mix{position:relative;}
.bb-p-reactive .art .mix .tub{width:52px;height:60px;background:linear-gradient(#4a441f,#2f2c18);}
.bb-p-reactive .art .mix i{position:absolute;top:6px;width:3px;height:14px;border-radius:2px;background:var(--yellow);opacity:.8;}
.bb-p-reactive .art .mix i:nth-child(2){left:-14px;transform:rotate(-18deg);}
.bb-p-reactive .art .mix i:nth-child(3){right:-14px;transform:rotate(18deg);}
.bb-p-reactive .art .burst{width:96px;height:96px;background:var(--splat) center/contain no-repeat;filter:drop-shadow(0 0 16px rgba(243,234,34,.4));}
.bb-p-reactive .exp{background:var(--char-deep);}
.bb-p-reactive .exp .in{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;padding:88px 5vw;max-width:1120px;margin:0 auto;}
.bb-p-reactive .exp h2{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:.94;margin:10px 0 12px;}
.bb-p-reactive .exp h2 em{font-style:normal;color:var(--yellow);}
.bb-p-reactive .exp p{color:#c9c9c4;font-size:1.02rem;line-height:1.6;max-width:38ch;}
.bb-p-reactive .exp .frame{position:relative;aspect-ratio:16/10;background:#0c0c0e;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.bb-p-reactive .exp canvas{position:absolute;inset:0;width:100%;height:100%;}
.bb-p-reactive .exp .replay{position:absolute;bottom:12px;right:12px;background:rgba(243,234,34,.9);color:var(--ink);border:none;border-radius:3px;padding:8px 14px;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;}
@media(max-width:820px){.bb-p-reactive .exp .in{grid-template-columns:1fr;}}
.bb-p-reactive .lineup .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.bb-p-reactive .lcard{background:var(--char-raise);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,border-color .16s;}
.bb-p-reactive .lcard:hover{transform:translateY(-4px);border-color:rgba(243,234,34,.5);}
.bb-p-reactive .lcard .top{position:relative;display:grid;place-items:center;padding:26px 20px 14px;background:radial-gradient(90% 70% at 50% 26%,#2c2c31,#1d1d20);}
.bb-p-reactive .lcard .top .pk{height:150px;aspect-ratio:480/623;background:var(--pouch) center/contain no-repeat;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));}
.bb-p-reactive .lcard .tag{position:absolute;top:12px;left:12px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:.6rem;letter-spacing:.08em;padding:4px 8px;text-transform:uppercase;}
.bb-p-reactive .lcard .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.bb-p-reactive .lcard h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.2rem;}
.bb-p-reactive .lcard .sub{color:var(--yellow);font-size:.82rem;font-weight:700;margin:2px 0 14px;}
.bb-p-reactive .lcard .spec{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;padding:8px 0;border-top:1px solid var(--line);}
.bb-p-reactive .lcard .spec .k{color:var(--paper-dim);}
.bb-p-reactive .lcard .spec .v{font-weight:600;text-align:right;}
.bb-p-reactive .lcard .shop{margin-top:18px;background:var(--yellow);color:var(--ink);border:none;border-radius:3px;padding:12px;text-align:center;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;}
.bb-p-reactive .lcard .shop:hover{background:var(--yellow-hot);}
@media(max-width:820px){.bb-p-reactive .lineup .grid{grid-template-columns:1fr;}}
.bb-p-reactive .inst{background:var(--char-deep);}
.bb-p-reactive .isteps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.bb-p-reactive .istep{border-top:3px solid var(--yellow);padding-top:16px;}
.bb-p-reactive .istep .n{font-family:'Anton',sans-serif;font-size:1.1rem;color:var(--paper-dim);}
.bb-p-reactive .istep h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.35rem;margin:4px 0 8px;}
.bb-p-reactive .istep p{color:#cfcfca;font-size:.95rem;line-height:1.6;}
.bb-p-reactive .inst .safelink{margin-top:30px;color:var(--paper-dim);font-size:.92rem;}
.bb-p-reactive .inst .safelink a{color:var(--yellow);text-decoration:underline;}
@media(max-width:760px){.bb-p-reactive .isteps{grid-template-columns:1fr;}}
.bb-p-reactive .final{text-align:center;padding:88px 0;}
.bb-p-reactive .final h2{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,6vw,4rem);line-height:.94;}
.bb-p-reactive .final p{color:var(--paper-dim);margin:12px 0 26px;}
.bb-p-reactive .final .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
@media(max-width:820px){.bb-p-reactive .steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.bb-p-reactive .steps{grid-template-columns:1fr;gap:26px;}
.bb-p-reactive .hstep{padding:0;}
.bb-p-reactive .hstep:not(:last-child)::after{right:auto;left:0;top:auto;bottom:-13px;width:100%;height:1px;}
.bb-p-reactive .hstep .art{height:96px;margin-bottom:12px;}}

/* ---- production additions (Build 298): the lineup shows the real catalog - its own product image, line, short text and price ---- */
.bb-p-reactive .lcard .top .pk-img{height:150px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5));}
.bb-p-reactive .lcard .short{color:var(--paper-dim);font-size:.86rem;line-height:1.55;margin:0 0 12px;}
.bb-p-reactive .lineup-empty{margin-top:28px;color:var(--paper-dim);border:1px dashed var(--line);padding:22px;max-width:640px;}
.bb-p-reactive .safelink + .safelink{margin-top:8px;}