/* 3C blog buy box + sticky bar — preview (?bb=3c), owner 2026-11-05. Same look as the /test/ shop card. */
.bb3{position:relative;max-width:520px;margin:18px auto 26px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(12,16,32,.05),0 18px 40px -22px rgba(11,24,87,.30);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;text-align:center;padding:0 18px 16px;cursor:pointer;color:#0C1020}
.bb3 a{text-decoration:none!important}
.bb3__stk{position:absolute;top:12px;left:16px;z-index:3;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#16794a}
.bb3__stk i{position:relative;width:8px;height:8px;border-radius:50%;background:#1FB46A}
.bb3__stk i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1FB46A;animation:bb3Pulse 1.8s ease-out infinite}
@keyframes bb3Pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.bb3__stk i::after{animation:none}}
.bb3__best{position:absolute;top:0;right:0;z-index:3;border-radius:0 22px 0 14px;padding:8px 16px 8px 14px;background:linear-gradient(135deg,#E2B547 0%,#B8902A 100%);color:#0b1857;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 4px 12px rgba(184,144,42,.30)}
[dir="rtl"] .bb3__stk{left:auto;right:16px}
[dir="rtl"] .bb3__best{right:auto;left:0;border-radius:22px 0 14px 0}
.bb3__img{display:block;padding:30px 8px 0}
.bb3__img img{display:block;width:100%;max-width:440px;margin:0 auto;aspect-ratio:16/10;object-fit:contain;border:0!important;box-shadow:none!important;border-radius:0!important;background:none!important}
.bb3__name{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#0C1020!important;margin-top:2px}
.bb3__name i{font-style:normal;color:#7C8298;font-weight:600;font-size:15px;white-space:nowrap}
.bb3__pr{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.bb3__pr b{font-size:23px;color:#16794a;font-weight:800;white-space:nowrap}
.bb3__was{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.bb3__was s{font-size:14px;color:#c0392b;font-weight:600;text-decoration-thickness:1.5px;white-space:nowrap}
.bb3__was em{font-style:normal;font-size:13px;font-weight:800;color:#c0392b}
.bb3__trust{display:flex;margin-top:10px;border:1px solid #E6E9F1;border-radius:12px;overflow:hidden}
.bb3__trust>div{flex:1;padding:7px 6px;font-size:11.5px;font-weight:600;color:#394058;line-height:1.25}
.bb3__trust>div+div{border-inline-start:1px solid #E6E9F1}
.bb3__trust b{display:flex;align-items:center;justify-content:center;gap:3px;height:20px;font-size:14px;color:#0C1020;font-weight:800;margin-bottom:1px;white-space:nowrap}
.bb3__trust .hp b{color:#16794a}
.bb3__st{color:#C9A13B}
.bb3__sold::before{content:"";display:inline-block;width:12px;height:13px;margin-inline-end:3px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F26B1D' d='M13.5 1.5s.9 3.2-1.3 6.1C10.6 9.8 9 10.9 9 13.4a3 3 0 0 0 6 .3c1.3 1.3 2 3 2 4.6 0 3.2-2.6 5.2-5.4 5.2C7.9 23.5 5 20.6 5 16.8c0-4.7 3.4-6.9 5-10 .6 1.5.4 3 .4 3S14.6 7.6 13.5 1.5z'/%3E%3C/svg%3E")}
.bb3__rv{margin-top:2px;background:#FAFBFD;border-radius:12px;padding:9px 13px;text-align:start;transition:opacity .3s}
.bb3__rv.out{opacity:0}
.bb3__rt{margin:0!important;font-size:13px;line-height:1.5;color:#394058;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb3__rm{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:11px;color:#7C8298;margin-top:3px}
.bb3__rm .s{color:#C9A13B;letter-spacing:1px}
.bb3__rm .v{display:inline-flex;align-items:center;gap:3px;color:#1D7BF2;font-weight:600}
.bb3__btns{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;margin-top:2px}
.bb3__trust+.bb3__rv[hidden]+.bb3__btns{margin-top:11px}
.bb3__add{height:52px;border-radius:13px;border:1.5px solid #C9D1EA;color:#0b1857;font:700 14.5px/1 Inter,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;cursor:pointer}
.bb3__buy{height:52px;border:0;border-radius:13px;color:#fff;font:700 15px/1 Inter,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#0b1857 0%,#1C3FCB 100%);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 12px 24px -8px rgba(28,63,203,.45);cursor:pointer}
.bb3__line{margin-top:10px;font-size:12px;font-weight:600;color:#394058}
.bb3__wa{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:#16794a!important}
.bb3__note{margin-top:4px;font-size:11px;color:#9AA0B4}
/* sticky bar: hidden until 20% of the page is scrolled, back off above 15% */
.bb3s{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:center;gap:12px;background:#fff;border-top:1px solid #E6E9F2;box-shadow:0 -12px 30px rgba(11,24,87,.1);padding:10px 14px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif}
.bb3s.on{transform:none}
.bb3s img{flex:none;width:44px;height:44px;object-fit:contain;border-radius:10px;border:1px solid #EEF0F5;background:#fff}
.bb3s__p{flex:1;min-width:0;text-align:start;line-height:1.15}
.bb3s__p span{display:block;font-size:13.5px;font-weight:700;color:#0C1020;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.bb3s__p span i{font-style:normal;color:#7C8298;font-weight:600}
.bb3s__p b{font-size:17px;color:#16794a;font-weight:800}
.bb3s .bb3__buy{flex:none;height:46px;padding:0 20px}
/* the old sticky bar and buy box never show together with the preview */
.rv-sticky,.rv-buybox{display:none!important}
/* desktop too (owner 2026-11-06): the WhatsApp button sits above the bottom buy bar, never on its Buy now button */
body:has(.bb3s.on) .rv-wa-fab{bottom:92px!important;transition:bottom .25s ease}
@media (max-width:720px){body:has(.bb3s.on) .rv-wa-fab{bottom:calc(92px + env(safe-area-inset-bottom))!important}}