.opo-packaging-options { min-width: 0; width: 100%; max-width: 100%; }
.opo-packaging-options > h2 { font-size: clamp(28px,3vw,36px); margin: 0 0 22px; }
.opo-options-tabs { display: flex; flex-wrap: nowrap; gap: 8px; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px 3px 10px; border-bottom: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--orange) var(--soft); }
.opo-options-tab { flex: 0 0 auto; min-height: 48px; padding: 12px 24px; border: 1px solid var(--border); border-radius: 7px; background: var(--soft); color: var(--navy); font: inherit; font-weight: 700; font-size: 14px; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.opo-options-tab:hover { border-color: var(--orange); }
.opo-options-tab.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.opo-options-tab:focus-visible, .opo-options-panel:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.opo-options-panel { min-width: 0; padding-top: 24px; }
.opo-options-panel[hidden] { display: none; }
.opo-options-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; gap: 20px; }
.opo-option-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(11,42,66,.04); text-align: center; }
.opo-option-media { aspect-ratio: 4/3; display: grid; place-items: center; background: var(--soft); overflow: hidden; }
.opo-option-media > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.opo-option-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 8px; color: var(--body); font-size: 12px; }
.opo-option-placeholder svg { color: var(--navy); opacity: .45; }
.opo-option-card > h3 { font-size: 16px; line-height: 1.4; margin: 0; padding: 16px 12px; overflow-wrap: anywhere; color: var(--navy); }
.opo-option-demo { display: block; color: var(--body); font-size: 11px; padding: 0 10px 12px; }
@media (max-width: 860px) { .opo-options-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } }
@media (max-width: 600px) {
  .opo-packaging-options > h2 { font-size: 26px; margin-bottom: 16px; }
  .opo-options-tab { padding: 11px 16px; min-height: 46px; font-size: 13px; }
  .opo-options-panel { padding-top: 18px; }
  .opo-options-grid { gap: 12px; }
  .opo-option-card > h3 { font-size: 14px; padding: 12px 8px; }
  .opo-option-placeholder { font-size: 10px; gap: 4px; padding: 8px; }
  .opo-option-placeholder svg { width: 44px; height: 44px; }
}