/* QA34: one quantity-control component across ordinary rows, Doors,
   Door Trim, Specialty Items, Windows, Thresholds, and Closet Wall Space. */

@media (min-width: 1051px) {
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  :is(.paint-qty-stepper, .painting-door-stepper) {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 24px 28px 24px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 32px !important;
    min-height: 32px !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  :is(.paint-qty-stepper, .painting-door-stepper) > button {
    box-sizing: border-box !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  :is(.paint-qty-stepper, .painting-door-stepper) > input {
    box-sizing: border-box !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }

  /* Let the ordinary row's stack fill the responsive Quantity cell. Older
     fixed 100px wrappers drifted left as an ultrawide column grew. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-item-row td:nth-child(2) > .paint-qty-stack {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    justify-items: center !important;
    align-items: center !important;
  }

  /* Center the fixed 76px control even when a narrow table cell is smaller
     than the control. "unsafe center" prevents CSS from falling back to the
     left edge when the control intentionally overflows by a few pixels. */
  #app .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-item-row td:nth-child(2) > .paint-qty-stack {
    justify-content: unsafe center !important;
  }

  #app .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-item-row td:nth-child(2) > .paint-qty-stack > .paint-qty-stepper {
    justify-self: stretch !important;
    position: static !important;
    left: auto !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  #app .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-stepper {
    transform: translateX(-1px) !important;
  }

  #app .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-head .paint-qty-stepper {
    transform: translateX(-1px) !important;
  }

  /* Closet rows are inset cards, but their values still belong to the main
     Rate / Total / Include guides. Align to each grid edge instead of using
     a centered control that drifts on a curved ultrawide display. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-head > .paint-closet-price {
    justify-self: end !important;
    transform: translateX(-2px) !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-head > .painting-closet-total {
    justify-self: end !important;
    transform: translateX(3px) !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-subrows > div > .painting-closet-rate-control {
    justify-self: end !important;
    transform: translateX(2px) !important;
  }

  #app .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-subrows > div > .painting-closet-subtotal {
    justify-self: end !important;
    transform: translateX(10px) !important;
  }

  /* Use the same responsive right edge for every Include switch. The closet
     card has 10px and 20px nested insets, so compensate those insets once. */
  #app .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-head > .paint-toggle {
    transform: translateX(8px) !important;
  }

  #app .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-subrows > div > .paint-toggle {
    transform: translateX(18px) !important;
  }
}