.vn-bb{padding:var(--sp-8) 0 var(--sp-20)}.vn-bb__header{margin-bottom:var(--sp-10)}.vn-bb__breadcrumb{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);color:var(--vn-text-muted);margin-bottom:var(--sp-4)}.vn-bb__breadcrumb a{color:var(--vn-text-muted)}.vn-bb__breadcrumb a:hover{color:var(--vn-dark)}.vn-bb__title{font-size:clamp(1.8rem,3vw,var(--text-4xl));margin-bottom:var(--sp-3)}.vn-bb__desc{font-size:var(--text-base);color:var(--vn-text-muted);max-width:55ch;margin:0}.vn-bb__layout{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,5vw,5rem);align-items:start}.vn-bb__visual{position:sticky;top:100px;display:flex;flex-direction:column;align-items:center}.vn-bb__box{width:260px;height:300px;position:relative;perspective:900px;margin-bottom:var(--sp-4)}.vn-bb__box-body{width:220px;height:240px;position:absolute;bottom:0;left:20px;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(12deg);transition:transform .5s var(--ease-out)}.vn-bb__box-front{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(165deg,#d4b896,#c9a87a);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-6);box-shadow:0 12px 40px #0000002e}.vn-bb__box-side{position:absolute;top:6px;right:-32px;width:32px;height:100%;background:linear-gradient(to bottom,#b8935a,#a07840);transform:skewY(-45deg) translateY(-3px);border-radius:0 var(--radius-sm) var(--radius-sm) 0}.vn-bb__box-top{position:absolute;top:-24px;left:8px;right:-24px;height:28px;background:linear-gradient(to right,#e5c99a,#d4b278);transform:skew(-45deg);border-radius:var(--radius-sm) var(--radius-sm) 0 0}.vn-bb__box-brand{font-family:var(--font-heading-family);font-size:1.1rem;font-weight:700;color:#1d1d1dbf;letter-spacing:.06em;text-transform:uppercase}.vn-bb__box-sub{font-size:var(--text-xs);color:#1d1d1d8c;letter-spacing:.08em;text-transform:uppercase}.vn-bb__box-jars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-3);width:100%}.vn-bb__jar{display:flex;flex-direction:column;align-items:center;opacity:.2;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);transform:translateY(6px)}.vn-bb__jar.is-filled{opacity:1;transform:translateY(0)}.vn-bb__jar-lid{width:22px;height:6px;background:var(--vn-dark);border-radius:2px 2px 0 0}.vn-bb__jar-body{width:22px;height:28px;background:#ffffffa6;border-radius:0 0 4px 4px;border:1px solid rgba(0,0,0,.12);overflow:hidden;position:relative}.vn-bb__jar-img{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center top;opacity:0;transition:opacity .4s ease}.vn-bb__jar.is-filled .vn-bb__jar-img{opacity:1}.vn-bb__box-lid{position:absolute;top:0;left:20px;width:220px;z-index:2;transform-origin:top;transform:rotateX(0);transition:transform .7s cubic-bezier(.34,1.2,.64,1);perspective:900px}.vn-bb__box-lid-front{height:70px;background:linear-gradient(165deg,#dfc4a0,#c9a87a);border-radius:var(--radius-sm) var(--radius-sm) 0 0;box-shadow:0 -4px 12px #0000001a;border:1px solid rgba(0,0,0,.07);border-bottom:none}.vn-bb__box-lid-top{height:20px;background:linear-gradient(to right,#e5c99a,#d4b278);transform:skew(-45deg) translate(6px);transform-origin:top left;border-radius:0 var(--radius-sm) 0 0}.vn-bb__box.is-open .vn-bb__box-lid{transform:perspective(900px) rotateX(-130deg)}.vn-bb__box-hint{font-size:var(--text-sm);color:var(--vn-text-muted);text-align:center;margin:0;min-height:1.5em;transition:color .3s}.vn-bb__config{display:flex;flex-direction:column;gap:var(--sp-8)}.vn-bb__step-label{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-sm);font-weight:600;margin-bottom:var(--sp-4);color:var(--vn-dark)}.vn-bb__step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--vn-dark);color:#fff;font-size:var(--text-xs);font-weight:700;flex-shrink:0}.vn-bb__step-progress{margin-left:auto;font-weight:400;color:var(--vn-text-muted);font-size:var(--text-xs)}.vn-bb__slots{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.vn-bb__slot{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:68px;padding:var(--sp-2) var(--sp-3);border:1.5px solid var(--vn-border);border-radius:var(--radius-md);background:#fff;cursor:pointer;font-family:inherit;color:var(--vn-dark);transition:border-color var(--dur-base),background var(--dur-base),transform var(--dur-fast)}.vn-bb__slot:hover{border-color:var(--vn-dark);transform:translateY(-1px)}.vn-bb__slot.is-active{border-color:var(--vn-dark);background:var(--vn-dark);color:#fff}.vn-bb__slot.is-filled{border-color:var(--vn-green-deep);background:#c6d4c133}.vn-bb__slot.is-filled.is-active{border-color:var(--vn-dark);background:var(--vn-dark);color:#fff}.vn-bb__slot-thumb{display:none;width:32px;height:32px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}.vn-bb__slot-thumb img{width:100%;height:100%;object-fit:contain;background:var(--vn-cream)}.vn-bb__slot.is-filled .vn-bb__slot-thumb{display:block}.vn-bb__slot-num{font-size:var(--text-xs);font-weight:700;opacity:.5}.vn-bb__slot-name{font-size:10px;font-weight:500;line-height:1.3;text-align:center;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vn-bb__slot.is-active.is-filled{cursor:pointer;position:relative}.vn-bb__slot.is-active.is-filled:after{content:"\d7";position:absolute;top:3px;right:5px;font-size:12px;opacity:.6;line-height:1}.vn-bb__price-per-jar{font-size:var(--text-xs);color:var(--vn-text-muted);margin:calc(var(--sp-4) * -1) 0 var(--sp-3)}.vn-bb__spreads{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}.vn-bb__spread{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2) var(--sp-2);border:1.5px solid var(--vn-border);border-radius:var(--radius-md);background:#fff;cursor:pointer;font-family:inherit;color:var(--vn-dark);transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-fast);text-align:center}.vn-bb__spread:hover{border-color:var(--vn-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.vn-bb__spread.is-selected{border-color:var(--vn-green-deep);background:#c6d4c126}.vn-bb__spread img,.vn-bb__spread-placeholder{width:80px;height:80px;border-radius:var(--radius-sm);object-fit:contain;background:var(--vn-cream);display:block}.vn-bb__spread-placeholder{background:var(--vn-surface-alt)}.vn-bb__spread-title{font-size:11px;font-weight:500;line-height:1.4;color:var(--vn-dark)}.vn-bb__spread-price{font-size:10px;font-weight:700;color:var(--vn-text-muted);font-family:var(--font-heading-family)}.vn-bb__spread-check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--vn-green-deep);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity var(--dur-base),transform var(--dur-base) cubic-bezier(.34,1.56,.64,1)}.vn-bb__spread.is-selected .vn-bb__spread-check{opacity:1;transform:scale(1)}.vn-bb__cta-wrap{border-top:1px solid var(--vn-border);padding-top:var(--sp-6)}.vn-bb__price-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-1)}.vn-bb__price-label{font-size:var(--text-sm);color:var(--vn-text-muted)}.vn-bb__price-value{font-size:var(--text-2xl);font-weight:700}.vn-bb__tax-note{font-size:var(--text-xs);color:var(--vn-text-muted);margin:0 0 var(--sp-5)}.vn-bb__tax-note a{text-decoration:underline}#bb-submit:disabled{opacity:.45;cursor:not-allowed}.vn-bb__no-spreads{font-size:var(--text-sm);color:var(--vn-text-muted);padding:var(--sp-4);background:var(--vn-surface-alt);border-radius:var(--radius-md)}@media(max-width:899px){.vn-bb__layout{grid-template-columns:1fr}.vn-bb__visual{position:static}.vn-bb__box{width:200px;height:240px}.vn-bb__box-body{width:170px;height:190px}.vn-bb__box-lid{width:170px}.vn-bb__spreads{grid-template-columns:repeat(3,1fr)}}@media(max-width:479px){.vn-bb__spreads{grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}.vn-bb__spread img,.vn-bb__spread-placeholder{width:60px;height:60px}.vn-bb__slots{gap:var(--sp-1)}.vn-bb__slot{min-width:52px;padding:var(--sp-2)}}.vn-bb__summary{width:100%;max-width:280px;margin-top:var(--sp-5);background:var(--vn-cream);border:1px solid var(--vn-border);border-radius:var(--radius-md);padding:var(--sp-4);opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.vn-bb__summary.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}.vn-bb__summary-title{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vn-text-muted);margin:0 0 var(--sp-3)}.vn-bb__summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.vn-bb__summary-item{display:flex;align-items:center;gap:var(--sp-2);font-size:11px}.vn-bb__summary-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--vn-dark);color:#fff;font-size:9px;font-weight:700;flex-shrink:0}.vn-bb__summary-item img{width:28px;height:28px;border-radius:3px;object-fit:contain;background:#fff;flex-shrink:0}.vn-bb__summary-name{flex:1;font-weight:500;color:var(--vn-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vn-bb__summary-price{font-family:var(--font-heading-family);font-weight:700;color:var(--vn-text-muted);flex-shrink:0}.vn-bb .vn-product__abo-toggle{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--vn-border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--sp-5)}.vn-bb .vn-abo-opt{display:flex;flex-direction:column;align-items:flex-start;padding:var(--sp-3) var(--sp-4);cursor:pointer;background:var(--vn-white);transition:background var(--dur-base);position:relative;border-right:1px solid var(--vn-border);gap:3px}.vn-bb .vn-abo-opt:last-child{border-right:none}.vn-bb .vn-abo-opt input[type=radio]{display:none}.vn-bb .vn-abo-opt.is-active{background:#3d5c3a0d}.vn-bb .vn-abo-opt.is-active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--vn-green-deep)}.vn-bb .vn-abo-opt__label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vn-text-muted)}.vn-bb .vn-abo-opt__badge{font-size:9px;font-weight:700;background:var(--vn-orange);color:var(--vn-dark);padding:2px 6px;border-radius:2px;letter-spacing:.1em;align-self:flex-start}.vn-bb__trust-bar{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);justify-content:center;padding:var(--sp-4) var(--sp-6);background:var(--vn-green);border-radius:var(--radius-md);margin-bottom:var(--sp-8)}.vn-bb__trust-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:600;color:var(--vn-dark);letter-spacing:.04em}.vn-bb__steps-how{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-bottom:var(--sp-10);padding:var(--sp-6);background:var(--vn-warm-white);border:1px solid var(--vn-border);border-radius:var(--radius-lg)}.vn-bb__how-step{text-align:center;flex:1}.vn-bb__how-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--vn-dark);color:var(--vn-warm-white);font-size:var(--text-sm);font-weight:700;margin-bottom:var(--sp-2)}.vn-bb__how-label{font-size:var(--text-sm);font-weight:700;color:var(--vn-dark);margin:0 0 var(--sp-1)}.vn-bb__how-sub{font-size:11px;color:var(--vn-text-muted);margin:0}.vn-bb__how-arrow{font-size:1.2rem;color:var(--vn-text-muted);flex-shrink:0}@media(max-width:600px){.vn-bb__steps-how{flex-direction:column;gap:var(--sp-3)}.vn-bb__how-arrow{transform:rotate(90deg)}}.vn-bb__spread-img-wrap{position:relative;width:80px;height:80px;flex-shrink:0}.vn-bb__spread-img-wrap img{width:100%;height:100%;object-fit:contain}.vn-bb__spread-badge{position:absolute;top:-6px;left:-6px;font-size:9px;font-weight:700;background:var(--vn-orange);color:var(--vn-dark);padding:2px 5px;border-radius:3px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;z-index:1}.vn-bb__spread-flavor{font-size:9px;color:var(--vn-text-muted);text-align:center;line-height:1.2;margin-top:-4px}.vn-bb__visual-usps{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-4)}.vn-bb__visual-usp{font-size:var(--text-xs);color:var(--vn-text-muted);margin:0}.vn-bb__partners{margin-top:var(--sp-16);text-align:center;padding:var(--sp-8) 0;border-top:1px solid var(--vn-border)}.vn-bb__partners-label{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--vn-text-muted);margin-bottom:var(--sp-4)}.vn-bb__partners-list{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);justify-content:center;align-items:center}.vn-bb__partner-logo-wrap{display:flex;align-items:center;justify-content:center;padding:var(--sp-2) var(--sp-3);border:1px solid var(--vn-border);border-radius:var(--radius-md);background:#fff;transition:border-color .2s,box-shadow .2s}.vn-bb__partner-logo-wrap:hover{border-color:var(--vn-dark);box-shadow:0 2px 8px #00000014}.vn-bb__partner-logo-wrap img{width:80px;height:44px;object-fit:contain;filter:grayscale(40%);transition:filter .2s}.vn-bb__partner-logo-wrap:hover img{filter:grayscale(0%)}.vn-bb__partners-more{display:block;margin-top:var(--sp-4);font-size:var(--text-xs);color:var(--vn-text-muted);text-decoration:underline;text-underline-offset:3px}.vn-bb__partners-more:hover{color:var(--vn-dark)}.vn-bb__cta-wrap .shopify-payment-button{margin-top:var(--sp-3)}.vn-bb__cta-wrap .shopify-payment-button__button{border-radius:var(--radius-md)!important;min-height:44px!important}.vn-bb__testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8);padding-bottom:var(--sp-12)}@media(max-width:768px){.vn-bb__testimonials{grid-template-columns:1fr}}.vn-bb__testimonial{background:var(--vn-warm-white);border:1px solid var(--vn-border);border-radius:var(--radius-lg);padding:var(--sp-5)}.vn-bb__testimonial-stars{font-size:1rem;color:var(--vn-orange);margin-bottom:var(--sp-2);letter-spacing:2px}.vn-bb__testimonial-text{font-size:var(--text-sm);line-height:1.6;color:var(--vn-dark);margin:0 0 var(--sp-3)}.vn-bb__testimonial-author{font-size:var(--text-xs);color:var(--vn-text-muted);margin:0;font-weight:600}.vn-bb .vn-abo-opt__hint{font-size:10px;color:var(--vn-text-muted);line-height:1.3}
/*# sourceMappingURL=/cdn/shop/t/12/assets/section-box-builder.css.map */