.mgk-mseason-form__req { font-style: normal; margin-left: 6px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--mdash-text-4); }
   Pickers share this markup and each one needs the rule: the Seasonal form's
   (#mgk-mseason-prodpick-query), the Room editor's "Specific products"
   (#mgk-room-prodpick-query), and the removed "Today's Fresh Picks" one
   (#mgk-fp-prodpick-query, kept here in case that markup ever returns). A
   picker missed here still draws the small bordered box sitting inside the
   long one, with its own purple focus ring. Add new ones here, not a new rule
   elsewhere: an id-keyed list is what beats the :not() chain above. */
#mgk-fp-prodpick-query:focus,
#mgk-room-prodpick-query,
#mgk-room-prodpick-query:focus { flex: 1; min-width: 0; height: auto; padding: 0; border: none; outline: none; box-shadow: none; background: transparent; font-family: 'Quicksand', var(--mgk-font); font-size: 12.5px; color: var(--mdash-text); }

.mgk-hero-cfg { border: 1px solid var(--mdash-border); border-radius: 10px; background: var(--mdash-bg-soft); margin-bottom: 18px; }
.mgk-hero-cfg__summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 16px; cursor: pointer; list-style: none; }
.mgk-hero-cfg__summary::-webkit-details-marker { display: none; }

.mgk-hero-cfg__summary::before { content: '▸'; display: inline-block; color: var(--mdash-text-4); transition: transform .15s ease; }
.mgk-hero-cfg[open] > .mgk-hero-cfg__summary::before { transform: rotate(90deg); }
.mgk-hero-cfg__summary-title { font-family: var(--mdash-font-display); font-weight: 700; font-size: 14px; color: var(--mdash-text); }
.mgk-hero-cfg__summary-note { font-family: 'Quicksand', var(--mgk-font); font-size: 12px; color: var(--mdash-text-4); }

.mgk-hero-cfg__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 0 16px 16px; }
@media (max-width: 1100px) { .mgk-hero-cfg__body { grid-template-columns: 1fr; } }

.mgk-hero-cfg__form { max-width: none; }
.mgk-hero-cfg__req { font-style: normal; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--mdash-red); margin-left: 4px; }

.mgk-hero-cfg__group { border: 1px solid var(--mdash-border); border-radius: 8px; background: var(--mdash-bg, #fff); padding: 12px 14px; margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.mgk-hero-cfg__group legend { padding: 0 4px; }

.mgk-hero-cfg__counter { align-self: flex-end; font-family: 'Quicksand', var(--mgk-font); font-size: 10.5px; font-weight: 600; color: var(--mdash-text-4); }
.mgk-hero-cfg__counter.is-over { color: var(--mdash-red); }
.mgk-mss__field input.is-invalid, .mgk-mss__field textarea.is-invalid { border-color: var(--mdash-red); }

.mgk-hero-cfg__err { display: none; margin: -4px 0 0; font-family: 'Quicksand', var(--mgk-font); font-size: 11.5px; color: var(--mdash-red); line-height: 1.45; }
.mgk-hero-cfg__err.is-shown { display: block; }
.mgk-hero-cfg__warn { margin: 0; padding: 8px 10px; border-radius: 7px; background: #fff7e6; color: #8a5a00; font-family: 'Quicksand', var(--mgk-font); font-size: 11.5px; line-height: 1.45; }
.mgk-hero-cfg__draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; padding: 9px 12px; border-radius: 7px; background: #eef4ff; color: #1f3d7a; font-family: 'Quicksand', var(--mgk-font); font-size: 12px; }

.mgk-hero-cfg__chosen { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--mdash-border); border-radius: 7px; background: var(--mdash-bg-soft); font-family: 'Quicksand', var(--mgk-font); font-size: 12.5px; font-weight: 600; color: var(--mdash-text); }
.mgk-hero-cfg__chosen > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgk-hero-cfg__search { display: flex; flex-direction: column; gap: 6px; }

.mgk-hero-cfg__results { max-height: 190px; overflow-y: auto; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mdash-border); border-radius: 7px; background: #fff; }
.mgk-hero-cfg__results:empty { display: none; }
.mgk-hero-cfg__result { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; cursor: pointer; font-family: 'Quicksand', var(--mgk-font); font-size: 12.5px; color: var(--mdash-text); }
.mgk-hero-cfg__result:hover, .mgk-hero-cfg__result:focus-visible { background: var(--mdash-bg-soft); }
.mgk-hero-cfg__result.is-empty { color: var(--mdash-text-4); cursor: default; }

.mgk-hero-cfg__preview { align-self: start; position: sticky; top: 16px; }
.mgk-hero-cfg__preview-title { font-family: var(--mdash-font-display); font-weight: 700; font-size: 13px; color: var(--mdash-text); margin: 0 0 4px; }

.mgk-hero-cfg__frame { position: relative; border: 1px solid var(--mdash-border); border-radius: 8px; overflow: hidden; background: #fff; margin-top: 10px; height: 300px; }
.mgk-hero-cfg__iframe { display: block; width: 1440px; height: 900px; border: 0; transform-origin: top left; }
.mgk-hero-cfg__loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.85); font-family: 'Quicksand', var(--mgk-font); font-size: 12px; color: var(--mdash-text-4); z-index: 2; }

.mgk-mdash--wide .mgk-mdash__content { width: 100%; max-width: none; }

.mgk-mp-opt-add { position: relative; margin-left: auto; }
.mgk-mp-opt-add[hidden] { display: none; }
.mgk-mp-opt-add__toggle { min-height: 32px; padding: 0 12px; font-size: 12px; }
.mgk-mp-opt-add__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 220px; padding: 6px; background: #fff; border: 1px solid #e9e6ef; border-radius: 10px; box-shadow: 0 10px 28px rgba(27, 27, 31, .12); }
.mgk-mp-opt-add__menu[hidden] { display: none; }
.mgk-mp-opt-add__menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; color: #1b1b1f; font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; background: none; border: 0; border-radius: 7px; cursor: pointer; }
.mgk-mp-opt-add__menu button[hidden] { display: none; }
.mgk-mp-opt-add__menu button:hover,
.mgk-mp-opt-add__menu button:focus-visible { background: #fbf5ff; }
.mgk-mp-opt-add__menu small { color: #8a8494; font-size: 10.5px; font-weight: 500; }
.mgk-mp-opt-group { min-width: 0; margin: 0 0 12px; padding: 12px; background: #fbfafd; border: 1px solid #f1eff5; border-radius: 10px; }
.mgk-mp-opt-group[hidden] { display: none; }
.mgk-mp-opt-group__head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; float: left; margin-bottom: 8px; padding: 0; }
.mgk-mp-opt-group__head + * { clear: both; }
.mgk-mp-opt-group__head em { margin-left: 4px; color: #8a8494; font-size: 10.5px; font-style: normal; font-weight: 500; }
.mgk-mp-opt-group__remove { display: grid; place-items: center; width: 24px; height: 24px; color: #6e6a78; font-size: 16px; line-height: 1; background: #fff; border: 1px solid #e9e6ef; border-radius: 6px; cursor: pointer; }
.mgk-mp-opt-group__remove:hover { color: #b42318; border-color: #f3c4c0; }
.mgk-mp-opt-group__new { display: flex; gap: 8px; margin-top: 10px; }
.mgk-mp-opt-group__new .mgk-mp__input { flex: 1 1 auto; min-width: 0; max-width: 260px; height: 34px; }
.mgk-mp-opt-group__new .mgk-btn { min-height: 34px; padding: 0 12px; font-size: 12px; }