/* QA30: align content to the shared column EDGES at every desktop width.
   This replaces fixed pixel nudges with the same percentage tracks used by
   the table headers. Presentation only. */
@media (min-width: 1051px) {
  /* Keep each existing price editor in place; move only its digits to the
     right side of the box so the values form one clean vertical edge. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-rate-control {
    justify-content: flex-end !important;
    gap: 3px !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-rate-control > input {
    field-sizing: content !important;
    width: auto !important;
    min-width: 1ch !important;
    max-width: 52px !important;
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* A category row spans all five table cells. Keep its established flex
     heading intact and position only the subtotal on the Total guide. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-section-row > td {
    position: relative !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-section-row > td > b {
    position: absolute !important;
    top: 50% !important;
    right: calc(17% + 8px) !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Keep the two right-panel category headings typographically identical to
     Main Surfaces and Trim & Details. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-section-row > td > strong {
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  /* Door / Door Trim Price Each editors are already positioned correctly.
     Align only their numeric content. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option-controls > label:last-child {
    /* Preserve the editor's left edge; extend its transparent input area so
       the digits end on the same Rate guide as ordinary saved prices. */
    width: 83px !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto 34px !important;
    justify-content: end !important;
    align-items: center !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option-controls > label:last-child > span {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option-controls > label:last-child::before {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    margin-right: 3px !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option-controls > label:last-child > input {
    grid-column: 2 !important;
    grid-row: 2 !important;
    field-sizing: content !important;
    width: auto !important;
    min-width: 1ch !important;
    max-width: 52px !important;
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  /* Closet boxes also stay in place; only their values move inside them. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  :is(.paint-closet-price > input, [data-closet-sub-price]) {
    text-align: right !important;
    padding-right: 4px !important;
  }

  /* The inherited 60px quantity wrapper resolves 3px right of the header in
     the embedded workspace. Keep the control size and move only the control. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-component-column-secondary .paint-item-row td:nth-child(2) > .paint-qty-stack > .paint-qty-stepper {
    transform: translateX(calc(-50% + 27px)) !important;
  }

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

  /* The closet block has its own inset. Compensate for that inset so its
     Include switches share the ordinary row's right edge. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-component-column-secondary .paint-closet-head > .paint-toggle {
    transform: translateX(9px) !important;
  }

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

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-subrows > div > span {
    color: #eef3f6 !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-closet-rate-control {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    color: #f3f7fa !important;
    white-space: nowrap !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-closet-rate-control > input {
    field-sizing: content !important;
    width: auto !important;
    min-width: 1ch !important;
    max-width: 52px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-align: right !important;
  }

  body .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-closet-rate-control > input[data-room-price-input][data-room-price-input]:not(:disabled):not([readonly]),
  body .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-closet-rate-control > input[data-closet-sub-price][data-closet-sub-price]:not(:disabled):not([readonly]) {
    background-image: none !important;
    background-size: 0 0 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-head > .paint-closet-price > .painting-closet-rate-control {
    width: 100% !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .paint-closet-subrows > div > .painting-closet-rate-control {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    transform: translateX(5px) !important;
  }

  /* At the real three-rail desktop width, Quantity and Price Each cannot
     share one 32% wrapper without colliding with Total. Let the existing
     labels participate directly in the same five-column grid as every other
     row. No controls or event hooks are replaced. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option {
    grid-template-columns: 40% 18% 14% 11% 17% !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option > header {
    grid-column: 1 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option > .painting-door-option-controls {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option > .painting-door-option-controls > label:first-child {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-items: center !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option > .painting-door-option-controls > label:last-child {
    grid-column: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    justify-content: center !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option > footer {
    grid-column: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option > footer > :is(span, strong) {
    white-space: nowrap !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-option > footer > span {
    font-size: 9px !important;
  }

  /* The parent Doors / Door Trim row uses the complete five-column grammar
     from the approved reference instead of leaving Quantity and Rate blank. */
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading::before,
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading::after {
    align-self: center !important;
    justify-self: center !important;
    color: #a9bfd0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    grid-row: 1 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading::before {
    content: "–" !important;
    grid-column: 2 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading::after {
    content: "–" !important;
    grid-column: 3 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading > span {
    display: grid !important;
    grid-row: 1 !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 4px !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading > span::before {
    content: "⌄" !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    color: #ff8a1f !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading > span > :is(strong, small) {
    grid-column: 2 !important;
  }

  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading > b,
  .premium-app .painting-module-shell.interior .painting-reference-room.painting-embedded-exact
  .painting-door-mix-heading > .painting-door-group-toggle {
    grid-row: 1 !important;
  }
}