/* ML Survey Picker Presentation 1003 v3 (PD1 E04+E22, PD2 E05, PD4 E11, PD6 E19). Presentation only. No-JS: stock core behaviour; .ml-apply-bar is added by JS only, so the sticky rule is inert without JS. */
.ml-apply-bar{position:sticky;bottom:0;background:#fff;padding:10px 12px calc(10px + env(safe-area-inset-bottom));z-index:5}
.ml-apply-bar .sunshine--multi-image-select--close{min-height:48px;width:100%;box-sizing:border-box}
.ml-apply-bar .sunshine--multi-image-select--close:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}
/* B36 V2 F01/F02/F06/E31: stepper skin + totals. Steppers >=44px; the
   driven select is visually hidden but stays the submitted control
   (Tab-skipped via JS tabIndex). The flex row rule is scoped to
   .ml-stepper-on (JS-added), so unskinned sheets (level 38 demo, no-JS)
   keep the base layout. */
.sunshine--multi-image-select--qty.ml-stepper-on{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sunshine--multi-image-select--qty select.ml-stepped{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ml-step{min-width:44px;min-height:44px;font-size:22px;line-height:1;box-sizing:border-box}
.ml-step:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}
.ml-pick-total,.ml-line-total{font-weight:700}
.ml-pick-total{margin:8px 0}
.ml-line-total{flex-basis:100%;text-align:center}

/* V01/V02/V05: shared shell rules in picker-sources.css now admit the native
   presentation marker. Only the palette and stock-wrapper adaptations differ. */
.sunshine--multi-image-select.ml-picker--native-look {
 --ml-picker-cream:#f7f1e8; --ml-picker-paper:#fffbf5;
 --ml-picker-forest:var(--ink,#221c16); --ml-picker-terra:#c4481f;
 --ml-picker-muted:var(--ink-2,#5a4f45); --ml-picker-line:#ded5c6;
 color:var(--ink,#221c16);
}
.ml-picker--native-look > .sunshine--multi-image-select--header {display:none}
.ml-picker--native-look .ml-picker__title {margin:12px 0;font-family:var(--serif,Georgia,serif);font-size:1.5rem;line-height:1.2;color:var(--ink,#221c16)}
.ml-picker--native-look .ml-picker__eyebrow {color:var(--ink-2,#5a4f45)}
.ml-picker--native-look .ml-picker__source-name {margin:0;padding:8px 0;color:#20342d}
.ml-picker--native-look .ml-picker__sources select[hidden] {display:none!important}
.ml-picker--native-look .ml-picker__sources select {min-height:48px}
.ml-picker--native-look .ml-picker__header {flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;background:#fff}
.ml-picker--native-look .ml-picker__count {line-height:1.3}
.ml-picker--native-look .ml-apply-gate-note {margin:0}
.ml-picker--native-look .sunshine--multi-image-select--close {border-radius:999px}
.ml-picker--native-look .ml-step {border:1px solid var(--ml-picker-line);border-radius:9px;background:var(--ml-picker-paper);color:var(--ink,#221c16)}
.ml-picker--native-look .sunshine--multi-image-select--qty.ml-stepper-on {gap:2px;justify-content:center}
.ml-picker--native-look .ml-step-value {display:inline-block;position:static;width:auto;min-width:1.5ch;height:auto;opacity:1;text-align:center;font-variant-numeric:tabular-nums}
.ml-picker--native-look .ml-picker-image .sunshine--multi-image-select--qty select.ml-stepped {min-width:0;min-height:0}
/* U02: existing gallery dark token, opaque on the measured cream canvas. */
body.ml-warm-editorial-gallery .ml-gallery-hero__count {color:var(--ml-gallery-forest-dark,#20342d)!important}

#sunshine--modal .ml-picker--native-look > .sunshine--multi-image-select--header {display:none!important}
/* Preserve the installed common masonry (three phone/four desktop columns). */
.ml-picker--native-look .ml-picker-source[data-ml-picker-masonry] {display:block!important}
@media(max-width:620px){
 .ml-picker--native-look .ml-picker-image {padding:6px}
 .ml-picker--native-look .sunshine--multi-image-select--qty {font-size:.78rem}
 .ml-picker--native-look .ml-step-value {min-width:1ch}
}

/* LOOK FOLLOWUP A1-A6: native presentation only; model drawer untouched. */
.ml-picker--native-look .ml-picker__sources {order:0;flex:0 0 auto}
.ml-picker--native-look > .ml-pick-total {order:1;flex:0 0 auto}
.ml-picker--native-look .ml-picker__list {order:2;flex:1 1 auto;min-height:0}
.sunshine--multi-image-select.ml-picker--native-look .ml-picker__header.ml-apply-bar {
 order:3;position:static;flex:0 0 auto!important;align-items:stretch;
 margin:auto 0 12px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
 border:1px solid rgb(221,211,197);border-radius:12px;background:#fff;
}
.ml-picker--native-look .ml-picker__count,
#sunshine--modal .ml-picker--native-look.sunshine--completed .ml-picker__count {
 color:rgb(34,28,22)!important;
}
.ml-picker--native-look .ml-picker__count span {color:inherit!important}
.sunshine--multi-image-select.ml-picker--native-look .ml-apply-bar .sunshine--multi-image-select--close {
 flex:0 0 auto;height:48px;min-height:48px;width:100%;box-sizing:border-box;
}
.ml-picker--native-look .sunshine--multi-image-select--qty.ml-stepper-on {
 display:grid;grid-template-columns:44px minmax(1ch,auto) 44px;
 justify-content:center;align-items:center;column-gap:2px;row-gap:2px;
}
.ml-picker--native-look .ml-step-label {grid-column:1 / -1;text-align:center;font-weight:700}
.ml-picker--native-look .ml-step--down {grid-column:1;grid-row:2}
.ml-picker--native-look .ml-step-value {grid-column:2;grid-row:2}
.ml-picker--native-look .ml-step--up {grid-column:3;grid-row:2}
.ml-picker--native-look .ml-line-total {grid-column:1 / -1;text-align:center}
.ml-picker--native-look .ml-size-line,
.ml-picker--native-look .ml-aspect-warn {grid-column:1 / -1;margin:0}
@media(max-width:620px){
 .ml-picker--native-look .ml-picker__title {font-size:19.083333px;line-height:22.9px}
}
@media(min-width:621px){
 .ml-picker--native-look .ml-picker-image {min-height:240px}
 .ml-picker--native-look .ml-picker-image img {height:132px;object-fit:contain}
 /* Only a visible native STORE picker acquires the measured fill shell. */
 #sunshine--modal.sunshine--modal--store_product:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) {
  position:fixed!important;top:24px!important;left:50%!important;
  transform:translateX(-50%)!important;width:min(750px,calc(100vw - 48px))!important;
  height:calc(100dvh - 48px)!important;max-height:calc(100dvh - 48px)!important;margin:0!important;
 }
 #sunshine--modal.sunshine--modal--store_product:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--modal--content,
 #sunshine--modal.sunshine--modal--store_product:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--store--product-details,
 #sunshine--modal.sunshine--modal--store_product:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--store--product-details--content {
  display:flex!important;flex-direction:column;min-height:0;height:100%!important;
  max-height:100%!important;overflow:hidden!important;padding:0!important;
 }
 #sunshine--modal.sunshine--modal--store_product:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--store--product-details--header {display:none!important}
 #sunshine--modal.sunshine--modal--store_product .sunshine--multi-image-select.ml-picker--native-look {
  position:relative!important;inset:auto!important;flex:1 1 auto;
  height:100%!important;max-height:100%!important;min-height:0;
 }
}

/* FIX2 D1: the keychain slot uses a non-cart-hash ref on fill and cart-edit. */
.ml-picker--native-look[data-ref="ml-keychain"] .ml-pick-total,
.ml-picker--native-look[data-ref="ml-keychain"] .ml-line-total {display:none!important}
/* FIX2 D2-D4: picker layer owns the modal's box, independent of sheet siblings
   and changing source/size/crop heights. Only the list consumes remaining space. */
.ml-picker--native-look .ml-picker__header.ml-apply-bar {
 height:auto!important;min-height:0!important;max-height:none!important;
}
/* UX HUNKS ON FIX2 X-P2-4: 14px bar radius wins (same 0,4,0 as the 12px rule, later in file). */
.sunshine--multi-image-select.ml-picker--native-look .ml-picker__header.ml-apply-bar {
 border-radius:14px;
}
.ml-picker--native-look .ml-picker__count {font-weight:750!important}
@media(min-width:621px){
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) {
  position:fixed!important;top:24px!important;left:50%!important;
  transform:translateX(-50%)!important;width:min(750px,calc(100vw - 48px))!important;
  height:calc(100dvh - 48px)!important;max-height:calc(100dvh - 48px)!important;
  box-sizing:border-box!important;margin:0!important;padding:0!important;overflow:hidden!important;
 }
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--modal--content,
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--store--product-details,
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--store--product-details--content,
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) .ml-cart-selection-edit-panel,
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) .ml-keychain-cart-edit-panel {
  position:static!important;
 }
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) .sunshine--multi-image-select.ml-picker--native-look {
  position:absolute!important;inset:0!important;z-index:100500!important;
  display:flex!important;flex-direction:column!important;box-sizing:border-box!important;
  width:100%!important;height:100%!important;max-height:100%!important;
  min-height:0!important;margin:0!important;overflow:hidden!important;
 }
 #sunshine--modal .ml-picker--native-look .ml-picker__list {
  flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;
 }
 #sunshine--modal .ml-picker--native-look .ml-picker__header.ml-apply-bar {
  flex:0 0 auto!important;position:static!important;margin:0 0 12px!important;
 }
 #sunshine--modal:has(.ml-picker--native-look:not([style*="visibility: hidden"]):not([style*="visibility:hidden"])) #sunshine--modal--close {
  position:absolute!important;z-index:100510!important;top:8px!important;right:8px!important;
 }

}
/* UX HUNKS ON FIX2 H1: disabled Apply reads as gated, native-look only (48px box untouched). */
.ml-picker--native-look .sunshine--multi-image-select--close:disabled{opacity:.55;cursor:not-allowed}
/* UX HUNKS ON FIX2 H4: capped steppers read as capped, native-look only (signal, not a message). */
.ml-picker--native-look .ml-step:disabled{opacity:.45;cursor:not-allowed}
/* UX HUNKS ON FIX2 H-P2-1: preview button clears the 22px checkbox (top:40, 44px target kept). */
.ml-picker--native-look .ml-picker-image .ml-pv-btn{top:40px;z-index:1}