/* Final quantity layout: compact five-digit control with a protected size label. */
body[data-product] .product .productSizePicker .sizeGrid,
body[data-product] .customizerPage .sizePanel .sizeGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 12rem)) !important;
  align-items: stretch !important;
}

body[data-product] .product .productSizePicker .sizeGrid label,
body[data-product] .customizerPage .sizePanel .sizeGrid label {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(4.125rem, 1fr) 5.75rem !important;
  column-gap: 0.625rem !important;
  align-items: center !important;
  width: 12rem !important;
  min-width: 12rem !important;
  max-width: 12rem !important;
  overflow: visible !important;
}

body[data-product] .product .productSizePicker .sizeGrid label > b,
body[data-product] .customizerPage .sizePanel .sizeGrid label > b {
  display: block !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  line-height: 1.25 !important;
}

body[data-product] .product .productSizePicker .sizeGrid input[type="number"],
body[data-product] .customizerPage .sizePanel .sizeGrid input[type="number"] {
  box-sizing: border-box !important;
  position: static !important;
  justify-self: end !important;
  width: 5.75rem !important;
  min-width: 5.75rem !important;
  max-width: 5.75rem !important;
  margin: 0 !important;
  padding: 0.65rem 1.35rem 0.65rem 0.65rem !important;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  body[data-product] .product .productSizePicker .sizeGrid,
  body[data-product] .customizerPage .sizePanel .sizeGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-product] .product .productSizePicker .sizeGrid label,
  body[data-product] .customizerPage .sizePanel .sizeGrid label {
    grid-template-columns: minmax(4.125rem, 1fr) 5.75rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
