.packing-lab { background:#fff; }
.packing-lab [hidden] { display:none!important; }
.packing-lab__intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:80px; margin-bottom:32px; }
.packing-lab__intro h2 { margin-bottom:0; }
.packing-lab__intro>p { max-width:470px; margin:0 0 4px; }
.packing-lab__shell { border:1px solid #d9e5ed; border-radius:20px; overflow:hidden; box-shadow:0 20px 50px #213b5008; }
.packing-lab__steps { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #d9e5ed; background:#fff; }
.packing-lab__steps button { display:flex; align-items:center; justify-content:center; gap:12px; padding:21px 15px; border:0; border-bottom:3px solid transparent; background:transparent; color:#61788a; font:inherit; font-size:.88rem; }
.packing-lab__steps button[aria-pressed=true] { color:#116aa7; background:#f0f7fc; border-bottom-color:#1477b9; }
.packing-lab__steps button>span { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#e9f0f5; font-size:.72rem; font-weight:700; }
.packing-lab__steps button[aria-pressed=true]>span { background:#1172b7; color:#fff; }
.packing-lab__body { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr); }
.packing-lab__visual { min-width:0; background:#f5f8fb; }
.packing-lab__scene-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:22px 26px 0; color:#678095; font-size:.72rem; }
.packing-lab__scene-heading>span:first-child { color:#2c526c; font-weight:700; }
.packing-lab__stage { position:relative; aspect-ratio:1.55; }
.packing-lab__stage canvas,.packing-lab__stage img { width:100%; height:100%; display:block; object-fit:contain; }
.packing-lab__photo-label { position:absolute; bottom:12px; left:20px; padding:5px 9px; color:#4e6575; background:#ffffffdf; border-radius:6px; font-size:.64rem; }
.packing-lab__toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:18px; padding:12px 26px; }
.packing-lab__toolbar .btn { font-size:.8rem; font-weight:650; padding:11px 14px; border-radius:8px; }
.packing-lab__rotate { display:grid; gap:6px; flex:1; min-width:110px; font-size:.68rem; color:#536e82; }
.packing-lab__rotate input { width:100%; accent-color:#1172b7; }
.packing-lab__reset { border:1px solid #ccdde9; border-radius:8px; background:#fff; color:#1172b7; padding:9px 12px; }
.packing-lab__reset:disabled { opacity:.5; }
.carton-section .packing-lab__status { color:#4e6b80; min-height:2.8em; margin:0; padding:0 26px 18px; font-size:.76rem; line-height:1.6; }
.packing-lab__summary { background:#fff; padding:28px; border-left:1px solid #dce7ef; }
.carton-section .packing-lab__kicker { text-transform:uppercase; letter-spacing:.07em; font-size:.64rem; font-weight:750; color:#1172b7; margin-bottom:12px; }
.packing-lab__summary h3 { font-size:1.3rem; line-height:1.3; margin-bottom:12px; }
.packing-lab__summary>p:not(.packing-lab__kicker) { font-size:.8rem; line-height:1.7; margin-bottom:20px; }
.packing-lab__options { border:0; padding:0; margin:0 0 22px; display:grid; gap:10px; min-width:0; }
.packing-lab__options label { display:flex; align-items:center; gap:10px; border:1px solid #d7e2eb; border-radius:10px; padding:14px; cursor:pointer; }
.packing-lab__options label:has(input:checked) { border-color:#16845f; background:#f3faf6; box-shadow:0 0 0 1px #16845f; }
.packing-lab__options input { accent-color:#16845f; width:15px; height:15px; flex-shrink:0; }
.packing-lab__options label>span { flex:1; min-width:0; }
.packing-lab__options strong { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; font-size:.8rem; }
.packing-lab__options b { white-space:nowrap; }
.packing-lab__options small { display:block; color:#637b8d; font-size:.68rem; margin-top:5px; }
.packing-lab__metrics>div:first-child { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px; font-size:.75rem; color:#4e697b; }
.packing-lab__metrics>div:first-child>strong { color:#17324b; font-size:1.2rem; }
.packing-lab__meter { width:100%; height:7px; background:#edf2f5; border-radius:7px; overflow:hidden; }
.packing-lab__meter span { display:block; height:100%; background:#278e70; border-radius:7px; transition:width .25s; }
.packing-lab__gain { display:flex; align-items:flex-start; gap:11px; padding:18px 0; color:#167255; }
.packing-lab__gain p { margin:0; line-height:1.6; }
.packing-lab__gain strong,.packing-lab__gain span { display:block; }
.packing-lab__gain strong { font-size:.86rem; color:#167255; }
.packing-lab__gain span { font-size:.72rem; color:#61788a; margin-top:4px; }
.packing-lab__cta { width:100%; padding:10px; font-size:.78rem; border-radius:8px; }
.packing-lab__takeaways { display:flex; flex-wrap:wrap; gap:14px 36px; padding:18px 26px; border-top:1px solid #dce7ef; font-size:.76rem; color:#526c80; }
.packing-lab__takeaways i { color:#1172b7; margin-right:7px; }
.carton-section .packing-lab__note { font-size:.7rem; color:#708596; margin:18px 0 0; line-height:1.7; }
.packing-lab button:focus-visible,.packing-lab input:focus-visible { outline:3px solid #1172b7; outline-offset:3px; }
@media(max-width:1199px) { .packing-lab__body { grid-template-columns:minmax(0,1.4fr) minmax(310px,1fr); } .packing-lab__summary { padding:22px; } }
@media(max-width:991px) { .packing-lab__intro { grid-template-columns:1fr; gap:16px; } .packing-lab__body { grid-template-columns:1fr; } .packing-lab__summary { border-left:0; border-top:1px solid #dce7ef; } .packing-lab__options { grid-template-columns:1fr 1fr; } }
@media(max-width:575px) { .packing-lab__steps button { flex-direction:column; gap:8px; padding:15px 6px; font-size:.7rem; } .packing-lab__scene-heading { padding:18px 16px 0; font-size:.64rem; } .packing-lab__toolbar { padding:12px 16px; gap:12px; } .packing-lab__toolbar>.btn { width:100%; } .carton-section .packing-lab__status { padding:0 16px 18px; } .packing-lab__options { grid-template-columns:1fr; } .packing-lab__takeaways { padding:18px; gap:12px; } .packing-lab__takeaways span { width:100%; } }
@media(prefers-reduced-motion:reduce) { .packing-lab__meter span { transition:none; } }
.packing-lab__products { margin:0 0 20px; border-bottom:1px solid #dce7ef; padding-bottom:16px; }
.packing-lab__products summary { cursor:pointer; color:#1172b7; font-size:.78rem; font-weight:650; }
.packing-lab__products ol { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; }
.packing-lab__products li { display:flex; align-items:center; gap:10px; }
.packing-lab__swatch { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:#fff; font-size:.7rem; flex-shrink:0; }
.packing-lab__products strong,.packing-lab__products small { display:block; }
.packing-lab__products strong { font-size:.74rem; font-weight:650; }
.packing-lab__products small { font-size:.67rem; color:#637b8d; }
.carton-section .packing-lab__status { background:#eaf3fa; border-top:1px solid #dbe8f2; padding:14px 20px; margin:4px 16px 16px; border-radius:9px; color:#345e7a; min-height:4.5em; }