/* style.css - basic Boxie-like layout and sticky summary */

.wsb-container { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#222; padding:30px; }
.wsb-hero { display:flex; gap:24px; align-items:flex-start; }
.wsb-hero-image { width:360px; min-height:260px; border:1px solid #eee; display:flex; align-items:center; justify-content:center; background:#fafafa; }
.wsb-hero-image img { max-width:100%; max-height:100%; object-fit:contain; }
.wsb-main { flex:1; }
.wsb-sizes { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.wsb-size-card { width:calc(25% - 12px); background:#fff; border:1px solid #e6e6e6; padding:12px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.03); border-radius:6px; text-align:center; }
.wsb-size-card.active { border-color:#0073aa; box-shadow:0 6px 20px rgba(0,115,170,0.08); transform:translateY(-4px); }
.wsb-size-card .title { font-weight:700; margin-bottom:6px; }
.wsb-controls h3 { margin-top:20px; font-size:16px; }
.wsb-controls label { display:block; margin-bottom:8px; }
.wsb-insurance, .wsb-boxes { margin-bottom:12px; }

.wsb-sticky { position: fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #ddd; padding:12px 20px; box-shadow: 0 -6px 20px rgba(0,0,0,0.05); z-index:9999; }
.wsb-sticky-inner { max-width:1200px; margin: 0 auto; display:flex; justify-content:space-between; align-items:center; }
#sticky-summary-compact { display:flex; justify-content:space-between; width:100%; align-items:center; }
#sticky-summary-compact .left { display:flex; gap:12px; align-items:center; }
#sticky-summary-compact .right { display:flex; gap:12px; align-items:center; }
#sticky-summary-compact #sticky-total { font-weight:700; font-size:20px; }
.hidden { display:none; }

@media (max-width:800px) {
  .wsb-hero { flex-direction:column; }
  .wsb-hero-image { width:100%; height:220px; }
  .wsb-size-card { width:48%; }
}