/** Shopify CDN: Minification failed

Line 640:33 Unexpected "4-col"
Line 652:33 Unexpected "`"

**/
/* Shared native image-selector presentation contract.
   Declarations below are the established treatment's approved/locked
   method/upload rules, scoped to consumers of GSCustomilyImageSelector. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root {
  --gs-ink: #171512;
  --gs-font: Poppins, sans-serif;
  --gs-section-inset: 24px;
  --gs-section-gap: 25px;
  --gs-header-gap: 10px;
}

/* ===== LOCKED: Images section (role=upload) — approved 2026-06-30. Do NOT modify without fresh approval. See docs/customily-progressive-ui-20260629/IMAGES_SECTION_LOCK_20260630.md ===== */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px 14px !important;
  margin: 0 0 12px !important;
  padding: 16px !important;
  border: 1px solid transparent !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Truthful image-processing status. JavaScript drives this from the active
   Customily ImageFilter request plus final canvas convergence; there is no
   synthetic percentage or timer-based completion.
   Issue #112 (approved narrow exception to the Images lock): the status is an
   absolutely positioned overlay owned by the fixed-height Select Image /
   Replace pill (.customily-download-button). It never creates an upload-group
   grid row, so card height and the Add to Cart position cannot move. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-download-button.gs-image-status-host,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-download-button:has(> .gs-progressive-image-processing-status) {
  position: relative !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #2c2416 !important;
  background: linear-gradient(135deg, #fffaf0 0%, #f8efd9 100%) !important;
  box-shadow: none !important;
  font: 650 14px/1 var(--gs-font, Poppins, sans-serif) !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[hidden] {
  display: none !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status__copy {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status__indicator {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(169, 126, 33, .24) !important;
  border-top-color: #9b6d12 !important;
  border-radius: 50% !important;
  animation: gs-progressive-processing-spin .78s linear infinite !important;
}

/* Ready: the vendor Replace presentation returns instantly. The overlay stays
   in the accessibility tree just long enough for the polite live region to
   announce completion, with no visual success row anywhere. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="ready"] {
  opacity: 0 !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="ready"] .gs-progressive-image-processing-status__indicator {
  display: none !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="error"],
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="ambiguous"] {
  color: #762b20 !important;
  background: #fff5f2 !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="error"] .gs-progressive-image-processing-status__indicator,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="ambiguous"] .gs-progressive-image-processing-status__indicator {
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  animation: none !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="error"] .gs-progressive-image-processing-status__indicator::before,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status[data-status="ambiguous"] .gs-progressive-image-processing-status__indicator::before {
  content: "!" !important;
  font: 900 14px/1 var(--gs-font, Poppins, sans-serif) !important;
}

@keyframes gs-progressive-processing-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status {
    gap: 7px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status__indicator {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root .gs-progressive-image-processing-status__indicator {
    animation: none !important;
  }
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .added-icon-wrapper {
  display: inline-flex !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #ececec !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  cursor: default !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .added-icon {
  width: 25px !important;
  max-width: 25px !important;
  height: auto !important;
  display: block !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] > label[role="button"] {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: default !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .option_name {
  display: block !important;
  color: var(--gs-ink) !important;
  font-family: var(--gs-font) !important;
  font-size: clamp(22px, 5vw, 28px) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl-accordion,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] [data-testid^="image-upload-container"],
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-input,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl-container {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl-accordion {
  display: block !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl-flex-no-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-download-button {
  min-height: 46px !important;
  /* TWEAK 2 (v2 follow-up): was a narrow centered pill
     (min-width: min(244px,82vw); width:auto). Make the INITIAL "Select Image"
     button FILL its column instead. Edited in place => wins for the non-thumbnail
     state. The uploaded/thumbnail state is governed by the MORE specific
     `.customily-file-with-thumbnail .customily-download-button` rule below
     (flex:1 1 auto; min-width:0), so Customily's own resize logic is preserved. */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 2px solid var(--gs-ink) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--gs-ink) !important;
  box-shadow: none !important;
  font-family: var(--gs-font) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  text-transform: none !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-download-button svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 auto !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-with-thumbnail {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-input-thumbnail {
  grid-column: 1 !important;
  width: 66px !important;
  height: 66px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(208, 185, 133, 0.44) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(20, 17, 11, 0.08) !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-input-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-with-thumbnail .cl-container {
  grid-column: 2 !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-with-thumbnail .cl-flex-no-wrap {
  justify-content: flex-start !important;
  gap: 8px !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-with-thumbnail .customily-download-button {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl_remove-image {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--gs-ink) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--gs-ink) !important;
  box-shadow: none !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl_remove-image svg {
  width: 15px !important;
  height: 15px !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl-error-message {
  grid-column: 1 / -1 !important;
  margin-top: 8px !important;
  color: #8a382b !important;
  font-family: var(--gs-font) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

@media (max-width: 480px) {
  /* 2026-06-30 breakpoint raise 430px -> 480px so 440px phones (iPhone 16 Pro Max)
     get the same compact upload layout as <=430px (aligned with the global inset
     and the Images 4-col grid, both <=480px). LOCKED Images (role=upload) —
     owner-directed mobile-breakpoint reconciliation only; no chrome/box changes. */
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] {
    padding: 14px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 9px 12px !important;
  }

  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .added-icon-wrapper {
    width: 42px !important;
    height: 42px !important;
  }

  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-with-thumbnail {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-input-thumbnail {
    width: 58px !important;
    height: 58px !important;
  }

  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-download-button {
    /* TWEAK 2: this @media(max-width:430px) rule re-narrowed the button to
       min(220px,78vw) on small screens, overriding the base fill. Neutralize so
       the initial button fills here too; thumbnail-state rule below keeps min-width:0. */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    font-size: 17px !important;
  }

  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-with-thumbnail .customily-download-button {
    min-width: 0 !important;
    font-size: 15px !important;
  }

  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl_remove-image {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}
/* ===== END LOCKED: Images section (role=upload) ===== */

/* ===== LOCKED: Images section (role=method) — approved 2026-06-30. Do NOT modify without fresh approval. See docs/customily-progressive-ui-20260629/IMAGES_SECTION_LOCK_20260630.md ===== */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label {
  display: grid !important;
  height: 112px !important;
  min-height: 112px !important;
  padding: 10px 4px !important;
  grid-template-rows: minmax(60px, 1fr) auto !important;
  row-gap: 7px !important;
  overflow: hidden !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label img {
  width: 58px !important;
  height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  transform: none !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label .label-txt {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

/* Some native bundle mounts omit Customily's decorative img/text children.
   Fill only those absent presentation slots on the genuine native label; the
   radio, label click target, values, events, and upload lifecycle stay native. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label:not(:has(img))::before {
  content: "";
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 60px !important;
  height: 60px !important;
  background: var(--gs-image-method-art) center / contain no-repeat !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label:not(:has(.label-txt))::after {
  content: attr(data-gs-image-method-title);
  grid-row: 2 !important;
  align-self: start !important;
  color: var(--gs-ink) !important;
  font: 650 13px/1.15 var(--gs-font) !important;
  white-space: normal !important;
}

/* Players Pack's native-testing method labels can begin as loading placeholders
   or arrive already hydrated with native artwork. The presentation adapter releases
   their inline geometry. Flatten Customily's wrapper into the two-row card grid and
   suppress only its transient spinner. */
html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root label[data-gs-players-pack-v8-method-fallback="true"] > .csh-image-container {
  display: contents !important;
}
html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root label[data-gs-players-pack-v8-method-fallback="true"] > .csh-image-container > .csh-spinner {
  display: none !important;
}
html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .swatch-container,
html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] [role="radiogroup"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch,
html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label {
  min-width: 0 !important;
  width: 100% !important;
}
html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label[data-gs-players-pack-v8-method-fallback="true"] img {
  transform: none !important;
}
@media (min-width: 750px) {
  html[data-gs-players-pack-v8-presented="true"] #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label[data-gs-players-pack-v8-method-fallback="true"] img {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}
/* ===== END LOCKED: Images section (role=method) ===== */

/* ===== LOCKED: Images section (role=method) — approved 2026-06-30. Do NOT modify without fresh approval. See docs/customily-progressive-ui-20260629/IMAGES_SECTION_LOCK_20260630.md ===== */
/* ITEM 2 -- Images method cards: equal fixed height so the 2-line 13px
   "Background Remover" label wraps WITHOUT clipping and all 4 cards stay
   equal height. Overrides the 112px clipping card (~2352-2360) and shrinks
   the method icon (~2362-2369) to free a row for the 2-line label.
   Fixed-equal-height approach chosen over height:auto so cards stay uniform. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label {
  /* TWEAK 1 (v2 follow-up): the 2-line "Background Remover" label was still
     CLIPPING even unselected. ROOT CAUSE: the card height was a HARD CAP. At
     104px with padding 12px 6px the inner box = 80px; icon row (46px) + row-gap
     (6px) = 52px, leaving only 28px for the label row -- but 2 lines of 13px x
     1.15 = ~30px, so the 2nd line ("Remover") overflowed the fixed height and
     was visually covered by the adjacent grid card (overflow:visible cannot
     expand a fixed-height grid; `grid-template-rows: auto auto` only redistributes
     WITHIN that fixed height, starving the label row). This is the WINNING rule
     (last in source order, identical selector beats the 112px block at ~2352),
     so editing it in place still wins.
     FIX: raise height to 124px (46 icon + 24 padding + 6 gap + ~32px 2-line
     label + breathing room) and pin the icon row to a fixed 46px while letting
     the LABEL row grow (`grid-template-rows: 46px auto`, not a greedy 1fr icon
     row). overflow:visible on the card + box-sizing:border-box so the selected
     border doesn't shrink the inner area. Applies to BOTH breakpoints (this rule
     is outside any media query). All 4 cards keep an equal 124px height. */
  box-sizing: border-box !important;
  height: 124px !important;
  min-height: 124px !important;
  max-height: none !important;
  overflow: visible !important;
  /* OWNER-DIRECTED 2026-06-30: icon row widened 46px -> 60px so the desktop icon
     can render visually larger (the .webp marks are small within a 200px square
     transparent canvas, so a 46px box rendered only ~32px of visible mark).
     124px budget: padding 12*2=24 -> inner 100px; icon row 60 + row-gap 6 = 66
     -> 34px for the label row; 2 lines @13px*1.15 = ~30px still fits. */
  grid-template-rows: 60px auto !important;
  row-gap: 6px !important;
  padding: 12px 6px !important;
  align-content: center !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label img {
  /* OWNER-DIRECTED 2026-06-30: desktop icon enlarged so the visible mark reads
     ~56-60px (it was ~32px). The img box is 60px (filling the widened 60px icon
     row); because the .webp marks only occupy ~55-70% of their 200px transparent
     square, a transform:scale(1.45) pushes the VISIBLE mark to ~56-60px. scale()
     does not change the 60px layout box, and the card's overflow:visible lets the
     scaled mark show. The .webp files are NOT swapped/renamed — display size only.
     NOTE: mobile (<=480px) re-pins this to a 36px box (no scale) in the EOF block. */
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  transform: scale(1.45) !important;
  transform-origin: center !important;
  grid-row: 1 !important;
  align-self: center !important;
}

/* TWEAK 1: ensure the method label text occupies row 2 and is NEVER clipped.
   Forces overflow:visible + box-sizing here too. This progressive selector
   (1 id + role attr + 3 classes) is the same one as the 13px rule at ~2371,
   placed LATER in source order so it wins; the liquid sane-pass .label-txt rule
   (specificity 0,1,6,1) still sets the 13px font but carries no clip props, so
   font-size remains 13px and nothing here re-clips it. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label .label-txt {
  grid-row: 2 !important;
  align-self: start !important;
  box-sizing: border-box !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: none !important;
  white-space: normal !important;
}
/* ===== END LOCKED: Images section (role=method) ===== */

/* ===== LOCKED: Images section (role=method) — OWNER-DIRECTED REVISION 2026-06-30 (FIX 3).
   See docs/customily-progressive-ui-20260629/IMAGES_SECTION_LOCK_20260630.md =====
   DESKTOP card height trim: the unscoped 124px rule (~css:3031) left a large empty
   band below the label on desktop (>=750px). At 124px the content (60px icon row +
   6px gap + ~30px worst-case 2-line label = 96px) sat inside a ~100px inner box,
   leaving a wide dead band — most cards are single-line (Image/Facecut/Logo) so the
   gap looked even bigger. Reduce the DESKTOP card to 104px so the icon + label fill
   the card with no dead band, while keeping it tall enough that the worst-case 2-line
   "Background Remover" still fits (104 - padding 6*2 = 92 inner; icon row 60 + gap 5 =
   65 -> 27px label row; 2 lines @13px*1.15 ~= 30px fit via overflow:visible).
   The d7f66ac icon scale(1.45) and the 60px icon-row layout box are UNTOUCHED (icon
   is NOT shrunk). The 4-col desktop grid is unchanged. Mobile (<=480px) keeps its 84px
   compact card via the later EOF block (this min-width:750px rule never applies there).
   Scoped >=750px and placed after the 124px rule so it wins on desktop only. */
@media (min-width: 750px) {
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label {
    height: 104px !important;
    min-height: 104px !important;
    max-height: none !important;
    row-gap: 5px !important;
    padding: 6px 6px !important;
  }
}
/* ===== END LOCKED: Images section (role=method) — FIX 3 ===== */

/* ===== LOCKED: Images section (role=upload) — approved 2026-06-30. Do NOT modify without fresh approval. See docs/customily-progressive-ui-20260629/IMAGES_SECTION_LOCK_20260630.md ===== */
/* ITEM 3 / FIX 4 (v2 served-DOM): remove the "Upload Image" headline.
   v1 hid only the inner .option_name, but the served DOM showed the OUTER
   `> label[role="button"]` WRAPPER (which contains .option_number +
   .option_name) was still a zero-height grid item occupying the row-1/col-2
   flow slot. Because the accordion is forced to grid-column:2, and col-2/row-1
   was taken by this wrapper, the accordion auto-flowed to ROW 2 -- producing the
   empty second row. Hide the WHOLE wrapper to free row-1/col-2.
   Safe: the wrapper holds only the section title ("Option 3 of 4 / Upload
   Image"); the <input type="file"> and all serialization live in the SIBLING
   .cl-accordion, NOT inside this label. Progressive only. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] > label[role="button"] {
  display: none !important;
}

/* ITEM 4 -- CUSTOMILY-INJECTED UPLOAD AREA. Pull the upload-widget block out
   of full-width (was grid-column: 1 / -1 at ~1191-1201) into col 2 so the
   "Select Image" button sits on the SAME ROW as the upload icon (col 1).
   Layout only -- the file-input/upload behavior is untouched.
   Served-DOM showed grid-template-rows:46px 46px (implicit 2-row grid) with the
   widget block on row 2. Collapse to a single content row (grid-template-rows:
   auto) and explicitly place the widget on row 1 / col 2, vertically centered.
   QA REQUIRED on the served draft: confirm the uploaded/thumbnail (has-image)
   state still renders correctly within col 2 (this area is injected/managed by
   Customily). */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] {
  grid-template-rows: auto !important;
  align-items: center !important;
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl-accordion,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] [data-testid^="image-upload-container"],
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .customily-file-input,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] .cl-container {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
/* ===== END LOCKED: Images section (role=upload) ===== */

/* owner-approved Images rhythm (25px gap / 10px header): match the Images
   header→cards gap to the other sections' BLUE header gap (var(--gs-header-gap)
   = 10px). Was 14px; the rhythm pass previously held this block at its prior
   value. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] > label[role="button"] {
  display: block !important;
  margin: 0 0 var(--gs-header-gap) !important;
}

/* ===== LOCKED: Images section (role=method) — approved 2026-06-30. Do NOT modify without fresh approval. See docs/customily-progressive-ui-20260629/IMAGES_SECTION_LOCK_20260630.md ===== */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch input:checked ~ label,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch input:checked + label,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch[aria-checked="true"] label,
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch.selected label {
  background: #ffffff !important;
}
/* ===== END LOCKED: Images section (role=method) ===== */

/* owner-approved cross-UI L/R padding consistency — Images
   ---------------------------------------------------------------------------------
   The Images method + upload section containers have no progressive L/R padding
   today (method inherits native; upload is in the locked block), so they do not
   line up with the 18px L/R standard applied to every other option section above.
   Asher EXPLICITLY approved this single consistency change for the Images section
   (IMAGES_SECTION_LOCK_20260630.md). SURGICAL: set ONLY padding-left/padding-right
   to 18px — NO padding shorthand, NO vertical padding, NO other locked rule
   touched. Appended at EOF for source-order specificity over the native/locked
   container padding. */
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"],
html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] {
  /* OWNER-DIRECTED 2026-06-30: was a hard-coded 24px (which did NOT shrink on
     mobile, leaving the Images grid over-inset ~50px from the root edge). Now
     references the shared --gs-section-inset token so Images/upload track the
     global inset: 24px on desktop, 10px at <=430px (nets ~10px from the root
     content edge on mobile, per owner direction). */
  padding-left: var(--gs-section-inset) !important;
  padding-right: var(--gs-section-inset) !important;
  /* owner-approved Images rhythm (25px gap / 10px header): the rhythm pass
     excluded role=method so the Images section fell back to the locked liquid
     padding:0 → ~0px gap above the "Images" headline. Restore the 25px section
     gap above the headline (this rule already wins over the locked padding:0). */
  padding-top: var(--gs-section-gap) !important;
}

   Mobile compaction for the new 4-col/1-row Images grid (the grid columns switch
   to repeat(4,minmax(0,1fr)) lives in the inline-liquid <=480px/<=390px blocks).
   The WINNING card-height rule is the role-based 124px block at ~css:2982-3007
   (outside any media query); this later, equal-specificity media block overrides
   it on mobile so the cards become compact WITHOUT touching the desktop 124px.

   FIX 3 — BACKGROUND-REMOVER CLIP (2026-06-30, OWNER-DIRECTED, LOCKED Images):
   The a878d35 fix set overflow:visible only on `.label-txt`, but Polar still
   measured the 2-line "Background Remover" overflowing the card bottom (390px:
   card bottom 952.36 / text bottom 985.11 = ~33px spill; 440px: ~18px). ROOT
   CAUSE: the 84px label grid had `grid-template-rows: 36px auto` with only
   84 - 16(padding) - 36(icon) - 5(gap) = 27px for the label row; the liquid
   `.label-txt { margin-top:6px }` (main-product.liquid:147, never reset on
   mobile) + 2 lines @ 11px*1.1 (~24.2px) needed ~30px, so the 2nd line
   ("Remover") spilled BELOW the fixed-height grid track. `overflow:visible`
   showed the spilled line PAST the card surface (it reads as clipped against
   the page), and the .customily-swatch wrapper carried no overflow guard.
   TWO-PRONGED FIX (mobile <=480 only; desktop 124px/104px + scale(1.45) UNCHANGED):
   (1) NEUTRALIZE: overflow:visible asserted on the card `label` AND the
       `.customily-swatch.swatch` wrapper (out-specifies the asset 112px-block
       overflow:hidden at ~css:2515 and any wrapper clip) so no character is cut.
   (2) FIT: shrink the content so the icon + 2-line label sits comfortably
       INSIDE the card. Card 84px -> 90px (still compact, owner ~80-90 range),
       icon row 36px -> 28px, row-gap 5px -> 4px, padding 8 -> 6 top/bottom,
       label 11px -> 10px @ line-height 1.15, and the liquid margin-top:6px is
       reset to 0. New budget @90px: padding 6*2=12 -> inner 78px; icon row 28
       + row-gap 4 = 32 -> 46px for the label row; 2 lines @10px*1.15 = 23px
       sits in 46px with ~23px slack, so text bottom is well inside the card.
   Icons stay a visible ~24-28px mark (28px box, scale reset). */
@media (max-width: 480px) {
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label {
    height: 90px !important;
    min-height: 90px !important;
    max-height: none !important;
    grid-template-rows: 28px auto !important;
    row-gap: 4px !important;
    padding: 6px 4px !important;
    overflow: visible !important;       /* FIX 3 (1): neutralize any card clip */
    align-content: center !important;
  }
  /* FIX 3 (1): the .customily-swatch.swatch CARD WRAPPER (liquid card surface)
     must also be overflow:visible so a wrapped label can never be clipped by
     the card box. Out-specifies the liquid wrapper rule (no overflow there now,
     but assert it defensively). Mobile only. */
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch {
    overflow: visible !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    /* reset the desktop scale(1.45) so the mobile icon stays a ~24-28px visible
       mark inside the compact 90px card (no overflow into the 2-line label row). */
    transform: none !important;
    grid-row: 1 !important;
    align-self: center !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label:not(:has(img))::before {
    width: 28px !important;
    height: 28px !important;
  }
  /* Let "Background Remover" wrap to 2 lines INSIDE the card; the other labels
     stay 1 line. 10px label @ line-height 1.15 so 2 lines (~23px) fit the 46px
     label row. FIX 2 (2026-06-30): overflow-wrap/word-break:break-word so
     "Background" can break a character if a card is truly too narrow;
     white-space:normal + overflow:visible (no ellipsis/clip) lets it wrap
     cleanly. FIX 3 (2026-06-30): font 11px -> 10px + reset the liquid
     `margin-top:6px` (main-product.liquid:147) to 0 so the label content fits
     the 46px row with slack. Owner-directed LOCKED Images-label change. */
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label .label-txt {
    grid-row: 2 !important;
    align-self: center !important;
    margin-top: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: none !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label:not(:has(.label-txt))::after {
    align-self: center !important;
    margin-top: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
}

/* Polar owner-directed Images density tune 2026-06-30.
   Desktop cards were too tall, and mobile needed same-size Background Remover
   text without increasing side padding. Keep 4-up layout, preserve locked icon
   assets, and reduce the empty space below Select Image. */
@media (min-width: 750px) {
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label {
    height: 104px !important;
    min-height: 104px !important;
    max-height: none !important;
    grid-template-rows: 52px auto !important;
    row-gap: 5px !important;
    padding: 8px 5px !important;
    align-content: center !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    grid-row: 1 !important;
    align-self: center !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label:not(:has(img))::before {
    width: 52px !important;
    height: 52px !important;
  }
}

@media (max-width: 480px) {
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label {
    height: 90px !important;
    min-height: 90px !important;
    max-height: none !important;
    grid-template-rows: 30px auto !important;
    row-gap: 4px !important;
    padding: 6px 4px !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label img {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label:not(:has(img))::before {
    width: 30px !important;
    height: 30px !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label .label-txt {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }
  html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="method"] .customily-swatch.swatch label:not(:has(.label-txt))::after {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }
}

html.gs-customily-image-selector-enabled #cl_optionsapp.gs-customily-image-selector-root [data-gs-progressive-role="upload"] {
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}