.shipping-estimate { padding: 20px; margin: 20px 0; background: #f5f9fc; border: 1px solid #d8e4ee; border-radius: 10px; color: #19354e; }
.shipping-estimate h3 { margin: 0 0 8px; font-size: 17px; }
.shipping-skids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; margin: 20px 0; }
.shipping-skid { min-width: 0; }
.shipping-pending { border-top: 1px solid #d8e4ee; padding-top: 16px; margin-top: 16px; }
.shipping-pending h4 { margin: 0 0 12px; }
.shipping-skid h4 { margin: 0 0 12px; }
.shipping-measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 12px; }
.shipping-measures dt { font-size: 12px; color: #527087; }
.shipping-measures dd { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.shipping-estimate summary { cursor: pointer; padding: 8px 0; }
.shipping-estimate li { margin: 6px 0; }
.shipping-drawing { margin: 20px 0 0; border-top: 1px solid #e4ecf3; padding-top: 16px; }
.shipping-drawing-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.shipping-drawing-heading > span { color: #527087; font-size: 12px; }
.shipping-stack-image { display: block; width: 100%; max-width: 760px; margin: 12px auto; background: linear-gradient(160deg, #f4f8fc, #fff); border-radius: 8px; }
.shipping-dimension { fill: #527087; font: 12px Arial, sans-serif; }
.shipping-dimension line { stroke: #859bad; stroke-width: 1; }
.shipping-pallet { stroke: #9a7546; stroke-width: 1.5; stroke-linejoin: round; }
.shipping-pallet-top { fill: #dbc29c; }
.shipping-pallet-front { fill: #bf9866; }
.shipping-pallet-side { fill: #ac824f; }
.shipping-pallet-slot { fill: #684e33; stroke: none; }
.shipping-door-color-0 { --box-front: #e1edf8; --box-top: #f0f6fc; --box-side: #b8d1e7; --box-stroke: #5b87ac; }
.shipping-door-color-1 { --box-front: #e0f1eb; --box-top: #f0faf6; --box-side: #b3d6c9; --box-stroke: #528d77; }
.shipping-door-color-2 { --box-front: #f9ead8; --box-top: #fff6eb; --box-side: #e7c69c; --box-stroke: #a87e45; }
.shipping-door-color-3 { --box-front: #ede5f5; --box-top: #f7f2fc; --box-side: #cebcdf; --box-stroke: #8a6ca6; }
.shipping-door-color-4 { --box-front: #f5e3e7; --box-top: #fff1f4; --box-side: #dfbac4; --box-stroke: #a86e80; }
.shipping-door-color-5 { --box-front: #e0eff0; --box-top: #eff9fa; --box-side: #b2d2d5; --box-stroke: #508a90; }
.shipping-drawn-box { stroke: var(--box-stroke); stroke-width: 1.5; stroke-linejoin: round; }
.shipping-box-front { fill: var(--box-front); }
.shipping-box-top { fill: var(--box-top); }
.shipping-box-side { fill: var(--box-side); }
.shipping-box-tape { fill: none; stroke: var(--box-side); stroke-width: 7; opacity: .7; }
.shipping-drawn-box text { fill: #19354e; stroke: none; font-family: Arial, sans-serif; }
.shipping-box-number { font-size: 18px; font-weight: 700; }
.shipping-box-type { font-size: 11px; }
.shipping-box-door { font-size: 10px; }
.shipping-empty-position rect { fill: #f5f8fb; fill-opacity: .85; stroke: #a0b3c2; stroke-dasharray: 5 4; }
.shipping-empty-position text { fill: #627b8f; font: 11px Arial, sans-serif; }
.shipping-drawing-note { font-size: 12px; color: #527087; line-height: 1.6; margin: 8px 0 12px; }
.shipping-box-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.shipping-box-key li { display: flex; gap: 10px; margin: 0; padding: 12px; background: #f8fafc; border: 1px solid #e4ecf3; border-radius: 6px; min-width: 0; }
.shipping-key-number { background: var(--box-front); border: 1px solid var(--box-stroke); border-radius: 4px; color: #19354e; font-size: 12px; font-weight: 700; padding: 5px; height: fit-content; min-width: 30px; text-align: center; }
.shipping-box-key li > div { min-width: 0; overflow-wrap: anywhere; }
.shipping-box-key strong, .shipping-key-contents, .shipping-key-measures { display: block; font-size: 12px; line-height: 1.5; }
.shipping-key-contents { margin: 3px 0; }
.shipping-key-measures { color: #527087; font-size: 11px; }
@media (max-width: 600px) {
    .shipping-estimate { padding: 12px; }
    .shipping-measures { grid-template-columns: 1fr; }
    .shipping-box-key { grid-template-columns: 1fr; }
}