/* Scoped to the existing calculator. */
.packaging-picker{padding:12px 0;font:inherit;color:inherit}
.packaging-intro,.packaging-note,.packaging-status{font-size:13px;line-height:1.5;margin:8px 0}
.packaging-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.packaging-option{display:flex;flex-direction:column;min-width:0;gap:4px}
.packaging-option .packaging-card{flex:1;width:100%}
.packaging-zoom{display:block;padding:7px 0;text-align:center;font-size:12px;line-height:1.4;color:#725026;text-decoration:underline;border-radius:4px}
.packaging-zoom:hover{background:#fff8f0;color:#262626}
.packaging-zoom:focus-visible{outline:3px solid #ed9228;outline-offset:2px}
.packaging-card,.packaging-none{font:inherit;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;color:#262626}
.packaging-card{min-width:0;padding:4px;display:flex;flex-direction:column;gap:4px;text-align:left;overflow:hidden}
.packaging-card img{width:100%;height:auto;aspect-ratio:5/7;object-fit:contain;border-radius:4px}
.packaging-card span{font-size:11px;line-height:1.35}.packaging-card small{font-size:12px;font-weight:600;margin-top:auto}
.packaging-none{width:100%;text-align:left;padding:12px}
.packaging-card.active,.packaging-none.active{border:2px solid #ed9228;background:#fff8f0}
.packaging-card:focus-visible,.packaging-none:focus-visible,.packaging-mobile summary:focus-visible{outline:3px solid #ed9228;outline-offset:2px}
.packaging-note{color:#854c00;background:#fff4df;padding:8px;border-radius:4px}.packaging-note[hidden]{display:none}
.packaging-desktop{margin-top:0}.packaging-mobile{display:none}
@media(max-width:1024px){
 .packaging-desktop{display:none}
 #make .packaging-mobile{display:block;width:100%;margin:0 0 8px;padding:0;border:0;background:transparent;border-radius:0}
 #make .packaging-mobile summary{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:6px 16px;border:2px solid #FFA133;border-radius:50px;background:#F3B66F;font-size:15px;font-weight:600;line-height:1.2;color:#2b2b2b;list-style:none}
 #make .packaging-mobile summary::-webkit-details-marker{display:none}
 #make .packaging-mobile summary>span:first-child{flex:0 1 auto;text-align:left}
 #make .packaging-mobile summary [data-packaging-label]{flex:1 1 auto;min-width:0;text-align:right;color:#6b6b6b;overflow-wrap:anywhere}
 #make .packaging-mobile[open]>.packaging-picker{margin-top:8px;padding:12px;background:#fff;border:1px solid #e6eef5;border-radius:10px}
 .packaging-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* The same switch as frames and coating, above the packaging designs. */
#make .packaging-picker .packaging-toggle{display:flex;align-items:center;gap:12px;margin:0;font:inherit;color:inherit;cursor:pointer}
#make .packaging-toggle .checkbox-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;visibility:visible;cursor:pointer;z-index:1}
#make .packaging-toggle .checkbox-label:focus-within{outline:3px solid #ed9228;outline-offset:3px}
#make .packaging-choices[hidden]{display:none}
@media(min-width:1025px){
 #make .packaging-toggle .checkbox-label{width:48px;min-width:48px;height:26px;flex:0 0 48px;border-width:2px}
 #make .packaging-toggle .checkbox-fake{width:20px;height:20px;left:1px;top:1px}
 #make .packaging-toggle .checkbox-input:checked+.checkbox-fake{left:23px}
}