.sample-box-builder{--sample-box-border: rgba(var(--color-foreground), .12);--sample-box-soft-bg: rgba(var(--color-foreground), .04);--sample-box-shadow: 0 24px 60px rgba(2, 33, 110, .12);--sample-box-radius: 28px;padding:48px 0}.sample-box-builder__component{display:block}.sample-box-builder__layout{display:grid;gap:32px;align-items:start}.sample-box-builder__visual,.sample-box-builder__panel{min-width:0}.sample-box-builder__visual-shell,.sample-box-builder__panel{background:rgb(var(--color-background));border:1px solid var(--sample-box-border);border-radius:var(--sample-box-radius);box-shadow:var(--sample-box-shadow)}.sample-box-builder__visual-shell{display:grid;gap:16px;padding:18px}.sample-box-builder__thumbs{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.sample-box-builder__thumb{width:72px;height:72px;border:2px solid transparent;border-radius:18px;overflow:hidden;background:var(--sample-box-soft-bg);padding:0;cursor:pointer;flex:0 0 auto;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.sample-box-builder__thumb.is-active{border-color:rgb(var(--color-button-primary-border));box-shadow:0 0 0 4px rgba(var(--color-button-primary-border),.14)}.sample-box-builder__thumb:hover{transform:translateY(-2px)}.sample-box-builder__thumb-image,.sample-box-builder__stage-image,.sample-box-builder__product-image{width:100%;height:100%;object-fit:cover;display:block}.sample-box-builder__thumb-placeholder,.sample-box-builder__product-placeholder,.sample-box-builder__stage-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#5bb5e82e,#02216e1a);color:rgb(var(--color-foreground));font-weight:700}.sample-box-builder__stage{position:relative;display:grid;gap:20px}.sample-box-builder__stage-badge{position:absolute;top:16px;right:16px;z-index:1;display:inline-flex;gap:4px;align-items:center;padding:8px 14px;border-radius:999px;background:#ffffffeb;color:#02216e;font-size:1.2rem;font-weight:700;box-shadow:0 12px 30px #02216e2e}.sample-box-builder__stage-media{min-height:360px;border-radius:calc(var(--sample-box-radius) - 8px);overflow:hidden;background:linear-gradient(180deg,#d6f4ff,#edfaff)}.sample-box-builder__stage-image,.sample-box-builder__stage-placeholder{height:100%;min-height:360px}.sample-box-builder__stage-copy{display:grid;gap:8px;padding:0 8px 8px}.sample-box-builder__stage-eyebrow,.sample-box-builder__eyebrow,.sample-box-builder__status-label{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;font-weight:700;color:rgba(var(--color-foreground),.65)}.sample-box-builder__stage-title,.sample-box-builder__heading{margin:0;color:#02216e;line-height:1}.sample-box-builder__stage-title{font-size:clamp(2.8rem,5vw,5.6rem)}.sample-box-builder__heading{font-size:clamp(3rem,4vw,4.6rem)}.sample-box-builder__stage-caption,.sample-box-builder__subheading,.sample-box-builder__description,.sample-box-builder__product-caption,.sample-box-builder__status-text{margin:0;color:rgba(var(--color-foreground),.72)}.sample-box-builder__subheading,.sample-box-builder__description{font-family:var(--font-subheading-support);font-style:normal;font-weight:700}.sample-box-builder__panel{padding:28px;position:sticky;top:24px;display:grid;gap:18px}.sample-box-builder__description p{margin:0}.sample-box-builder__status{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:20px;background:var(--sample-box-soft-bg)}.sample-box-builder__status-count{display:inline-flex;gap:4px;align-items:baseline;font-size:2.1rem;font-weight:800;color:#02216e;white-space:nowrap}.sample-box-builder__products{display:grid;gap:14px}.sample-box-builder__product{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--sample-box-border);border-radius:22px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.sample-box-builder__product:not(.is-disabled):hover{background:#02216e;border-color:#02216e}.sample-box-builder__product.is-selected,.sample-box-builder__product.is-preview-active{border-color:#02216e40;box-shadow:0 14px 32px #02216e14}.sample-box-builder__product.is-disabled{opacity:.55}.sample-box-builder__product-main{display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px;align-items:center;background:transparent;border:0;padding:0;cursor:pointer;text-align:left;color:inherit}.sample-box-builder__product-media{width:68px;height:68px;border-radius:18px;overflow:hidden;background:var(--sample-box-soft-bg)}.sample-box-builder__product-copy{display:grid;gap:4px}.sample-box-builder__product-title{font-size:1.6rem;font-weight:700;color:#02216e}.sample-box-builder__product-title,.sample-box-builder__product-caption,.sample-box-builder__qty-button,.sample-box-builder__qty-input,.sample-box-builder__product-main{transition:color .2s ease}.sample-box-builder__product:not(.is-disabled):hover .sample-box-builder__product-title,.sample-box-builder__product:not(.is-disabled):hover .sample-box-builder__product-caption,.sample-box-builder__product:not(.is-disabled):hover .sample-box-builder__qty-button,.sample-box-builder__product:not(.is-disabled):hover .sample-box-builder__qty-input,.sample-box-builder__product:not(.is-disabled):hover .sample-box-builder__product-main{color:#fff}.sample-box-builder__product:not(.is-disabled):hover .sample-box-builder__qty-button{border-color:#ffffff73}.sample-box-builder__product-controls{display:inline-flex;align-items:center;gap:8px}.sample-box-builder__qty-button{width:40px;height:40px;border-radius:999px;border:1px solid var(--sample-box-border);background:var(--sample-box-soft-bg);color:#02216e;font-size:2rem;font-weight:700;line-height:1;cursor:pointer;transition:background .2s ease,border-color .2s ease,opacity .2s ease}.sample-box-builder__qty-button:hover:not(:disabled){background:#5bb5e826;border-color:#02216e33}.sample-box-builder__qty-button:disabled{cursor:not-allowed;opacity:.45}.sample-box-builder__qty-input{width:44px;padding:0;border:0;background:transparent;color:#02216e;font-size:2rem;font-weight:800;text-align:center}.sample-box-builder__error{align-items:center;gap:8px;padding:14px 16px;border-radius:16px;background:#eb001b14}.sample-box-builder__error .product-form__error-message{display:inline-block}.sample-box-builder__submit{position:relative;min-height:56px}.sample-box-builder__submit.loading .loading-overlay__spinner{display:flex}.sample-box-builder__submit .loading-overlay__spinner{position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;background:inherit;border-radius:inherit}.sample-box-builder__submit.loading [data-submit-label]{opacity:0}.sample-box-builder__empty-state{padding:24px;border-radius:22px;background:var(--sample-box-soft-bg)}.sample-box-builder__empty-state h3,.sample-box-builder__empty-state p{margin:0}.sample-box-builder__empty-state h3{margin-bottom:8px;color:#02216e}@media screen and (min-width:990px){.sample-box-builder__layout{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)}.sample-box-builder__visual-shell{grid-template-columns:84px minmax(0,1fr);align-items:start}.sample-box-builder__thumbs{display:grid;gap:12px;overflow:visible;padding-bottom:0}}@media screen and (max-width:989px){.sample-box-builder{padding:32px 0}.sample-box-builder__panel{position:static}.sample-box-builder__stage-media,.sample-box-builder__stage-image,.sample-box-builder__stage-placeholder{min-height:280px}}@media screen and (max-width:749px){.sample-box-builder__visual-shell,.sample-box-builder__panel{padding:16px;border-radius:20px}.sample-box-builder__product{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 14px;border-radius:18px}.sample-box-builder__product-main{grid-template-columns:44px minmax(0,1fr);gap:12px}.sample-box-builder__product-media{width:44px;height:44px;border-radius:12px}.sample-box-builder__product-copy{gap:2px}.sample-box-builder__product-title{font-size:1.2rem;line-height:1.1}.sample-box-builder__product-caption{font-size:1rem;line-height:1.2}.sample-box-builder__product-controls{gap:6px;align-self:center}.sample-box-builder__status{align-items:flex-start;flex-direction:column}.sample-box-builder__status-text{font-size:1.4rem}.sample-box-builder__qty-button{width:32px;height:32px;font-size:1.6rem}.sample-box-builder__qty-input{width:28px;font-size:1.6rem}}
/*# sourceMappingURL=/cdn/shop/t/112/assets/sample-box-builder.css.map */