.shipping-panel { margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #222; font-size: 14px; max-width: 680px; box-sizing: border-box; }
.shipping-panel[hidden] { display: none; }
.shipping-panel .shipping-options[hidden], .shipping-panel .shipping-form[hidden] { display: none; }
.shipping-panel h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.shipping-panel p { margin: 10px 0; line-height: 1.5; }
.shipping-panel .shipping-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.shipping-form label { display: grid; gap: 6px; flex: 1 1 150px; }
.shipping-form input { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; font: inherit; border: 1px solid #999; border-radius: 6px; }
.shipping-form button { border: 0; border-radius: 6px; padding: 13px 20px; background: #ff6600; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.shipping-form button:disabled { opacity: .55; cursor: default; }
.shipping-options { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.shipping-options legend { font-weight: 600; margin-bottom: 8px; }
.shipping-option { display: flex; gap: 12px; align-items: center; border: 1px solid #ccc; border-radius: 8px; padding: 12px; cursor: pointer; overflow-wrap: anywhere; }
.shipping-option:has(input:checked) { border-color: #ff6600; background: #fff5ef; }
.shipping-option input { accent-color: #ff6600; flex-shrink: 0; }
.shipping-option span { display: grid; gap: 5px; }
.shipping-option small, .shipping-note { color: #666; line-height: 1.5; }
.shipping-total { font-weight: 700; border-top: 1px solid #eee; padding-top: 12px; }
.shipping-panel :focus-visible { outline: 2px solid #a34200; outline-offset: 3px; }
@media (max-width: 480px) { .shipping-panel { padding: 14px; width: 100%; } .shipping-form button { width: 100%; } }