.shp-box { margin: 24px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.shp-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #000; }

.shp-card { display: block; border: 1px solid #eee; border-radius: 8px; margin-bottom: 16px; cursor: pointer; transition: border-color 0.2s; position: relative; background: #fff; overflow:visible; }
.shp-card:hover { border-color: #cbd5e1; }
.shp-card-active { border-color: var(--wcb2g1-active); border-width: 2px; }

.shp-head-dark { background-color: var(--wcb2g1-dark); color: #fff; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 8px; letter-spacing: 0.5px; }
.shp-head-light { background-color: #f5f5f5; color: #242424; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 8px; letter-spacing: 0.5px; }

.shp-body { padding: 16px 20px; pointer-events: none; }
.shp-body * { pointer-events: auto; }

.shp-row { display: flex; justify-content: space-between; align-items: center; }

.shp-radio-group { display: flex; align-items: center; gap: 10px; }
.shp-radio-group input[type='radio'] { width: 18px; height: 18px; accent-color: var(--wcb2g1-dark); cursor: pointer; margin:0; }
.shp-pack-name { font-size: 16px; font-weight: 600; color: #000; cursor: pointer; }

.shp-pricing { display: flex; align-items: center; gap: 6px; }
.shp-price-old { font-size: 12px; color: var(--wcb2g1-accent); text-decoration: line-through; }
.shp-price-new { font-size: 18px; font-weight: 700; color: #000; }

.shp-save { font-size: 12px; color: var(--wcb2g1-accent); padding-left: 28px; margin-top: 4px; }

.shp-dropdowns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; padding-left: 28px; }
.shp-dropdowns-single { margin-top: 12px; padding-left: 28px; max-width: 33%; display: none; }

@media (max-width: 768px) {
    .shp-dropdowns { grid-template-columns: 1fr; }
    .shp-dropdowns-single { max-width: 100%; }
}

.shp-dd { position: relative; width: 100%; }
.shp-dd-toggle { display: flex; justify-content: space-between; align-items: center; border: 1px solid #eee; border-radius: 99px; padding: 6px 12px; background: #fff; cursor: pointer; width: 100%; }
.shp-dd-toggle:hover { border-color: #cbd5e1; }
.shp-dd.open .shp-dd-toggle { border-radius: 16px 16px 0 0; border-bottom: none; }
.shp-dd.open .shp-arrow { transform: rotate(180deg); }

.shp-dd-img { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; }
.shp-dd-text { font-size: 11px; color: #000; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-dd-left { display: flex; align-items: center; overflow: hidden; }

.shp-dd-menu { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #eee; border-top: none; border-radius: 0 0 16px 16px; z-index: 999; display: none; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.shp-dd.open .shp-dd-menu { display: block; }

.shp-dd-item { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; transition: background 0.2s; }
.shp-dd-item:hover { background: #f9fafb; }

.shp-bonus { display: flex; align-items: center; background: #f5f5f5; padding: 10px 20px; gap: 12px; border-top: 1px solid #eee; }
.shp-bonus img { width: 40px; height: auto; object-fit: contain; }
.shp-bonus-title { font-size: 14px; font-weight: 600; text-transform: uppercase; color: #000; display: block; }
.shp-bonus-price { font-size: 12px; color: var(--wcb2g1-accent); text-decoration: line-through; }