/* Share the same chevron before and after enhancement. */
.broccoli {
  --pack-picker-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='m1 2 3 3 3-3' fill='none' stroke='%2328523b' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* A 34px visual button sits inside a forgiving 44px pointer target. */
.broccoli .pack-picker {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  justify-content:flex-start;
  width:max-content;
  max-width:100%;
  min-height:44px;
  margin:0 0 6px;
  padding:5px 0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--green);
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
  box-shadow:none;
  transform:none;
}
.pack-picker-caption {
  display:flex;
  align-items:center;
  gap:12px;
  max-width:100%;
  min-height:34px;
  padding:5px 11px;
  border:1px solid var(--green);
  border-radius:5px;
  background:#fffef8;
  font-size:14px;
  font-weight:500;
  line-height:22px;
  text-align:left;
}
.pack-picker-caption::after { content:''; box-sizing:border-box; width:8px; height:8px; flex:0 0 8px; background:var(--pack-picker-chevron) center / 8px 8px no-repeat; }
.pack-picker:hover .pack-picker-caption,.pack-picker[aria-expanded=true] .pack-picker-caption { background:#edf1e4; }
.broccoli .pack-picker:focus-visible { outline:0; }
.pack-picker:focus-visible .pack-picker-caption { outline:2px solid var(--green); outline-offset:3px; }
.pack-picker:disabled { opacity:.5; cursor:not-allowed; }
.broccoli .pack-options:has(.pack-picker) { width:auto; min-width:0; padding:0; border:0; margin:0 0 12px; }
.broccoli .pack-options:has(.pack-picker) legend { font-size:13px; line-height:20px; margin:0 0 2px; }
.broccoli .purchase-needs-selection .pack-options:has(.pack-picker) { outline:0; }
.purchase-needs-selection .pack-picker-caption { outline:2px solid var(--green); outline-offset:3px; }
.broccoli select[data-pack-picker-native] {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  clip-path:inset(50%);
  white-space:nowrap;
  pointer-events:none;
}
/* Body-level placement avoids card overflow and stacking-context clipping. */
.pack-picker-popup {
  position:fixed;
  z-index:110;
  box-sizing:border-box;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:5px;
  border:1px solid var(--green);
  border-radius:7px;
  background:#fffef8;
  color:var(--green);
  box-shadow:0 8px 24px #243a241c;
  font-family:inherit;
}
.pack-picker-option { position:relative; min-height:44px; padding:10px 32px 10px 11px; border-radius:3px; font-size:14px; line-height:24px; cursor:pointer; overflow-wrap:anywhere; }
.pack-picker-option[data-active=true] { background:#edf1e4; outline:1px solid #9ead8d; outline-offset:-1px; }
.pack-picker-option[aria-selected=true] { background:var(--lime,#dcebad); color:var(--green); font-weight:600; }
.pack-picker-option[aria-selected=true]::after { content:'✓'; position:absolute; right:10px; top:10px; }
.pack-picker-option[aria-disabled=true] { opacity:.45; cursor:not-allowed; }
.pack-picker-option[hidden] { display:none; }

/* Match the pre-enhancement select to the compact control before the first paint. */
.broccoli :is(.catalog-pack-select,.product-pack-select):not([data-pack-picker-native]) {
  display:block;
  appearance:none;
  background-image:var(--pack-picker-chevron);
  background-size:8px 8px;
  background-repeat:no-repeat;
  background-position:right 11px center;
  field-sizing:content;
  width:max-content;
  max-width:100%;
  min-width:0;
  justify-self:start;
  align-self:start;
  box-sizing:border-box;
  height:34px;
  min-height:34px;
  margin:5px 0 11px;
  padding:5px 31px 5px 11px;
  border:1px solid var(--green);
  border-radius:5px;
  background-color:#fffef8;
  font-size:14px;
  font-weight:500;
  line-height:22px;
}
.broccoli .pack-options { width:auto; min-width:0; padding:0; border:0; margin:0 0 12px; }
.broccoli .pack-options legend { font-size:13px; line-height:20px; margin:0 0 2px; }